@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root{
  --bg:#f6f9fc; --bg2:#ffffff; --card:rgba(16,48,79,.04); --card2:rgba(16,48,79,.07);
  --line:rgba(16,48,79,.17); --line-soft:rgba(16,48,79,.1);
  --ink:#10293f; --muted:#5a6d80; --faint:#93a4b5;
  --gold:#1b4a75; --gold2:#3d7ab3; --ember:#10304f;
  --green:#2f6b4f; --red:#b04a3a;
  --espresso:#10304f; --cream:#f2f7fc;
  --spring:cubic-bezier(.22,.9,.26,1); --pop:cubic-bezier(.3,1.4,.4,1);
  --r:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 'DM Sans',system-ui,sans-serif;overflow-x:hidden}
::selection{background:var(--navy,#10304f);color:#f2f7fc}

/* backdrop */
.bg-aura{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(52rem 30rem at 85% -10%, rgba(61,122,179,.13), transparent 60%),
  radial-gradient(40rem 26rem at -15% 30%, rgba(27,74,117,.06), transparent 60%),
  radial-gradient(50rem 40rem at 50% 115%, rgba(61,122,179,.05), transparent 60%),
  linear-gradient(180deg,#fbfdff,#f6f9fc 40%,#eef3f9)}
.bg-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}

main{max-width:660px;margin:auto;padding:20px 20px 40px}

/* top bar */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 0 20px;margin:0 0 34px;border-bottom:1px solid rgba(255,255,255,.16)}
.brand{justify-self:center;font-weight:700;letter-spacing:.02em;text-decoration:none;color:#f4f9fd;font-size:14px;white-space:nowrap}
.brand em{font-style:italic;color:#bcdcf3;font-family:'Fraunces',serif;margin-left:5px}
.hero-links{white-space:nowrap;text-align:left}
.hero-links a{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,247,253,.72);text-decoration:none;margin-right:13px;transition:color .25s}
.hero-links a:last-child{margin-right:0}
.hero-links a:hover{color:#fff}
.hero-nav-cta{justify-self:end;white-space:nowrap;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#0c2a47;background:#f4f9fd;padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:700;transition:background .25s}
.hero-nav-cta:hover{background:#fff}
.hero-boat{width:130px;height:auto;margin:26px auto 4px;display:block;color:#8fc0e8;opacity:.85;animation:rise .9s .5s var(--spring) both}
.hero-cta{display:inline-block;margin:28px auto 0;background:#f4f9fd;color:#0c2a47;padding:15px 32px;border-radius:999px;font-weight:600;letter-spacing:.02em;text-decoration:none;font-size:15px;box-shadow:0 14px 30px -12px rgba(2,16,30,.5);transition:transform .3s var(--spring),background .25s;animation:rise .8s .55s var(--spring) both}
.hero-cta:hover{background:#fff;transform:translateY(-2px)}
.ed-ico{width:11px;height:11px;margin-right:7px;vertical-align:-1px}

/* hero */
.hero{margin:10px 0 4px;padding:22px 22px 42px;border-radius:14px;text-align:center;background:linear-gradient(165deg,#184a77,#0c2a47 78%);box-shadow:0 30px 56px -22px rgba(12,42,71,.55);position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-110px;top:-110px;width:320px;height:320px;border-radius:50%;background:repeating-radial-gradient(circle at center, rgba(158,205,240,.14) 0 1.5px, transparent 1.5px 30px);pointer-events:none}
.hero::before{content:'';position:absolute;left:-130px;bottom:-150px;width:340px;height:340px;border-radius:50%;background:repeating-radial-gradient(circle at center, rgba(158,205,240,.09) 0 1.5px, transparent 1.5px 34px);pointer-events:none}
.hero-kicker{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#9ecdf0;margin:0 0 16px;animation:rise .7s var(--spring) both}
h1{font-family:'DM Sans',sans-serif;font-weight:700;font-size:clamp(46px,12.2vw,72px);line-height:1.04;letter-spacing:-.028em;margin:0 0 18px;color:#f4f9fd}
h1 .w{display:inline-block;animation:rise .8s var(--spring) both}
h1 .w:nth-child(1){animation-delay:.06s}h1 .w:nth-child(2){animation-delay:.13s}
h1 .w:nth-child(4){animation-delay:.22s}h1 .w:nth-child(5){animation-delay:.3s}
h1 .gold{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-variation-settings:'opsz' 120;color:#bcdcf3;letter-spacing:-.01em}
.hero-sub{color:rgba(240,247,253,.78);margin:0 auto 8px;max-width:40ch;animation:rise .8s .35s var(--spring) both}
.edition{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;font-size:10.5px;letter-spacing:.14em;color:rgba(240,247,253,.62);border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding:16px 0 0;position:relative;z-index:1;animation:rise .8s .42s var(--spring) both}

/* ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line-soft);padding:9px 0;margin:6px -20px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;align-items:center;gap:26px;width:max-content;animation:ticker 46s linear infinite}
.tick-pair{font-family:'Fraunces',serif;font-style:italic;font-size:13.5px;color:var(--muted);white-space:nowrap}
.tick-pair b{color:var(--ink);font-weight:560}
.tick-pair i{font-style:normal;color:var(--gold);margin:0 8px;font-size:11px}
.tick-dot{width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.6;flex:none}
@keyframes ticker{to{transform:translateX(-50%)}}

/* shared */
h2{font-family:'DM Sans',sans-serif;font-weight:700;font-size:23px;letter-spacing:-.02em;margin:0 0 14px;color:var(--ink)}
h2 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-variation-settings:'opsz' 100;color:var(--gold);letter-spacing:-.005em}
.caption{font-size:12px;color:var(--faint)}
.note{background:var(--card);border:1px solid var(--line-soft);border-radius:9px;padding:16px 18px;margin:14px 0;color:var(--muted);font-size:13.5px}
.note strong{color:var(--ink)}
.error{color:var(--red)}
.saved{color:var(--green);font-weight:600}
button,.btn{font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);padding:12px 20px;cursor:pointer;text-decoration:none;transition:transform .18s var(--pop),background .2s,border-color .2s,box-shadow .2s,opacity .2s;touch-action:manipulation}
button:hover:not(:disabled){background:var(--card2);border-color:rgba(33,27,18,.28)}
button:active:not(:disabled){transform:scale(.965)}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button:disabled{opacity:.38;cursor:not-allowed}
.primary{background:var(--espresso);border:none;color:var(--cream);font-weight:600;letter-spacing:.02em;box-shadow:0 8px 22px -8px rgba(34,29,21,.45)}
.primary:hover:not(:disabled){background:#38311f;box-shadow:0 12px 28px -8px rgba(34,29,21,.5);transform:translateY(-1px)}
.primary.selected,button.selected{background:var(--espresso);color:var(--cream);border-color:transparent;font-weight:600}
.cta{width:100%;padding:16px 24px;font-size:16px;margin-top:20px}
.cta-arrow{transition:transform .25s var(--pop)}
.cta:hover:not(:disabled) .cta-arrow{transform:translateX(5px)}

/* screen entrance */
.screen-in{animation:screenIn .55s var(--spring) both}
@keyframes screenIn{from{opacity:0;transform:translateY(18px)}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes popIn{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-4px)}85%{transform:translateX(2px)}}
@keyframes flashRow{0%{background:rgba(217,168,60,.28)}100%{background:transparent}}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

/* join */
#app{margin-top:34px}
.intro{display:flex;justify-content:space-between;gap:26px;align-items:flex-end;padding:6px 2px 26px}
.ten b{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:clamp(84px,22vw,120px);line-height:.85;letter-spacing:-.05em;color:transparent;background:linear-gradient(160deg,var(--ember),var(--gold2));-webkit-background-clip:text;background-clip:text}
.ten strong{display:block;font-family:'Fraunces',serif;font-weight:480;font-size:19px;line-height:1.35;margin-top:14px}
.intro>p{color:var(--muted);font-size:13.5px;margin:0;padding-bottom:6px;text-align:right}
.rule-cards{display:grid;gap:10px;margin:4px 0 30px}
.rule-card{display:flex;gap:14px;align-items:flex-start;margin:0;animation:rise .6s var(--spring) both}
.rule-card:nth-child(2){animation-delay:.07s}.rule-card:nth-child(3){animation-delay:.14s}
.rule-ico{flex:none;min-width:34px;height:34px;display:grid;place-items:center;border-radius:7px;background:rgba(61,122,179,.12);border:1px solid rgba(61,122,179,.3);color:var(--gold);font-size:12px;font-weight:700}
.join-head{margin-top:8px}
.join-status{margin-bottom:14px}
.names{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.name-pill{position:relative;flex-direction:column;align-items:flex-start;gap:3px;padding:14px 16px;border-radius:9px;text-align:left;font-weight:600;min-height:56px;animation:popIn .45s var(--pop) both;animation-delay:calc(var(--i)*40ms)}
.name-pill .used{font-weight:400;font-size:10px;color:var(--faint);letter-spacing:.04em}
.name-pill.selected{box-shadow:0 10px 24px -10px rgba(34,29,21,.4)}
.name-pill.selected .used{color:rgba(247,243,233,.65)}

/* quiz */
.quiz-focus:focus{outline:none}
.quiz-top{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg) 78%,transparent);padding:10px 0 14px;margin:-10px 0 4px}
.progress{height:5px;border-radius:99px;background:rgba(16,48,79,.1);overflow:hidden}
.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ember),var(--gold2));box-shadow:0 0 10px rgba(27,74,117,.35);transition:width .6s var(--spring)}
.meta{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--muted);margin-top:12px;padding:0 2px}
.meta-name{font-weight:600;color:var(--ink)}
.meta-score{display:inline-block;font-variant-numeric:tabular-nums}
.meta-score.bump{animation:bump .45s var(--pop)}
.timer{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px;color:var(--gold);letter-spacing:.03em;margin:14px 0 0}
.q-count{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:18px 0 6px}
.q-kind{font-size:15px;color:var(--gold);margin:0 0 14px;font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.02em}
.prompt{font-family:'Fraunces',serif;font-weight:520;font-size:clamp(24px,6.4vw,30px);line-height:1.32;margin:0 0 24px}
.options{display:grid;gap:10px}
.answer{display:flex;gap:16px;align-items:center;text-align:left;padding:16px 18px;border-radius:10px;min-height:62px;animation:rise .5s var(--spring) both;animation-delay:calc(var(--i)*55ms)}
.answer .letter{flex:none;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);transition:inherit}
.answer .opt-text{flex:1}
.answer:hover:not(:disabled){transform:translateY(-2px);border-color:rgba(27,74,117,.45)}
.answer:hover:not(:disabled) .letter{border-color:var(--gold);color:var(--gold)}
.answer:disabled{cursor:default;opacity:1}
.answer.correct{background:rgba(47,107,79,.08);border-color:rgba(47,107,79,.4);animation:popIn .4s var(--pop) both}
.answer.correct .letter{background:var(--green);border-color:var(--green);color:#fff}
.answer.correct .tick{color:var(--green);font-size:17px;animation:popIn .45s .1s var(--pop) both}
.answer.wrong{background:rgba(176,74,58,.07);border-color:rgba(176,74,58,.35);animation:shake .45s both}
.answer.wrong .letter{background:var(--red);border-color:var(--red);color:#fff}
.feedback{margin:22px 0 4px;padding:20px;border-radius:10px;background:var(--card);border:1px solid var(--line-soft);border-left:3px solid var(--gold);animation:feedbackIn .55s var(--spring) both}
.feedback.fb-correct{border-left-color:var(--green)}
.feedback.fb-wrong{border-left-color:var(--red)}
@keyframes feedbackIn{from{opacity:0;transform:translateY(16px) scale(.985)}}
.feedback strong{display:block;font-size:15px;margin-bottom:8px}
.feedback p{color:var(--muted);margin:0 0 4px;font-size:14px}
.word-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.word-pair>div{background:rgba(33,27,18,.045);border:1px solid var(--line-soft);border-radius:8px;padding:12px 14px}
.word-pair span{display:block;text-transform:uppercase;font-size:9.5px;letter-spacing:.16em;color:var(--faint);margin-bottom:4px}
.word-pair strong{font-family:'Fraunces',serif;font-weight:560;font-size:17px}
.feedback a{color:var(--gold);font-size:12.5px;text-decoration:none;border-bottom:1px solid rgba(61,122,179,.4)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}

/* result */
.result-head{margin-bottom:4px}
.result-title{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(30px,8vw,40px);font-weight:560;margin:6px 0 8px;color:transparent;background:linear-gradient(115deg,var(--gold2),var(--ember));-webkit-background-clip:text;background-clip:text;animation:rise .6s .1s var(--spring) both}
.meter{width:172px;height:172px;position:relative;margin:22px auto}
.meter svg{width:100%;height:100%;transform:rotate(-90deg)}
.meter circle{fill:none;stroke-width:6}
.track{stroke:rgba(16,48,79,.1)}
.fill{stroke:url(#ringgrad);stroke-linecap:round;stroke-dasharray:var(--dash) 314.16;animation:ringIn 1.3s .25s var(--spring) both;filter:drop-shadow(0 0 5px rgba(27,74,117,.4))}
@keyframes ringIn{from{stroke-dasharray:0 314.16}}
.meter p{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;font-family:'Fraunces',serif;font-size:54px;color:var(--ink)}
.meter small{font-size:20px;color:var(--faint);margin-top:22px}
.result-line{text-align:center;color:var(--muted);max-width:34ch;margin:0 auto}
.save-note{text-align:center}
.report{white-space:pre-wrap;font:inherit;font-size:13px;padding:16px 18px;background:var(--card);border:1px solid var(--line-soft);border-radius:9px;color:var(--muted)}

/* timing chart */
.time-chart{display:flex;align-items:flex-end;gap:7px;height:120px;padding:8px 2px 0;margin:6px 0 10px}
.time-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.time-fill{width:100%;max-width:26px;height:var(--h);min-height:5px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--gold2),rgba(232,161,60,.35));animation:growBar .7s var(--spring) both;animation-delay:calc(var(--i)*45ms)}
@keyframes growBar{from{height:0}}
.time-val{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.time-q{font-size:9.5px;color:var(--faint);letter-spacing:.06em}

/* recall lab */
.recall-toggle button.selected{font-size:13px;padding:9px 16px}
.recall-card{width:100%;min-height:240px;flex-direction:column;gap:14px;border-radius:12px;padding:26px;margin:20px 0;background:linear-gradient(160deg,rgba(33,27,18,.06),rgba(33,27,18,.015));border:1px solid var(--line);animation:popIn .5s var(--pop) both}
.recall-card:hover:not(:disabled){transform:translateY(-3px);border-color:rgba(232,184,75,.45);box-shadow:0 18px 40px -18px rgba(33,27,18,.3)}
.recall-card .caption{letter-spacing:.14em}
.recall-word{font-family:'Fraunces',serif;font-weight:560;font-size:clamp(32px,9vw,42px);letter-spacing:-.01em}
.recall-card.revealed{border-color:rgba(61,122,179,.5);animation:flipIn .55s var(--spring) both}
@keyframes flipIn{from{transform:rotateX(72deg);opacity:.2}}
.recall-meaning{color:var(--muted);font-size:14px;max-width:44ch}
.recall-pair{font-weight:600;color:var(--gold);font-family:'Fraunces',serif;font-size:16px}
.recall-hint{font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.review article{border-top:1px solid var(--line-soft);padding:16px 2px}
.review p{margin:7px 0;font-size:13.5px;color:var(--muted)}

/* standings */
.panel{margin-top:48px}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
#connection{font-size:11.5px;color:var(--faint);display:inline-flex;align-items:center;gap:7px}
#connection::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
#connection[data-state="live"]{color:var(--green)}
#connection[data-state="live"]::before{background:var(--green);animation:pulseDot 1.6s infinite}
#connection[data-state="wait"]{color:var(--gold)}
#connection[data-state="wait"]::before{background:var(--gold);animation:pulseDot 1.6s infinite}
#connection[data-state="down"]{color:var(--red)}
#connection[data-state="down"]::before{background:var(--red)}
#ranking-rule{font-size:12px;color:var(--faint);margin:0 0 18px}
.board-rows{display:grid;gap:8px}
.brow{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:9px;background:var(--card);border:1px solid var(--line-soft);animation:rise .5s var(--spring) both;animation-delay:calc(var(--i)*45ms)}
.brow.row-new{animation:flashRow 1.8s ease-out both}
.brow.medal{background:linear-gradient(120deg,rgba(61,122,179,.14),rgba(16,48,79,.02));border-color:rgba(27,74,117,.3)}
.brow-rank{flex:none;width:34px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums;font-size:14px}
.medal-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:13px;color:#10293f}
.medal-1 .medal-dot{background:linear-gradient(135deg,#dceeff,#8fc0e8);box-shadow:0 0 16px rgba(61,122,179,.5);color:#0c2a47}
.medal-2 .medal-dot{background:linear-gradient(135deg,#e9eef3,#aebbc7)}
.medal-3 .medal-dot{background:linear-gradient(135deg,#cfd9e2,#8fa3b4)}
.brow-name{flex:1;min-width:0;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis}
.brow-name .caption{display:block;font-weight:400}
.override-label{display:block;font-size:10.5px;margin-top:2px;color:var(--ember)}
.brow-score{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--gold);font-variant-numeric:tabular-nums}
.brow-score small{font-size:11px;color:var(--faint);font-family:'DM Sans',sans-serif}
.brow-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.board-empty{text-align:center;padding:26px}

/* heatmap */
.heat-live{font-size:11.5px;color:var(--faint)}
#streak-rule{margin:0 0 16px}
.heat-wrap{overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.heat-row{display:flex;align-items:center;gap:3px;margin-bottom:4px;min-width:max-content}
.heat-head{margin-bottom:7px}
.heat-name{flex:none;width:92px;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heat-col{flex:none;width:13px;text-align:center;font-size:7.5px;color:var(--faint);letter-spacing:.02em}
.heat-col i{display:block;font-style:normal;font-size:8px;color:var(--muted)}
.heat-cell{flex:none;width:13px;height:13px;border-radius:4px;background:rgba(33,27,18,.06);border:1px solid rgba(33,27,18,.045);transition:transform .15s var(--pop)}
.heat-cell:hover{transform:scale(1.25)}
.heat-cell.lvl-1{background:rgba(61,122,179,.28)}
.heat-cell.lvl-2{background:rgba(61,122,179,.5)}
.heat-cell.lvl-3{background:rgba(27,74,117,.82)}
.heat-cell.lvl-4{background:var(--ember);box-shadow:0 0 7px rgba(16,48,79,.35)}
.heat-name b{color:var(--gold);font-size:10px;margin-left:4px}.heat-name i{color:var(--faint);font-style:normal;font-size:10px;margin-left:4px}
.heat-streak b{color:var(--gold);font-size:12px}
.heat-streak i{color:var(--faint);font-style:normal}
.heat-legend{display:flex;align-items:center;gap:5px;justify-content:flex-end;font-size:10px;color:var(--faint);margin-top:12px}
.heat-legend .heat-cell{width:13px;height:13px}

/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-4vh;left:var(--x);border-radius:2px;animation:fall var(--d) var(--delay) cubic-bezier(.25,.6,.45,1) forwards}
@keyframes fall{to{transform:translate(var(--dx),112vh) rotate(var(--r));opacity:.85}}

/* about + footer */
details.about{margin-top:48px;border-top:1px solid var(--line-soft);padding-top:18px;font-size:13px;color:var(--muted)}
details.about summary{cursor:pointer;color:var(--ink);font-weight:600;font-size:14px}
details.about a{color:var(--gold)}
footer{margin:34px 0 10px;color:var(--faint);font-size:12px;text-align:center}

@media(max-width:430px){
  .intro{flex-direction:column;align-items:flex-start;gap:14px}
  .intro>p{text-align:left}
  .names{grid-template-columns:1fr 1fr}
  .heat-name{width:84px}
  .brow-time{display:none}
}
@media(max-width:340px){.names{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .ticker-track{animation:none}
}

.name-pill.played{background:var(--card)}
.name-pill.played .used{color:var(--gold)}
.rv-list{margin:18px 0 6px}
.rv-card{padding:20px;border-radius:12px;background:var(--bg2);border:1px solid var(--line-soft);margin:0 0 14px;animation:rise .6s var(--spring) both;animation-delay:calc(var(--i)*.05s)}
.rv-prompt{font-size:19px;margin:0 0 14px}
.rv-opts{display:grid;gap:8px;margin:0 0 14px}
.rv-opt{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line-soft);border-radius:9px;font-size:14.5px;background:var(--card)}
.rv-opt .letter{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--muted)}
.rv-opt.rv-correct{border-color:rgba(47,107,79,.45);background:rgba(47,107,79,.07)}
.rv-opt.rv-correct .letter{background:var(--green);color:#fff;border-color:transparent}
.rv-opt .tick{margin-left:auto;color:var(--green);font-size:15px}
.rv-meaning{color:var(--muted);font-size:14px;margin:0 0 12px}
.rv-link{color:var(--gold);font-size:12.5px;text-decoration:none;border-bottom:1px solid rgba(61,122,179,.4)}
.rv-standings{text-decoration:none;display:inline-flex}
.rv-badge{display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(27,74,117,.3);border-radius:999px;padding:5px 12px;margin:0 0 14px;font-weight:700}

.rv-verdict{margin-left:8px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:3px 9px;border-radius:999px}
.rv-verdict.ok{color:var(--green);border:1px solid rgba(47,107,79,.4);background:rgba(47,107,79,.08)}
.rv-verdict.no{color:var(--red);border:1px solid rgba(176,74,58,.35);background:rgba(176,74,58,.07)}
.rv-time{margin-left:6px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.rv-opt.rv-yours-wrong{border-color:rgba(176,74,58,.4);background:rgba(176,74,58,.06)}
.rv-opt .cross{margin-left:auto;color:var(--red);font-size:11px;font-weight:600}
.rv-opt .tick + .cross{margin-left:8px}
.rv-analysis{padding:18px 20px;border-radius:12px;background:var(--bg2);border:1px solid var(--line-soft);border-left:3px solid var(--gold);margin:16px 0 20px}
.rv-analysis h3{font-family:'DM Sans',sans-serif;font-size:18px;margin:0 0 10px;letter-spacing:-.02em}
.rv-analysis h3 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--gold)}
.rv-analysis p{margin:0 0 8px;font-size:14px;color:var(--muted)}
.rv-analysis p:last-child{margin-bottom:0}
.rv-analysis strong{color:var(--ink)}
.lock-input{width:100%;padding:13px 16px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font:inherit;font-size:15px;color:var(--ink);margin:0 0 10px}
.lock-input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent}
.lock-err{color:var(--red);font-size:13px;margin:0 0 10px;animation:shake .4s var(--spring)}
.lock-ok{color:var(--green);font-size:13.5px;margin:0}
.rv-lockset h3{font-family:'DM Sans',sans-serif;font-size:18px;margin:0 0 10px;letter-spacing:-.02em}
.rv-lockset h3 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--gold)}

/* board tabs (all-time / this set) */
.board-tabs{display:flex;gap:8px;margin:2px 0 14px}
.board-tab{font:inherit;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:8px 16px;border-radius:999px;border:1px solid rgba(16,48,79,.28);background:transparent;color:#10304f;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.board-tab:hover{border-color:#10304f}
.board-tab.active{background:#10304f;color:#fff;border-color:#10304f}

/* guest play */
.guest-box{margin:16px 0 14px}
.guest-or{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.guest-or::before,.guest-or::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.guest-row{display:flex;gap:10px}
.guest-row input{flex:1;min-width:0;font:inherit;font-size:15px;padding:12px 14px;border-radius:9px;border:1px solid var(--line-soft);background:var(--card)}
.guest-row input:focus{outline:2px solid rgba(16,48,79,.35);border-color:#10304f}
.guest-row .primary{flex:none}
.guest-err{color:#a33 !important}