/* ============================================================
   EBK — Elite Ball Knowledge
   A record-book instrument panel. One committed dark world:
   warm hardwood ground, chalk paper, leather vermilion for live
   state, cool slate for spent state.
   ============================================================ */

:root{
  --ink:#0E0B09; --ink-2:#131010;
  --panel:#1A1512; --panel-2:#221B16; --panel-3:#2A211B;
  --line:#332A23; --line-2:#4A3D33;
  --chalk:#F2EDE6; --chalk-2:#CDC3B7; --muted:#8E8175; --faint:#5F554C;
  --accent:#E8552B; --accent-2:#FF7A4D; --accent-dim:#5C2313;
  --accent-ghost:rgba(232,85,43,.10);
  --slate:#46545F; --slate-2:#7C919F; --slate-dim:#232C33;
  --good:#7FA05E; --miss:#B14A3E; --part:#B08A3C;

  /* Three weights of one voice, no terminal monospace anywhere. A record book
     sets its agate in condensed sans and its figures in tabular lining
     numerals; Menlo belongs in a code editor, not on a sports page. */
  --f-display:Haettenschweiler,'Arial Narrow',Impact,'Franklin Gothic Medium',sans-serif;
  --f-body:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-data:'Arial Narrow','Helvetica Neue Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;

  --rail-w:78px; --measure:62ch;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ink);color:var(--chalk);
  font-family:var(--f-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

.disp{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:.88}
.agate{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

/* ---------- frame + rail ---------- */
.frame{display:flex;min-height:100vh;min-height:100dvh}

.rail{
  width:var(--rail-w);flex:0 0 var(--rail-w);border-right:1px solid var(--line);
  background:var(--ink-2);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;height:100dvh;padding:18px 0 14px;
}
.rail-cap{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:19px;letter-spacing:.06em;text-align:center;color:var(--chalk);
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.ticks{flex:1;display:flex;flex-direction:column;justify-content:space-between;
  padding:16px 0;min-height:0}
.tick{height:2px;margin-left:auto;margin-right:14px;width:12px;background:var(--line-2);
  position:relative;transition:width .22s cubic-bezier(.2,.8,.2,1),background-color .22s}
.tick.decade{width:22px;background:var(--faint)}
.tick.done{background:var(--slate);width:22px}
.tick.done.decade{width:30px}
.tick.now{background:var(--accent);width:38px;height:3px}
.tick.now::after{content:'';position:absolute;right:-14px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;background:var(--accent)}
.rail-foot{text-align:center;color:var(--faint);border-top:1px solid var(--line);padding-top:12px}

.stage{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}

.runhead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 34px 12px;border-bottom:1px solid var(--line)}
.runhead .mode{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.06em;color:var(--accent)}
.runhead .meta{display:flex;gap:20px;align-items:baseline;color:var(--muted)}
.runhead .cat{color:var(--faint)}

main{flex:1;display:flex;flex-direction:column;padding:0 34px;min-width:0}

.deck{border-top:1px solid var(--line);padding:14px 34px 18px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;background:var(--ink-2)}
.deck-hint{color:var(--faint);max-width:56ch;font-family:var(--f-body);font-size:13.5px;
  letter-spacing:0;text-transform:none}

/* ---------- buttons ---------- */
.btn{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:17px;
  letter-spacing:.1em;background:var(--accent);color:#170A05;border:0;border-radius:0;
  padding:12px 26px 11px;cursor:pointer;white-space:nowrap;
  transition:background-color .15s,color .15s,opacity .15s}
.btn:hover:not(:disabled){background:var(--accent-2)}
.btn:disabled{background:var(--panel-2);color:var(--faint);cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--chalk-2);border:1px solid var(--line-2);
  padding:11px 22px 10px}
.btn-ghost:hover:not(:disabled){border-color:var(--chalk-2);background:var(--panel);color:var(--chalk)}

/* ---------- round body ---------- */
.round{flex:1;display:flex;flex-direction:column;padding:30px 0 26px;
  max-width:var(--measure);width:100%}
/* Wide formats still need a reading measure; full-bleed makes bars and tiles absurd. */
.round.wide{max-width:1080px}

.prompt{font-size:26px;line-height:1.26;font-weight:400;letter-spacing:-.005em;
  color:var(--chalk);text-wrap:balance;margin:0 0 6px}
.prompt-sub{color:var(--muted);font-size:14.5px;margin:0}

.stagger>*{opacity:0;transform:translateY(6px);animation:rise .34s cubic-bezier(.2,.8,.2,1) forwards}
.stagger>*:nth-child(1){animation-delay:0s}
.stagger>*:nth-child(2){animation-delay:.04s}
.stagger>*:nth-child(3){animation-delay:.08s}
.stagger>*:nth-child(4){animation-delay:.12s}
.stagger>*:nth-child(5){animation-delay:.16s}
.stagger>*:nth-child(6){animation-delay:.20s}
@keyframes rise{to{opacity:1;transform:none}}

.body-block{margin-top:24px;display:flex;flex-direction:column;gap:12px}

/* ---------- option list ---------- */
.opts{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:transparent;
  border:0;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  padding:15px 14px;color:var(--chalk-2);font:inherit;font-size:17px;cursor:pointer;
  transition:background-color .13s,border-color .13s,color .13s,padding-left .13s}
.opt:hover:not(:disabled){background:var(--panel);color:var(--chalk);padding-left:20px}
.opt .key{font-family:var(--f-data);font-size:12.5px;letter-spacing:.1em;color:var(--faint);
  flex:0 0 18px;transition:color .13s}
.opt .sub{margin-left:auto;color:var(--faint);font-family:var(--f-data);font-size:12px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.opt[aria-pressed="true"]{border-left-color:var(--accent);background:var(--accent-ghost);color:var(--chalk)}
.opt[aria-pressed="true"] .key{color:var(--accent)}

/* ---------- duel ---------- */
.duel{display:grid;grid-template-columns:1fr 52px 1fr;align-items:stretch;margin-top:26px}
.duel-side{border:1px solid var(--line);border-left-width:2px;border-left-color:transparent;
  background:var(--panel);padding:22px 20px;cursor:pointer;text-align:left;color:var(--chalk-2);
  font:inherit;display:flex;flex-direction:column;gap:4px;
  transition:background-color .14s,border-color .14s}
.duel-side:hover:not(:disabled){background:var(--panel-2)}
.duel-side[aria-pressed="true"]{border-left-color:var(--accent);background:var(--accent-ghost)}
.duel-name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:30px;
  letter-spacing:.01em;line-height:.94;color:var(--chalk)}
.duel-meta{color:var(--faint);font-family:var(--f-data);font-size:11.5px;
  letter-spacing:.06em;min-height:1.2em}
.duel-v{display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-family:var(--f-display);font-size:20px;letter-spacing:.05em}

/* ---------- rank ---------- */
.ranklist{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:22px}
.rankrow{display:flex;align-items:center;gap:14px;padding:13px 14px;
  border-bottom:1px solid var(--line);background:var(--ink);cursor:grab;user-select:none;
  transition:background-color .13s}
.rankrow:hover{background:var(--panel)}
.rankrow.dragging{opacity:.35;cursor:grabbing}
.rankrow.over{background:var(--panel-2);box-shadow:inset 0 2px 0 var(--accent)}
.rankrow .pos{font-family:var(--f-data);font-size:12px;color:var(--accent);flex:0 0 22px;
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.rankrow .label{font-size:17px;color:var(--chalk)}
.rankrow .movers{margin-left:auto;display:flex;gap:2px}
.mv{background:transparent;border:1px solid var(--line);color:var(--muted);font-family:var(--f-data);
  font-size:12.5px;width:24px;height:24px;cursor:pointer;padding:0;
  transition:border-color .12s,color .12s}
.mv:hover:not(:disabled){border-color:var(--chalk-2);color:var(--chalk)}
.mv:disabled{opacity:.3;cursor:default}

/* ---------- timeline ---------- */
.tl{margin-top:34px}
.tl-year{font-family:var(--f-display);font-weight:700;font-size:86px;line-height:.82;
  color:var(--accent);font-variant-numeric:tabular-nums}
.tl-track{position:relative;margin-top:26px;padding-bottom:26px}
.tl-axis{height:1px;background:var(--line-2);position:relative}
.tl-mark{position:absolute;top:0;width:1px;height:8px;background:var(--line-2)}
.tl-mark span{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  font-family:var(--f-data);font-size:12px;color:var(--faint);letter-spacing:.06em}
input[type=range].tl-input{-webkit-appearance:none;appearance:none;width:100%;background:transparent;
  margin:0;position:absolute;top:-11px;left:0;height:24px;cursor:pointer}
input[type=range].tl-input::-webkit-slider-thumb{-webkit-appearance:none;width:3px;height:24px;
  background:var(--accent);border:0;border-radius:0}
input[type=range].tl-input::-moz-range-thumb{width:3px;height:24px;background:var(--accent);
  border:0;border-radius:0}

/* ---------- number ---------- */
.numentry{display:flex;align-items:flex-end;gap:20px;margin-top:30px;flex-wrap:wrap}
.numentry .val{font-family:var(--f-display);font-weight:700;font-size:96px;line-height:.8;
  color:var(--accent);font-variant-numeric:tabular-nums;min-width:3ch}
.numentry .unit{color:var(--muted);font-family:var(--f-data);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;padding-bottom:8px}
.steppers{display:flex;gap:4px;padding-bottom:6px}
.step{font-family:var(--f-data);font-size:12px;background:transparent;border:1px solid var(--line-2);
  color:var(--chalk-2);padding:8px 11px;cursor:pointer;letter-spacing:.05em;
  transition:border-color .12s,color .12s}
.step:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}

/* ---------- text entry ---------- */
.entry{position:relative;margin-top:24px;max-width:46ch}
.entry input{width:100%;background:transparent;border:0;border-bottom:2px solid var(--line-2);
  color:var(--chalk);font-family:var(--f-body);font-size:25px;padding:8px 2px;
  transition:border-color .15s}
.entry input::placeholder{color:var(--faint)}
.entry input:focus{outline:0;border-bottom-color:var(--accent)}
.ac{position:absolute;left:0;right:0;top:100%;z-index:20;background:var(--panel-2);
  border:1px solid var(--line-2);border-top:0;max-height:210px;overflow-y:auto}
.ac button{display:block;width:100%;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--line);color:var(--chalk-2);font:inherit;font-size:15px;
  padding:10px 13px;cursor:pointer}
