/* ===========================================================================
   Show Us Your TDs — design system
   "Broadcast": floodlit turf, cold night air, glass-and-metal furniture.

   Three rules the whole sheet obeys:
     1. Surfaces are LIT, not outlined. A hairline border plus an inset top
        highlight reads as a physical panel; a 1px box reads as a wireframe.
     2. --yellow is the televised first-down line. It earns its place only on
        rank 1, live state, and the primary action. Nowhere else.
     3. Figures are the product. Tabular, aligned, and given room to be read.
   =========================================================================== */

:root{
  /* ground + surfaces */
  --bg:#060907;  --bg2:#0b100d;
  --panel:#101713;  --panel2:#151e19;  --raise:#1b261f;
  --line:rgba(255,255,255,.055);
  --line2:rgba(255,255,255,.105);
  --lit:rgba(255,255,255,.045);        /* inset top highlight = the lit edge */

  /* ink */
  --chalk:#eaf1ec;  --muted:#8b9d93;  --faint:#788d83;   /* AA on every surface: 5.14:1 on --panel */

  /* accents */
  --turf:#31ad6d;  --turf2:#1b6f47;  --turf-ink:#5cd39a;
  --yellow:#ffd21e; --yellow-dim:rgba(255,210,30,.14);
  --red:#e8544f;   --red-ink:#f2908c;
  --ice:#57b6e8;
  --amber:#e3a53a;

  /* elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 14px -6px rgba(0,0,0,.55);
  --sh-3:0 22px 50px -22px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.35);

  /* rhythm */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r:16px; --r-sm:10px; --r-xs:7px;

  /* type — the fourth axis, previously the only untokenised one */
  --fs-1:10px;   /* uppercase micro-label   */
  --fs-2:11px;   /* meta, caption, pill     */
  --fs-3:12px;   /* secondary, dense cell   */
  --fs-4:13px;   /* component body          */
  --fs-5:14px;   /* body                    */
  --fs-6:15px;   /* lead body               */
  --fs-7:18px;   /* small display figure    */
  --fs-8:22px;   /* display figure          */
  --fs-9:30px;   /* section figure          */
  /* leading for Anton — it must never inherit body's 1.6 */
  --lh-disp:.94;

  /* motion — one ramp, three speeds */
  --t-1:140ms;   /* state flip: colour, opacity   */
  --t-2:200ms;   /* small movement                */
  --t-3:320ms;   /* panel / layout                */

  --disp:"Anton","Arial Narrow",Impact,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Without this the UA paints placeholders, scrollbars, autofill and form
   controls in light mode on a #060907 page. */
:root{ color-scheme:dark; }

*{box-sizing:border-box;margin:0;padding:0}
/* The collapse convention this codebase relies on: [hidden] always wins,
   even against a class that sets display. Several modules assume it. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--chalk); font-family:var(--body);
  font-size:15px; line-height:1.6; min-height:100vh; overflow-x:hidden;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"cv05" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 680px at 50% -14%, rgba(49,173,109,.15), transparent 62%),
    radial-gradient(820px 500px at 92% 2%, rgba(255,210,30,.055), transparent 58%);
}
#app{position:relative;z-index:1}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%}

/* Premium products always show focus. Never remove it — shape it. */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--yellow); outline-offset:3px; border-radius:var(--r-xs);
}
::placeholder{color:var(--faint);opacity:1}
::selection{background:rgba(255,210,30,.26);color:var(--chalk)}
input,textarea,select{caret-color:var(--yellow)}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(16px,3.4vw,28px)}

/* type primitives ---------------------------------------------------------- */
/* Anton is condensed: it needs tight leading everywhere and NEGATIVE tracking as
   it gets larger. Applied by selector because there is no shared class on these
   elements — the previous `.disp` helper existed but was never used on anything. */
