:root{
  --bg:#07080d;
  --bg-2:#0d0f18;
  --surface:#12151f;
  --surface-2:#171b28;
  --line:#242938;
  --line-soft:#1b1f2c;
  --text:#eef1f7;
  --muted:#9aa3b8;
  --dim:#6b7488;
  --gold:#ffd23f;
  --gold-dim:#c9a227;
  --violet:#7c5cff;
  --cyan:#2ee6c5;
  --red:#ff5c5c;
  --max:1140px;
  --r:16px;
  /* Theme-role tokens (see [data-theme="light"] below). These exist because
     several base colors above play two different jobs: a FILL (button
     background, chip background, dot, border, gradient stop) that always
     sits on its own self-contained pairing and reads fine regardless of
     page theme, versus TEXT sitting directly on the page/card background,
     which needs a darker/more saturated variant to stay legible once the
     canvas flips from near-black to near-white. Dark theme just points
     every *-text token back at its plain color; light theme (below) is
     where they actually diverge. */
  --gold-text:var(--gold);
  --cyan-text:var(--cyan);
  --red-text:var(--red);
  --tier-medium:#7ca8ff;
  --tier-hard:#ff9d2f;
  --rank-silver:#d4d9e6;
  --rank-bronze:#cd8f52;
  --danger-text:#ffb0b0;
  --checkbox-border:#3b4257;
  --hover-border:#39405a;
  --hover-border-2:#2e3448;
  /* rgba(var(--tint-rgb),X) replaces every rgba(255,255,255,X) "white
     overlay" tint used for subtle card/input/button backgrounds - swapping
     just this triplet in light theme flips them all to a black-based tint
     at the exact same authored opacity, no other edits needed per rule. */
  --tint-rgb:255,255,255;
  --bg-rgb:7,8,13;
  /* Raw RGB triplets for --cyan/--red, so rgba(var(--cyan-rgb),X)/
     rgba(var(--red-rgb),X) tints (see .opt.correct/.opt.wrong) actually
     track each theme's own shade instead of one hardcoded literal that only
     ever matched dark mode - light theme's --cyan/--red are meaningfully
     different colors (a darker, more legible green/red for text-on-white),
     not just the same hex reused. */
  --cyan-rgb:46,230,197;
  --red-rgb:255,92,92;
  /* Success / warning message boxes (account page flash, contact form). */
  --ok-bg:rgba(46,230,197,.09);
  --ok-line:rgba(46,230,197,.3);
  --ok-text:#9beedd;
  --warn-bg:rgba(255,157,47,.1);
  --warn-line:rgba(255,157,47,.35);
  --warn-text:#ffcf94;
  /* .hero::before/::after's two background glows - broken out as their own
     tokens (not just reused inline) because light theme needs more than an
     opacity bump: the same violet/gold values that read as an atmospheric
     spotlight against near-black sit at roughly a third the visible
     contrast against this theme's cream background, and a diluted PLAIN
     gold reads muddy rather than warm there - see the light override
     below, which raises the opacity and swaps to --gold-dim's tone. */
  --hero-glow-1:rgba(124,92,255,.20);
  --hero-glow-2:rgba(255,210,63,.13);
}
[data-theme="light"]{
  --bg:#faf8f2;
  --bg-2:#f3eeda;
  --surface:#ffffff;
  --surface-2:#fdfbf3;
  --line:#e3ddc9;
  --line-soft:#ece6d3;
  --text:#1a1a1a;
  --muted:#5c5648;
  --dim:#7d7666;
  --gold-dim:#b8860b;
  --violet:#6a4ce0;
  --cyan:#0f8a6f;
  --red:#d43f3f;
  --gold-text:#a8760a;
  --cyan-text:#0f8a6f;
  --red-text:#c23a3a;
  --tier-medium:#3a63c9;
  --tier-hard:#c06a12;
  --rank-silver:#7d8494;
  --rank-bronze:#9a5f2e;
  --danger-text:#a12f2f;
  --checkbox-border:#c9c2ab;
  --hover-border:#cfc7ab;
  --hover-border-2:#c2b99b;
  --tint-rgb:0,0,0;
  --bg-rgb:250,248,242;
  --cyan-rgb:15,138,111;
  --red-rgb:212,63,63;
  --ok-bg:rgba(15,138,111,.08);
  --ok-line:rgba(15,138,111,.35);
  --ok-text:#0b5e4b;
  --warn-bg:rgba(214,120,20,.09);
  --warn-line:rgba(214,120,20,.4);
  --warn-text:#8a4a00;
  /* Same two glow layers as dark's :root, at roughly double the opacity
     (the light ground needs more contrast to read as a glow at all) and
     shifted from plain --gold to --gold-dim's tone (plain gold diluted
     onto white reads as a muddy yellow smear, not a warm light). */
  --hero-glow-1:rgba(106,76,224,.22);
  --hero-glow-2:rgba(184,134,11,.20);
}
/* ---------- responsive tiers ----------
   Every max-width breakpoint in this file now uses one of two shared
   values, instead of the ~15 near-duplicate numbers (520/560/600/640/700/
   760/820/900/940/980/1000px) this file used to have scattered across it,
   which is why the same physical phone could get a different layout on
   different pages depending on which arbitrary number that page's grid
   happened to use.
     1024px - "tablet": iPad mini/Air/Pro portrait & landscape, most Android
       tablets, and small laptop windows all fall at or under this. Grids
       that are 3-4 columns on desktop drop to 2 columns here rather than
       going straight to 1, so tablets get a real 2-column layout instead
       of either a cramped 4-up row or an overly-sparse single column.
      640px - "phone": iPhone SE up through the largest current iPhones and
       Android phones in portrait are all comfortably under this (portrait
       widths top out around 430px even on the biggest phones). Anything
       still 2 columns above collapses to 1 here.
   The nav's own drawer/burger switch (below) intentionally keeps its own
   900px boundary rather than joining the 1024px tier - it's driven by how
   much horizontal room the logo+links+buttons need, not by grid columns,
   and 900px is where that row actually starts to crowd. That means a
   tablet in landscape (1024px) still gets the full desktop-style nav, and
   only portrait tablets and phones get the drawer. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.mono-num{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.12}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{position:relative}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);margin-bottom:14px;display:flex;align-items:center;gap:9px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.6}
.h2{font-size:clamp(30px,4.4vw,46px);font-weight:700;margin-bottom:14px}
.lede{color:var(--muted);font-size:17px;max-width:56ch}
.sec-head{margin-bottom:46px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:11px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;transition:.18s ease;
  font-family:'Inter',sans-serif;white-space:nowrap;
}
.btn-primary{background:var(--gold);color:#12100a;box-shadow:0 8px 30px -10px rgba(255,210,63,.6)}
.btn-primary:hover{background:#ffdd6b;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line);color:var(--text);background:rgba(var(--tint-rgb),.02)}
.btn-ghost:hover{background:rgba(var(--tint-rgb),.06);border-color:var(--hover-border);transform:translateY(-1px)}
/* A second "real" CTA colour (not a one-off) for actions that need to stand
   apart from the gold buy/play CTAs on the same screen - e.g. free-quiz.html's
   "Remind me daily" sitting right next to "Play for cash". Cyan is already
   this site's other primary accent (correct-answer ticks, the Easy tier chip,
   the live-pill dot) rather than an invented colour, so it reads as
   intentional branding, not a mistake. */
.btn-accent{background:var(--cyan);color:#052a22;box-shadow:0 8px 30px -10px rgba(46,230,197,.55)}
.btn-accent:hover{background:#54f0d4;transform:translateY(-1px)}
.btn:disabled{cursor:default;transform:none}

.card{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-soft);border-radius:var(--r);
}

/* ---------- nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  min-height:66px;position:relative}
.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;font-size:17px;white-space:nowrap}
.logo .mark{
  width:28px;height:28px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,var(--gold),#ff9d2f);
  display:grid;place-items:center;color:#12100a;font-size:15px;font-weight:700;
}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--muted)}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:10px 18px;font-size:14px}

/* ---------- nav drawer ----------
   Below 900px .nav-links has nowhere to go and .nav-cta's secondary item
   (Sign in / Account) and the signed-in name+status chip get crowded out of
   the compact header row - both used to just vanish below their own
   breakpoints (520px, 760px) with no way back to them at all. They now move
   into this drawer instead of disappearing: the burger button reveals the
   exact same links plus the exact same auth content paintHeader() already
   builds for the desktop bar (see site.js paintHeader(), which now fills
   #navDrawerAuth as well as #navAuth from one shared string).

   The burger itself stays visible at every width, desktop included - the
   full nav-links/nav-cta bar is still the primary way to get around on a
   wide screen, but "Log out" only lives in the drawer (see paintHeader()),
   so desktop needs a way to reach it too rather than only mobile. */
.nav-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;
  background:rgba(var(--tint-rgb),.02);cursor:pointer;flex:none;padding:0}