.ac button:hover,.ac button.cursor{background:var(--accent-dim);color:var(--chalk)}

/* ---------- box score ---------- */
.boxwrap{overflow-x:auto;margin-top:22px;border:1px solid var(--line);background:var(--panel)}
table.box{border-collapse:collapse;width:100%;min-width:520px}
table.box caption{caption-side:top;text-align:left;padding:12px 14px;color:var(--muted);
  font-family:var(--f-data);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
table.box th,table.box td{padding:9px 14px;text-align:right;font-family:var(--f-data);
  font-size:13px;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
table.box th{color:var(--faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:400}
table.box td{color:var(--chalk)}
table.box th:first-child,table.box td:first-child{text-align:left;color:var(--muted)}
table.box tr:last-child td{border-bottom:0}
table.box tr.hl td{color:var(--accent);background:rgba(232,85,43,.05)}

/* ---------- career path ---------- */
.path{margin-top:24px;border-left:1px solid var(--line-2)}
.stint{display:grid;grid-template-columns:104px 1fr auto;gap:16px;align-items:baseline;
  padding:13px 0 13px 18px;border-bottom:1px solid var(--line);position:relative}
.stint::before{content:'';position:absolute;left:-4px;top:20px;width:7px;height:7px;background:var(--line-2)}
.stint.on::before{background:var(--accent)}
.stint .yr{font-family:var(--f-data);font-size:12px;color:var(--muted);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.stint .team{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:21px;
  letter-spacing:.03em;color:var(--chalk)}
.stint .note{font-family:var(--f-data);font-size:12.5px;color:var(--faint);letter-spacing:.06em;
  text-transform:uppercase;text-align:right}
.stint.veiled{opacity:.25}
.stint.veiled .team{filter:blur(5px)}

/* ---------- shot profile ---------- */
.profile{display:flex;gap:32px;margin-top:22px;flex-wrap:wrap;align-items:flex-start}
.pbars{flex:1;min-width:280px;display:flex;flex-direction:column;gap:16px}
.pbar .k{font-family:var(--f-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:flex;justify-content:space-between;gap:12px}
.pbar .k b{color:var(--chalk);font-weight:400;font-variant-numeric:tabular-nums}
.pbar .t{height:10px;background:var(--panel-2);margin-top:7px;position:relative;
  border:1px solid var(--line)}
.pbar .t i{display:block;height:100%;background:var(--accent)}
.plegend{min-width:180px;display:flex;flex-direction:column;gap:9px}
.legrow{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);
  padding-bottom:7px}
.legrow .k{color:var(--faint);font-family:var(--f-data);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase}
.legrow .v{color:var(--chalk);font-family:var(--f-data);font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- rapid fire ---------- */
.rf-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:22px}
.rf-clock{font-family:var(--f-display);font-weight:700;font-size:52px;line-height:.8;
  color:var(--accent);font-variant-numeric:tabular-nums}
.rf-clock.low{color:var(--miss)}
.rf-bar{height:2px;background:var(--line);margin-top:10px}
.rf-bar i{display:block;height:100%;background:var(--accent);transition:width .25s linear}
.rf-item{margin-top:26px;border:1px solid var(--line);background:var(--panel);padding:26px 22px;
  min-height:118px;display:flex;align-items:center}
.rf-claim{font-size:23px;line-height:1.3;color:var(--chalk);text-wrap:balance}
.rf-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.rf-btn{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:19px;
  letter-spacing:.06em;background:var(--panel-2);color:var(--chalk-2);border:1px solid var(--line-2);
  padding:16px;cursor:pointer;transition:background-color .12s,color .12s,border-color .12s}
.rf-btn:hover:not(:disabled){background:var(--accent-dim);border-color:var(--accent);color:var(--chalk)}
.rf-btn:disabled{opacity:.4;cursor:default}
.rf-dots{display:flex;gap:4px;margin-top:14px}
.rf-dot{width:100%;height:3px;background:var(--line)}
.rf-dot.done{background:var(--slate)}
.rf-dot.now{background:var(--accent)}

/* ---------- grid + five ---------- */
.gridq{display:grid;grid-template-columns:auto 1fr;margin-top:22px;border:1px solid var(--line)}
.gq-cell{padding:16px 18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.gq-cell:nth-child(2n){border-right:0}
.gq-cell.k{background:var(--panel);color:var(--faint);font-family:var(--f-data);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.gq-cell.v{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:22px;
  letter-spacing:.03em;color:var(--chalk)}
.gridq>.gq-cell:nth-last-child(-n+2){border-bottom:0}

.five{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:22px}
.fiverow{display:grid;grid-template-columns:42px 1fr auto;gap:16px;align-items:baseline;
  padding:13px 12px;border-bottom:1px solid var(--line)}
.fiverow .pos{font-family:var(--f-data);font-size:12.5px;color:var(--accent);letter-spacing:.06em}
.fiverow .nm{font-size:18px;color:var(--chalk)}
.fiverow .st{font-family:var(--f-data);font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.05em}
.fiverow.gap{background:var(--panel)}
.fiverow.gap .nm{color:var(--faint);font-style:italic}

/* ---------- cover ---------- */
.cover{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--ink)}
.cover-inner{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:56px 40px;max-width:1080px;width:100%;margin:0 auto}
.wordmark{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(96px,22vw,260px);line-height:.78;letter-spacing:-.01em;color:var(--chalk);
  margin:0;display:flex;align-items:baseline;gap:.06em}
.wordmark .dot{width:.11em;height:.11em;background:var(--accent);display:inline-block;flex:0 0 auto}
.cover-expand{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.3em;color:var(--accent);font-size:clamp(13px,1.6vw,17px);margin:14px 0 0}
.cover-lede{color:var(--chalk-2);font-size:19px;line-height:1.5;max-width:56ch;margin:30px 0 0}
.cover-cta{display:flex;align-items:center;gap:22px;margin-top:40px;flex-wrap:wrap}
.cover-note{color:var(--faint);font-family:var(--f-data);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase}

/* ---------- checkpoint ---------- */
.checkpoint{flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--measure);padding:40px 0}
.cp-n{font-family:var(--f-display);font-weight:700;font-size:150px;line-height:.78;
  color:var(--panel-3);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cp-label{font-family:var(--f-data);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-top:10px}
.cp-line{font-size:25px;line-height:1.32;color:var(--chalk);max-width:44ch;margin-top:18px;
  text-wrap:balance}
.cp-sub{color:var(--muted);margin-top:14px;font-size:15.5px;max-width:48ch}

/* ---------- results ---------- */
.results{padding:0 0 60px;max-width:1000px}
.res-hero{padding:46px 0 34px;border-bottom:1px solid var(--line-2)}
.res-kicker{font-family:var(--f-data);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}
.res-rating{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(56px,10vw,124px);line-height:.82;letter-spacing:-.005em;color:var(--accent);
  margin:14px 0 0;text-wrap:balance}
.res-blurb{color:var(--chalk-2);font-size:18px;line-height:1.5;max-width:56ch;margin-top:20px}
.res-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:34px;
  border-top:1px solid var(--line)}
.res-figs div{padding:16px 18px 16px 0;border-bottom:1px solid var(--line)}
.res-figs dt{color:var(--faint);font-family:var(--f-data);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;margin:0 0 7px}
.res-figs dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:38px;line-height:.85;
  color:var(--chalk);font-variant-numeric:tabular-nums}
.res-figs dd em{font-style:normal;font-size:17px;color:var(--muted);margin-left:3px}

.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:46px 0 0;
  padding-bottom:9px;border-bottom:1px solid var(--line-2)}
.sec-head h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:19px;
  letter-spacing:.06em;color:var(--chalk);margin:0}
.sec-head span{color:var(--faint);font-family:var(--f-body);font-size:12.5px;letter-spacing:0;
  text-transform:none}

.bars{display:flex;flex-direction:column}
.bar{display:grid;grid-template-columns:150px 1fr 64px;gap:16px;align-items:center;padding:13px 0;
  border-bottom:1px solid var(--line)}
.bar .k{font-family:var(--f-data);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.bar .t{height:8px;background:var(--panel-2);position:relative}
.bar .t i{display:block;height:100%;background:var(--slate-2)}
.bar .t i.hi{background:var(--accent)}
.bar .t b{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--faint)}
.bar .v{font-family:var(--f-data);font-size:13px;color:var(--chalk);text-align:right;
  font-variant-numeric:tabular-nums}

.review{display:flex;flex-direction:column}
.rev{display:grid;grid-template-columns:46px 1fr 190px 24px;gap:14px;align-items:baseline;
  padding:13px 6px 13px 0;border-bottom:1px solid var(--line);border-left:2px solid transparent}
.rev.ok{border-left-color:var(--good)}
.rev.no{border-left-color:var(--miss)}
.rev.part{border-left-color:var(--part)}
.rev .n{font-family:var(--f-data);font-size:12.5px;color:var(--faint);padding-left:10px;
  font-variant-numeric:tabular-nums}
.rev .q{color:var(--chalk-2);font-size:14.5px;line-height:1.4}
.rev .q em{display:block;font-style:normal;color:var(--faint);font-family:var(--f-data);
  font-size:12.5px;letter-spacing:.06em;margin-top:5px;text-transform:uppercase}
.rev .a{font-family:var(--f-data);font-size:11.5px;color:var(--muted);line-height:1.5}
.rev .a b{display:block;color:var(--chalk);font-weight:400;margin-bottom:3px}
.rev .m{font-family:var(--f-data);font-size:13px;text-align:right;
  font-variant-numeric:tabular-nums;letter-spacing:.04em}
.rev.ok .m{color:var(--good)}
.rev.no .m{color:var(--miss)}
.rev.part .m{color:var(--part)}

.res-foot{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap;align-items:center}

/* ---------- leaderboard ---------- */
.board{display:flex;flex-direction:column}
.brow{display:grid;grid-template-columns:38px 40px 1fr auto 74px;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line)}
.brow .r{font-family:var(--f-data);font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.brow .g{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1;
  color:var(--accent);letter-spacing:.01em}
.brow .h{color:var(--chalk);font-size:16px}
.brow .t{font-family:var(--f-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.brow .p{font-family:var(--f-data);font-size:14px;color:var(--accent);text-align:right;
  font-variant-numeric:tabular-nums}
.brow.me{background:var(--accent-ghost)}

.handle{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.handle input{background:transparent;border:0;border-bottom:2px solid var(--line-2);color:var(--chalk);
  font-family:var(--f-body);font-size:19px;padding:7px 2px;width:min(280px,60vw)}
.handle input:focus{outline:0;border-bottom-color:var(--accent)}

/* ---------- system states ---------- */
.sys{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;padding:40px;text-align:center}
.sys h2{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:34px;
  letter-spacing:.06em;color:var(--chalk);margin:0}
.sys p{color:var(--muted);max-width:46ch;margin:0}
.pulse{width:46px;height:3px;background:var(--accent);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25;transform:scaleX(.5)}50%{opacity:1;transform:scaleX(1)}}

/* ---------- responsive ---------- */
@media (max-width:820px){
  :root{--rail-w:52px}
  .rail-cap{font-size:14px}
  .runhead,main,.deck{padding-left:20px;padding-right:20px}
  .prompt{font-size:22px}
  .duel{grid-template-columns:1fr;gap:6px}
  .duel-name{font-size:25px}
  .rev{grid-template-columns:34px 1fr 22px;gap:10px}
  .rev .a{display:none}
  .bar{grid-template-columns:104px 1fr 52px;gap:11px}
  .numentry .val,.tl-year{font-size:66px}
  .cp-n{font-size:100px}
  .stint{grid-template-columns:88px 1fr}
  .stint .note{display:none}
}
@media (max-width:520px){
  .deck{flex-direction:column;align-items:stretch;gap:12px}
  .deck .btn{width:100%}
  .deck-hint{order:2}
  .brow{grid-template-columns:28px 34px 1fr 58px}
  .brow .t{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
    transition-duration:.001ms!important}
  .stagger>*{opacity:1;transform:none}
}

/* ============================================================
   INSTANT FEEDBACK
   Reveal states. Semantic colour only ever appears after a round is
   locked, so nothing during play hints at the answer.
   ============================================================ */

.deck.revealed{border-top-width:2px}

/* choice + duel marking */
.opt.correct{border-left-color:var(--good);background:rgba(127,160,94,.10);color:var(--chalk)}
.opt.correct .key{color:var(--good)}
.opt.wrong{border-left-color:var(--miss);background:rgba(177,74,62,.10)}
.opt.wrong .key{color:var(--miss)}
.opt:disabled{opacity:.55;cursor:default}
.opt.correct:disabled,.opt.wrong:disabled{opacity:1}
.duel-side.correct{border-left-color:var(--good);background:rgba(127,160,94,.10)}
.duel-side.wrong{border-left-color:var(--miss);background:rgba(177,74,62,.10)}
.duel-side:disabled{cursor:default}

/* dial + figure marking */
.tl-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.tl-year.ok,.val.ok{color:var(--good)}
.tl-year.part,.val.part{color:var(--part)}
.tl-year.no,.val.no{color:var(--miss)}
.tl-answer{position:absolute;top:-13px;width:2px;height:28px;background:var(--good)}
.tl-answer span{position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  font-family:var(--f-data);font-size:12.5px;color:var(--good);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.numentry .truth{font-family:var(--f-data);font-size:12px;color:var(--good);
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:9px}
.entry input.ok{border-bottom-color:var(--good);color:var(--good)}
.entry input.no{border-bottom-color:var(--miss)}

/* rank + connections reveal */
.rankrow.ok{border-left:2px solid var(--good);background:rgba(127,160,94,.06)}
.rankrow.no{border-left:2px solid var(--miss)}
.rankrow.ok,.rankrow.no{cursor:default}

/* rapid fire review + skip */
.rf-skip{display:block;width:100%;margin-top:6px;background:transparent;
  border:1px solid var(--line);color:var(--faint);font-family:var(--f-data);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:10px;cursor:pointer;
  transition:border-color .12s,color .12s}
.rf-skip:hover:not(:disabled){border-color:var(--chalk-2);color:var(--chalk-2)}
.rf-skip:disabled{opacity:.35;cursor:default}
.rf-review{margin-top:18px;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.rf-row{display:grid;grid-template-columns:4px 1fr 56px 110px;gap:12px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);position:relative}
.rf-row::before{content:'';grid-column:1;align-self:stretch;background:var(--line-2)}
.rf-row.ok::before{background:var(--good)}
.rf-row.no::before{background:var(--miss)}
.rf-row .you{text-align:right;color:var(--miss)}
.rf-row.skip .you{color:var(--faint)}
.rf-row .c{color:var(--chalk-2);font-size:14.5px;line-height:1.35}
.rf-row .t{text-align:right;color:var(--faint)}


/* rail now carries per-round outcome */
.tick.hit{background:var(--good);width:22px}
.tick.part{background:var(--part);width:22px}
.tick.miss{background:var(--miss);width:22px}
.tick.hit.decade,.tick.part.decade,.tick.miss.decade{width:30px}

/* ============================================================
   CAREER ARC
   ============================================================ */
.arcwrap{margin-top:22px;max-width:760px}
.arc{display:flex;align-items:flex-end;gap:5px;height:190px;border-bottom:1px solid var(--line-2);
  border-left:1px solid var(--line-2);padding:0 4px}
.arc-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;position:relative;min-width:0}
.arc-bar{width:100%;background:var(--accent);min-height:3px;
  transition:height .3s cubic-bezier(.2,.8,.2,1)}
.arc-col:hover .arc-bar{background:var(--accent-2)}
.arc-x{position:absolute;bottom:-18px;font-family:var(--f-data);font-size:10px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.arc-y{color:var(--muted);margin-bottom:8px}
.arc-cap{color:var(--faint);margin-top:26px}

/* long option lists need tighter rows at eight entries */
.opts .opt{padding:12px 14px;font-size:16px}
@media (max-width:820px){
  .opts .opt{padding:11px 12px;font-size:15px}
  .arc{height:140px}
}

/* ============================================================
   ROUND TIMER
   A hairline under the running head, plus a countdown beside the
   round number. Quiet until it matters, then it is the loudest
   thing on the page.
   ============================================================ */
.r-timer{height:3px;background:var(--line);position:relative;overflow:hidden}
.r-timer i{display:block;height:100%;background:var(--slate-2);
  transition:width .12s linear,background-color .3s}
.r-timer.out i{background:var(--miss)}
.r-timer.stopped i{background:var(--line-2)}

/* One clock for every format, sized between the two extremes it replaced:
   readable without looking for it, not the loudest thing on the page. */
.r-clock{font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1;
  letter-spacing:.02em;color:var(--chalk-2);font-variant-numeric:tabular-nums;
  min-width:2.2ch;text-align:right;transition:color .2s;align-self:center}
.r-clock.low{color:var(--miss)}
.r-clock.low:not(.stopped){animation:tick 1s steps(2) infinite}
.r-clock.stopped{color:var(--faint);animation:none}
@keyframes tick{50%{opacity:.45}}

/* urgency is toggled from JS; matching on inline width strings would also
   catch 100% and 15%, which is exactly the wrong moment to turn red */
.r-timer.low i{background:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .r-clock.low{animation:none}
}

/* ============================================================
   OPTION LISTS AT EIGHT
   A single column of eight pushes the answer below the fold on
   short screens. Two columns keeps the whole field in one glance,
   which is the point of showing eight in the first place.
   ============================================================ */
@media (min-width:900px){
  .opts{display:grid;grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);border-left:1px solid var(--line)}
  .opts .opt{border-right:1px solid var(--line)}
  .opts .opt:hover:not(:disabled){padding-left:18px}
}
.opt .key{opacity:.7}
.opt:hover:not(:disabled) .key{opacity:1;color:var(--accent)}

/* Higher / Lower reads better as two weighted slabs than two thin cards. */
.duel{margin-top:30px}
.duel-side{padding:30px 24px;min-height:132px;justify-content:center}
.duel-name{font-size:clamp(26px,3.4vw,38px)}
.duel-v{font-size:14px;letter-spacing:.1em;color:var(--line-2)}

/* ============================================================
   BUZZ IN
   ============================================================ */
.clue-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}
.clue-meter{display:flex;gap:5px;flex:1;max-width:280px}
.clue-meter i{flex:1;height:4px;background:var(--panel-3);transition:background-color .2s}
.clue-meter i.on{background:var(--accent)}
.clue-credit{color:var(--muted);white-space:nowrap}
.clues{display:flex;flex-direction:column;gap:1px;margin-top:16px;background:var(--line)}
.clue{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:baseline;
  background:var(--panel);padding:15px 16px}
.clue.fresh{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--accent)}
.clue.unused{opacity:.4}
.clue-n{color:var(--faint)}
.clue-t{color:var(--chalk);font-size:17px;line-height:1.35}
.clue-more{width:100%;margin-top:10px;background:transparent;border:1px dashed var(--line-2);
  color:var(--chalk-2);font-family:var(--f-data);font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:13px;cursor:pointer;transition:border-color .13s,color .13s}
.clue-more:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.clue-more:disabled{opacity:.35;cursor:default}

/* ============================================================
   STANDINGS + CHRONOLOGY
   ============================================================ */
.ranklist.standings .pos{color:var(--accent)}
.ranklist.chrono{border-left:1px solid var(--line-2);margin-left:6px}
.ranklist.chrono .rankrow{position:relative}
.ranklist.chrono .rankrow::before{content:'';position:absolute;left:-7px;top:22px;
  width:7px;height:7px;background:var(--line-2)}
.ranklist.chrono .rankrow:first-child::before{background:var(--accent)}
.ranklist.chrono .pos{color:var(--faint);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;flex:0 0 34px}
.ranklist.chrono .label{font-size:16px}

/* ============================================================
   SPLIT THE PAIR
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:22px}
.sp-side{border:1px solid var(--line);background:var(--panel);padding:18px 16px;
  display:flex;flex-direction:column;gap:10px;min-height:180px}
.sp-name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:23px;letter-spacing:.02em;line-height:1;color:var(--chalk)}
.sp-meta{color:var(--faint);min-height:1.1em}
.sp-col{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.sp-banklabel{color:var(--faint);margin:20px 0 8px}
.sp-bank{display:flex;flex-wrap:wrap;gap:5px;min-height:52px;
  border:1px dashed var(--line-2);padding:8px}
.chip{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:var(--panel-2);border:1px solid var(--line-2);padding:8px 11px;cursor:pointer;
  color:var(--chalk);font:inherit;transition:border-color .12s,background-color .12s}
.chip:hover:not(:disabled){border-color:var(--accent);background:var(--panel-3)}
.chip.set{border-left:2px solid var(--accent)}
.chip-k{color:var(--faint);font-size:11px;letter-spacing:.06em}
.chip-v{font-family:var(--f-data);font-size:15px;font-variant-numeric:tabular-nums;
  color:var(--chalk)}
.chip-note{color:var(--miss);font-size:11px;letter-spacing:.1em}
.chip.ok{border-color:var(--good);border-left:2px solid var(--good);cursor:default}
.chip.no{border-color:var(--miss);border-left:2px solid var(--miss);cursor:default}

@media (max-width:820px){
  .split{grid-template-columns:1fr}
  .plot{height:270px}
  .dot .dot-t{font-size:12.5px}
  .clue{grid-template-columns:58px 1fr;gap:10px}
  .clue-t{font-size:15px}
}

/* ============================================================
   RECALL — the formats that ask you to produce a name
   ============================================================ */
.recall{margin-top:22px}
.recall-bar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.recall-count{font-family:var(--f-data);font-variant-numeric:tabular-nums;color:var(--muted);
  font-size:13px;letter-spacing:.06em}
.recall-count b{font-family:var(--f-display);font-weight:700;font-size:30px;color:var(--accent);
  margin-right:5px;line-height:1}
.recall-count.full b{color:var(--good)}
.recall-hint{color:var(--faint);font-family:var(--f-body);font-size:13px}
.recall-entry input{width:100%;background:transparent;border:0;
  border-bottom:2px solid var(--line-2);color:var(--chalk);font-family:var(--f-body);
  font-size:23px;padding:12px 2px;transition:border-color .15s}
.recall-entry input:focus{outline:0;border-bottom-color:var(--accent)}
.recall-entry input:disabled{border-bottom-color:var(--slate);color:var(--slate-2)}
.recall-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:16px}
.rc{background:var(--panel-2);border:1px solid var(--line-2);color:var(--chalk-2);
  font:inherit;font-size:14px;padding:7px 11px;cursor:pointer;
  transition:border-color .12s,color .12s}