.brand b, .hero h1, .shead h2, .pod .pl, .rk, .pr-row .prk, .pscore,
.mu .side .sc, .card .val, .g .r .s, .state h3, .tltitle, .wsub{
  line-height:var(--lh-disp);
}
.hero h1{letter-spacing:-.014em}          /* 104px */
.shead h2{letter-spacing:-.008em}         /*  42px */
.card .val, .state h3{letter-spacing:-.004em}
.pod .pl, .pr-row .prk, .pscore, .mu .side .sc, .g .r .s, .rk{letter-spacing:0}
.brand b{letter-spacing:.015em}           /*  19px — small, so positive */
.lbl,.eyebrow,.tag,.gt,.plbl,.wg-st{font-feature-settings:"tnum" 1}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(6,9,7,.94),rgba(6,9,7,.78));
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;text-decoration:none;border-radius:var(--r-xs)}
.brand .ball{
  width:30px;height:30px;flex-shrink:0;display:block;object-fit:contain;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.brand b{
  font-family:var(--disp);font-size:19px;letter-spacing:.015em;
  text-transform:uppercase;white-space:nowrap;
}
.brand b i{font-style:normal;color:var(--yellow)}

.nav{display:flex;gap:1px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav a{
  padding:8px 13px;border-radius:99px;font-size:12.5px;font-weight:550;color:var(--muted);
  text-decoration:none;white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease);
}
.nav a:hover{color:var(--chalk);background:rgba(255,255,255,.045)}
.nav a.on{color:var(--chalk);background:rgba(255,255,255,.085);font-weight:650}

.wkpill{
  display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;flex-shrink:0;
  background:var(--panel2);border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--lit);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex-shrink:0}
.dot.live{background:var(--red);position:relative}
/* A scaling ring on a pseudo-element: transform+opacity only, so this composites
   instead of repainting a box-shadow 60 times a second. */
.dot.live::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--red);animation:pulse 2s ease-out infinite;
}
@keyframes pulse{from{transform:scale(1);opacity:.65}to{transform:scale(3.4);opacity:0}}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(46px,8vw,86px) 0 clamp(34px,5vw,52px);overflow:hidden;
  border-bottom:1px solid var(--line)}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.42;
  background:repeating-linear-gradient(90deg,transparent 0 82px,rgba(255,255,255,.04) 82px 83px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 34%,#000 66%,transparent);
}
.hero .wrap{position:relative}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--turf-ink);margin-bottom:var(--sp-4);
}
.hero h1{
  font-family:var(--disp);font-size:clamp(46px,10.4vw,104px);
  letter-spacing:-.008em;text-transform:uppercase;line-height:.86;
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .sub{color:var(--muted);margin-top:var(--sp-5);max-width:52ch;font-size:15px}
.firstdown{
  height:3px;background:var(--yellow);border-radius:2px;margin-top:var(--sp-6);width:128px;
  box-shadow:0 0 22px rgba(255,210,30,.5);
}

/* podium */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-7)}
.pod{
  position:relative;overflow:hidden;padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--lit), var(--sh-2);
}
.pod.p1{
  border-color:rgba(255,210,30,.34);
  background:linear-gradient(180deg,rgba(255,210,30,.085),var(--panel) 62%);
  box-shadow:inset 0 1px 0 rgba(255,210,30,.22), var(--sh-3);
}
.pod .pl{font-family:var(--disp);font-size:28px;line-height:1;color:var(--faint);letter-spacing:.01em}
.pod.p1 .pl{color:var(--yellow)}
.pod .pn{font-weight:680;font-size:16px;margin-top:var(--sp-3);letter-spacing:-.005em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .po{font-size:12.5px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod .pr{font-size:12.5px;color:var(--faint);margin-top:var(--sp-3)}
.pod .pr b{color:var(--chalk);font-weight:650}

/* ── sections ────────────────────────────────────────────────────────────── */
section{padding:var(--sp-8) 0;border-bottom:1px solid var(--line)}
.shead{display:flex;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
.shead h2{
  font-family:var(--disp);font-size:clamp(27px,3.6vw,42px);
  text-transform:uppercase;letter-spacing:-.004em;line-height:.94;
}
.shead p{color:var(--muted);font-size:13px;margin-left:auto;max-width:42ch;text-align:right;line-height:1.55}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--lit), var(--sh-3);
}

/* ── standings ───────────────────────────────────────────────────────────── */
.tblwrap{overflow-x:auto;border-radius:var(--r);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:700px}
thead th{
  text-align:left;font-size:var(--fs-1);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--faint);padding:var(--sp-4);white-space:nowrap;
  position:sticky;top:0;background:var(--panel);cursor:pointer;user-select:none;
  border-bottom:1px solid var(--line2);transition:color .16s var(--ease);
}
thead th:hover{color:var(--chalk)}
thead th.num,tbody td.num{text-align:right}
thead th .ar{opacity:.5;font-size:8px;margin-left:4px;vertical-align:1px}
tbody tr{border-bottom:1px solid rgba(255,255,255,.035);transition:background .16s var(--ease)}
tbody tr:hover{background:rgba(255,255,255,.028)}
tbody tr:last-child{border-bottom:none}
tbody td{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-5);white-space:nowrap;vertical-align:middle}
.rk{font-family:var(--disp);font-size:var(--fs-7);color:var(--faint);display:inline-block;min-width:22px}
tr.top .rk{color:var(--yellow)}
/* Playoff line and basement read as a lit edge, not a coloured block.
   Red/green is the commonest colour-blind pair, so WIDTH carries the meaning too:
   a 2px hairline for the playoff cut, a 5px slab for last place. */