.nav-burger span{display:block;width:16px;height:2px;background:var(--text);
  border-radius:1px;transition:.18s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-drawer{display:none;flex:0 0 100%;order:99;flex-direction:column;gap:2px;padding:8px 0 20px;
  border-top:1px solid var(--line-soft)}
.nav-drawer.open{display:flex}
.nav-drawer a{padding:13px 2px;font-size:15px;color:var(--text);
  border-bottom:1px solid var(--line-soft)}
/* Background theme switch, drawer only - sits between "Contact us" and the
   auth section (Sign in / Account) on every page, see LQ.setTheme() in
   site.js and [data-theme="light"] in :root above. */
.nav-theme-row{display:flex;align-items:center;justify-content:space-between;
  padding:13px 2px;border-bottom:1px solid var(--line-soft)}
.nav-theme-label{font-size:15px;color:var(--text)}
.nav-theme-switch{display:flex;background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:999px;padding:3px;gap:2px;flex:none}
.nt-opt{border:none;background:none;color:var(--dim);font-size:12.5px;font-weight:600;
  padding:7px 14px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.15s ease}
.nt-opt.on{background:var(--gold);color:#12100a}
.nav-drawer-auth{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.nav-drawer-auth .btn{width:100%}
.nav-drawer-auth .user-chip{width:100%;justify-content:flex-start}
.nav-drawer-auth .user-chip .uc-status{margin-left:auto}
.nav-logout:hover{border-color:rgba(255,92,92,.35);color:var(--red-text);background:rgba(255,92,92,.06)}
.uc-dot{width:7px;height:7px;border-radius:50%;flex:none}
.uc-name{font-family:'Space Grotesk';font-weight:600;color:var(--text)}
/* Scoped to the compact header bar only, not the drawer's full-width copy
   (.nav-drawer-auth .user-chip has all the room it needs) - a first name
   has no length limit at registration, so without this the chip's own
   width was unbounded and a long one could push the logo/CTA/burger into
   wrapping regardless of any other breakpoint fix. Truncating with an
   ellipsis caps the chip's width no matter what account is signed in,
   instead of every other header element having to gracefully absorb
   however long a name happens to be. */
.nav-cta .user-chip .uc-name{display:inline-block;max-width:90px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* On a phone the drawer is the whole nav, so it makes sense full-width,
   flush under the header. On a wide screen the same full-bleed strip reads
   as broken - a handful of short menu items stretched the entire width of
   the browser window, with everything after the first word floating in
   empty space. Above the nav's own 900px breakpoint the drawer becomes a
   compact panel instead, hanging down from the right (under the burger,
   roughly starting from where Account/Join next quiz already sit) rather
   than spanning edge to edge.

   It's positioned relative to .nav itself (not <header>, which is full-
   bleed) specifically so "right:0" lands on the burger's actual edge at
   every viewport width - .nav is the centred, max-1140px box the burger
   really sits inside, so anchoring to <header> instead left a growing gap
   on wide screens where .nav no longer reaches the browser's true edge.
   max-height+overflow-y is the other half of the fix: without it, a short
   browser window (laptop with the address bar/bookmarks bar eating space)
   could run the drawer's own bottom items - Log out among them - off the
   bottom of the screen with no way to scroll down to them. */
@media(min-width:901px){
  .nav-drawer{
    position:absolute;top:calc(100% + 8px);right:0;left:auto;margin:0;
    width:300px;max-width:calc(100vw - 48px);
    max-height:calc(100vh - 90px);overflow-y:auto;
    background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
    border:1px solid var(--line);border-radius:14px;
    box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
    padding:10px 16px 16px;
  }
}
@media(max-width:900px){
  .nav-links{display:none}
  /* Same reasoning as the signed-in chip just below: "Sign in" used to
     just disappear here, which meant the returning player MOST likely to
     want it - already has an account, just needs back in - was the one
     forced to open the drawer for it, while a brand-new visitor's single
     "Subscribe" button sat right there unobstructed. Trimmed to match the
     chip's own compact sizing instead, so it fits next to Subscribe and
     the burger without crowding either. */
  .nav-cta .btn-ghost{padding:9px 13px;font-size:13px}
  /* The chip used to just disappear here, which is exactly why a signed-in
     visitor on a phone couldn't tell they were signed in without opening
     the drawer - it now stays put at every width, just trimmed to a dot +
     first name so it still fits next to the burger button. The full
     "· 3 games left" detail (.uc-status) only shows once there's room for
     it; it's still there in full inside the drawer itself. */
  .nav-cta .user-chip{padding:6px 10px 6px 8px;gap:7px}
  /* Compact status on a phone: "Jr · 3 left" (the word "quizzes" drops
     out, see .uc-long in site.js paintHeader()), so entries left are always
     visible in the top bar, not only inside the drawer. */
  .nav-cta .user-chip .uc-long{display:none}
  /* Signed-in AND the primary CTA together (chip + "Join next quiz") was
     too wide for a phone header alongside the logo and burger, and forced
     both the logo text and the button label to wrap onto multiple lines.
     ".user-chip ~ .btn-primary" only matches a primary button that comes
     after a chip in the markup, which only happens once signed in - so
     this leaves a guest's single "Subscribe" button (no chip, nothing to
     wrap against) untouched, and it's still one tap away via the drawer's
     own full-width copy of the same button either way. */
  .nav-cta .user-chip ~ .btn-primary{display:none}
}

/* ---------- hero ---------- */
.hero{padding:82px 0 90px;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-30% 0 auto 50%;transform:translateX(-50%);
  width:1100px;height:700px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--hero-glow-1),transparent 62%);
}
.hero::after{
  content:"";position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:900px;height:500px;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--hero-glow-2),transparent 60%);
}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
@media(max-width:1024px){.hero-grid{grid-template-columns:1fr;gap:44px}}

.live-pill{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;
  border:1px solid var(--line);border-radius:999px;background:rgba(var(--tint-rgb),.03);
  font-size:13px;color:var(--muted);margin-bottom:26px;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(46,230,197,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(46,230,197,0)}100%{box-shadow:0 0 0 0 rgba(46,230,197,0)}}

h1{font-size:clamp(44px,7vw,76px);font-weight:700;margin-bottom:20px}
h1 .accent{color:var(--gold-text)}
/* Homepage: the slogan keeps the old H1's look; the real H1 says what the site is. */
.hero-slogan{font-family:'Space Grotesk','Inter',sans-serif;letter-spacing:-.02em;line-height:1.12;font-size:clamp(44px,7vw,76px);font-weight:700;margin-bottom:20px}
.hero-slogan .accent{color:var(--gold-text)}
.hero h1.hero-h1{font-size:clamp(19px,2.2vw,23px);font-weight:600;line-height:1.3;margin-bottom:10px;max-width:30ch}
.hero p.lede{font-size:18px;margin-bottom:32px;max-width:52ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--dim)}
.trust span{display:flex;align-items:center;gap:7px}
.trust span::before{content:"✓";color:var(--cyan-text);font-size:12px}

/* next game panel */
.next-game{padding:26px;position:relative;overflow:hidden}
/* Dark theme's card already reads as sitting IN the glow, purely from the
   contrast of a near-black card against the near-black page. Light theme
   has no such contrast to lean on, so it gets a soft violet-tinted shadow
   instead of the site's usual flat, shadowless cards - the same depth cue,
   built the way this theme actually needs it. */
