/* ==========================================================================
   pages.css — the two pages that are not a game: the menu and progress.

   Designed for a laptop first: the menu is a centred launcher with the three
   games in a row, and the sheets are dialogs over a dimmed backdrop rather
   than full screens. Narrow windows still work because the grids collapse,
   but the proportions are chosen for a desktop display.

   These pages run a light palette by overriding the same token names
   base.css sets, so every shared component follows along. Only the handful
   of components that hardcode white on dark need the patches at the bottom.
   ========================================================================== */

body.docpage {
  color-scheme: light;

  --bg:        #f4f6fc;
  --bg-deep:   #eceffa;
  --surface:   #ffffff;
  --surface2:  #f7f9fe;
  --surface3:  #eef2fb;
  --line:      #e3e8f4;
  --line2:     #d0d8ea;

  --text:      #111726;
  --muted:     #5b6478;
  --muted2:    #8791a5;

  background:
    radial-gradient(1100px 640px at 12% -14%, rgba(91, 87, 240, .16), transparent 62%),
    radial-gradient(950px 560px at 94% 0%, rgba(18, 181, 166, .14), transparent 60%),
    radial-gradient(820px 520px at 55% 108%, rgba(242, 176, 30, .12), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   The one button this whole design keeps reaching for
   -------------------------------------------------------------------------- */
.btn-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(91, 87, 240, .32);
  transition: transform .12s ease, box-shadow .18s ease, background .15s ease;
}
.btn-menu:hover { background: #4a45e2; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(91, 87, 240, .40); }
.btn-menu:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Slim header: just the two controls that have to be reachable
   -------------------------------------------------------------------------- */
.apphead {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 20px 28px 0;
}
@media (max-width: 640px) {
  .apphead { padding: 14px 14px 0; gap: 8px; }
  .headact { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .headact .who { padding: 0 12px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}
.apphead.right { justify-content: flex-end; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text);
}
.wordmark i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 55%, var(--g-def) 100%);
  box-shadow: 0 3px 8px rgba(91, 87, 240, .35);
}
.headact { display: flex; align-items: center; gap: 8px; }

.headact .hout { color: var(--bad2); }
.headact .hout:hover { border-color: var(--bad); }
.headact .about:hover { color: var(--accent); }
.headact .snd,
.headact .who {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(17, 23, 38, .06);
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.headact .snd { width: 44px; justify-content: center; padding: 0; }
.headact .snd[data-state="off"] { opacity: .5; }
.headact .who b { color: var(--text); }
.headact .snd:hover, .headact .who:hover { border-color: var(--line2); }

/* --------------------------------------------------------------------------
   Menu: a centred launcher
   -------------------------------------------------------------------------- */
.menu {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 28px 70px;
}

.mtitle {
  margin: 0 auto 10px;
  font-size: clamp(40px, 5.5vw, 66px);
  font-weight: 800;
  letter-spacing: -2.4px;
  line-height: .95;
  text-align: center;
  background: linear-gradient(120deg, #1b1f3b 0%, var(--accent) 55%, var(--g-def) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  width: fit-content;
}
.mby {
  margin: -2px 0 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--muted2);
}
.mby a { color: inherit; text-decoration: none; }
.mby a:hover { color: var(--muted); text-decoration: underline; }
.mtag {
  margin: 0 auto 36px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  text-align: center;
  color: var(--muted);
}

/* The three games, side by side on a laptop */
.playlist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 0 0 20px;
}

.playbtn {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(17, 23, 38, .07);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
}
.playbtn:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 55%, var(--line));
  box-shadow: 0 20px 44px rgba(17, 23, 38, .14);
}
.playbtn:active { transform: translateY(-1px); }

/* art on top, with the game's accent as a base line under it */
.pb-art {
  display: block;
  height: 170px;
  border-bottom: 4px solid var(--c);
  background: var(--surface3);
}
.pb-art .thumb { display: block; width: 100%; height: 100%; }