tr.playoff td:first-child{box-shadow:inset 2px 0 0 var(--turf)}
tr.last td:first-child{box-shadow:inset 5px 0 0 var(--red)}

.tm{display:flex;align-items:center;gap:var(--sp-3);min-width:190px}
/* Owners upload arbitrary images — one in this league is 1170x675. The size must
   live on the element itself so it is bounded everywhere it appears. */
.tlogo{
  width:30px;height:30px;flex:0 0 30px;border-radius:8px;object-fit:cover;
  background:var(--raise);display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
span.tlogo.ph{display:grid;place-items:center;font-family:var(--disp);font-size:12px;
  color:var(--muted);letter-spacing:.02em}
.tlogo-lg{width:42px;height:42px;flex-basis:42px;border-radius:10px}
.tlogo-lg.ph{font-size:16px}
.tlogo-sm{width:24px;height:24px;flex-basis:24px;border-radius:6px}
.tlogo-sm.ph{font-size:10px}

.tm .nm{font-weight:640;letter-spacing:-.004em;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.tm .ow{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;max-width:220px}
.rec{font-weight:660;letter-spacing:.01em}
.strk{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.05em}
.strk.w{background:rgba(49,173,109,.15);color:var(--turf-ink)}
.strk.l{background:rgba(232,84,79,.14);color:var(--red-ink)}
.strk.n{background:rgba(255,255,255,.045);color:var(--faint)}
.luck{font-size:12.5px;font-weight:660}
.luck.pos{color:var(--turf-ink)}.luck.neg{color:var(--red-ink)}
.bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden;min-width:66px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--turf2),var(--turf));border-radius:2px}

/* ── power rankings ──────────────────────────────────────────────────────── */
.pr-list{display:grid;gap:var(--sp-2)}
.pr-row{
  display:grid;grid-template-columns:42px 1fr auto auto;gap:var(--sp-4);align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);
  box-shadow:inset 0 1px 0 var(--lit);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.pr-row:hover{border-color:var(--line2);background:var(--panel2)}
.pr-row .prk{font-family:var(--disp);font-size:23px;color:var(--faint);letter-spacing:.02em}
.pr-row:first-child .prk{color:var(--yellow)}
.pr-main .pn{font-weight:660;font-size:14.5px;letter-spacing:-.004em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-main .pmeta{font-size:12px;color:var(--muted);margin-top:3px}
.mv{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;
  justify-content:flex-end;min-width:50px}
.mv.up{color:var(--turf-ink)}.mv.dn{color:var(--red-ink)}.mv.fl{color:var(--faint)}
.pscore{font-family:var(--disp);font-size:21px;text-align:right;min-width:54px;letter-spacing:.01em}

/* ── matchups ────────────────────────────────────────────────────────────── */
.mus{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-3)}
.mu{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
  box-shadow:inset 0 1px 0 var(--lit);
}
.mu .side{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0}
.mu .side .nm{flex:1;font-size:13.5px;font-weight:620;letter-spacing:-.004em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu .side .sc{font-family:var(--disp);font-size:20px;min-width:58px;text-align:right;letter-spacing:.01em}
.mu .side.win .nm{color:var(--chalk);font-weight:680}
.mu .side.win .sc{color:var(--yellow)}
.mu .side.lose{opacity:.5}
.mu .vs{height:1px;background:var(--line);margin:var(--sp-1) 0}
.mu .tag{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin-bottom:var(--sp-2)}

/* ── stat cards ──────────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:var(--sp-3)}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-4) var(--sp-5);
  box-shadow:inset 0 1px 0 var(--lit);
}
.card .lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);font-weight:700}
.card .val{font-family:var(--disp);font-size:30px;margin:var(--sp-3) 0 var(--sp-1);
  line-height:1;letter-spacing:-.004em}
.card .who{font-size:13px;font-weight:620;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .note{font-size:12px;color:var(--muted);margin-top:3px}
.card.good .val{color:var(--turf-ink)}
.card.bad  .val{color:var(--red-ink)}
.card.hot  .val{color:var(--yellow)}

/* ── NFL scoreboard ──────────────────────────────────────────────────────── */
.nfl{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:var(--sp-3)}
.g{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-3) var(--sp-4);box-shadow:inset 0 1px 0 var(--lit);
}
.g .gt{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin-bottom:var(--sp-3)}
.g .gt .st{white-space:nowrap}
.g .gt .st.live{color:var(--red)}
.g .gt .st.final{color:var(--muted)}
.g .r{display:flex;align-items:center;gap:var(--sp-2);padding:3px 0}
.g .r img{width:22px;height:22px;flex:0 0 22px;object-fit:contain}
.g .r .ab{font-size:13px;font-weight:640;flex:1;letter-spacing:.01em}
.g .r .rec2{font-size:11px;color:var(--faint)}
.g .r .s{font-family:var(--disp);font-size:18px;min-width:30px;text-align:right}
.g .r.w .s{color:var(--yellow)}
.g .r.l{opacity:.62}