[data-theme="light"] .next-game{box-shadow:0 24px 48px -24px rgba(106,76,224,.18)}
.next-game::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),var(--violet),transparent);
}
.ng-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.ng-label{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:600}
.ng-tier{font-family:'Space Grotesk';font-size:26px;font-weight:700;margin-top:6px}
.tier-chip{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;white-space:nowrap;
}
.t-easy{background:rgba(46,230,197,.14);color:var(--cyan-text)}
.t-medium{background:rgba(124,168,255,.14);color:var(--tier-medium)}
.t-hard{background:rgba(255,157,47,.14);color:var(--tier-hard)}
.t-expert{background:rgba(255,92,92,.14);color:var(--red-text)}
/* A one-off admin-built game (see games.create_custom_game()) - shown
   instead of the plain difficulty chip wherever a game carries a label, so
   a sponsored/special game reads as its own kind of thing rather than
   looking like just another Easy/Medium/Hard/Expert slot. */
.t-special{background:rgba(255,210,63,.16);color:var(--gold-text)}

.countdown{display:flex;gap:10px;margin-bottom:22px}
.cd-unit{
  flex:1;background:rgba(var(--tint-rgb),.03);border:1px solid var(--line-soft);
  border-radius:11px;padding:13px 8px;text-align:center;
}
.cd-num{font-family:'Space Grotesk';font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.cd-lab{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:7px}

.ng-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border-radius:12px;overflow:hidden;margin-bottom:20px}
.ng-stat{background:var(--surface-2);padding:15px 16px}
.ng-stat .k{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.ng-stat .v{font-family:'Space Grotesk';font-size:23px;font-weight:700}
.ng-stat .v.gold{color:var(--gold-text)}
.next-game .btn{width:100%}

/* ---------- empty-pool / guaranteed-pool display (see LQ.isEmptyPool()/
   LQ.guaranteeNote() in site.js) ---------- */
.pioneer-badge{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--cyan-text);background:rgba(var(--cyan-rgb),.1);
  border:1px solid rgba(var(--cyan-rgb),.25);border-radius:999px;
  padding:5px 12px 5px 10px;margin-bottom:20px;
}
.pioneer-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.guarantee-note{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.guarantee-note b{color:var(--gold-text);font-weight:700}

/* ---------- pool-grows bar (next-game card + calendar game cards) ---------- */
.pool-bar{height:6px;border-radius:4px;background:var(--line-soft);overflow:hidden;margin:14px 0 8px}
.pool-bar-fill{height:100%;background:var(--gold);border-radius:4px;transition:width .4s ease;width:0%}
.pool-note{font-size:12px;color:var(--dim);line-height:1.5}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line-soft);background:var(--bg-2);overflow:hidden;padding:15px 0}
.ticker-track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite;white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker-item{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--dim)}
.ticker-item b{color:var(--text);font-weight:600}
.ticker-item .amt{color:var(--gold-text);font-family:'Space Grotesk';font-weight:700}

/* ---------- features ---------- */
.pad{padding:96px 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1024px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.feature-grid{grid-template-columns:1fr}}

/* ---------- latest winners (homepage proof section) ---------- */
.winners-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}
@media(max-width:1024px){.winners-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.winners-grid{grid-template-columns:1fr}}
.winner-card{padding:22px 24px;display:flex;align-items:center;gap:15px}
.winner-card .av{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-size:15px;font-weight:700;font-family:'Space Grotesk';background:var(--surface-2);
  border:1px solid var(--line-soft);color:var(--muted)}
.winner-card .who b{display:block;font-family:'Space Grotesk';font-size:15.5px}
.winner-card .who span{font-size:13px;color:var(--dim)}
.winner-card .prize{margin-left:auto;font-family:'Space Grotesk';font-weight:700;color:var(--gold-text);
  font-size:17px;white-space:nowrap}
.feature{padding:28px 24px 30px;transition:.2s ease}
.feature:hover{border-color:var(--hover-border-2);transform:translateY(-3px)}
.f-ico{
  width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  margin-bottom:18px;font-size:19px;
  background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.18);
}
.feature h3{font-size:19px;margin-bottom:9px}
.feature p{font-size:14.5px;color:var(--muted)}

/* ---------- fair play callout ---------- */
.fair-play{display:flex;align-items:center;gap:22px;padding:30px 34px;max-width:840px;margin:0 auto}
.fair-play .f-ico{width:52px;height:52px;border-radius:13px;font-size:23px;flex:none;margin-bottom:0}
.fair-play h3{font-size:20px;margin-bottom:6px}
.fair-play p{font-size:14.5px;color:var(--muted);max-width:56ch}
@media(max-width:640px){.fair-play{flex-direction:column;text-align:center;padding:28px 22px}}

/* ---------- stats band ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;margin-bottom:52px}
@media(max-width:1024px){.stat-band{grid-template-columns:1fr 1fr}}
.stat{background:var(--bg-2);padding:26px 22px;text-align:center}
.stat .n{font-family:'Space Grotesk';font-size:clamp(28px,4vw,38px);font-weight:700;color:var(--gold-text)}
.stat .l{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:6px}

/* difficulty */
.diff-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:52px}
@media(max-width:1024px){.diff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.diff-grid{grid-template-columns:1fr}}
.diff{padding:24px;border-radius:14px;border:1px solid var(--line-soft);background:var(--surface);position:relative;overflow:hidden}
.diff::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.diff.easy::before{background:var(--cyan)}
.diff.medium::before{background:#7ca8ff}
.diff.hard::before{background:#ff9d2f}
.diff.expert::before{background:var(--red)}
.diff h4{font-size:18px;margin-bottom:8px}
.diff p{font-size:14px;color:var(--muted);margin-bottom:16px;min-height:63px}
.mix{font-size:12.5px;color:var(--dim);border-top:1px solid var(--line-soft);padding-top:13px;font-family:'Space Grotesk';font-weight:500}
.mix b{color:var(--text)}

/* topics */
.topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.topic{
  padding:8px 15px;border-radius:999px;font-size:13.5px;
  background:rgba(var(--tint-rgb),.03);border:1px solid var(--line-soft);color:var(--muted);
  transition:.15s ease;
}
.topic:hover{color:var(--text);border-color:var(--hover-border);background:rgba(255,210,63,.06)}
.sub-h{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:16px}

/* ---------- calendar ---------- */
.cal-bar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.cal-month{font-family:'Space Grotesk';font-size:22px;font-weight:700}
.cal-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--dim)}
.cal-legend span{display:flex;align-items:center;gap:7px}
.lg{width:8px;height:8px;border-radius:50%;display:inline-block}
.cal-strip{display:grid;grid-template-columns:repeat(14,1fr);gap:8px;margin-bottom:26px}
@media(max-width:1024px){.cal-strip{grid-template-columns:repeat(7,1fr)}}
/* Below tablet width, 7 shrinking columns starts squashing the date number
   unreadable. A single horizontally-scrollable row (one tap-sized card per
   day, same width as desktop) keeps every day legible and lets a thumb swipe
   left/right through all 14 nights - same interaction as a native calendar
   strip, and it means the picker can stay in its natural place above the
   game cards instead of being visually reordered below them. */