.pb-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 16px 18px 16px;
  text-align: left;
}
.pb-txt { flex: 1 1 auto; }
.pb-txt b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
}
.pb-txt small {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.pb-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.pb-best {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 16%, #fff);
  color: color-mix(in srgb, var(--c) 70%, #101726);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.pb-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  min-height: 40px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 40%, transparent);
  transition: filter .15s ease;
}
.playbtn:hover .pb-go { filter: brightness(1.07); }

/* Everything that is not a game, one row of four */
.menugrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.mbtn {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(17, 23, 38, .06);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.mbtn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 22px rgba(17, 23, 38, .11); }
.mbtn:active { transform: translateY(0); }
.mbtn i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-style: normal;
}
.mbtn i svg { display: block; }
.mbtn .ic-exc { background: rgba(255, 122, 26, .14); color: #d95f00; }
.mbtn .ic-dig { background: rgba(242, 176, 30, .16); color: #b57d05; }
.mbtn .ic-acc { background: rgba(91, 87, 240, .13); color: var(--accent); }
.mbtn .ic-def { background: rgba(18, 181, 166, .14); color: #0b8377; }
.mbtn .ic-ins { background: rgba(17, 23, 38, .08); color: #374151; }

/* --------------------------------------------------------------------------
   Sheets: dialogs over a dimmed backdrop. The panel is the page's own card
   language, so the Main Menu button inside it belongs to the same design.
   -------------------------------------------------------------------------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background: rgba(13, 19, 38, .52);
  backdrop-filter: blur(6px);
  animation: sheetIn .16s ease;
}
.sheet.hidden { display: none; }
@keyframes sheetIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sheetpanel {
  width: 100%;
  max-width: 820px;
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: var(--bg);
  box-shadow: 0 34px 90px rgba(7, 11, 24, .45);
  overflow: hidden;
  animation: panelIn .2s ease;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.sheethead {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.sheethead h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
}
.sheetx {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.sheetx:hover { border-color: var(--line2); color: var(--text); }

.sheetbody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
.sheetinner { max-width: 720px; margin: 0 auto; }

.sheetfoot {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #fff;
}

/* --------------------------------------------------------------------------
   Sheet content blocks
   -------------------------------------------------------------------------- */
.block {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(17, 23, 38, .05);
}
.block + .block { margin-top: 12px; }
.block h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text);
}
.block h3 .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c, var(--accent));
}
.block p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.block p:last-child { margin-bottom: 0; }
.block b { color: var(--text); }
.block .warn {
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(242, 176, 30, .45);
  border-radius: 12px;
  background: rgba(242, 176, 30, .12);
  color: #7a5306;
}

.keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.keys span {
  padding: 4px 10px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--surface3);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  position: relative;
  margin: 0 0 11px;
  padding: 0 0 0 32px;
  counter-increment: step;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}
.steps li:last-child { margin-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.steps li b { color: var(--text); }

/* The figures About opens with */
.factgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.fact {
  padding: 16px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(17, 23, 38, .05);
  text-align: center;
}
.fact b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.8px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fact.gold b { color: #b57d05; }
.fact.green b { color: #0b8f45; }
.fact small {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

/* Sub-headings inside a sheet (the progress sheet uses these) */
.sheetinner .ph {
  margin: 20px 0 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text);
}
.sheetinner .ph:first-of-type { margin-top: 18px; }
.sheetinner .note { font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* --------------------------------------------------------------------------
   Leaderboard tabs
   -------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   Progress page
   -------------------------------------------------------------------------- */
body.docpage .doc { max-width: 880px; }
.doc h1, .doc h2 { color: var(--text); }
.sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 16px; }
.sum .stat { flex: none; min-width: 0; }

/* --------------------------------------------------------------------------
   Shared components that assume a dark surface, corrected for the light one
   -------------------------------------------------------------------------- */
body.docpage .panel,
body.docpage .board,
body.docpage .stat {
  background: #fff;
  box-shadow: 0 4px 12px rgba(17, 23, 38, .05);
}
body.docpage .stat .v,
body.docpage .lb td { color: var(--text); }
body.docpage .lb th { background: var(--surface3); color: var(--muted); }
body.docpage .lb tr.me td { background: rgba(91, 87, 240, .12); }
body.docpage .lb tr.me td.name { color: var(--accent); }
body.docpage .lb tbody tr:nth-child(2) td.rank { color: #94a3b8; }
body.docpage .mrow .bar { background: var(--surface3); }
body.docpage .btn-primary { background: var(--accent); }
body.docpage .btn-primary:hover:not(:disabled) { background: #4a45e2; }
body.docpage .btn-ghost {
  background: #fff;
  border: 1px solid var(--line2);
  color: var(--text);
}
body.docpage .btn-ghost:hover:not(:disabled) { background: var(--surface3); }
body.docpage .kicker { color: var(--accent); }