/* Reserve the scrollbar gutter. pregame.js / modals lock body overflow to
   stop background scroll; without a stable gutter that removes the
   scrollbar, re-widths the viewport and shifts the whole page (this was
   the dominant layout-shift source across the arcade). */
html{scrollbar-gutter:stable;}
/* ============================================================================
   Run The Arcade — shared design layer ("Sports Arcade Control Room")
   ----------------------------------------------------------------------------
   STAGE 2 (foundation): this file is loaded BEFORE each page's existing inline
   <style>, so inline rules always win on conflict — loading it alone changes
   nothing. Everything here is either:
     (a) token FALLBACKS whose values match the per-page inline :root, or
     (b) NEW opt-in classes namespaced `a-` / `.arcade-*` that no page uses yet.
   Game-specific board / grid / drag / clue / validation styles never live here.
   Consumed starting Stage 3 (homepage) and Stage 4 (game chrome).
   ============================================================================ */

/* ---- token fallbacks (match the inline :root in every page) --------------- */
:root{
  --bg:#071426; --card:#10233A; --card2:#162B44; --card3:#1A3350;
  --ink:#F4F7FB; --mut:#A9B8CB; --dim:#7C8DA3;
  --line:rgba(244,247,251,.08); --line2:rgba(244,247,251,.15);
  --coral:#F06A5F; --blue:#2F6BFF; --violet:#A982F3; --gold:#F2B632;
  --teal:#37C5D5; --green:#48D17A; --pink:#F65C9C; --red:#FF625F;
  --coralT:#F06A5F; --goldT:#F2B632; --tealT:#37C5D5; --greenT:#48D17A;
  --violetT:#B79BF6; --pinkT:#F778AE; --blueT:#5C8CFF;
  --shadow:0 6px 18px -10px rgba(0,0,0,.55);
  --f:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hero:'Anton', Impact, sans-serif; --pix:'Press Start 2P', monospace;

  /* --- new tokens the shared layer introduces (no page defines these) --- */
  --a-sp-1:4px; --a-sp-2:8px; --a-sp-3:12px; --a-sp-4:16px; --a-sp-5:24px; --a-sp-6:32px;
  --a-radius:6px;             /* body corner radius */
  --a-notch:10px;             /* size of the single clipped marquee corner */
  --a-border:2px;             /* thick machine border */
  --a-shadow:4px 4px 0 rgba(7,20,38,.28);      /* firm offset shadow (dark) */
  --a-shadow-press:2px 2px 0 rgba(7,20,38,.28);
  --a-ring:0 0 0 3px color-mix(in srgb, var(--teal) 55%, transparent);
  --a-accent:var(--blue);     /* per-component override via inline style */
  --a-tap:44px;
}
:root[data-theme="light"]{
  --bg:#EEF2F7; --card:#FFFFFF; --card2:#F1F5FA; --card3:#E3EDF8;
  --ink:#0D1B2C; --mut:#51637A; --dim:#8B98A6;
  --line:rgba(13,27,44,.10); --line2:rgba(13,27,44,.18);
  --coralT:#D8452F; --goldT:#A87508; --tealT:#0E7C89; --greenT:#17A34A;
  --violetT:#6D3BD6; --pinkT:#C43C7C; --blueT:#2358E0; --red:#C4372C;
  --shadow:0 6px 18px -12px rgba(13,27,44,.25);
  --a-shadow:4px 4px 0 rgba(13,27,44,.14);
  --a-shadow-press:2px 2px 0 rgba(13,27,44,.14);
}

/* ---- typography helpers -------------------------------------------------- */
.a-title{font-family:var(--hero); font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:1;}
.a-num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
.a-label{font-size:9.5px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:var(--mut);}

/* ---- corner treatment: 6px radius body + ONE small clipped top-right corner */
.a-clip{border-radius:var(--a-radius);
  clip-path:polygon(0 0, calc(100% - var(--a-notch)) 0, 100% var(--a-notch), 100% 100%, 0 100%);}

/* ---- machine card -------------------------------------------------------- */
.a-card{--a-accent:var(--blue);
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); color:var(--ink);
  border:var(--a-border) solid var(--line2); border-radius:var(--a-radius);
  box-shadow:var(--a-shadow); transition:transform .12s ease, box-shadow .12s ease;
  text-align:left;}