@media(max-width:640px){
  .cal-strip{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;margin-bottom:20px;
  }
  .cal-strip .day{flex:0 0 68px;scroll-snap-align:start}
}
.day{
  padding:11px 6px;border-radius:12px;text-align:center;cursor:pointer;
  border:1px solid var(--line-soft);background:var(--surface);transition:.15s;
}
.day:hover{border-color:var(--hover-border)}
.day.active{background:rgba(255,210,63,.1);border-color:var(--gold)}
.day .dow{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.day .dnum{font-family:'Space Grotesk';font-size:19px;font-weight:700;margin-top:2px;line-height:1.1}
.day .dmon{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.day.active .dnum{color:var(--gold-text)}
.cal-selected{font-family:'Space Grotesk';font-size:15px;font-weight:600;color:var(--muted);margin-bottom:14px}

/* Homepage "coming up" day-picker - a lighter 7-day version of .cal-strip
   (full 14-night browsing already lives on calendar.html, one click away).
   Always a single line, even on desktop, so it never competes for space
   with the rest of the homepage; below tablet width it scrolls horizontally
   rather than wrapping, same interaction as the fix on the full calendar. */
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:18px}
@media(max-width:640px){
  .week-strip{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:6px;
  }
  .week-strip .day{flex:0 0 68px;scroll-snap-align:start}
}

.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:640px){.game-grid{grid-template-columns:1fr}}
.game{padding:22px;display:flex;flex-direction:column;gap:16px;transition:.2s}
.game:hover{border-color:var(--hover-border-2)}
.game-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.game-title{font-family:'Space Grotesk';font-size:20px;font-weight:700}
.game-time{font-size:13.5px;color:var(--muted);margin-top:3px}
.game-meta{display:flex;gap:26px;padding:14px 0;border-block:1px solid var(--line-soft)}
.game-meta div{flex:1}
.game-meta .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.game-meta .v{font-family:'Space Grotesk';font-size:19px;font-weight:700;margin-top:4px}
.game-meta .v.gold{color:var(--gold-text)}
.game-actions{display:flex;gap:9px}
.game-actions .btn{flex:1;padding:11px 14px;font-size:14px}
.cal-note{font-size:13.5px;color:var(--dim);margin-top:22px;text-align:center}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1024px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.price-grid{grid-template-columns:1fr}}
.plan{padding:28px 24px;display:flex;flex-direction:column;position:relative}
.plan.featured{border-color:rgba(255,210,63,.4);background:linear-gradient(180deg,rgba(255,210,63,.06),var(--bg-2))}
.badge{
  position:absolute;top:-10px;left:24px;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:5px;
  background:var(--gold);color:#12100a;
}
.badge.alt{background:var(--violet);color:#fff}
.plan .pname{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:14px}
.plan .price{font-family:'Space Grotesk';font-size:40px;font-weight:700;line-height:1}
.plan .price .mo{font-size:15px;font-weight:600;color:var(--dim);letter-spacing:0}
.plan .per{font-size:13.5px;color:var(--dim);margin-top:8px;margin-bottom:20px}
.plan ul{list-style:none;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:9px;margin-bottom:24px;flex:1}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li::before{content:"→";color:var(--gold-text);flex:none}
.plan .btn{width:100%}
.price-note{font-size:13.5px;color:var(--dim);margin-top:22px;text-align:center}

/* ---------- mechanics ---------- */
.mech-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:1024px){.mech-grid{grid-template-columns:1fr;gap:36px}}
.rules{display:flex;flex-direction:column;gap:2px}
.rule{display:flex;gap:18px;padding:20px 0;border-bottom:1px solid var(--line-soft)}
.rule:last-child{border-bottom:none}
.rule .num{
  font-family:'Space Grotesk';font-size:15px;font-weight:700;color:var(--gold-text);
  width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:rgba(255,210,63,.09);border:1px solid rgba(255,210,63,.18);
}
.rule h4{font-size:17px;margin-bottom:5px}
.rule p{font-size:14.5px;color:var(--muted)}

.demo{padding:26px}
.demo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.demo-q{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600}
.demo-score{font-family:'Space Grotesk';font-size:34px;font-weight:700;color:var(--gold-text);font-variant-numeric:tabular-nums;line-height:1}
.demo-bar{height:5px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin-bottom:22px}
.demo-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ff9d2f);width:100%;border-radius:99px}
.demo-text{font-family:'Space Grotesk';font-size:19px;font-weight:600;margin-bottom:20px;line-height:1.35}
.demo-opts{display:grid;gap:9px}
.opt{
  padding:13px 16px;border-radius:10px;border:1px solid var(--line-soft);
  background:rgba(var(--tint-rgb),.02);font-size:14.5px;cursor:pointer;transition:.15s;
  text-align:left;color:var(--text);font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
/* Touch browsers apply :hover on tap and then have no mouse to move away
   again to clear it, so whichever option you tapped last stayed visually
   "highlighted" until you tapped another one - easy to misread as a hint
   about which answer is correct, which it never was. Restricting :hover to
   devices that actually have a mouse (hover:hover) fixes that; real
   correct/wrong feedback still comes only from .opt.correct/.opt.wrong
   below, added after an answer is actually scored. */
@media(hover:hover) and (pointer:fine){
  .opt:hover:not(:disabled){border-color:var(--hover-border);background:rgba(var(--tint-rgb),.05)}
}
.opt:focus{outline:none}
.opt:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* Bold, solid-reading fills - not just a border + tinted text - so
   correct/wrong scans instantly without having to read the option's text
   colour (which is all a faint 10%-alpha tint used to leave, and reads
   nearly identically to the default text colour at a glance). Border colour
   is unchanged; --cyan-rgb/--red-rgb (see :root/light-theme blocks above)
   track each theme's own shade instead of one hardcoded triplet that only
   ever matched dark mode, so light theme gets its own correctly-toned fill
   too, not a mismatched leftover dark-mode tint. */
.opt.correct{border-color:var(--cyan);background:rgba(var(--cyan-rgb),.32);color:var(--cyan-text);font-weight:600}
.opt.wrong{border-color:var(--red);background:rgba(var(--red-rgb),.32);color:var(--red-text);font-weight:600}
/* Paid/test games: the moment you pick, this marks "this is what you chose"
   without saying whether it's right - see compete.html's pick()/waitForRoom().
   .correct/.wrong get added alongside this (never in place of it - the
   chosen option keeps its own class too) once the room's synchronised
   reveal moment actually arrives, so a neighbour glancing at your screen
   mid-answer can't read anything off it. */
.opt.chosen{border-color:var(--violet);background:rgba(var(--tint-rgb),.08)}
/* The option you actually picked, once revealed, needs BOTH signals at
   once: the violet border stays as your own "this is what I chose" marker,
   but the fill still has to say correct/wrong, same as any other option's.
   Plain .opt.correct/.opt.wrong above would otherwise lose that fight
   against .opt.chosen purely on whichever rule happens to sit later in this
   file - three classes beats two on specificity regardless of source order,
   so these always win reliably instead of being one stray reorder away from
   silently going back to a violet-bordered, textcolour-only "wrong" button
   that reads as barely different from "chosen and still unrevealed". */
.opt.chosen.correct{border-color:var(--violet);background:rgba(var(--cyan-rgb),.32);color:var(--cyan-text)}
.opt.chosen.wrong{border-color:var(--violet);background:rgba(var(--red-rgb),.32);color:var(--red-text)}
.opt:disabled{cursor:default}
/* Read-phase placeholder: same size/shape as a real option so nothing
   jumps when the answers appear, with enough visible structure (dashed
   border, a shimmering bar) that it doesn't just look like blank/broken
   space - but no actual answer text, so nobody can read ahead. */
.opt-pending{border-style:dashed;border-color:var(--hover-border);background:rgba(var(--tint-rgb),.035);cursor:default}
.opt-skel{display:block;height:12px;width:58%;border-radius:6px;
  background:rgba(var(--tint-rgb),.18);animation:optSkelPulse 1.3s ease-in-out infinite}
@keyframes optSkelPulse{0%,100%{opacity:.5}50%{opacity:1}}
/* Generic "waiting on the network" state for any stat/label that starts as
   a literal "-" placeholder (next-game card, winners strip). Same pulse as
   the answer-option skeleton above, just applied to whatever text/markup is
   already there instead of a fixed-size bar, so it drops in place with no
   markup changes beyond toggling this class once the real value lands. */
.skel-pulse{opacity:.5;animation:optSkelPulse 1.3s ease-in-out infinite}
.demo-result{font-size:13.5px;color:var(--muted);margin-top:16px;min-height:20px}
.demo-result b{color:var(--gold-text)}

.report{margin-top:52px;padding:32px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--surface);display:grid;grid-template-columns:1fr 1.25fr;gap:36px;align-items:center}
@media(max-width:1024px){.report{grid-template-columns:1fr;gap:24px}}
.report h3{font-size:24px;margin-bottom:11px}
.report p{color:var(--muted);font-size:15px}
.report-items{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ri{padding:13px 15px;border-radius:10px;background:rgba(var(--tint-rgb),.03);border:1px solid var(--line-soft);font-size:13.5px;color:var(--muted)}
.ri b{display:block;color:var(--text);font-family:'Space Grotesk';font-size:14px;margin-bottom:2px}

/* ---------- leaderboard ---------- */
.board{border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.board-head,.board-row{display:grid;grid-template-columns:60px 1fr 100px 90px 100px;gap:12px;padding:14px 22px;align-items:center}
@media(max-width:640px){
  .board-head,.board-row{grid-template-columns:44px 1fr 82px;padding:13px 15px}
  .col-hide{display:none}
}
.board-head{background:var(--bg-2);border-bottom:1px solid var(--line-soft);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600}
.board-row{border-bottom:1px solid var(--line-soft);font-size:14.5px}
.board-row:last-child{border-bottom:none}
.board-row.you{background:rgba(255,210,63,.06)}
.rank{font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--dim)}
.rank.p1{color:var(--gold-text)}.rank.p2{color:var(--rank-silver)}.rank.p3{color:var(--rank-bronze)}
.pname-cell{display:flex;align-items:center;gap:11px}
.av{width:28px;height:28px;border-radius:8px;flex:none;display:grid;place-items:center;font-size:11.5px;font-weight:700;font-family:'Space Grotesk';background:var(--surface-2);border:1px solid var(--line-soft);color:var(--muted)}
.pts{font-family:'Space Grotesk';font-weight:700;font-variant-numeric:tabular-nums}
.win{font-family:'Space Grotesk';font-weight:700;color:var(--cyan-text);font-size:13.5px}
.board-foot{padding:14px 22px;font-size:13px;color:var(--dim);background:var(--bg-2);border-top:1px solid var(--line-soft)}

/* ---------- prizes ---------- */
.prize-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
@media(max-width:1024px){.prize-grid{grid-template-columns:1fr;gap:32px}}
.prize-rows{display:flex;flex-direction:column;gap:8px}
.prow{display:grid;grid-template-columns:54px 1fr 96px;gap:14px;align-items:center;font-size:14px}
.prow .pl{font-family:'Space Grotesk';font-weight:700;color:var(--muted);font-size:14px}
.prow.top .pl{color:var(--gold-text)}
.pbar{height:11px;background:var(--line-soft);border-radius:99px;overflow:hidden}
.pbar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#ff9d2f);transition:width .25s ease}
.prow:nth-child(n+4) .pbar span{background:linear-gradient(90deg,var(--violet),#5b8cff)}
.cash{font-family:'Space Grotesk';font-weight:700;color:var(--text);text-align:right;font-size:16px;font-variant-numeric:tabular-nums}
.prow.top .cash{color:var(--gold-text);font-size:18px}
.pool-box{padding:26px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--surface);margin-bottom:20px}
.pool-box label{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);font-weight:600;display:block;margin-bottom:12px}
input[type=range]{width:100%;accent-color:var(--gold);height:5px}
.pool-val{font-family:'Space Grotesk';font-size:38px;font-weight:700;color:var(--gold-text);margin-bottom:6px}
.pool-sub{font-size:13.5px;color:var(--dim)}

/* ---------- account ---------- */
.acct{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:1024px){.acct{grid-template-columns:1fr;gap:30px}}
.field-list{display:flex;flex-direction:column;gap:11px}
.field{display:flex;gap:14px;align-items:center;padding:15px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line-soft)}
.field .ic{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.2);font-size:15px}
.field b{font-size:14.5px;font-family:'Space Grotesk';display:block}
.field small{font-size:13px;color:var(--dim)}