/* ── trash talk ──────────────────────────────────────────────────────────── */
.talk{display:grid;gap:var(--sp-3);max-width:720px}
.msg{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--sp-4) var(--sp-5);box-shadow:inset 0 1px 0 var(--lit);
}
.msg .mh{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-2);flex-wrap:wrap}
.msg .au{font-weight:700;font-size:13.5px;color:var(--yellow)}
.msg .dt{font-size:11.5px;color:var(--faint)}
.msg .bd{font-size:var(--fs-5);color:#d5e0d8;white-space:pre-wrap;word-break:break-word;
  line-height:1.65;max-width:66ch}
.msg .rp{border-left:2px solid var(--line2);margin-top:var(--sp-3);padding:var(--sp-2) 0 2px var(--sp-4)}
.msg .rp .au{font-size:12.5px;color:var(--turf-ink)}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:99px;
  background:var(--yellow);color:#12170f;font-weight:700;font-size:13px;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:filter .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 6px 18px -8px rgba(255,210,30,.7);
}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;border-color:var(--line2);color:var(--muted);box-shadow:none;
}
.btn.ghost:hover{color:var(--chalk);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.04)}
.btn:disabled,.btn[disabled]{
  opacity:.55;cursor:default;transform:none;filter:none;
  box-shadow:none;pointer-events:none;
}

/* ── states ──────────────────────────────────────────────────────────────── */
.state{max-width:740px;margin:0 auto;text-align:center;padding:var(--sp-8) 0}
.state h3{font-family:var(--disp);font-size:32px;text-transform:uppercase;margin-bottom:var(--sp-3);
  letter-spacing:-.004em}
.state p{color:var(--muted);margin-bottom:var(--sp-4)}
.steps{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-5);box-shadow:inset 0 1px 0 var(--lit)}
.steps ol{margin:0;padding-left:20px}
.steps li{margin:var(--sp-3) 0;font-size:13.5px;color:#c8d5cc;line-height:1.65}
.steps code{background:var(--raise);padding:2px 7px;border-radius:5px;font-size:12.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--yellow);word-break:break-all}
.steps b{color:var(--chalk)}
.skel{background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:sh 1.4s infinite;border-radius:var(--r-sm);height:52px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.err{color:var(--red);font-size:13px}
.empty{color:var(--faint);font-size:13.5px;padding:var(--sp-6);text-align:center;
  background:var(--panel);border:1px dashed var(--line2);border-radius:var(--r-sm)}
footer{padding:var(--sp-6) 0 var(--sp-8);color:var(--faint);font-size:12px;text-align:center;line-height:1.9}
footer b{color:var(--muted)}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .shead p{margin-left:0;text-align:left;max-width:none}
}
@media(max-width:680px){
  body{font-size:14.5px}
  section{padding:var(--sp-7) 0}
  .podium{grid-template-columns:1fr;gap:var(--sp-2)}
  .pod{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4)}
  .pod .pl{font-size:22px}
  .pod .pn{margin-top:0}
  .pod .pr{margin-top:0;margin-left:auto;white-space:nowrap}
  .topbar .wrap{gap:12px;height:60px}
  .brand b{font-size:16px}
  .pr-row{grid-template-columns:32px 1fr auto;gap:var(--sp-3);padding:var(--sp-3)}
  .pr-row .pscore{display:none}
  .msg{padding:var(--sp-3) var(--sp-4)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}

/* ── mobile menu ─────────────────────────────────────────────────────────── */
/* Ten sections in a horizontal scroll strip gave the nav 73px of visible width
   on a 375px screen — one item showing, 598px hidden. Below 820px it becomes a
   proper disclosure sheet anchored under the (sticky) bar. */