.rc:hover:not(:disabled){border-color:var(--miss);color:var(--miss)}
.rc:disabled{cursor:default}
.rc.ok{border-color:var(--good);color:var(--good);background:rgba(127,160,94,.08);cursor:default}
.rc.no{border-color:var(--line);color:var(--faint);cursor:default}
.rc.dim{border-style:dashed;border-color:var(--line);color:var(--muted);cursor:default}
.recall-missed{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}

/* ---------- pick the squad ---------- */
.opts.squad .opt{border-left-width:2px}
.opts.squad .opt[aria-pressed="true"]{border-left-color:var(--accent)}
.opts.squad .key{display:none}

/* type-ahead sits under the recall input, same treatment as any dropdown here */
.recall-entry{position:relative}
.recall-entry .ac{top:100%}

/* ============================================================
   REVISIONS
   ============================================================ */

/* Career path: the whole career has to fit without scrolling, so the rows
   are agate-tight rather than headline-sized. */
.path .stint{grid-template-columns:104px 1fr;padding:7px 0 7px 16px;gap:14px}
.path .stint::before{top:13px;width:5px;height:5px}
.path .stint .yr{font-size:12.5px}
.path .stint .team{font-size:16px;letter-spacing:.02em}
.path .stint.veiled{opacity:1}
.path .stint.veiled .team{filter:none}