/* ---------- modals, toasts, forms ---------- */
.modal-root{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.modal-root[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(4,5,9,.78);backdrop-filter:blur(6px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.modal{
  position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line);border-radius:18px;padding:32px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);animation:rise .22s ease;
}
.modal.wide{width:min(680px,100%)}
.modal-x{
  position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:9px;
  background:rgba(var(--tint-rgb),.04);border:1px solid var(--line-soft);color:var(--muted);
  font-size:17px;cursor:pointer;line-height:1;transition:.15s;
}
.modal-x:hover{background:rgba(var(--tint-rgb),.09);color:var(--text)}
.modal h3{font-size:25px;margin-bottom:8px;padding-right:34px}
.modal .sub{color:var(--muted);font-size:14.5px;margin-bottom:24px}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:6px}
.fld input,.fld select{
  width:100%;padding:12px 14px;border-radius:10px;font-size:14.5px;font-family:inherit;
  background:rgba(var(--tint-rgb),.03);border:1px solid var(--line);color:var(--text);
  transition:.15s;
}
/* The closed select picks up the dark theme above automatically, but the
   dropdown list itself is a separate native layer that browsers don't theme
   from the page - without this it renders with the OS default (white bg,
   near-white text), which is unreadable on a dark site. */
.fld select option{background:var(--bg-2);color:var(--text)}
.fld input:focus,.fld select:focus{outline:none;border-color:var(--gold);background:rgba(var(--tint-rgb),.06)}
.fld input.bad{border-color:var(--red);background:rgba(255,92,92,.06)}
.fld .err{font-size:12.5px;color:var(--red-text);margin-top:5px;display:none}
.fld .err.on{display:block}
.modal .consent{padding:15px 17px;margin-bottom:10px}
.modal .ctext{font-size:13px}
.modal .ctext b{font-size:14px}
.modal .btn{width:100%;margin-top:6px}
.modal-alt{text-align:center;font-size:13.5px;color:var(--dim);margin-top:16px}
.modal-alt a{color:var(--gold-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.form-error{
  padding:12px 15px;border-radius:10px;margin-bottom:16px;font-size:13.5px;display:none;
  background:rgba(255,92,92,.09);border:1px solid rgba(255,92,92,.25);color:var(--danger-text);
}
.form-error.on{display:block}

.summary{border:1px solid var(--line-soft);border-radius:13px;overflow:hidden;margin-bottom:20px}
.summary div{display:flex;justify-content:space-between;padding:13px 17px;font-size:14px;
  border-bottom:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.02)}
.summary div:last-child{border-bottom:none}
.summary span:first-child{color:var(--muted)}
.summary span:last-child{font-family:'Space Grotesk';font-weight:600}
.summary .big span:last-child{color:var(--gold-text);font-size:17px}

.toast-wrap{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:300;
  display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none}
.toast{
  padding:13px 20px;border-radius:11px;font-size:14px;font-weight:500;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  box-shadow:0 16px 40px -14px rgba(0,0,0,.8);animation:rise .2s ease;max-width:90vw;
}
.toast.good{border-color:rgba(46,230,197,.4);background:rgba(46,230,197,.11)}
.toast.bad{border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.11)}

/* signed-in chip in the nav */
.user-chip{display:flex;align-items:center;gap:10px;padding:7px 9px 7px 13px;border-radius:10px;
  border:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.03);font-size:13.5px}
.user-chip b{font-family:'Space Grotesk';color:var(--gold-text)}
.user-chip button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:13px;
  font-family:inherit;padding:2px 6px;border-radius:6px}
.user-chip button:hover{color:var(--text);background:rgba(var(--tint-rgb),.06)}

/* free quiz inside the modal */
.fq-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.fq-meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.fq-score{font-family:'Space Grotesk';font-size:30px;font-weight:700;color:var(--gold-text);
  font-variant-numeric:tabular-nums;line-height:1}
.fq-bar{height:5px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin-bottom:20px}
.fq-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ff9d2f);width:100%}
.fq-q{font-family:'Space Grotesk';font-size:19px;font-weight:600;margin-bottom:18px;line-height:1.4}
.fq-total{text-align:center;padding:8px 0 18px}
.fq-total .n{font-family:'Space Grotesk';font-size:52px;font-weight:700;color:var(--gold-text);line-height:1}
.fq-total .l{font-size:13.5px;color:var(--dim);margin-top:8px}
.fq-review{max-height:240px;overflow-y:auto;margin-bottom:20px;display:flex;flex-direction:column;gap:8px}
.fq-item{padding:12px 15px;border-radius:10px;background:rgba(var(--tint-rgb),.02);
  border:1px solid var(--line-soft);font-size:13px;color:var(--muted)}
.fq-item b{display:block;color:var(--text);font-size:13.5px;margin-bottom:4px;font-family:'Space Grotesk'}
.fq-item .tick{color:var(--cyan-text)}
.fq-item .cross{color:var(--red-text)}

/* active topic pills */
.topic{cursor:pointer;user-select:none}
.topic.on{background:rgba(255,210,63,.13);border-color:var(--gold);color:var(--gold-text)}
.topic-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:20px;font-size:13.5px;color:var(--dim)}
.topic-bar button{background:none;border:1px solid var(--line-soft);color:var(--muted);
  padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}