.a-card:hover{transform:translate(-1px,-1px); box-shadow:6px 6px 0 rgba(7,20,38,.30);}
.a-card:active{transform:translate(1px,1px); box-shadow:var(--a-shadow-press);}
.a-card--featured{border-color:var(--a-accent);}
/* colored top marquee strip with a single clipped corner */
.a-marquee{display:flex; align-items:center; gap:var(--a-sp-2);
  padding:6px var(--a-sp-3); min-height:26px;
  background:var(--a-accent); color:#08111f; font-weight:900;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - var(--a-notch)) 0, 100% var(--a-notch), 100% 100%, 0 100%);}
.a-card__body{display:flex; flex-direction:column; gap:var(--a-sp-2); padding:var(--a-sp-3); flex:1;}
.a-inset{background:var(--card2); border:1px solid var(--line); border-radius:var(--a-radius); padding:var(--a-sp-3);}

/* ---- status light (never color-only: each variant has a distinct glyph) --- */
.a-status{display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px 3px 6px; border-radius:999px;
  border:1.5px solid var(--line2); color:var(--mut); background:var(--card);}
.a-status::before{content:""; width:9px; height:9px; flex:0 0 auto; display:inline-block;
  border:2px solid currentColor; border-radius:50%;}                 /* READY: hollow ring */
.a-status--ready{color:var(--mut);}
.a-status--progress{color:var(--goldT); border-color:color-mix(in srgb,var(--gold) 50%,transparent);}
.a-status--progress::before{border-radius:50%; background:currentColor; border-color:currentColor;
  animation:a-pulse 1.6s ease-in-out infinite;}                      /* IN PROGRESS: pulsing dot */
.a-status--cleared{color:var(--greenT); border-color:color-mix(in srgb,var(--green) 55%,transparent);}
.a-status--cleared::before{content:"\2713"; border:0; width:auto; height:auto; font-size:11px; line-height:1;} /* CLEARED: check */
.a-status--practice{color:var(--tealT); border-color:color-mix(in srgb,var(--teal) 50%,transparent);}
.a-status--practice::before{border-style:dashed;}                    /* PRACTICE: dashed ring */
.a-status--locked{color:var(--dim);}
.a-status--locked::before{content:"\1F512"; border:0; width:auto; height:auto; font-size:10px; line-height:1;} /* LOCKED: padlock */
@keyframes a-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ---- tactile button ------------------------------------------------------ */
.a-btn{--a-accent:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--a-sp-2);
  font-family:var(--f); font-weight:900; font-size:14px; letter-spacing:.02em;
  min-height:var(--a-tap); padding:10px var(--a-sp-4);
  color:#08111f; background:var(--a-accent);
  border:var(--a-border) solid color-mix(in srgb, var(--a-accent) 60%, #000);
  border-radius:var(--a-radius); box-shadow:var(--a-shadow); cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, filter .12s ease;}
.a-btn:hover{filter:brightness(1.05);}
.a-btn:active{transform:translate(2px,2px); box-shadow:var(--a-shadow-press);}
.a-btn--ghost{color:var(--ink); background:transparent; border-color:var(--line2); box-shadow:none;}
.a-btn--ghost:hover{border-color:var(--a-accent); color:var(--a-accent); filter:none;}
.a-btn:disabled,.a-btn[aria-disabled="true"]{background:var(--card2); color:var(--mut);
  border-color:var(--line2); box-shadow:none; cursor:default; filter:none; transform:none;}

/* ---- player control panel (hub left rail) -------------------------------- */
.a-panel{position:relative; background:var(--card); color:var(--ink);
  border:3px solid var(--line2); border-radius:var(--a-radius);
  box-shadow:var(--a-shadow); overflow:hidden;}
.a-panel__inner{border:1px solid var(--line); border-radius:calc(var(--a-radius) - 2px); margin:6px;}
.a-panel__sec{padding:var(--a-sp-4); border-top:1px solid var(--line);}
.a-panel__sec:first-child{border-top:0;}

/* ---- arcade HUD (game header, Stage 4) ----------------------------------- */
.a-hud{display:flex; align-items:center; gap:var(--a-sp-3);
  background:var(--card); border:var(--a-border) solid var(--line2);
  border-radius:var(--a-radius); box-shadow:var(--a-shadow); padding:8px var(--a-sp-3);}
.a-hud__spacer{flex:1;}

/* ---- gameplay frame (Stage 4) -------------------------------------------- */
.a-frame{position:relative; background:var(--card);
  border:var(--a-border) solid var(--line2); border-radius:var(--a-radius);
  box-shadow:var(--a-shadow); overflow:hidden;}
.a-frame__marquee{height:8px; background:var(--a-accent);
  clip-path:polygon(0 0, calc(100% - var(--a-notch)) 0, 100% 100%, 0 100%);}
.a-frame__body{padding:var(--a-sp-4);}

/* ---- result ticket (Stage 4) --------------------------------------------- */
.a-ticket{background:var(--card); color:var(--ink);
  border:var(--a-border) dashed var(--line2); border-radius:var(--a-radius);
  box-shadow:var(--a-shadow); padding:var(--a-sp-5) var(--a-sp-4); text-align:center;}
.a-ticket__perf{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--a-sp-2); margin:var(--a-sp-4) 0;}