/* The deck is the action, not a running commentary. Lock in and Next are the
   same control at two moments, so they sit in the same place: a button that
   moves across the footer between states reads as a different button. */
.deck{justify-content:flex-end}
.deck.revealed{justify-content:flex-end}
/* In a match the deck also carries the waiting state, which belongs opposite. */
.deck.revealed:has(.wait-foe){justify-content:space-between}

/* ---------- Split The Pair ---------- */
.sp{display:grid;grid-template-columns:1fr 84px 84px;gap:1px;margin-top:24px;
  background:var(--line);border:1px solid var(--line)}
.sp-h{background:var(--ink);padding:12px 14px}
.sp-who{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.02em;color:var(--chalk);text-align:center;
  display:flex;align-items:flex-end;justify-content:center;line-height:1.05}
.sp-fig{background:var(--panel);padding:13px 14px;display:flex;flex-direction:column;gap:2px}
.sp-v{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:19px;
  color:var(--chalk);font-weight:700}
.sp-k{font-family:var(--f-body);font-size:12px;color:var(--muted)}
.sp-pick{background:var(--panel);border:0;cursor:pointer;position:relative;
  transition:background-color .12s}
.sp-pick::after{content:'';position:absolute;inset:50% auto auto 50%;
  width:16px;height:16px;transform:translate(-50%,-50%);
  border:1px solid var(--line-2);transition:background-color .12s,border-color .12s}