.topic-bar button:hover{color:var(--text);border-color:var(--hover-border)}

/* ---------- consents ---------- */
.consents{margin-top:52px;padding:34px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--surface)}
.consent-head h3{font-size:24px;margin-bottom:9px}
.consent-head p{color:var(--muted);font-size:15px;margin-bottom:24px;max-width:62ch}
.consent{
  display:flex;gap:15px;align-items:flex-start;padding:19px 21px;margin-bottom:12px;
  border-radius:13px;border:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.02);
  cursor:pointer;transition:.15s;
}
.consent:hover{border-color:var(--hover-border)}
.consent input{position:absolute;opacity:0;width:0;height:0}
.cbox{
  width:22px;height:22px;flex:none;border-radius:7px;margin-top:1px;
  border:1.5px solid var(--checkbox-border);background:rgba(var(--tint-rgb),.03);
  display:grid;place-items:center;transition:.15s;
}
.cbox::after{content:"✓";font-size:13px;font-weight:700;color:#12100a;opacity:0;transition:.15s}
.consent input:checked ~ .cbox{background:var(--gold);border-color:var(--gold)}
.consent input:checked ~ .cbox::after{opacity:1}
.consent input:focus-visible ~ .cbox{outline:2px solid var(--violet);outline-offset:2px}
.ctext{font-size:14px;color:var(--muted);line-height:1.6}
.ctext b{display:block;color:var(--text);font-size:15px;font-family:'Space Grotesk';margin-bottom:5px;font-weight:600}
.ctext a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.fraud-note{
  display:flex;gap:15px;align-items:flex-start;padding:19px 21px;margin:18px 0 24px;
  border-radius:13px;border:1px solid rgba(255,92,92,.22);background:rgba(255,92,92,.05);
  font-size:14px;color:var(--muted);line-height:1.6;
}
.fraud-note b{display:block;color:var(--text);font-size:15px;font-family:'Space Grotesk';margin-bottom:5px;font-weight:600}
.fraud-ic{
  width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:16px;
  background:rgba(255,92,92,.12);border:1px solid rgba(255,92,92,.22);
}
.consents .btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.consent-hint{font-size:13px;color:var(--dim);margin-top:12px}

/* ---------- final cta ---------- */
.final{text-align:center;padding:110px 0;position:relative;overflow:hidden}
.final::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,210,63,.13),transparent 58%);
}
.final .wrap{position:relative;z-index:2}
.final h2{font-size:clamp(34px,5.4vw,58px);font-weight:700;margin-bottom:16px}
.final p{color:var(--muted);font-size:18px;margin-bottom:32px;max-width:46ch;margin-inline:auto}
.final .hero-actions{justify-content:center}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft);padding:52px 0 40px;background:var(--bg-2)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:40px}
@media(max-width:1024px){.f-grid{grid-template-columns:repeat(4,1fr);gap:28px}.f-brand{grid-column:1/-1}}
@media(max-width:720px){.f-grid{grid-template-columns:1fr 1fr}}
.f-brand p{font-size:14px;color:var(--dim);margin-top:14px;max-width:34ch}
.f-col h5{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--text);margin-bottom:14px;font-family:'Space Grotesk'}
.f-col a{display:block;font-size:14px;color:var(--dim);padding:5px 0}
.f-col a:hover{color:var(--text)}
.f-social .f-icons{display:flex;gap:18px;align-items:center;height:31px;margin-bottom:8px}
.f-social .f-icons a{display:flex;padding:6px;margin:-6px}
.f-social .f-icons svg{flex:none}
.f-social a.f-tp-logo{display:inline-block;padding:6px 0}
.f-tp-logo img{display:block;height:24px;width:auto}
.f-tp-logo .tp-light{display:none}
[data-theme="light"] .f-tp-logo .tp-light{display:block}
[data-theme="light"] .f-tp-logo .tp-dark{display:none}
.f-legal{border-top:1px solid var(--line-soft);padding-top:24px;font-size:12.5px;color:var(--dim);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;line-height:1.7}
.age{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--red);color:var(--red-text);font-size:10.5px;font-weight:700;flex:none;font-family:'Space Grotesk'}
.f-legal .warn{display:flex;gap:10px;align-items:center;max-width:62ch}


/* ================= multi-page additions ================= */
.page{padding:56px 0 90px;min-height:60vh}
.page-narrow{max-width:660px;margin:0 auto}
.crumbs{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:22px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
.crumbs span{opacity:.5}
.page h1.ph{font-size:clamp(30px,4.4vw,44px);margin-bottom:12px}
.page .lede{margin-bottom:32px}

.panel{background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:32px}
@media(max-width:640px){.panel{padding:22px}}

.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.frow{grid-template-columns:1fr}}
.fld{margin-bottom:14px}
.fld.full{grid-column:1/-1}
.fld label{display:block;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);font-weight:600;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:13px 15px;border-radius:10px;font-size:15px;
  font-family:inherit;background:rgba(var(--tint-rgb),.03);border:1px solid var(--line);
  color:var(--text);transition:.15s}
.fld textarea{min-height:92px;resize:vertical;line-height:1.5}
.fld select option{background:var(--bg-2);color:var(--text)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--gold);background:rgba(var(--tint-rgb),.06)}
.fld input.bad{border-color:var(--red);background:rgba(255,92,92,.06)}
.fld textarea::placeholder{color:var(--dim)}
.fld .err{font-size:12.5px;color:var(--red-text);margin-top:6px;display:none}
.fld .err.on{display:block}
.form-error{padding:13px 16px;border-radius:10px;margin-bottom:20px;font-size:14px;display:none;
  background:rgba(255,92,92,.09);border:1px solid rgba(255,92,92,.25);color:var(--danger-text)}
.form-error.on{display:block}
.form-note{font-size:13.5px;color:var(--dim);margin-top:16px;text-align:center}
.form-note a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}
button.btn{font-family:'Inter',sans-serif}
.btn-block{width:100%;margin-top:8px}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

.summary{border:1px solid var(--line-soft);border-radius:13px;overflow:hidden;margin-bottom:22px}
.summary div{display:flex;justify-content:space-between;gap:16px;padding:14px 18px;font-size:14.5px;
  border-bottom:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.02)}
.summary div:last-child{border-bottom:none}
.summary span:first-child{color:var(--muted)}
.summary span:last-child{font-family:'Space Grotesk';font-weight:600;text-align:right}
.summary .big span:last-child{color:var(--gold-text);font-size:18px}

.notice{display:flex;gap:15px;align-items:flex-start;padding:18px 20px;border-radius:13px;
  margin-bottom:22px;font-size:14px;color:var(--muted);line-height:1.6;
  border:1px solid var(--line);background:rgba(var(--tint-rgb),.02)}
.notice b{display:block;color:var(--text);font-size:15px;font-family:'Space Grotesk';
  margin-bottom:5px;font-weight:600}
.notice .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;
  font-size:16px;background:rgba(124,92,255,.12);border:1px solid rgba(124,92,255,.22)}
.notice.warn{border-color:rgba(255,92,92,.22);background:rgba(255,92,92,.05)}
.notice.warn .ic{background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.22)}

.consent{display:flex;gap:15px;align-items:flex-start;padding:19px 21px;margin-bottom:12px;
  border-radius:13px;border:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.02);
  cursor:pointer;transition:.15s}
.consent:hover{border-color:var(--hover-border)}
.consent input{position:absolute;opacity:0;width:0;height:0}
.cbox{width:22px;height:22px;flex:none;border-radius:7px;margin-top:1px;border:1.5px solid var(--checkbox-border);
  background:rgba(var(--tint-rgb),.03);display:grid;place-items:center;transition:.15s}
.cbox::after{content:"✓";font-size:13px;font-weight:700;color:#12100a;opacity:0;transition:.15s}
.consent input:checked ~ .cbox{background:var(--gold);border-color:var(--gold)}
.consent input:checked ~ .cbox::after{opacity:1}
.consent input:focus-visible ~ .cbox{outline:2px solid var(--violet);outline-offset:2px}
.ctext{font-size:14px;color:var(--muted);line-height:1.6}
.ctext b{display:block;color:var(--text);font-size:15px;font-family:'Space Grotesk';
  margin-bottom:5px;font-weight:600}
.ctext a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}

