/* topic-page.css — shared stylesheet for /quiz/<topic> and /quiz/.
   Lifted from home.html's inline <style> with nothing retuned: the same tokens,
   type, spacing, breakpoints (760 / 900) and reveal system. What is NEW here is
   marked NEW and listed in the notes. Scenes the topic card does not use
   (bloom, versus, achievement, in-card levels) are dropped, not changed. */
:root{--teal:#12403A;--accentTeal:#1F8A75;--tealPressed:#16705E;--ctaShadow:#0E5346;--paper:#FFF9F0;--surface:#FFFCF7;--rule:#EFE4D2;--ink:#1F1A14;--muted:#6B5E4D;--faint:#A89C88;--gold:#E8B547;--goldDeep:#C7952F;--blue:#5B8FB2;--green:#5C9F6E;--wrong:#CC5A4E;--cardH:392px;--r1:#5C9F6E;--r2:#8CAA52;--r3:#E8B547;--r4:#E8784E;--r5:#C9471C}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--teal);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:16px;line-height:1.5;text-wrap:pretty}
h1,h2,h3,.num{font-family:Fraunces,Georgia,serif;font-weight:600;letter-spacing:-0.01em;line-height:1.02;margin:0}
p{margin:0}
a{color:var(--accentTeal);text-decoration:none}
a:hover{color:var(--tealPressed)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.onTeal{background:var(--teal);color:var(--paper)}
.eyebrow{font-size:0.82rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FC4B5}
h2.sec{font-size:clamp(1.9rem,7vw,2.8rem);max-width:15ch;color:var(--paper)}
.lede{margin-top:14px;font-size:1.05rem;color:#CFE2DC;max-width:44ch}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:Inter;font-weight:700;font-size:1.02rem;border:0;border-radius:999px;padding:16px 30px;cursor:pointer;background:var(--accentTeal);color:#FFFCF7;box-shadow:0 4px 0 var(--ctaShadow);transition:transform .08s ease,box-shadow .08s ease}
.btn:hover{background:var(--tealPressed);color:#FFFCF7}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ctaShadow)}
.btn.sm{padding:11px 20px;font-size:0.94rem;box-shadow:0 3px 0 var(--ctaShadow)}
.btn.sm:active{box-shadow:0 1px 0 var(--ctaShadow)}
nav{position:sticky;top:0;z-index:30;background:rgba(18,64,58,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,249,240,.12)}
.navIn{display:flex;align-items:center;gap:16px;height:60px}
.mark{display:flex;align-items:center;gap:10px;color:var(--paper);font-family:Fraunces;font-weight:600;font-size:1.18rem}
.mark:hover{color:var(--paper)}
.glyph{width:32px;height:32px;border-radius:9px;flex:none;display:block}
.navLinks{display:none;gap:26px;margin-left:auto}
.navLinks a{color:#D9E7E2;font-size:0.94rem;font-weight:500}
.navLinks a:hover{color:#fff}
.navIn .btn{margin-left:auto}
@media(min-width:760px){.navLinks{display:flex}.navIn .btn{margin-left:26px}}
/* scrolly */
.scrolly{position:relative}
.stickyWrap{position:sticky;top:60px;z-index:10;background:var(--teal);padding:14px 0 18px;box-shadow:0 18px 26px -18px rgba(0,0,0,.6)}
.panels{display:grid}
.panel{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding:34px 0}
.panel:first-child{min-height:0;padding:28px 0 24px}
.ctaRow{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.storeBadge{display:inline-block;line-height:0;border-radius:10px;flex:none}
.storeBadge img{height:56px;width:auto;display:block}
.android .storeBadge{display:none}
@media(max-width:520px){.ctaRow{gap:13px}.ctaRow .btn{padding:14px 20px;font-size:0.98rem}.storeBadge img{height:50px}}
.cue{position:fixed;z-index:15;left:0;right:0;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;justify-content:center;pointer-events:none;color:#9FCBBE;transition:opacity .4s ease}
#cue.gone{opacity:0}
.cueArw{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(159,203,190,.45);color:#CFE2DC;animation:cueBob 1.9s ease-in-out infinite}
.cueArw svg{width:17px;height:17px;display:block}
@keyframes cueBob{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
h1{font-size:clamp(2.4rem,9.5vw,4.3rem);color:var(--paper);max-width:12ch}
/* NEW — the hero's paragraph. The homepage's .hSub measure is 34ch, which is a
   one-line character note; this carries the topic's opening paragraph above the
   fold, so it runs to a reading measure instead. Same scale, same colour. */
.hSub{margin-top:16px;font-size:clamp(1.02rem,3.6vw,1.22rem);color:#CFE2DC;max-width:46ch;line-height:1.45}
/* NEW — edition line. Sits above the h1, quiet, in the eyebrow's slot so the
   hero keeps the homepage's three-part rhythm (label / headline / sub). */
.edition{display:flex;align-items:center;gap:8px;font-size:0.86rem;font-weight:600;color:#8FC4B5;letter-spacing:.01em;margin-bottom:12px}
.edition em{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
@media(min-width:900px){
 :root{--cardH:max(392px,min(474px,62vh))}
 .scrolly .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
 .stickyWrap{position:sticky;top:calc(30px + 50vh - var(--cardH) / 2);padding:0;background:none;box-shadow:none;order:2}
 .panels{order:1}
 .panel{min-height:86vh}
 .panel:first-child{min-height:74vh;padding:0}
}
/* app card */
.app{position:relative;height:var(--cardH);background:var(--paper);color:var(--ink);border-radius:20px;max-width:430px;margin:0 auto;width:100%;box-shadow:0 26px 54px -24px rgba(0,0,0,.6);overflow:hidden}
.scene{position:absolute;inset:0;padding:16px;display:flex;flex-direction:column;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.3,1);pointer-events:none}
.scene.on{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .scene{position:static;opacity:1;transform:none;border-top:1.5px solid var(--rule)}
html:not(.js) .app{height:auto}
.sTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sTitle{display:flex;align-items:center;gap:8px;font-family:Fraunces;font-weight:600;font-size:1.06rem}
.sMeta{font-size:0.85rem;font-weight:600;color:var(--muted)}
.score{font-family:Fraunces;font-weight:600;font-size:1.25rem;color:var(--tealPressed);font-variant-numeric:tabular-nums}
.score span{font-family:Inter;font-size:0.82rem;font-weight:600;color:var(--muted)}
/* question / reveal frame */
.qHead{display:flex;align-items:center;gap:9px}
.qn{font-family:Fraunces;font-weight:600;font-size:1.06rem}
.qn i{font-style:normal;color:var(--muted);font-size:0.88rem}
.catPill{font-size:0.84rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 9px;border-radius:999px}
.qTime{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-family:Fraunces;font-weight:600;font-size:1rem;color:var(--muted)}
.qTime em{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.tickRow{display:flex;gap:3px;margin:11px 0 12px}
.tickRow i{flex:1;height:4px;border-radius:2px;background:var(--rule);transition:background .3s}
.q{font-family:Fraunces;font-weight:600;font-size:1.28rem;line-height:1.18;letter-spacing:-0.015em}
.opts{display:grid;gap:8px;margin-top:11px}
.opt{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1.6px solid var(--rule);font-size:0.94rem;font-weight:600;transition:background .25s,border-color .25s,opacity .25s}
.opt b{width:25px;height:25px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--rule);color:var(--muted);font-family:Fraunces;font-weight:600;font-size:0.86rem}
.opt>span:not(.mk){flex:1;min-width:0}
.opt .mk{width:18px;flex:none;display:grid;place-items:center;font-weight:800}
.opt.dim{color:var(--muted)}
.opt.right{background:rgba(92,159,110,.14);border-color:rgba(92,159,110,.55)}
.opt.right b{background:var(--green);border-color:var(--green);color:#fff}
.opt.right .mk{color:var(--green)}
.opt.wrong{background:rgba(204,90,78,.13);border-color:rgba(204,90,78,.5)}
.opt.wrong b{background:var(--wrong);border-color:var(--wrong);color:#fff}
.opt.wrong .mk{color:var(--wrong)}
.sFoot{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto;padding-top:12px}
.sFoot .pop{font-family:Fraunces;font-size:1.2rem;color:#3E7A54;opacity:0;transform:translateY(6px);transition:.3s}
.sFoot .pop.show{opacity:1;transform:translateY(-4px)}
/* five-level graphic — home.html, unchanged. The homepage's live-round ring is
   dropped: nothing is in progress on a topic page. The ground each round covers
   is authored as HTML in place of the homepage's "Questions 1–10". */
.levels{display:grid;gap:7px;margin-top:12px;flex:1;align-content:center}
.lvl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;padding:7px 11px;border-radius:14px;background:var(--surface);border:1.5px solid var(--rule);opacity:0;transform:translateX(-10px);transition:opacity .45s,transform .45s cubic-bezier(.2,.8,.3,1)}
.lvl.in{opacity:1;transform:none}
.lvlDot{position:relative;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:Fraunces;font-weight:600;font-size:0.88rem;color:#1F1A14;flex:none}
.lvlName{font-size:0.96rem;font-weight:700;line-height:1.25}
.lvlQs{display:block;font-size:0.82rem;font-weight:500;color:var(--muted);line-height:1.25}
.meter{display:flex;gap:3px;flex:none}
.meter i{width:6px;height:18px;border-radius:3px;background:var(--rule)}
/* scoring interstitial — home.html's .ach, now with the run-up it was missing.
   The question is answered on screen, the correct option is marked, and then the
   clock itself LIFTS out of the foot of the card and becomes the number: one
   continuous object, so it is legible that the big figure is the time that was
   left on the timer. Measured at runtime (FLIP), so it lands correctly at both
   card heights. */
.ach{padding:16px}
.achQ{display:flex;flex-direction:column;flex:1;transition:opacity .34s ease,transform .38s cubic-bezier(.2,.8,.3,1)}
.achQ.gone{opacity:0;transform:translateY(-12px) scale(.98)}
.achWin{position:absolute;left:16px;right:16px;top:16px;bottom:16px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;pointer-events:none}
.achWin>*{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.3,1)}
.achWin.on>*{opacity:1;transform:none}
.achWin.on .achSlot{opacity:0}
.achSlot{visibility:hidden}
.achClock{margin-top:12px;display:flex;align-items:center;gap:10px;transition:opacity .3s ease}
.achClock.gone{opacity:0}
.achTrack{flex:1;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.achTrack i{display:block;height:100%;width:100%;border-radius:3px;background:var(--accentTeal);transform-origin:left center}
.achLive{position:absolute;left:16px;bottom:16px;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1rem;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;transform-origin:left top;transition:transform .62s cubic-bezier(.22,1,.36,1),color .4s ease}
.achLive span{font-size:0.82rem;color:var(--faint);margin-left:2px}
.achLive.lift{color:var(--accentTeal)}
.achLive.lift span{color:var(--muted)}
.achEyebrow{display:inline-flex;align-items:center;gap:7px;font-size:0.84rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#3E7A54}
.achEyebrow svg{width:15px;height:15px;display:block}
.achHead{font-family:Fraunces;font-weight:600;font-size:1.5rem;letter-spacing:-0.01em;line-height:1.02;margin-top:6px}
.achNum{font-family:Fraunces;font-weight:600;font-size:4.6rem;line-height:1;color:var(--accentTeal);margin-top:8px;font-variant-numeric:tabular-nums}
.achNum span{font-size:0.33em;color:var(--muted);margin-left:4px}
.achSup{font-size:0.94rem;color:var(--muted);font-weight:600;margin-top:8px}
/* answer sheet — zip-blitz-versus-and-answer-sheet.md §2 */
.asHead{display:flex;align-items:baseline;justify-content:center;gap:8px;text-align:center;padding:0 16px 7px;border-bottom:1px solid var(--rule);margin:0 -16px 9px}
.asTitle{font-family:Fraunces;font-weight:600;font-size:1rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.asEyebrow{font-size:0.82rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.asStrip{display:none;background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:12px;margin-bottom:12px}
.asStrip.fits{display:flex;align-items:stretch}
.asScore{flex:1;min-width:0;text-align:center}
.asScore .n{font-family:Fraunces;font-weight:600;font-size:1.5rem;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.asScore .n small{font-size:0.82rem;font-weight:600;color:var(--muted)}
.asScore.win .n{color:var(--accentTeal)}
.asScore .p{font-size:0.9rem;font-weight:600;color:var(--muted);margin-top:1px}
.asScore .l{font-size:0.82rem;font-weight:600;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asDiv{width:1.5px;background:var(--rule);flex:none;margin:0 8px}
.asQ{background:var(--surface);border:1.5px solid var(--rule);border-radius:14px;padding:12px;max-width:100%;opacity:0;transform:translateY(30px);transition:opacity .52s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1)}
.asQ.in{opacity:1;transform:none}
.asEye{font-size:0.82rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.asQT{font-family:Fraunces;font-weight:600;font-size:1rem;color:var(--ink);margin:5px 0 10px;line-height:1.3}
.asOpts{display:flex;flex-direction:column;gap:6px}
.asOpt{position:relative;overflow:hidden;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:11px;border:1.5px solid var(--rule);background:var(--paper);font-size:0.9rem;color:var(--ink)}
.asBar{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--rule);opacity:.55;pointer-events:none;transition:width .7s cubic-bezier(.22,1,.36,1)}
.asOpt.right{border-color:#5C9F6E;background:color-mix(in srgb,#5C9F6E 8%,var(--paper))}
.asOpt.right .asBar{background:#5C9F6E;opacity:.18}
.asOpt.mineWrong{border-color:#D1544A;background:color-mix(in srgb,#D1544A 7%,var(--paper))}
.asOpt.mineWrong .asBar{background:#D1544A;opacity:.15}
.asOptT{position:relative;flex:1;min-width:0;overflow-wrap:anywhere}
.asTick{position:relative;flex:none;color:#3E7A54;font-weight:700}
.asPct{position:relative;flex:none;font-size:0.82rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.asPile{position:relative;flex:none;display:flex;align-items:center}
.asBadge{box-sizing:border-box;width:28px;height:28px;border-radius:50%;margin-left:4px;display:flex;align-items:center;justify-content:center;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:0.82rem;overflow:hidden;flex:none}
.asBadge:first-child{margin-left:0}
.asBadge img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;min-width:0;min-height:0;display:block}
.asStats{display:none;flex-wrap:wrap;gap:6px}
.asStats.fits{display:flex}
.asStats:not(:empty){margin-top:9px}
.asStat{font-size:0.82rem;font-weight:600;color:var(--muted);background:var(--paper);border:1.5px solid var(--rule);border-radius:999px;padding:4px 10px;opacity:0;transform:scale(.42);transition:opacity .46s cubic-bezier(.34,1.56,.64,1),transform .46s cubic-bezier(.34,1.56,.64,1)}
.asStat.in{opacity:1;transform:none}
.asStat.rare{color:#3E7A54;border-color:color-mix(in srgb,#5C9F6E 45%,transparent);background:color-mix(in srgb,#5C9F6E 10%,var(--paper))}
/* leaderboard */
.ping{position:relative;width:9px;height:9px;flex:none}
.ping i{position:absolute;inset:0;border-radius:50%;background:var(--green)}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--green);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.7);opacity:.7}70%,100%{transform:scale(2.2);opacity:0}}
.ticker{min-height:20px;display:flex;align-items:center;gap:7px;margin-top:7px;font-size:0.84rem;font-weight:600;color:var(--tealPressed)}
.ticker>.tkIco,.ticker>#tkText{opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s cubic-bezier(.2,.7,.3,1)}
.ticker.show>.tkIco,.ticker.show>#tkText{opacity:1;transform:none}
.tkIco{width:14px;height:14px;flex:none;color:var(--accentTeal)}
.tkIco svg{width:14px;height:14px;display:block}
.lbNow{margin-left:auto;white-space:nowrap}
.lbNow.isLive{color:var(--tealPressed)}
.lbBox{position:relative;flex:1;margin-top:8px}
.lbRow{position:absolute;left:0;right:0;height:40px;display:grid;grid-template-columns:20px 28px 1fr auto;gap:10px;align-items:center;padding:0 2px;border-bottom:1.5px solid var(--rule);transition:transform .5s cubic-bezier(.2,.7,.3,1),background .6s ease}
.lbRow.flash{background:rgba(31,138,117,.06)}
.lbRow .rk{font-family:Fraunces;font-weight:700;font-size:0.88rem;text-align:center;color:var(--ink)}
.lbRow .avv{width:28px;height:28px;border-radius:50%;background:var(--faint);color:#fff;box-sizing:border-box;overflow:hidden;display:grid;place-items:center;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:0.82rem}
.lbRow .avv img{width:100%;height:100%;aspect-ratio:1;min-width:0;min-height:0;object-fit:cover;display:block}
.lbRow .nmw{min-width:0}
.lbRow .tr{display:block;font-size:0.82rem;font-weight:600;color:var(--muted);line-height:1.2}
.lbRow .nm{display:block;font-size:0.92rem;font-weight:600;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbRow .sc{font-family:Fraunces;font-weight:600;font-size:0.98rem;color:var(--tealPressed);font-variant-numeric:tabular-nums}
/* NEW — empty board. Three waiting rows at the board's own 40px pitch, so the
   shape of a real board is legible, then the invitation. Dashed to read as
   unfilled rather than loading; rank 1 is teal because that is the seat on offer. */
.lbEmpty{flex:1;margin-top:8px;display:flex;flex-direction:column}
.lbGhost{display:grid;grid-template-columns:20px 28px 1fr auto;gap:10px;align-items:center;height:40px;padding:0 2px;border-bottom:1.5px dashed #E4D8C4}
.lbGhost .rk{font-family:Fraunces;font-weight:700;font-size:0.88rem;text-align:center;color:var(--faint)}
.lbGhost:first-child .rk{color:var(--accentTeal)}
.lbGhost .gav{width:28px;height:28px;border-radius:50%;border:1.5px dashed #DFD2BC}
.lbGhost:first-child .gav{border-color:var(--accentTeal)}
.lbGhost .gnm{height:8px;border-radius:4px;background:var(--rule);max-width:118px}
.lbGhost:nth-child(2) .gnm{max-width:92px}
.lbGhost:nth-child(3) .gnm{max-width:104px}
.lbGhost .gsc{width:34px;height:8px;border-radius:4px;background:var(--rule)}
.lbInvite{margin-top:auto;padding-top:14px}
.lbInvite b{display:block;font-family:Fraunces;font-weight:600;font-size:1.12rem;line-height:1.15;color:var(--ink)}
.lbInvite span{display:block;margin-top:6px;font-size:0.88rem;color:var(--muted);max-width:30ch}
/* NEW — the standing record, in the hero. Real text, above the fold: the one
   number on the page that is somebody's actual result. */
.topScore{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:18px;font-size:0.98rem;color:#CFE2DC}
.topScore b{font-family:Fraunces;font-weight:600;font-size:1.12rem;color:var(--paper)}
.topScore i{font-style:normal;color:#8FC4B5}
/* ───────── NEW: the leaderboard section, its own ground ─────────
   Not a feature panel: the board itself, as real HTML text, with its own header,
   its own provenance line and its own way in. Cream, like the related banner,
   because both are the page speaking plainly rather than selling. */
.lbSection{background:var(--paper);color:var(--ink);border-top:1px solid var(--rule)}
.lbSection .wrap{padding-top:44px;padding-bottom:48px}
.lbHead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;padding-bottom:16px;border-bottom:1.5px solid var(--rule)}
.lbHead h2{font-size:clamp(1.6rem,5.2vw,2.2rem);color:var(--ink)}
.lbHead .eyebrow{color:var(--muted)}
.lbSince{margin-left:auto;font-size:0.9rem;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.lbSince em{width:7px;height:7px;border-radius:50%;background:var(--accentTeal);flex:none}
.lbTable{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.lbTable th{text-align:left;font-size:0.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:14px 10px 10px}
.lbTable th:last-child,.lbTable td:last-child{text-align:right}
.lbTable td{padding:9px 10px;border-top:1px solid var(--rule);font-size:1rem;vertical-align:middle}
.lbTable th:first-child,.lbTable td:first-child{padding-left:2px;width:46px}
.lbTable th:last-child,.lbTable td:last-child{padding-right:2px}
.lbTable .rank{font-family:Fraunces;font-weight:700;color:var(--muted)}
.lbTable tr:nth-child(-n+4) .rank{color:var(--ink)}
.lbTable .who{font-weight:600;white-space:nowrap}
/* the cell is the flex row, so the name sits on the avatar's centre line rather
   than on a guessed baseline offset */
.lbTable td.who{display:flex;align-items:center;gap:10px}
.lbTable .pts{font-family:Fraunces;font-weight:600;font-size:1.06rem;color:var(--tealPressed)}
.lbTable .acc{color:var(--muted);font-size:0.94rem}
/* the avatar disc, same construction as the app's: filled disc in the player's
   colour with white initials, and a photo has no ring. */
.lbTable .av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:none;overflow:hidden;color:#fff;font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:0.84rem}
.lbTable .av img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;display:block}
/* the score bar. It is the run drawn against a perfect 500, which is the thing
   the table can't say in numbers: how much room is left at the top. */
.lbTable .barCell{width:34%;padding-left:4px;padding-right:16px}
.lbBar{display:block;height:8px;border-radius:4px;background:var(--rule);overflow:hidden}
.lbBar i{display:block;height:100%;width:var(--w);border-radius:4px;background:var(--accentTeal);opacity:.75;transition:width .85s cubic-bezier(.22,1,.36,1)}
.lbTable tr.lead .lbBar i{background:var(--gold);opacity:1}
/* the bar's resting state IS the finished state; only a row that has not yet
   read in is drawn empty. That way a frozen or transition-less render shows the
   true bar rather than an empty track. */
.js .lbTable tbody tr:not(.in) .lbBar i{width:0}
.lbTable tr.lead td{background:color-mix(in srgb,#E8B547 12%,transparent)}
.lbTable tr.lead .pts{color:var(--goldDeep)}
/* the table's own entrance: rows read in from the top and their bars draw out
   behind them. Scores are never animated — a topic score never changes once it
   is set — so the number is final from the first frame and only the bar moves. */
.js .lbTable tbody tr{opacity:0;transform:translateY(10px);transition:opacity .44s ease,transform .44s cubic-bezier(.2,.7,.3,1),background .7s ease}
.js .lbTable tbody tr.in{opacity:1;transform:none}
.lbTable tbody tr.flash td{background:rgba(31,138,117,.12)}
.lbTable tr.lead.flash td{background:color-mix(in srgb,#E8B547 26%,transparent)}
@media(max-width:700px){.lbTable .barCell,.lbTable th.barH{display:none}}
@media(max-width:560px){.lbTable .acc,.lbTable th.accH{display:none}}
.lbNote{min-height:22px;margin-top:12px;display:flex;align-items:center;gap:8px;font-size:0.9rem;font-weight:600;color:var(--tealPressed);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.lbNote.show{opacity:1;transform:none}
.lbNote svg{width:14px;height:14px;display:block;flex:none}
.lbSeat{display:grid;grid-template-columns:46px 30px 1fr auto;align-items:center;gap:0 8px;padding:14px 2px;border-top:1.5px dashed #E4D8C4;color:var(--muted)}
.lbSeat b{font-family:Fraunces;font-weight:600;font-size:1.06rem;color:var(--ink);font-style:normal}
.lbSeat .rank{font-family:Fraunces;font-weight:700;text-align:left;color:var(--faint)}
/* the dashed placeholder sits in the avatars' column, not beside the rank */
.lbSeat .gav{width:30px;height:30px;border-radius:50%;border:1.5px dashed #D8C9B0}
/* On a phone the seat row's four columns squeeze its heading into a 60px column
   ("Be the / first on / the / board", measured at 390px). Below 560 the two texts
   stack in one column instead, which is also where the accuracy column is dropped. */
@media(max-width:560px){
 .lbSeat{grid-template-columns:30px 30px 1fr;row-gap:3px}
 .lbSeat b,.lbSeat>span:last-child{grid-column:3}
}
.lbFoot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.lbFoot p{font-size:0.92rem;color:var(--muted);max-width:40ch}
@media(max-width:560px){.lbTable .acc,.lbTable th.accH{display:none}}
/* ───────── NEW: the related-topics banner below the card (paper ground) ───────── */
.sheetBody{background:var(--paper);color:var(--ink)}
.sheetBody .wrap{padding-top:44px;padding-bottom:48px}
.sheetBody h2{font-size:clamp(1.6rem,5.2vw,2.2rem);color:var(--ink);max-width:22ch}
.sheetBody .eyebrow{color:var(--muted)}
/* related topics */
.relGrid{display:grid;gap:12px;margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.relCard{display:block;padding:16px;border-radius:16px;background:var(--surface);border:1.5px solid var(--rule);color:var(--ink);transition:border-color .15s,transform .15s}
.relCard:hover{border-color:var(--accentTeal);color:var(--ink);transform:translateY(-2px)}
.relCard b{display:block;font-family:Fraunces;font-weight:600;font-size:1.18rem;letter-spacing:-0.01em}
.relCard span{display:block;margin-top:5px;font-size:0.92rem;color:var(--muted);line-height:1.35}
.relAll{margin-top:18px;font-size:0.98rem;font-weight:600}
footer{border-top:1px solid rgba(255,249,240,.14);padding:20px 0 28px;color:#9FCBBE;font-size:0.9rem}
.fLinks{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:14px}
.fLinks a{color:#D9E7E2;font-weight:500}
.fLinks a:hover{color:#fff}
.dots{display:none;gap:7px;margin-top:16px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,249,240,.28);transition:.3s}
.dots i.on{background:var(--gold);transform:scale(1.35)}
/* NEW — a scrolly with a single panel: the hero and its card, with nothing to
   narrate. The dots are hidden there; they only mean something over a sequence.
   .feat is the second scrolly, whose first panel is an ordinary panel rather
   than a hero, so it keeps the normal panel metrics — and it opens with teal
   above the card, so the section starts rather than butting the cream. */
.dots:empty,.solo .dots{display:none}
.scrolly.solo{padding-bottom:52px}
.scrolly.feat{padding-top:56px;padding-bottom:56px}
.feat .panel:first-child{min-height:74vh;padding:34px 0}
/* The hero is a SOLO scrolly: one panel, nothing to scroll past, so its card must not ride the
   viewport-centred sticky of the feature sections - that left the card low and the copy high in a
   band padded only below (George, 2026-09-30). Centre both columns on one row, pad evenly. */
@media(min-width:900px){.solo .wrap{align-items:center}.solo .stickyWrap{position:relative;top:auto}}
@media(min-width:900px){.dots{display:flex}.solo .dots{display:none}.scrolly.solo{padding-top:48px;padding-bottom:48px}.scrolly.feat{padding-top:72px;padding-bottom:72px}.feat .panel:first-child{min-height:86vh;padding:34px 0}}
@media(max-width:899px){.scrolly.solo{padding-bottom:34px}.scrolly.feat{padding-top:30px;padding-bottom:40px}.feat .stickyWrap{top:60px}.feat .panel:first-child{min-height:0;padding:28px 0 52px}}
/* PHONE: the homepage's density — sections follow straight on under the band. */
@media(max-width:899px){
 .panel{min-height:0;padding:28px 0 52px;justify-content:flex-start}
 .panel:first-child{min-height:0;padding:28px 0 24px}
 .cue{justify-content:flex-end;padding-right:20px}
 .sheetBody .wrap{padding-top:30px;padding-bottom:36px}
 .lbSince{margin-left:0}
}
/* ───────── NEW: the hub (/quiz/) ───────── */
.hubHead{background:var(--teal);color:var(--paper)}
.hubHead .wrap{padding-top:40px;padding-bottom:44px}
.hubHead h1{font-size:clamp(2.1rem,7vw,3.2rem);max-width:18ch}
.hubHead p{margin-top:14px;font-size:1.05rem;color:#CFE2DC;max-width:52ch}
.hubBody{background:var(--paper);color:var(--ink)}
.hubBody .wrap{padding-top:40px;padding-bottom:56px}
.cat+.cat{margin-top:34px}
.catHead{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.catHead h2{font-size:1.32rem;color:var(--ink)}
.catHead span{font-size:0.86rem;font-weight:600;color:var(--faint)}
.catGrid{display:grid;gap:10px;margin-top:14px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.tCard{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;background:var(--surface);border:1.5px solid var(--rule);color:var(--ink);transition:border-color .15s,background .15s}
.tCard:hover{border-color:var(--accentTeal);background:#fff;color:var(--ink)}
.tCard b{font-family:Fraunces;font-weight:600;font-size:1.1rem;letter-spacing:-0.01em;display:block}
.tCard i{font-style:normal;display:block;margin-top:3px;font-size:0.9rem;color:var(--muted);line-height:1.35}
.alive{font-size:0.82rem;font-weight:600;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.alive.fresh{color:var(--tealPressed)}
.alive em{width:6px;height:6px;border-radius:50%;background:var(--accentTeal);flex:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}}