.sp-pick:hover:not(:disabled){background:var(--panel-2)}
.sp-pick:hover:not(:disabled)::after{border-color:var(--accent)}
.sp-pick[aria-pressed="true"]::after{background:var(--accent);border-color:var(--accent)}
.sp-pick:disabled{cursor:default}
.sp-pick.correct::after{background:var(--good);border-color:var(--good)}
.sp-pick.wrong::after{background:var(--miss);border-color:var(--miss)}

/* ---------- result: the grade leads ---------- */
.res-grade{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-top:10px}
.res-letter{font-family:var(--f-display);font-weight:700;
  font-size:clamp(84px,15vw,170px);line-height:.8;letter-spacing:-.02em;color:var(--accent)}
.res-band{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(22px,3.4vw,36px);letter-spacing:.02em;color:var(--chalk);line-height:1}

@media (max-width:820px){
  .sp{grid-template-columns:1fr 64px 64px}
  .sp-who{font-size:13px}
  .sp-v{font-size:17px}
  .res-grade{gap:14px}
}

/* Reordering is pointer-driven, so the browser must not claim vertical
   gestures on those rows or a drag turns into a page scroll. */
.ranklist{touch-action:pan-x}
.rankrow{touch-action:none;user-select:none;-webkit-user-select:none}
.rankrow .mv{touch-action:manipulation}