.user-chip{display:flex;align-items:center;gap:10px;padding:7px 13px;border-radius:10px;
  border:1px solid var(--line-soft);background:rgba(var(--tint-rgb),.03);font-size:13.5px;
  color:var(--muted);white-space:nowrap}
a.user-chip{text-decoration:none}
a.user-chip:hover{border-color:var(--line)}
.user-chip b{font-family:'Space Grotesk';color:var(--gold-text)}
/* Hiding this below 900px moved to the scoped ".nav-cta .user-chip" rule in
   the nav section above - it now reappears in the mobile drawer instead of
   just disappearing (see .nav-drawer-auth .user-chip there). */

.hero-ok{text-align:center;padding:20px 0 8px}
.hero-ok .tickmark{width:70px;height:70px;border-radius:50%;margin:0 auto 22px;display:grid;
  place-items:center;font-size:32px;background:rgba(46,230,197,.12);
  border:1px solid rgba(46,230,197,.3);color:var(--cyan-text)}
.next-steps{display:grid;gap:10px;margin:26px 0}
.next-steps a{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:16px 19px;border-radius:12px;border:1px solid var(--line-soft);
  background:rgba(var(--tint-rgb),.02);font-size:14.5px;transition:.15s}
.next-steps a:hover{border-color:var(--gold);background:rgba(255,210,63,.06)}
.next-steps a span:last-child{color:var(--gold-text);font-weight:600}

.topic{cursor:pointer;user-select:none}
.topic.on{background:rgba(255,210,63,.13);border-color:var(--gold);color:var(--gold-text)}
.topic-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:20px;font-size:13.5px;color:var(--dim)}
.topic-bar button{background:none;border:1px solid var(--line-soft);color:var(--muted);
  padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit}
.topic-bar button:hover{color:var(--text);border-color:var(--hover-border)}

.q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.q-meta{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.q-score{font-family:'Space Grotesk';font-size:36px;font-weight:700;color:var(--gold-text);
  font-variant-numeric:tabular-nums;line-height:1}
.q-bar{height:6px;background:var(--line-soft);border-radius:99px;overflow:hidden;margin-bottom:24px}
.q-fill{height:100%;background:linear-gradient(90deg,var(--gold),#ff9d2f);width:100%}
.q-text{font-family:'Space Grotesk';font-size:22px;font-weight:600;margin-bottom:22px;line-height:1.4}
.q-total{text-align:center;padding:10px 0 20px}
.q-total .n{font-family:'Space Grotesk';font-size:56px;font-weight:700;color:var(--gold-text);line-height:1}
.q-total .l{font-size:14px;color:var(--dim);margin-top:8px}
.q-review{display:flex;flex-direction:column;gap:9px;margin-bottom:24px}
.q-item{padding:13px 16px;border-radius:11px;background:rgba(var(--tint-rgb),.02);
  border:1px solid var(--line-soft);font-size:13.5px;color:var(--muted)}
.q-item b{display:block;color:var(--text);font-size:14px;margin-bottom:4px;font-family:'Space Grotesk'}
.q-item .tick{color:var(--cyan-text)}.q-item .cross{color:var(--red-text)}

/* ---------- question screen: small-phone tightening ----------
   compete.html/free-quiz.html keep the crumbs, tier legend and lede on screen
   above the question panel the whole time, which on a small phone can push
   a long question's answer options below the fold - the exact "have to
   scroll to see all the answers" issue reported during testing. This
   doesn't try to force every question onto one screen (a genuinely long
   one will still need a scroll on a small phone, which is fine) - it claws
   back enough vertical space that a normal-length question with 4 options
   fits without scrolling on most phones, and long ones need less of it. */
@media(max-width:640px){
  .page{padding:32px 0 60px}
  .crumbs{margin-bottom:16px}
  .page h1.ph{font-size:26px;margin-bottom:8px}
  /* compete.html sets both of these inline (desktop-tuned values), which beats
     any stylesheet rule regardless of media query - !important is the only
     way to actually tighten them for small screens rather than silently
     no-op-ing here. */
  .cal-bar{margin-bottom:8px!important}
  .page .lede{margin-bottom:16px!important}
  .q-head{margin-bottom:10px}
  .q-score{font-size:26px}
  .q-bar{margin-bottom:14px}
  .q-text{font-size:18px;margin-bottom:14px;line-height:1.32}
  .demo-opts{gap:7px}
  .opt{padding:11px 14px;font-size:14px}
}
@media(max-width:480px){
  .q-text{font-size:16.5px}
  .opt{padding:9px 12px;font-size:13.5px}
  .demo-opts{gap:6px}
  .q-score{font-size:23px}
  .q-meta{font-size:11px}
}

.prose p{color:var(--muted);margin-bottom:16px;font-size:15.5px;text-align:justify;text-justify:inter-word}
/* faq.html's two section headings (soft-launch questions / general
   questions) - only on screen while the free preview is on. */
.faq-section{font-size:26px;margin:0 0 6px}
.faq-section-note{color:var(--muted);font-size:15.5px;margin:0 0 16px}
#previewFaq .panel{margin-bottom:38px}
.prose h3{font-size:19px;margin:28px 0 10px}
.prose ul{color:var(--muted);padding-left:20px;margin-bottom:16px;font-size:15.5px}
.prose li{margin-bottom:8px}
.prose a{color:var(--gold-text);text-decoration:underline;text-underline-offset:3px}

/* Show/hide toggle on every password field - see LQ.wirePasswordToggles() */
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:58px}
.pw-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;
  border:none;color:var(--gold-text);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;padding:8px 9px;border-radius:6px}
.pw-toggle:hover{background:rgba(var(--tint-rgb),.06)}
.pw-toggle:focus-visible{outline:2px solid var(--violet);outline-offset:1px}

/* ---------- mandatory Terms/Privacy re-acceptance popup ----------
   See livequiz-site/assets/legal-popup.js. Reuses .modal-root/.modal-
   backdrop/.modal/.notice/.notice.warn/.btn/.form-error/.eyebrow above -
   this is the one new rule the popup actually needs: unlike every other
   modal on the site (which nothing here currently scroll-locks the body
   for), this one is mandatory and has no close button, so the background
   must not be scrollable behind it either. */
body.legal-locked{overflow:hidden}

/* ---------- free-preview welcome popup (soft launch) ----------
   See livequiz-site/assets/preview-popup.js. Same shared modal shell and the
   same body.legal-locked scroll lock as the popup above. */
.preview-modal h3{padding-right:0}
.preview-modal .sub{margin-bottom:16px}
.preview-points{color:var(--muted);font-size:14.5px;padding-left:20px;margin:0 0 18px}
.preview-points li{margin-bottom:8px}
.preview-modal .notice{margin-bottom:18px}
.preview-modal:focus{outline:none}
/* A first-time visitor would otherwise get this popup AND the cookie banner
   (assets/consent.js, fixed to the bottom, above every modal) at once, with
   the banner sitting on top of the popup's buttons. One thing at a time: the
   banner waits until the popup has been answered. No tags load meanwhile -
   they only ever load after "Accept". */
body.preview-open .ck-bar{display:none !important}
@media(max-width:520px){
  .preview-modal{padding:24px 20px}
  .preview-modal h3{font-size:21px}
}

/* ---------- phones (iPhone and similar) ----------
   One header row on a phone: the Q mark stands in for the full
   "LiveQuiz Arena" wordmark (its text is a bare text node in every page's
   markup, hence font-size:0 on .logo with the size restored on .mark), so
   the logo, the buttons and the burger fit side by side instead of the
   buttons dropping onto a second line. */
@media(max-width:480px){
  .logo{font-size:0;gap:0}
  .logo .mark{font-size:15px;width:32px;height:32px}
  .nav{min-height:60px}
  .nav-right{gap:8px}
  .nav-cta{gap:8px}
  .nav-cta .btn{padding:9px 13px;font-size:13px}
}
/* Very narrow screens, or an iPhone with a larger text size: the signed-in
   chip already links to the account page and the drawer has the full
   menu, so the separate Account / Sign in buttons step aside. */
@media(max-width:360px){
  .nav-cta .btn-ghost{display:none}
}
/* iOS Safari zooms the whole page in when a text box with text smaller than
   16px gets focus - the page then jumps sideways and seems to freeze. 16px
   on phones stops that everywhere (sign-in, sign-up, code, help chat). */
@media(max-width:640px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}

/* ---------- account page: plan at a glance ---------- */
.glance{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:0 0 18px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-2) 100%)}
.glance-num{font-family:'Space Grotesk';font-weight:700;font-size:30px;line-height:1;color:var(--gold-text)}
.glance-main{display:flex;align-items:center;gap:12px}
.glance-txt{display:flex;flex-direction:column;gap:2px}
.glance-txt b{color:var(--text);font-size:15px}
.glance-txt span{color:var(--muted);font-size:13.5px}
.glance .btn{padding:10px 16px;font-size:14px}
@media(max-width:480px){.glance .btn{width:100%}}