/* ---- icons --------------------------------------------------------------- */
.a-icon{display:inline-block; width:1em; height:1em; vertical-align:-0.15em; color:currentColor;}
.a-icon svg{display:block; width:100%; height:100%;}

/* ---- utilities ----------------------------------------------------------- */
.a-tap-target{min-width:var(--a-tap); min-height:var(--a-tap);}
.a-row{display:flex; align-items:center; gap:var(--a-sp-2);}

/* ---- centered game title ("word art") + bigger logo ----------------------
   Any page that drops in a .a-gametitle gets an enlarged logo and its old
   under-logo sublabel hidden automatically, so games opt in with one element.
   Per-game accent comes from an inline --a-tc on the title element. */
body:has(.a-gametitle) .brand.logo img{height:74px;}
body:has(.a-gametitle) .brand.logo .sub{display:none;}
.a-gametitle{display:block; text-align:center; margin:8px 0 18px; line-height:1;}
.a-gametitle__plate{
  display:inline-block; max-width:100%;
  font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase;
  font-size:clamp(30px, 8vw, 58px); letter-spacing:.035em; line-height:.92;
  color:var(--a-tc, #F2B632); -webkit-text-stroke:0;
  text-shadow:0 0 26px color-mix(in srgb, var(--a-tc, #F2B632) 30%, transparent), 0 2px 0 rgba(0,0,0,.35);
  padding-bottom:9px; border-bottom:5px solid var(--a-tc, #F2B632);
}
/* uniform treatment across the whole title, so <b> just matches its surroundings */
.a-gametitle__plate b{font-weight:400; color:inherit; -webkit-text-stroke:inherit; text-shadow:inherit;}
/* dark = solid accent fill with a restrained neon glow (a lit marquee sign, and
   far more legible than the old hollow outline — dark accents like a maroon
   fav-team red were unreadable as strokes). light = solid accent fill darkened
   toward near-black so every accent clears WCAG large-text contrast. */
:root[data-theme="light"] .a-gametitle__plate{
  color:color-mix(in srgb, var(--a-tc, #F2B632) 55%, #140d02); -webkit-text-stroke:0;
  border-bottom-color:color-mix(in srgb, var(--a-tc, #F2B632) 64%, #140d02);
  text-shadow:2px 3px 0 color-mix(in srgb, var(--a-tc, #F2B632) 22%, transparent);}
@media (max-width:760px){
  body:has(.a-gametitle) .brand.logo img{height:60px;}
  .a-gametitle{margin:3px 0 14px;}
  .a-gametitle__plate{padding-bottom:7px; border-bottom-width:4px;}
}

/* ---- result screen: one hero, one quiet line -----------------------------
   Every game ends by telling you one number. Which number differs — a time, a
   run, guesses used, points — but the shape of the telling shouldn't, and it
   had drifted: six games led with a 60px hero while Guess and Daily Match
   split their result across three equal boxes, so the thing you actually
   earned sat at the same weight as "1 miss".

   The hero is the currency. Everything else is one line under it. This is the
   Mini's hierarchy, and it collapses a screen that used to need scrolling.

   Font is per-page on purpose: most games load Anton for display type, but the
   Crossword deliberately ships Archivo + Rubik only, so forcing --hero there
   would fall through Anton to Impact. Pages that differ set --a-heroFont. */
.a-rhero{margin:2px 0 12px; text-align:center;}
.a-rhero .v{font-family:var(--a-heroFont, var(--hero)); font-weight:400;
  font-size:clamp(48px,16vw,64px); line-height:.92; color:var(--a-heroInk, var(--ink));
  font-variant-numeric:tabular-nums; letter-spacing:.01em;}
.a-rhero .k{font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mut); margin-top:8px;}
/* Secondary stats: a sentence, not a row of cards. */
.a-runline{display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap;
  margin:0 0 16px; font-size:12px; font-weight:700; color:var(--mut);}
.a-runline span{display:inline-flex; align-items:baseline; gap:4px;}
.a-runline b{font-family:var(--a-heroFont, var(--hero)); font-weight:400; font-size:19px;
  color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;}
.a-runline i{width:3px; height:3px; border-radius:50%; background:var(--mut); opacity:.5; flex:0 0 auto;}

/* ---- shared focus + reduced motion (scoped to a- components only) --------- */
.a-btn:focus-visible,.a-card:focus-visible,.a-status:focus-visible,
.a-panel a:focus-visible,.a-hud a:focus-visible,.a-hud button:focus-visible{
  outline:none; box-shadow:var(--a-ring);}
@media (prefers-reduced-motion: reduce){
  .a-card,.a-btn{transition:none !important;}
  .a-status--progress::before{animation:none !important;}
}

/* ---- How to play: one tab at the foot of every game ---------------------- */
/* The long-form rules used to sit permanently open under every game. On a
   desktop screen that is a wall of text nobody asked for and cannot dismiss,
   and it pushed the board itself below the fold. A native <details> keeps
   every word in the DOM for search while costing one line until a player
   actually wants it. The hub keeps its own open .gj explainer: that page is
   the pitch, so there the words are the point. */
.gj{margin:34px 0 10px; border-top:1px solid var(--line2,rgba(148,163,184,.25));
  padding-top:18px; text-align:left;}
.gj > summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:13px 15px; border:1px solid var(--line2,rgba(148,163,184,.25)); border-radius:13px;
  background:var(--card2,rgba(148,163,184,.08));
  transition:border-color .12s, background .12s;}
.gj > summary::-webkit-details-marker{display:none;}
.gj > summary::marker{content:'';}
.gj > summary:hover{border-color:var(--tealT,#37C5D5);}
.gj > summary h2{flex:1; min-width:0; margin:0;
  font-family:var(--hero,'Anton',Impact,sans-serif); font-weight:400; letter-spacing:.02em;
  text-transform:uppercase; font-size:16px; line-height:1.15; color:var(--ink,#F4F7FB);}
.gj > summary:focus-visible{outline:none;
  box-shadow:var(--a-ring, 0 0 0 3px rgba(55,197,213,.45));}
.gj-hint{font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mut,#A9B8CB); flex:0 0 auto;}
.gj-chev{color:var(--mut,#A9B8CB); font-size:12px; flex:0 0 auto; transition:transform .2s;}
.gj[open] > summary{border-color:var(--tealT,#37C5D5);}
.gj[open] > summary .gj-chev{transform:rotate(180deg);}
/* Open on a wide monitor the panel is the full grid width, and a 1200px line of
   13px prose is unreadable. Cap the measure, keep it left aligned with the tab. */
.gj-body{padding:18px 3px 2px; max-width:760px;}
.gj h3{font-family:var(--hero,'Anton',Impact,sans-serif); font-weight:400; letter-spacing:.02em;
  text-transform:uppercase; font-size:15px; margin:20px 0 8px; color:var(--ink,#F4F7FB);}
.gj-body > h3:first-child{margin-top:0;}
.gj p{font-size:13.5px; line-height:1.65; color:var(--mut,#A9B8CB); margin:0 0 10px; font-weight:600;}
.gj ul{margin:0 0 10px; padding-left:20px;}
.gj li{font-size:13.5px; line-height:1.6; color:var(--mut,#A9B8CB); margin:5px 0; font-weight:600;}
.gj a{color:var(--tealT,#37C5D5); font-weight:800; text-decoration:none;}
.gj a:hover{text-decoration:underline;}
@media (max-width:520px){
  .gj-hint{display:none;}
  .gj > summary h2{font-size:15px;}
}
@media (prefers-reduced-motion: reduce){
  .gj > summary,.gj-chev{transition:none;}
}

/* ============================================================================
   CHROME V2: one header, one scoreboard, one control language
   ----------------------------------------------------------------------------
   Every game page used to open with two rows of controls (the site banner,
   then back, ?, sound, theme and a streak box in a row of their own) and a
   third element, a big underlined word-art title, before the game itself.
   On a phone that was about 230px of chrome above the first thing you could
   play, and it was drawn differently on almost every page.

   Now: the site banner, then ONE game header. The game's own mark in a tinted
   tile, its name, and the tools grouped into a single pill. The word-art
   title is retired; the name is in the header, which is where every games app
   puts it.

   These rules are written `html body ...` on purpose. Each page carries its
   own inline <style> AFTER this file, and a plain `.topbar` here would lose to
   the page's `.topbar` on order. Two type selectors are enough to win without
   an !important anywhere.
   ============================================================================ */

/* ---- the room: a soft stage light behind every page ---------------------- */
html body{
  background:
    radial-gradient(900px 420px at 50% -160px, color-mix(in srgb, var(--brand, #FF8A3D) 9%, transparent), transparent 72%),
    radial-gradient(700px 380px at 100% 0, color-mix(in srgb, var(--blue, #2F6BFF) 7%, transparent), transparent 70%),
    var(--bg);
  background-repeat:no-repeat;
}

/* ---- the game header ----------------------------------------------------- */
/* It wraps on purpose. The name keeps a floor of width, and when a page has
   more controls than the row can hold (the crossword carries a clock as well
   as a streak, and a 320px phone holds less of everything) the tools drop to
   a second row, right aligned, rather than crushing the name to two letters. */
html body .topbar{display:flex; align-items:center; gap:8px 6px; padding:6px 0 14px; min-height:0; flex-wrap:wrap;}
/* The back chevron and the name were two links to the same place. They are
   one now: the chevron sits in front of the game's mark, and the whole
   thing, chevron, tile and name, is the way home. That gives the name the
   width it needs on a phone. */
html body .topbar .icon-btn{display:none;}
html body .topbar .brand.logo::before{content:""; flex:0 0 auto; width:8px; height:8px; margin:0 1px 0 5px;
  border-left:2.4px solid var(--mut); border-bottom:2.4px solid var(--mut); transform:rotate(45deg);
  transition:border-color .12s, transform .12s;}
html body .topbar .brand.logo:hover::before{border-color:var(--ink); transform:translateX(-2px) rotate(45deg);}
html body .topbar .brand.logo{display:inline-flex; flex-direction:row; align-items:center; gap:10px;
  min-width:0; flex:1 1 150px; line-height:1; text-decoration:none; color:var(--ink);}
html body .topbar .brand.logo img{display:none;}
html body .topbar .brand.logo .sub{display:block; margin:0; min-width:0;
  font-family:var(--hero, 'Anton', Impact, sans-serif); font-weight:400; text-transform:uppercase;
  font-size:21px; line-height:1.02; letter-spacing:.015em; color:var(--ink);
  white-space:normal; overflow-wrap:normal; word-break:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
html body .topbar .spacer{flex:0 1 0; min-width:0;}

/* the game's own mark, in a tile tinted with its colour */
html body .gh-mark{--gc:var(--gac, var(--blue, #2F6BFF));
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, #fff 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--gc) 22%, var(--card));
  border:1px solid color-mix(in srgb, var(--gc) 42%, transparent);
  box-shadow:0 6px 14px -8px color-mix(in srgb, var(--gc) 70%, transparent);}
html body .gh-mark svg{width:26px; height:26px; display:block;}
html body .gh-mark svg.jrot{width:28px; height:28px;}
/* One accent per game, set on the root so the header tile, the scoreboard and
   anything else can read it. :has() keys it off the mark the page carries, so
   a page opts in by carrying the mark and nothing else. */
:root:has(.gh-mark[data-mark="almamater"]), :root:has(.gh-mark[data-mark="chain"]){--gac:#96B93C;}
:root:has(.gh-mark[data-mark="career"]){--gac:#48D17A;}
:root:has(.gh-mark[data-mark="sportegories"]){--gac:#DA6BE6;}
:root:has(.gh-mark[data-mark="crossword"]){--gac:#7C8DA3;}
:root:has(.gh-mark[data-mark="rankit"]){--gac:#F65C9C;}
:root:has(.gh-mark[data-mark="guess"]){--gac:#FF5A4E;}
:root:has(.gh-mark[data-mark="rollcall"]){--gac:#37C5D5;}
:root:has(.gh-mark[data-mark="match"]){--gac:#2F6BFF;}
:root:has(.gh-mark[data-mark="oddone"]){--gac:#A982F3;}
:root:has(.gh-mark[data-mark="highlow"]){--gac:#FF8A3D;}
:root:has(.gh-mark[data-mark="table"]){--gac:#F2B632;}

/* The tools are one control, not four: ?, sound and theme share a single pill
   with hairlines between them. Adjacent-sibling selectors do the joining, so
   it holds whatever order a page (or howto.js, which inserts the ?) puts
   them in. */
html body .topbar .themeBtn{width:36px; height:38px; flex:0 0 auto; margin:0; padding:0;
  border-radius:0; border:1px solid var(--line2); border-left-width:0;
  background:var(--card); color:var(--mut); box-shadow:none; font-weight:900; font-size:15px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .12s, background .12s;}
html body .topbar .themeBtn:hover{color:var(--ink); background:var(--card2);}
html body .topbar :not(.themeBtn) + .themeBtn,
html body .topbar .themeBtn:first-child{border-left-width:1px; border-radius:12px 0 0 12px; margin-left:auto;}
html body .topbar .themeBtn:has(+ :not(.themeBtn)),
html body .topbar .themeBtn:last-child{border-radius:0 12px 12px 0;}
html body .topbar :not(.themeBtn) + .themeBtn:has(+ :not(.themeBtn)),
html body .topbar :not(.themeBtn) + .themeBtn:last-child{border-radius:12px;}
html body .topbar .themeBtn svg{width:16px; height:16px;}
html body .topbar:has(.rtgHowto-btn) .helpBtn{display:none;}
html body .topbar .themeBtn.rtgHowto-btn{font-family:var(--f); font-size:15px; color:var(--ink);}

/* streak (and the crossword's clock): a scoreboard digit, not a form field */
html body .topbar .chip{flex:0 0 auto; min-width:0; height:38px; padding:0 8px; margin:0;
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-radius:12px; border:1px solid color-mix(in srgb, var(--gold, #F2B632) 38%, var(--line2));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold, #F2B632) 13%, var(--card)), var(--card));
  box-shadow:none;}
html body .topbar .chip .n{font-family:var(--hero, 'Anton', Impact, sans-serif); font-weight:400;
  font-size:17px; line-height:1; color:var(--goldT, #F2B632); font-variant-numeric:tabular-nums;}
html body .topbar .chip .l{font-size:7.5px; font-weight:900; letter-spacing:.08em; line-height:1;
  text-transform:uppercase; color:var(--mut); margin:0;}
html body .topbar .chip.timer{border-color:var(--line2); background:var(--card);}
html body .topbar .chip.timer .n{color:var(--ink);}

/* the word-art title is now the header's job */
html body .a-gametitle{display:none;}

@media (max-width:420px){
  html body .topbar{gap:6px;}
  html body .topbar .brand.logo{gap:8px;}
  html body .topbar .brand.logo .sub{font-size:18px;}
  html body .gh-mark{width:34px; height:34px; border-radius:10px;}
  html body .gh-mark svg{width:23px; height:23px;}
  html body .topbar .themeBtn{width:32px; height:36px;}
  html body .topbar .chip{height:36px; padding:0 7px;}
}
@media (max-width:360px){
  html body .gh-mark{display:none;}
}

/* ---- the scoreboard ------------------------------------------------------
   The run bar keeps its markup; it loses the thick left stripe and reads as
   one lit panel with the score as its biggest figure. */
html body .runbar{border:1px solid var(--line2); border-left-width:4px; border-radius:16px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--gac, var(--gold, #F2B632)) 11%, transparent), transparent 58%),
    var(--card);
  box-shadow:0 12px 28px -20px rgba(0,0,0,.6);}

/* ---- sport switcher: one track, one lit segment -------------------------- */
html body .modesw:not(:empty){gap:3px; padding:4px; border-radius:14px;
  background:var(--card2); border:1px solid var(--line);}
html body .modesw:not(:empty) button{border:0; border-radius:10px; min-height:36px;
  font-size:11px; letter-spacing:.03em; white-space:nowrap; padding-left:4px; padding-right:4px;}
html body .modesw:not(:empty) button:not(.on){background:transparent;}
html body .modesw:not(:empty) button:not(.on):hover{background:color-mix(in srgb, var(--ink) 6%, transparent);}
html body .modesw:not(:empty) button.on{box-shadow:0 4px 12px -6px rgba(0,0,0,.5);}

/* ---- how to play tab, quieter --------------------------------------------- */
html body .gj{border-top:0; margin-top:26px; padding-top:0;}
html body .gj > summary{border-radius:14px; background:var(--card); border-color:var(--line2);}
html body .gj > summary h2{font-size:15px; letter-spacing:.03em;}

/* ---- overlays sit above the site banner ----------------------------------
   Every game's result screen and the shared how-to were stacked at 50 to 100
   while the sticky site banner sits at 9500 and the bottom nav at 9400. So
   the banner cut across the top of every result, over the close button, the
   moment a game ended. They sit just above the banner now and still under the
   shared sheets that must win (pregame 9600, leaderboard 9650, the card and
   sign-in sheets 9998 and up). */
html body .scrim, html body .rtgHowto-scrim, html body #resultModal, html body #statsModal{z-index:9560;}
html body .podium{z-index:9562;}
html body .confetti{z-index:9566;}
html body .toast, html body .cw-toast{z-index:9570;}
html body .popup{z-index:9575;}

/* ---- the leaderboard door ------------------------------------------------
   An orange stripe and an orange word-art label made this row louder than
   the game above it. It is a door, so it reads as one: a tinted trophy tile,
   the label in ink, and the accent kept to the icon. */
html body .rtglb-open{border-radius:16px; border:1px solid var(--line2); border-left-width:1px;
  background:var(--card); padding:12px 14px; box-shadow:none;}
html body .rtglb-open svg{width:38px; height:38px; padding:9px; box-sizing:border-box; border-radius:11px;
  background:color-mix(in srgb, var(--lba) 16%, var(--card2));}
html body .rtglb-open .t b{font-family:var(--f); font-weight:900; font-size:14.5px; letter-spacing:0;
  text-transform:none; color:var(--ink);}
html body .rtglb-open .t span{font-weight:600;}

/* ---- the lifeline (Alma Mater, Career Path) -------------------------------
   A dashed outline read as a placeholder nobody had filled in. It is a real
   choice with a real cost, so it is a real button: quiet, but solid. */
html body .bailbtn{border:1px solid var(--line2); border-radius:14px; background:var(--card);
  min-height:46px; font-weight:800;}
html body .bailbtn:hover:not(:disabled){background:var(--card2);}

/* ---- the pre-game card (pregame.js) ---------------------------------------
   The same lit tile the hub draws for each game, so the card a player opens
   from the hub looks like the tile they just tapped. */
html body .rtgpg{border-radius:22px;}
html body .rtgpg-cap{height:104px; border-bottom:0;
  background:
    radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c, var(--blue, #2F6BFF)) 34%, transparent), transparent 62%),
    radial-gradient(color-mix(in srgb, var(--c, var(--blue, #2F6BFF)) 30%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px,
    linear-gradient(160deg, color-mix(in srgb, var(--c, var(--blue, #2F6BFF)) 24%, var(--card)), color-mix(in srgb, var(--c, var(--blue, #2F6BFF)) 7%, var(--card)));}
html body .rtgpg-cap svg{width:56px; height:56px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.28));}
html body .rtgpg-nm{font-size:28px;}
html body .rtgpg-go{font-style:normal; letter-spacing:.01em; border-radius:14px;
  box-shadow:0 14px 28px -14px color-mix(in srgb, var(--c, var(--blue, #2F6BFF)) 85%, transparent);}

/* ===== Boards V2: the answer bar, the prompt, the choice cards ============
   Four games type an answer (Alma Mater, Career Path, Guess the Player, the
   Number Game) and three pick from cards (Alma Mater, Career Path, Odd One
   Out). Each page styled its own, so the field that takes the answer was a
   thin grey box on one page and a gold-edged box on the next. They share one
   shape now: a tall field that lights up in the game's colour when it has
   focus, and a button that IS the game's colour. The per-page rules stay put
   and still set widths (the Number Game's two-digit box keeps its size); this
   only restyles. html body wins without !important, same as the chrome block. */
html body .answerin,
html body .search input,
html body #searchInput{
  min-height:54px; border-radius:14px;
  border:2px solid color-mix(in srgb,var(--gac,var(--gold)) 26%,var(--line2));
  background:var(--card);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.16);
  transition:border-color .15s, box-shadow .15s;
}
html body .answerin:focus,
html body .search input:focus,
html body #searchInput:focus{
  outline:none; border-color:var(--gac,var(--gold));
  box-shadow:inset 0 2px 5px rgba(0,0,0,.12),0 0 0 4px color-mix(in srgb,var(--gac,var(--gold)) 22%,transparent);
}
html body .answergo,
html body .search .go{
  min-height:54px; border-radius:14px; border:0; padding:0 20px;
  background:var(--gac,var(--gold)); color:#0d1422;
  font-family:var(--f); font-weight:900; font-size:14px; letter-spacing:.07em; text-transform:uppercase;
  box-shadow:0 4px 0 color-mix(in srgb,var(--gac,var(--gold)) 55%,#000);
  transition:transform .08s, box-shadow .08s, filter .12s;
}
html body .answergo:hover:not(:disabled),
html body .search .go:hover:not(:disabled){filter:brightness(1.07);}
html body .answergo:active:not(:disabled),
html body .search .go:active:not(:disabled){transform:translateY(3px); box-shadow:0 1px 0 color-mix(in srgb,var(--gac,var(--gold)) 55%,#000);}
html body .answergo:disabled,
html body .search .go:disabled{background:var(--card2); color:var(--mut); box-shadow:none;}

/* The question over the board is the loudest words on the page after the
   game's name, so it takes the display face. */
html body .prompt{
  font-family:Anton,var(--f); font-weight:400; font-size:23px; line-height:1.1;
  letter-spacing:.01em; text-transform:uppercase; text-wrap:balance; margin:4px 0 14px;
}
@media (max-width:380px){ html body .prompt{font-size:20px;} }

/* Choice cards: one card shape, lit on the left in the game's colour. */
html body .choices .choice{
  border:2px solid var(--line2); border-left:5px solid color-mix(in srgb,var(--gac,var(--gold)) 70%,var(--line2));
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,var(--card)),var(--card));
  box-shadow:0 3px 0 rgba(0,0,0,.18);
  transition:transform .1s, border-color .15s, background .15s, box-shadow .1s;
}
html body .choices .choice:hover:not(:disabled){border-color:color-mix(in srgb,var(--gac,var(--gold)) 60%,var(--line2)); border-left-color:var(--gac,var(--gold)); transform:translateY(-1px);}
html body .choices .choice:active:not(:disabled){transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.18);}
html body .choices .choice.correct{border-color:var(--green); background:color-mix(in srgb,var(--green) 15%,var(--card));}
html body .choices .choice.wrong{border-color:var(--red); background:color-mix(in srgb,var(--red) 14%,var(--card));}