/* ---------- level choice on the cover ---------- */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:6px;
  margin:36px 0 0;max-width:640px}
.level{background:var(--panel);border:1px solid var(--line-2);border-left:2px solid var(--line-2);
  padding:20px 22px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:7px;
  transition:border-color .13s,background-color .13s}
.level:hover{border-color:var(--accent);border-left-color:var(--accent);background:var(--panel-2)}
.level-n{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:26px;
  line-height:1;letter-spacing:.02em;color:var(--chalk)}
.level-b{font-family:var(--f-body);font-size:13.5px;line-height:1.4;color:var(--muted)}
.level:hover .level-n{color:var(--accent)}
.switch-board{background:transparent;border:0;color:var(--muted);font-family:var(--f-body);
  font-size:12.5px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.switch-board:hover{color:var(--accent)}

/* ============================================================
   HEAD TO HEAD
   ============================================================ */
.lobby-h{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(46px,8vw,86px);line-height:.85;letter-spacing:-.01em;color:var(--chalk);margin:0}
.lobby{display:flex;flex-direction:column;gap:10px;margin-top:32px;max-width:440px}
.lobby-l{font-family:var(--f-data);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-top:8px}
.lobby input{background:transparent;border:0;border-bottom:2px solid var(--line-2);
  color:var(--chalk);font-family:var(--f-body);font-size:21px;padding:9px 2px;width:100%}
.lobby input:focus{outline:0;border-bottom-color:var(--accent)}
.lobby .code-in{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:.16em;
  text-transform:uppercase;max-width:190px}
.lobby-levels{display:flex;gap:5px}
.lvl-chip{background:transparent;border:1px solid var(--line-2);color:var(--chalk-2);
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:15px;
  letter-spacing:.06em;padding:9px 18px;cursor:pointer;transition:border-color .12s,color .12s}
.lvl-chip.on{border-color:var(--accent);color:var(--accent)}
.lobby-acts{margin-top:16px}
.lobby-or{color:var(--faint);font-size:13px;margin:18px 0 4px}
.lobby-join{display:flex;gap:10px;align-items:flex-end}
.lobby-note{color:var(--accent);font-size:13.5px;min-height:1.3em;margin:14px 0 0}

.code-big{font-family:var(--f-display);font-weight:700;font-size:clamp(72px,16vw,150px);
  line-height:.85;letter-spacing:.06em;color:var(--accent);margin:12px 0 18px}

/* live opponent strip */
.vs{display:grid;grid-template-columns:auto 1fr 44px auto auto 1fr 44px;gap:10px;
  align-items:center;padding:9px 34px;border-bottom:1px solid var(--line);
  background:var(--ink-2);font-family:var(--f-data);font-size:12.5px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.vs-who{color:var(--chalk-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11ch}
.vs-mid{color:var(--faint)}
.vs-n{color:var(--chalk);text-align:right;font-variant-numeric:tabular-nums}
.vs-bar{display:block;height:4px;background:var(--panel-3);position:relative}
.vs-bar i{display:block;height:100%;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.vs-bar i.me{background:var(--accent)}
.vs-bar i.foe{background:var(--slate-2)}
.vs-done{color:var(--good)}

/* head to head result */
.h2h{padding:40px 0 26px;border-bottom:1px solid var(--line-2)}
.h2h-v{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(40px,8vw,80px);line-height:.85;color:var(--accent);margin:10px 0 22px}
.h2h-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:620px}
.h2h-side{border:1px solid var(--line);border-top:2px solid var(--line-2);background:var(--panel);
  padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.h2h-side.won{border-top-color:var(--good);background:rgba(127,160,94,.07)}
.h2h-n{font-family:var(--f-data);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:700}
.h2h-s{font-family:var(--f-display);font-weight:700;font-size:46px;line-height:1;color:var(--chalk);
  font-variant-numeric:tabular-nums}
.h2h-g{font-family:var(--f-data);font-size:13px;color:var(--faint);font-weight:700}

@media (max-width:820px){
  .vs{grid-template-columns:auto 1fr 38px auto 1fr 38px;padding:8px 20px;gap:7px;font-size:11px}
  .vs-mid{display:none}
}

/* waiting on the other player, in the deck where Next would be */
.wait-foe{display:flex;align-items:center;gap:10px;font-family:var(--f-data);font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);
  white-space:nowrap}
.wait-foe.ready{color:var(--good)}
.wait-dot{width:9px;height:9px;background:var(--muted);flex:0 0 9px;
  animation:waitPulse 1.1s ease-in-out infinite}
.wait-foe.ready .wait-dot{background:var(--good);animation:none}
@keyframes waitPulse{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .wait-dot{animation:none} }

/* ============================================================
   LAYOUT PASS
   ============================================================ */

/* 5. Wide screens: the exhibit and the answers side by side, instead of a
   62ch column with half the viewport empty beside it. */
@media (min-width:1120px){
  .round.two{display:grid;grid-template-columns:1.05fr .95fr;gap:0 46px;
    align-items:start;max-width:1180px}
  .round.two > *{grid-column:1;min-width:0}
  .round.two > .body-block{grid-column:2;grid-row:1 / span 99;margin-top:0;min-width:0}
  /* the right column is narrower than the page, so options go back to one file */
  .round.two .opts{grid-template-columns:1fr}
  .round.two .inline-answer{grid-column:1 / -1}
}

/* 6. The clock reads as a duration, not a bare number. */
.r-clock i{font-style:normal;font-size:.55em;margin-left:1px;opacity:.55;
  font-family:var(--f-data);text-transform:lowercase}

/* The result, stated once, where the player is actually looking. */
.inline-answer{margin-top:20px;padding:13px 16px;background:var(--panel);
  border-left:2px solid var(--line-2);display:flex;gap:14px;align-items:baseline;
  flex-wrap:wrap;animation:rise .26s cubic-bezier(.2,.8,.2,1) both}
.inline-answer .ia-v{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:15px;letter-spacing:.06em;white-space:nowrap}
.inline-answer .ia-t{color:var(--chalk-2);font-size:14.5px;line-height:1.45;min-width:0}
.inline-answer.ok{border-left-color:var(--good)} .inline-answer.ok .ia-v{color:var(--good)}
.inline-answer.part{border-left-color:var(--part)} .inline-answer.part .ia-v{color:var(--part)}
.inline-answer.no{border-left-color:var(--miss)} .inline-answer.no .ia-v{color:var(--miss)}

/* 9. A way out. */
.quit{background:transparent;border:0;color:var(--faint);font-family:var(--f-data);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  cursor:pointer;padding:0 0 0 4px;transition:color .12s}
.quit:hover{color:var(--miss)}

/* 7. The cover's three doors match, and the board is a quiet aside. */
.levels{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));max-width:840px}
.quiet-link{background:transparent;border:0;color:var(--muted);font-family:var(--f-body);
  font-size:14px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:4px}
.quiet-link:hover{color:var(--accent)}

/* 8. Accent discipline: vermilion means live or interactive. Ordinal numbers
   and timeline dots are neither, and spending the accent on them left nothing
   to signal what the player can actually act on. */
.rankrow .pos{color:var(--muted)}
.fiverow .pos{color:var(--muted)}
.ranklist.standings .pos{color:var(--muted)}
.stint.on::before{background:var(--line-2)}
.path .stint:first-child::before{background:var(--accent)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  /* 1. The rail becomes a progress strip. Twenty ticks in a 52px column was
     13% of a phone screen spent on a column of dashes. */
  .frame{flex-direction:column}
  .rail{width:100%;flex:0 0 auto;height:auto;flex-direction:row;align-items:center;
    padding:9px 16px;gap:12px;border-right:0;border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:6}
  .rail-cap{border-bottom:0;padding:0;font-size:15px;flex:0 0 auto}
  .ticks{flex-direction:row;padding:0;gap:3px;align-items:center;min-height:0}
  .tick{width:auto!important;flex:1;height:4px;margin:0}
  .tick.now{height:6px}
  .tick.now::after{display:none}
  .rail-foot{border-top:0;padding:0;flex:0 0 auto;font-size:12px}

  /* 2. Eight options have to fit without fighting for room. */
  .opts .opt{padding:12px 12px;font-size:15.5px;gap:12px}
  .opt .key{flex:0 0 14px;font-size:11.5px}
  .opt:hover:not(:disabled){padding-left:12px}   /* no jitter on tap */
  .prompt{font-size:20px}
  main{padding:0 16px}
  .runhead{padding:14px 16px 10px}
  .round{padding:18px 0 20px}

  /* 3. The primary action stays reachable. */
  .deck{position:sticky;bottom:0;z-index:5;padding:12px 16px;
    box-shadow:0 -10px 20px -12px #000}
  .deck .btn{padding:12px 22px 11px}

  .r-clock{font-size:20px}
  .vs{position:sticky;top:44px;z-index:5}
}

/* Long team and player names should shrink rather than wrap into two lines. */
.stint .team{font-size:clamp(14px,3.6vw,16px)}
.duel-name{overflow-wrap:break-word}

/* The running head has four things in it and a phone has room for two.
   Keep the format name and the count; the category and the word "Round"
   are context the player already has. */
@media (max-width:820px){
  .runhead{flex-wrap:nowrap;gap:10px;align-items:center}
  .runhead .mode{font-size:13px;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;min-width:0;flex:1}
  .runhead .cat{display:none}
  .runhead .rw{display:none}
  .runhead .meta{gap:11px;flex:0 0 auto;align-items:center}
  .runhead .rn{white-space:nowrap}
  .quit{font-size:11px}
}

/* ============================================================
   DOCUMENTS
   Every format presents as the artefact it actually is. The frame
   is shared — a ruled header band with a stamped kicker — and each
   kind furnishes its body differently, so a box score, a register
   and a chart are recognisably different objects.
   ============================================================ */
.doc{margin-top:22px;border:1px solid var(--line);background:var(--panel);min-width:0}
.doc-head{display:flex;align-items:baseline;gap:14px;padding:9px 14px;
  border-bottom:1px solid var(--line);background:var(--ink-2);flex-wrap:wrap}
.doc-kicker{font-family:var(--f-data);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.doc-title{font-family:var(--f-data);font-size:12px;letter-spacing:.04em;color:var(--muted);
  text-transform:uppercase;min-width:0}
.doc-body{padding:0}

/* ---------- box score: agate, ruled, nothing decorative ---------- */
.doc-box .doc-body{padding:0}
.doc-box .boxwrap{border:0;margin:0;background:transparent}
.doc-box table.box{min-width:460px}
.doc-box table.box th{padding:8px 14px 6px;border-bottom:1px solid var(--line-2);
  color:var(--faint)}
.doc-box table.box td{padding:12px 14px;border-bottom:0;font-size:15px}
.doc-box table.box tr.hl td{background:transparent;color:var(--chalk)}
.doc-box table.box tr.hl td:first-child{color:var(--accent);font-weight:700}
.doc-box table.box td:last-child{color:var(--accent);font-weight:700;font-size:17px}

/* ---------- register: a transaction ledger, numbered and ruled ---------- */
.doc-ledger .path{border-left:0;margin-top:0}
.doc-ledger .stint{grid-template-columns:30px 92px 1fr;gap:12px;padding:9px 14px;
  border-bottom:1px solid var(--line);align-items:baseline}
.doc-ledger .stint::before{display:none}
.doc-ledger .stint:last-child{border-bottom:0}
.doc-ledger .stint:nth-child(odd){background:rgba(255,255,255,.012)}
.st-i{font-family:var(--f-data);font-size:11.5px;color:var(--faint);
  font-variant-numeric:tabular-nums}
.doc-ledger .yr{color:var(--muted)}
.doc-ledger .team{color:var(--chalk)}

/* ---------- tables: standings, scoring order, rank ---------- */
.doc-table .ranklist,.doc-table .five{border-top:0;margin-top:0}
.doc-table .rankrow,.doc-table .fiverow{border-bottom:1px solid var(--line);padding:11px 14px}
.doc-table .rankrow:last-child,.doc-table .fiverow:last-child{border-bottom:0}
.doc-table .rankrow:nth-child(odd),.doc-table .fiverow:nth-child(odd){background:rgba(255,255,255,.012)}
.fiverow.head{background:var(--ink-2)!important;border-bottom:1px solid var(--line-2)}
.fiverow.head .nm,.fiverow.head .st{font-family:var(--f-data);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;font-style:normal}

/* ---------- chronology: a dated spine ---------- */
.doc-ledger .ranklist.chrono{border-left:0;margin-left:0}
.doc-ledger .ranklist.chrono .rankrow{border-bottom:1px solid var(--line);padding:11px 14px}
.doc-ledger .ranklist.chrono .rankrow::before{left:0;top:50%;transform:translateY(-50%);
  width:3px;height:14px;background:var(--line-2)}
.doc-ledger .ranklist.chrono .rankrow:first-child::before{background:var(--accent)}

/* ---------- charts: plotted, with a baseline ---------- */
.doc-chart .doc-body{padding:18px 16px 14px}
.doc-chart .profile{margin-top:0}
.doc-chart .arcwrap{margin-top:0}
.doc-chart .arc{border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  background:linear-gradient(to top,transparent 0,transparent calc(50% - 1px),
    var(--line) calc(50%),transparent calc(50% + 1px),transparent 100%)}
.arc-cap{font-family:var(--f-data);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-top:26px}
.doc-chart .pbar .t{border-color:var(--line)}

/* ---------- cross reference: a real matrix ---------- */
.doc-grid .doc-body{padding:0}
.gq{display:grid;grid-template-columns:1fr 1fr}
.gq-corner{border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);
  min-height:52px;background:var(--ink-2)}
.gq-col,.gq-row{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;color:var(--chalk);padding:14px 16px;
  display:flex;align-items:center}
.gq-col{border-bottom:1px solid var(--line-2)}
.gq-row{border-right:1px solid var(--line-2)}
.gq-hit{display:flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-weight:700;font-size:34px;color:var(--accent);
  background:var(--accent-ghost);min-height:52px}

/* ---------- scouting report ---------- */
.doc-report .doc-body{padding:14px 14px 14px}
.doc-report .clue-head{margin-top:0}
.doc-report .clues{margin-top:14px}
.doc-report .clue{background:var(--ink-2)}
.doc-report .clue.fresh{background:var(--panel-2)}
.doc-report .clue-more{margin-top:8px}

/* ---------- the recognition formats ----------
   Three formats that ask "which of these eight names" now each show the record
   the question came out of, so they stop being one screen repeated. */

/* Teammates: a team's season. */
.doc-team .doc-body{padding:16px 16px 15px}
.teamcard{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.tc-name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:28px;line-height:.95;color:var(--chalk)}
.tc-rec{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:22px;
  font-weight:700;color:var(--chalk-2);display:flex;align-items:baseline;gap:8px}
.tc-rl{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;color:var(--faint)}

/* League Leader: the mark, with the name withheld. */
.doc-board .doc-body{padding:0}
.ldr-row{display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:14px;
  padding:15px 16px}
.ldr-r{font-family:var(--f-data);font-weight:700;font-size:15px;color:var(--accent)}
.ldr-n{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:24px}
.ldr-n.blank{color:var(--faint);letter-spacing:.18em}
.ldr-v{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-weight:700;
  font-size:26px;color:var(--chalk)}
.ldr-note{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);padding:0 16px 12px;text-align:right}

/* Where From: the draft line. */
.doc-card .doc-body{padding:16px}
.dc-name{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:26px;line-height:.95;color:var(--chalk)}
.dc-line{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:14px;
  letter-spacing:.06em;color:var(--muted);margin-top:7px}

/* ---------- post-answer exhibit ----------
   What the answer came out of, opened once the round is settled. Marked down a
   step from the round itself: it is the footnote, not the question. */
.exhibit{margin-top:16px}
.exhibit .doc{margin-top:0;background:var(--ink-2);border-color:var(--line)}
.exhibit .doc-head{background:transparent}
.exhibit .doc-body{padding:0}
.ex-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;
  padding:9px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.ex-row:last-child{border-bottom:0}
.ex-r{font-family:var(--f-data);font-weight:700;font-size:11.5px;color:var(--faint);
  min-width:14px}
.ex-n{color:var(--chalk-2);min-width:0;overflow-wrap:anywhere}
.ex-v{font-family:var(--f-data);font-variant-numeric:tabular-nums;font-size:13.5px;
  color:var(--muted);white-space:nowrap}
/* The answer stays findable in its own list. */
.ex-row.is-answer{background:rgba(127,160,94,.09)}
.ex-row.is-answer .ex-n{color:var(--chalk);font-weight:700}
.ex-row.is-answer .ex-r{color:var(--good)}

/* ---------- the daily ---------- */
.today{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:30px;
  padding:12px 0 0;border-top:1px solid var(--line)}
.today-k{font-family:var(--f-data);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.today-d{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:20px;color:var(--chalk)}
.today-n{font-family:var(--f-body);font-size:13px;color:var(--faint)}

.level.played{border-left-color:var(--good)}
.level-tick{font-family:var(--f-data);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--good);margin-left:9px;vertical-align:middle}
.cta-sep{color:var(--faint)}
.cover-cta .cover-note{flex-basis:100%;margin:0}

.board-switch{display:flex;gap:14px;align-items:baseline}

/* ---------- share ----------
   The run's shape, without any of its content. */
.share{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px}
.share-grid{display:grid;grid-template-columns:repeat(10,12px);gap:4px}
.sq{width:12px;height:12px;background:var(--line-2)}
.sq.hit{background:var(--good)}
.sq.part{background:var(--part)}
.sq.miss{background:var(--panel-3)}
.share-fallback{flex-basis:100%;margin-top:12px;background:var(--ink-2);color:var(--chalk-2);
  border:1px solid var(--line-2);padding:10px 12px;font-family:var(--f-body);
  font-size:13px;line-height:1.5;resize:vertical}

.h2h-acts{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

@media (max-width:820px){
  .doc-head{padding:8px 12px;gap:10px}
  .doc-kicker{font-size:10px}
  .doc-title{font-size:11px}
  .doc-ledger .stint{grid-template-columns:24px 74px 1fr;gap:9px;padding:8px 12px}
  .doc-table .rankrow,.doc-table .fiverow{padding:10px 12px}
  .gq-col,.gq-row{font-size:15px;padding:11px 12px}
  .gq-hit{font-size:26px}
  .doc-box table.box td{padding:10px 12px}

  .tc-name{font-size:23px}
  .tc-rec{font-size:19px}
  .ldr-n{font-size:20px}
  .ldr-v{font-size:22px}
  .ldr-row{grid-template-columns:26px 1fr auto;gap:10px;padding:13px 12px}
  .dc-name{font-size:22px}
  .ex-row{padding:8px 12px;font-size:14px}
  .today-d{font-size:17px}
  .today{gap:10px}
  .share-grid{grid-template-columns:repeat(10,11px)}
  .sq{width:11px;height:11px}
}