/* ---------- free-quiz leaderboards ----------
   leaderboard.html, the homepage "Who's on top this week" block and the
   free-quiz.html results screen. Built on the existing .board component
   (see "leaderboard" above) and the theme tokens, so light and dark both
   work with no extra rules. Correct answers use --cyan-text (same as the
   correct-answer tick), streaks --tier-hard. */
.nav-new{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:99px;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;
  background:rgba(255,210,63,.16);color:var(--gold-text)}
.lb-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}
.lb-seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;
  background:rgba(var(--tint-rgb),.04);border:1px solid var(--line-soft)}
.lb-seg button{min-height:42px;padding:0 16px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);font:600 14px 'Inter',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.lb-seg button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.lb-seg button:disabled{cursor:not-allowed;color:var(--dim)}
.lb-soon{padding:2px 8px;border-radius:99px;background:var(--line-soft);color:var(--dim);font-size:10.5px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.lb-tabs{display:flex;gap:8px;flex-wrap:wrap}
.lb-tabs button{min-height:42px;padding:0 16px;border-radius:11px;border:1px solid var(--line-soft);
  background:var(--surface);color:var(--muted);font:600 14px 'Inter',sans-serif;cursor:pointer}
.lb-tabs button[aria-selected="true"]{background:rgba(255,210,63,.12);border-color:rgba(255,210,63,.45);color:var(--gold-text)}
.lb-period{font-size:14.5px;color:var(--dim);margin-bottom:20px}
.lb-layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.lb-main{flex:999 1 560px;min-width:0}
.lb-side{flex:1 1 300px;display:flex;flex-direction:column;gap:16px;min-width:0}
.lb-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.lb-podium .card{padding:18px;min-width:0}
.lb-podium .card.first{border-color:rgba(255,210,63,.55)}
.lb-podium .pl{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.lb-podium .nm{font-family:'Space Grotesk';font-weight:700;font-size:19px;margin-top:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-podium .pp{font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--gold-text);margin-top:4px}
.lb-podium .cc{font-size:13px;color:var(--cyan-text);margin-top:2px}
@media(max-width:640px){
  .lb-podium{gap:8px}.lb-podium .card{padding:12px 10px}
  .lb-podium .nm{font-size:15px}.lb-podium .pp{font-size:15px}
}
.board.lb .board-head,.board.lb .board-row{grid-template-columns:56px minmax(0,1fr) 96px 60px 76px 96px}
.board.lb.compact .board-head,.board.lb.compact .board-row{grid-template-columns:48px minmax(0,1fr) 96px 100px}
@media(max-width:640px){
  .board.lb .board-head,.board.lb .board-row,
  .board.lb.compact .board-head,.board.lb.compact .board-row{grid-template-columns:34px minmax(0,1fr) 64px 72px;padding:12px 13px;gap:8px}
}
.board.lb .pname-cell{min-width:0}
.board.lb .pname-cell .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board.lb .r{text-align:right}
.lb-correct{color:var(--cyan-text);font-variant-numeric:tabular-nums}
.lb-streak{color:var(--tier-hard)}
.lb-guest{padding:1px 7px;border-radius:99px;border:1px solid var(--line);color:var(--dim);font-size:10.5px;font-weight:600;flex:none}
.board-divider{padding:9px 22px;text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-text);font-weight:600;background:var(--bg-2);border-bottom:1px solid var(--line-soft)}
.lb-card{padding:22px}
.lb-card .k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.lb-card h3{font-family:'Space Grotesk';font-size:19px;margin:6px 0 0}
.lb-card p{color:var(--muted);font-size:14.5px;margin-top:6px}
.lb-card .btn{width:100%;margin-top:14px}
.lb-big{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.lb-big b{font-family:'Space Grotesk';font-size:46px;line-height:1.1;color:var(--gold-text)}
.lb-big span{color:var(--muted)}
.lb-stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-soft);border-radius:12px;margin-top:14px;overflow:hidden}
.lb-stats > div{padding:12px 14px}
.lb-stats > div + div{border-left:1px solid var(--line-soft)}
.lb-stats .v{font-family:'Space Grotesk';font-weight:700;font-size:20px;margin-top:2px}
.lb-gap{margin-top:14px;padding:12px 14px;border-radius:11px;background:rgba(255,210,63,.1);
  border:1px solid rgba(255,210,63,.3);color:var(--gold-text);font-weight:600;font-size:15px}
.lb-note{font-size:13.5px;color:var(--dim);margin-top:14px;line-height:1.55}
.lb-empty{padding:28px 22px;text-align:center;color:var(--muted)}
.lb-progress{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:14px}
.lb-progress span{display:block;height:100%;border-radius:99px;background:var(--gold)}
.lb-progress-l{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:6px}
.lb-set{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.lb-set .consent{margin:0}
/* free-quiz.html results additions */
.fq-vs{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;margin-bottom:16px;
  background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-text);font-weight:600;font-size:15px}
.fq-vs.down{background:rgba(var(--tint-rgb),.04);border-color:var(--line-soft);color:var(--muted)}
.fq-cards{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.fq-streak{display:flex;align-items:center;gap:12px}
.fq-streak .ico{width:46px;height:46px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,157,47,.12);color:var(--tier-hard);font-family:'Space Grotesk';font-weight:700;font-size:20px}
.fq-days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px;text-align:center}
.fq-days i{display:grid;place-items:center;width:34px;height:34px;margin:0 auto;border-radius:50%;font-style:normal;
  font-size:13px;font-weight:700;border:2px dashed var(--line);color:var(--dim)}
.fq-days i.on{border:0;background:rgba(255,157,47,.14);color:var(--tier-hard)}
.fq-days i.today{border:0;background:var(--gold);color:#12100a}
.fq-days small{display:block;font-size:12px;color:var(--dim);margin-top:4px}
.fq-pitch{padding:14px 16px;border-radius:12px;background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.3);margin-bottom:12px}
.fq-pitch b{display:block;font-family:'Space Grotesk';font-size:18px;color:var(--gold-text)}
.fq-pitch span{font-size:14px;color:var(--muted)}
.fq-save{border:2px solid rgba(255,210,63,.6)}
.fq-choice{display:flex;gap:8px;margin:-2px 0 6px 34px}
.fq-choice label{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;
  border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer}
.fq-choice input{accent-color:var(--gold)}

/* ---------- ghosts (backend app/ghosts.py) ----------
   Labelled practice opponents in paid competitions. Violet so they read
   as clearly different from real participants in both themes. */
:root{--ghost-text:#b9a8ff;--ghost-bg:rgba(124,92,255,.12);--ghost-line:rgba(124,92,255,.3)}
[data-theme="light"]{--ghost-text:#5a3fc4;--ghost-bg:rgba(106,76,224,.08);--ghost-line:rgba(106,76,224,.28)}
.ghost-note{font-size:12.5px;font-weight:600;color:var(--ghost-text);margin-top:4px}

/* Share your result row (assets/share.js), free quiz and competition results */
.fq-share{margin:20px 0 8px;text-align:center}
.fq-share h3{margin:0 0 4px;font-size:17px}
.fq-share p{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.fq-share .srow{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fq-share .sb{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:0;padding:0;cursor:pointer;text-decoration:none;color:#fff;font:inherit}
.fq-share .sb svg{width:18px;height:18px}
.fq-share .sb:hover{filter:brightness(1.15)}
.fq-share .smsg{min-height:20px;margin-top:10px;font-size:13px;color:var(--gold-text)}