/* About block stamped below every standalone game by scripts/apply-game-meta.js
   (copy from lib/seo-game-copy.js). Self-contained: the 41 game pages share no
   stylesheet, so nothing here relies on page variables. Light and dark via
   prefers-color-scheme plus the html.cuppa-dark class dark-mode.js sets. */
.cuppa-about {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 32px 0 0;
  padding: 28px 16px 40px;
  background: #f6f1eb;
  color: #3b2a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid rgba(107, 66, 38, .14);
  -webkit-user-select: text;
  user-select: text;
}
.cuppa-about * { box-sizing: border-box; }
.cuppa-about-inner { max-width: 720px; margin: 0 auto; }
.cuppa-about-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: #4c2b08;
}
.cuppa-about h3 {
  margin: 24px 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #4c2b08;
}
.cuppa-about p { margin: 0 0 12px; }
.cuppa-about-steps { margin: 0 0 12px; padding-left: 22px; }
.cuppa-about-steps li { margin: 0 0 6px; }
.cuppa-about-note { font-size: 14px; color: #6b5a4a; }
.cuppa-about-faq { margin: 0 0 12px; }
.cuppa-about-faq dt { font-weight: 700; margin: 12px 0 2px; }
.cuppa-about-faq dd { margin: 0; }
.cuppa-about a { color: #8a4b12; text-decoration: underline; text-underline-offset: 2px; }
.cuppa-about a:hover { color: #5c2f08; }
.cuppa-about-related {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cuppa-about-related li { margin: 0; }
.cuppa-about-related a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(107, 66, 38, .22);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  color: #4c2b08;
}
.cuppa-about-related a:hover { background: #f0e6d8; color: #4c2b08; }

/* Pages that lock the viewport (html/body overflow:hidden for drag games)
   leave the block unreachable by scrolling. game-about.js detects that and
   offers a pill; opening it lifts the lock only while the reader is reading. */
.cuppa-about-pill {
  position: fixed;
  left: 50%;
  bottom: 14px;
  z-index: 2147483000;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(107, 66, 38, .3);
  background: rgba(255, 255, 255, .96);
  color: #4c2b08;
  font: 600 13px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  cursor: pointer;
}
html.cuppa-about-open, html.cuppa-about-open body {
  overflow: auto !important;
  height: auto !important;
  min-height: 100vh;
  position: static !important;
}
html.cuppa-about-open .cuppa-about-pill { display: none; }
.cuppa-about-close {
  display: none;
  margin: 0 0 16px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(107, 66, 38, .3);
  background: #fff;
  color: #4c2b08;
  font: 600 13px/1 inherit;
  cursor: pointer;
}
html.cuppa-about-open .cuppa-about-close { display: inline-block; }

/* Hidden on the paid landing variant (/lp/crossword) and inside a Daily Run. */
html.cw-acquisition .cuppa-about,
html.cuppa-run-mode .cuppa-about,
html.cuppa-run-mode .cuppa-about-pill { display: none !important; }

@media (prefers-color-scheme: dark) {
  html:not(.cuppa-light) .cuppa-about { background: #1c1714; color: #e6ddd3; border-top-color: rgba(255, 255, 255, .1); }
  html:not(.cuppa-light) .cuppa-about-title, html:not(.cuppa-light) .cuppa-about h3, html:not(.cuppa-light) .cuppa-about-related a { color: #f1e8dc; }
  html:not(.cuppa-light) .cuppa-about-note { color: #b9ada0; }
  html:not(.cuppa-light) .cuppa-about a { color: #e0a86b; }
  html:not(.cuppa-light) .cuppa-about-related a { background: #2a231e; border-color: rgba(255, 255, 255, .16); }
  html:not(.cuppa-light) .cuppa-about-related a:hover { background: #3a302a; }
}
html.cuppa-dark .cuppa-about { background: #1c1714; color: #e6ddd3; border-top-color: rgba(255, 255, 255, .1); }
html.cuppa-dark .cuppa-about-title, html.cuppa-dark .cuppa-about h3, html.cuppa-dark .cuppa-about-related a { color: #f1e8dc; }
html.cuppa-dark .cuppa-about-note { color: #b9ada0; }
html.cuppa-dark .cuppa-about a { color: #e0a86b; }
html.cuppa-dark .cuppa-about-related a { background: #2a231e; border-color: rgba(255, 255, 255, .16); }
html.cuppa-dark .cuppa-about-related a:hover { background: #3a302a; }

@media (min-width: 720px) {
  .cuppa-about { padding: 36px 24px 48px; font-size: 16px; }
  .cuppa-about-title { font-size: 26px; }
}

/* Dated puzzle pages (/games/<family>/YYYY-MM-DD/, routes/puzzle-pages.js):
   the day's clue list, spliced in above the About block. */
.cw-archive {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  margin: 32px 0 0;
  padding: 28px 16px 8px;
  background: #f6f1eb;
  color: #3b2a1a;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  border-top: 1px solid rgba(107, 66, 38, .14);
  -webkit-user-select: text;
  user-select: text;
}
.cw-archive * { box-sizing: border-box; }
.cw-archive-inner { max-width: 720px; margin: 0 auto; }
.cw-archive h1 { margin: 0 0 12px; font-size: 22px; font-weight: 800; line-height: 1.25; color: #4c2b08; }
.cw-archive h2 { margin: 20px 0 6px; font-size: 17px; font-weight: 700; color: #4c2b08; }
.cw-archive p { margin: 0 0 12px; }
.cw-archive-clues { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.cw-archive-clues li { break-inside: avoid; margin: 0 0 6px; padding-left: 34px; text-indent: -34px; }
.cw-archive-num { display: inline-block; min-width: 28px; text-indent: 0; font-weight: 700; color: #8a4b12; }
.cw-archive-nav ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.cw-archive-nav a {
  display: inline-block; padding: 7px 14px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(107, 66, 38, .22); text-decoration: none; font-weight: 600; font-size: 14px; color: #4c2b08;
}
.cw-archive-nav a:hover { background: #f0e6d8; }
.cw-archive + .cuppa-about { margin-top: 0; border-top: 0; padding-top: 8px; }
html.cw-acquisition .cw-archive, html.cuppa-run-mode .cw-archive { display: none !important; }
@media (prefers-color-scheme: dark) {
  html:not(.cuppa-light) .cw-archive { background: #1c1714; color: #e6ddd3; border-top-color: rgba(255, 255, 255, .1); }
  html:not(.cuppa-light) .cw-archive h1, html:not(.cuppa-light) .cw-archive h2, html:not(.cuppa-light) .cw-archive-nav a { color: #f1e8dc; }
  html:not(.cuppa-light) .cw-archive-num { color: #e0a86b; }
  html:not(.cuppa-light) .cw-archive-nav a { background: #2a231e; border-color: rgba(255, 255, 255, .16); }
}
html.cuppa-dark .cw-archive { background: #1c1714; color: #e6ddd3; border-top-color: rgba(255, 255, 255, .1); }
html.cuppa-dark .cw-archive h1, html.cuppa-dark .cw-archive h2, html.cuppa-dark .cw-archive-nav a { color: #f1e8dc; }
html.cuppa-dark .cw-archive-num { color: #e0a86b; }
html.cuppa-dark .cw-archive-nav a { background: #2a231e; border-color: rgba(255, 255, 255, .16); }
@media (min-width: 720px) { .cw-archive { padding: 36px 24px 8px; font-size: 16px; } .cw-archive h1 { font-size: 26px; } }
@media (max-width: 480px) { .cw-archive-clues { columns: 1; } }