.navtoggle{display:none}
.nt-bars{display:grid;gap:3.5px;width:15px}
.nt-bars i{display:block;height:1.8px;background:currentColor;border-radius:2px;
  transition:transform .22s var(--ease), opacity .18s var(--ease)}

@media(max-width:820px){
  .navtoggle{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;flex-shrink:0;
    padding:8px 14px;border-radius:99px;
    background:var(--panel2);border:1px solid var(--line2);
    box-shadow:inset 0 1px 0 var(--lit);
    font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--chalk);
  }
  .navtoggle[aria-expanded="true"]{background:var(--yellow);border-color:transparent;color:#12170f}
  .navtoggle[aria-expanded="true"] .nt-bars i:nth-child(1){transform:translateY(5.3px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] .nt-bars i:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] .nt-bars i:nth-child(3){transform:translateY(-5.3px) rotate(-45deg)}

  /* Open/closed is driven by `display`, NOT by transitioning opacity. A timed
     transition only reaches its end value if animation frames actually run; if
     anything throttles them the panel stays pinned at opacity 0 and the menu is
     invisible while still being clickable. There is deliberately NO entrance
     animation: an unrun keyframe pins opacity at its `from` value, which is the
     same failure. The menu simply appears. */
  .nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;   /* anchored to the sticky bar */
    margin:0;gap:2px;
    padding:10px clamp(16px,3.4vw,28px) 16px;
    max-height:calc(100vh - 100%);overflow-y:auto;overflow-x:hidden;
    background:linear-gradient(180deg,rgba(8,12,10,.99),rgba(8,12,10,.97));
    backdrop-filter:blur(18px) saturate(1.3);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
    border-bottom:1px solid var(--line2);
    box-shadow:var(--sh-3);
  }
  .nav.open{display:grid}
  .nav a{
    padding:14px 16px;border-radius:var(--r-sm);font-size:15px;font-weight:600;
    color:var(--chalk);border:1px solid transparent;
  }
  .nav a:hover,.nav a:active{background:var(--panel2)}
  .nav a.on{background:var(--yellow);color:#12170f;font-weight:700}
  body.nav-open{overflow:hidden}          /* stop the page scrolling behind the sheet */
}
@media(max-width:420px){
  .nt-label{display:none}                  /* icon only when the bar is really tight */
  .navtoggle{padding:9px 12px}
}


/* ── sortable column headers ──────────────────────────────────────────────── */
/* These are real buttons so Enter/Space and focus work without any JS. */
.sth{
  display:inline-flex;align-items:center;gap:5px;width:100%;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  background:none;border:0;padding:0;cursor:pointer;text-align:inherit;
  transition:color var(--t-1) var(--ease);
}
.sth:hover{color:var(--chalk)}
.sth.on{color:var(--chalk)}
.sth:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:3px}
thead th.num .sth{justify-content:flex-end}
.ar{opacity:.6;font-size:8px}

/* ── skip link ────────────────────────────────────────────────────────────── */
.skip{
  position:fixed;top:10px;left:10px;z-index:200;
  padding:11px 18px;border-radius:var(--r-sm);
  background:var(--yellow);color:#12170f;font-weight:700;font-size:var(--fs-4);
  text-decoration:none;box-shadow:var(--sh-3);
  transform:translateY(-160%);
}
.skip:focus{transform:none}

/* ── boot skeleton ────────────────────────────────────────────────────────── */
.boot{padding:var(--sp-8) 0}
.boot-pods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-7)}
.boot-line{
  border-radius:var(--r-sm);
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel2) 50%,var(--panel) 75%);
  background-size:200% 100%;animation:bootsweep 1.4s ease-in-out infinite;
}
@keyframes bootsweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(max-width:680px){ .boot-pods{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .boot-line{animation:none;background:var(--panel2)} }


/* ── the only way out ─────────────────────────────────────────────────────── */
/* Every page except the locker room carries exactly one control, and it goes
   back to the locker room. Navigation lives in the room, not in a header. */
.backhome{
  position:sticky;top:0;z-index:70;
  display:flex;align-items:center;gap:10px;
  padding:var(--sp-3) clamp(16px,3.4vw,28px);
  background:linear-gradient(180deg,rgba(6,9,7,.96),rgba(6,9,7,.78));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  font-size:var(--fs-4);font-weight:650;color:var(--muted);text-decoration:none;
  transition:color var(--t-1) var(--ease);
}
.backhome:hover{color:var(--chalk)}
.backhome img{width:24px;height:24px;flex-shrink:0}
.backhome .arw{font-size:16px;line-height:1;color:var(--yellow)}