/* ============================================================
   DIRTY DOZEN — "THE BROADCAST"
   The graphics package of a 2035 broadcast covering this league.
   Vocabulary: score-bug chips · chyron name-bars · lower-third
   slabs · angled cuts · ticker rundown headers · big condensed
   tabular numerals. Color carries meaning only: gold = you,
   green = good, red = bad, blue = the other side's data.
   Entry flow (egg carton / ceremony) lives in intro.css — locked.
   ============================================================ */

:root{
  --bg:#08090d; --bg2:#0c0e13;
  --surface:#12141b; --surface2:#191c25; --panel:#0e1016;
  --line:#232835; --line2:#303748;
  --text:#eef1f6; --mut:#9aa3b2; --faint:#69727f;
  --gold:#e2ba54; --gold-deep:#a8842b; --gold-hot:#f2d68c;
  --red:#e0655c; --amber:#e0a14e; --green:#4fc985; --data:#7ea6e0;
  --disp:"Barlow Condensed",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --cut:9px;             /* the signature corner cut */
  --ease:cubic-bezier(.2,.7,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html{-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  padding-bottom:calc(78px + env(safe-area-inset-bottom))}
#app{max-width:660px;margin:0 auto;padding:0 16px}
button{font-family:inherit;cursor:pointer;color:inherit;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
a,button,.egg-cup,[role="button"]{-webkit-tap-highlight-color:transparent}
.mut{color:var(--mut)} .sm{font-size:12.5px}
.pill{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;padding:2px 8px;border:1px solid var(--line2)}
.pill.hot{color:var(--gold);border-color:var(--gold-deep)}

/* the two broadcast cuts, reused everywhere */
.movetag,.move-tag,.led-flag,.pc-flag,.hype-v,.rankchip,.bug-seg,.cv-slab,.hero-bug,
.rk-you,.onair{clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%)}

/* ============ SHELL ============ */
header.top{position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 72%,transparent);
  padding:12px 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
header.top::before{content:"";position:absolute;top:0;left:-16px;right:-16px;height:3px;
  background:linear-gradient(90deg,var(--gold) 0 34%,var(--gold-deep) 34% 37%,transparent 37%)}
.top .wordmark{font-family:var(--disp);font-weight:800;font-size:21px;text-transform:uppercase;letter-spacing:1px;
  white-space:nowrap;flex:none}
.top .wordmark em{font-style:normal;color:var(--gold)}
/* signed-in chip: who you are, and an unmistakable way out */
.top .who{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);
  border:1px solid var(--line2);padding:5px 11px 5px 6px;flex:none;white-space:nowrap;min-height:44px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.top .who:active{border-color:var(--gold-deep)}
.who-av{flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#171307;
  font-style:normal;font-family:var(--disp);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;line-height:1}
.who-n{color:var(--text);font-size:12.5px;font-weight:600}
.who-x{color:var(--faint);font-size:11px;letter-spacing:.4px;padding-left:8px;
  border-left:1px solid var(--line2)}
.onair{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--surface2);border:1px solid var(--line2);padding:4px 12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:2px;color:var(--mut)}
/* phone: the wordmark and the on-air bug get the bar; identity collapses to the action */
@media (max-width:460px){
  .who-n{display:none}
  .onair em{display:none}
  .onair{padding:4px 9px;letter-spacing:1.4px;font-size:9px}
}
@media (max-width:360px){ .top .wordmark{font-size:18px} .who-x{display:none} }
.onair i{font-style:normal;width:6px;height:6px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px var(--green)}
.onair em{font-style:normal}
@media (prefers-reduced-motion:no-preference){ .onair i{animation:blip 2.4s ease-in-out infinite} }
@keyframes blip{50%{opacity:.35;box-shadow:none}}

#tabbar[hidden]{display:none}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  /* opaque on purpose: a backdrop blur here re-composited the page on every scroll frame
     and was invisible behind a 96% panel anyway. This is the same look, no cost. */
  background:#0a0b0f;
  border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
#tabbar::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,186,84,.5),transparent)}
#tabbar button{background:none;border:none;color:var(--faint);font-size:10.5px;font-weight:600;
  letter-spacing:.3px;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;min-height:48px;position:relative}
#tabbar button .ti{font-size:16px;line-height:1}
#tabbar button.on{color:var(--gold)}
#tabbar button.on::before{content:"";position:absolute;top:-9px;left:22%;right:22%;height:3px;background:var(--gold);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}

h1.pg{font-family:var(--disp);font-weight:800;font-size:40px;line-height:1;text-transform:uppercase;
  margin:16px 0 4px;letter-spacing:.5px}
.pg-sub{color:var(--mut);font-size:13px;margin:6px 0 20px}
.footer{margin:44px -16px 8px;padding:14px 16px;text-align:center;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--faint)}
.back{background:none;border:none;color:var(--mut);font-size:14px;padding:10px 0 2px;min-height:44px}

/* on-air kicker: slant tick + condensed caps + fade rule */
.kicker{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);margin:32px 0 10px}
.kicker::before{content:"";flex:none;width:15px;height:11px;background:var(--gold);
  clip-path:polygon(32% 0,100% 0,68% 100%,0 100%)}
.kicker::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent 82%)}
.kicker.red{color:var(--red)} .kicker.red::before{background:var(--red)}

/* generic stat panel */
.card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line2);
  padding:14px 15px;margin-bottom:10px}
.card h3{font-family:var(--disp);font-size:20px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:5px}
.card p{color:#c6cbd4;font-size:14px}
.chart-card{padding:14px 13px 12px}
.arc-card{padding:14px 10px 8px}
.note-banner{background:none;border:1px dashed var(--line2);padding:12px 14px;color:var(--mut);font-size:13px;margin:14px 0}

/* ============ TEAM HERO — THE CHYRON ============ */
.hero{position:relative;margin:14px 0 0;padding:0 0 14px}
.hero-bug{display:inline-flex;align-items:baseline;gap:7px;background:var(--gold);color:#171307;
  font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:1px;padding:3px 16px 4px;margin-bottom:10px}
.hero-bug i{font-style:normal;font-size:11px;font-weight:700;color:#5c4a17;letter-spacing:1.5px}
.hero .tname{font-family:var(--disp);font-weight:800;font-size:clamp(42px,12vw,64px);line-height:.92;
  text-transform:uppercase;letter-spacing:.5px}
.hero .meta{color:var(--mut);font-size:12.5px;margin-top:8px;line-height:1.6}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--gold) 0 26%,var(--gold-deep) 26% 29%,var(--line) 29%)}
.hero-champ .tname{background:linear-gradient(94deg,#fff 42%,var(--gold-hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rankchip{display:inline-block;font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:1.5px;
  color:#171307;background:var(--gold);padding:3px 14px;margin-bottom:10px}
.rankchip i{font-style:normal;color:#5c4a17;font-size:11px}

/* score-bug strip under the name */
.bugrow{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.bug-seg{display:inline-flex;flex-direction:column;background:var(--surface2);border:1px solid var(--line2);
  padding:6px 16px 7px;min-width:74px}
.bug-seg b{font-family:var(--disp);font-weight:800;font-size:21px;line-height:1;font-variant-numeric:tabular-nums}
.bug-seg span{font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--faint);margin-top:3px}
.bug-seg.gold{border-color:var(--gold-deep)} .bug-seg.gold b{color:var(--gold)}

/* ============ THE MATCHUP BOARD (featured panel) ============ */
.pcard{margin:22px 0 0;background:var(--surface);border:1px solid var(--line);border-top:none;
  padding:0 15px 15px;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.pc-top{display:flex;align-items:center;gap:10px;margin:0 -15px 12px;padding:9px 15px 8px;
  background:var(--surface2);border-bottom:1px solid var(--line)}
.pc-top::before{content:"";flex:none;width:5px;height:16px;background:var(--gold);
  clip-path:polygon(40% 0,100% 0,60% 100%,0 100%)}
.pc-label{font-family:var(--disp);font-weight:800;font-size:14.5px;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;flex:none}
.pc-upd{color:var(--faint);font-size:10px;font-family:var(--mono);letter-spacing:.3px;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-hint{color:var(--faint);font-size:10.5px;margin-left:auto}
.pc-flag{font-family:var(--disp);font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;
  padding:3px 12px;margin-left:auto}
.pc-flag.ok{color:#0d1a12;background:var(--green)}
.pc-flag.bad{color:#fff;background:var(--red)}
.pc-top .info-i{margin-left:auto}
.pc-hint+.info-i,.pc-flag+.info-i{margin-left:0}
.info-i{position:relative;width:25px;height:25px;flex:none;border-radius:50%;border:1px solid var(--line2);
  background:none;color:var(--faint);font-size:12px;font-weight:700;font-style:italic;font-family:Georgia,serif;line-height:1}
.info-i::after{content:"";position:absolute;inset:-10px}
.info-i.on{color:var(--gold);border-color:var(--gold-deep)}
.info-pop{border-left:3px solid var(--gold-deep);background:rgba(226,186,84,.04);color:var(--mut);
  font-size:12.5px;line-height:1.55;padding:9px 12px;margin:0 0 12px}

/* the featured board gets the one sheen sweep on the site */
.board{position:relative;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .board::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(246,214,140,.07),transparent);
    transform:skewX(-16deg);animation:boardSheen 1.5s ease-out .5s both}
  @keyframes boardSheen{to{left:160%}}
}

/* win gauge — the focal number */
.gauge{display:flex;align-items:center;gap:16px;padding:4px 0 14px;border-bottom:1px solid var(--line);margin-bottom:12px}
.gauge svg{flex:none;width:118px;height:70px;display:block}
.gauge-txt{min-width:0}
.gauge-n{font-family:var(--disp);font-weight:800;font-size:44px;line-height:.9;color:var(--gold);
  font-variant-numeric:tabular-nums}
.gauge-n i{font-style:normal;font-size:22px;color:var(--gold-deep)}
.gauge-lbl{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--faint);margin-top:5px}
.gauge-vs{color:var(--mut);font-size:12px;margin-top:3px}
@media (prefers-reduced-motion:no-preference){
  .gauge-arc{stroke-dasharray:var(--len) 400;stroke-dashoffset:0;animation:gaugeDraw .9s var(--ease) .15s backwards}
  @keyframes gaugeDraw{from{stroke-dashoffset:var(--len)}}
}

/* projection bars */
.vs{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.vs-row{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;width:100%;
  text-align:left;color:inherit;min-height:44px}
.vs-name{flex:none;width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--mut);font-weight:600}
button.vs-row .vs-name{color:#dfe3ea;text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);text-underline-offset:3px}
.vs-track{flex:1;height:13px;background:rgba(255,255,255,.05);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 100%,0 100%)}
.vs-bar{display:block;height:100%;background:var(--data);opacity:.75}
.vs-bar.me{background:var(--gold);opacity:1}
.vs-n{flex:none;width:34px;text-align:right;font-family:var(--disp);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
.tw-stance{font-size:14px;line-height:1.55;color:#dfe3ea;border-left:3px solid var(--gold-deep);
  padding:2px 0 2px 12px;margin-top:12px}
.tw-stance::before{content:"THE STANCE";display:block;font-family:var(--disp);font-weight:700;font-size:10px;
  letter-spacing:2px;color:var(--faint);margin-bottom:3px}

/* one-time draw-in for every meter on the site */
@media (prefers-reduced-motion:no-preference){
  .vs-bar,.tug-half i,.pf-bar,.wl-bar,.wl-w,.wl-l,.cmp-bar i,.rl-track i,.pay-bar i,.sl-bar i{
    transform-origin:left center;animation:drawX .65s var(--ease) backwards}
  .tug-half.left i{transform-origin:right center}
  @keyframes drawX{from{transform:scaleX(0)}}
}

/* tug-of-war: where it's won */
.tug{margin:2px 0 0;padding-top:2px}
.tug-head{display:flex;justify-content:space-between;color:var(--faint);font-size:9px;
  letter-spacing:1.8px;text-transform:uppercase;margin-bottom:7px}
.tug-row{display:flex;align-items:center;gap:7px;padding:3.5px 0}
.tug-n{flex:none;width:24px;font-size:11.5px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--mut)}
.tug-n:first-child{text-align:right}
.tug-lbl{flex:none;width:32px;text-align:center;font-family:var(--disp);font-weight:700;
  font-size:11.5px;letter-spacing:.8px;color:var(--faint)}
.tug-half{flex:1;height:9px;background:rgba(255,255,255,.045);overflow:hidden;display:flex;justify-content:flex-start;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 100%,0 100%)}
.tug-half.left{justify-content:flex-end;clip-path:polygon(4px 0,100% 0,100% 100%,0 100%)}
.tug-half i{display:block;height:100%;background:var(--data);opacity:.7}
.tug-half.left i{background:var(--gold);opacity:1}
.tug-d{flex:none;width:34px;text-align:right;font-size:10.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--faint)}
.tug-d.up{color:var(--green)} .tug-d.down{color:var(--red)}

/* ============ AGENT SUGGESTIONS — LOWER THIRDS ============ */
.agent-tag{text-align:right;color:var(--faint);font-size:10.5px;letter-spacing:.6px;margin:-4px 0 10px;
  font-family:var(--mono)}
.agent-tag b{color:var(--mut);font-weight:600}
.moves{display:flex;flex-direction:column;gap:8px}
.move{background:var(--panel);border:1px solid var(--line);border-left:none;position:relative}
.move::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.move-h{width:100%;display:flex;align-items:center;gap:10px;background:none;border:none;
  padding:12px 13px;min-height:52px;text-align:left}
.move-tag{font-family:var(--disp);font-weight:800;font-size:11.5px;letter-spacing:1.6px;
  padding:3px 11px;flex:none;color:#171307;background:var(--gold)}
.move-tag.t-fix{background:var(--red);color:#fff}
.move-tag.t-start{background:var(--green);color:#0d1410}
.move-tag.t-bid{background:var(--gold);color:#171307}
.move-tag.t-watch{background:var(--surface2);color:var(--mut);border:1px solid var(--line2)}
.move-tag.t-hold{background:var(--surface2);color:var(--green);border:1px solid var(--line2)}
.move-tag.t-trade{background:var(--data);color:#101722}
.move.open::before,.move:has(.move-tag.t-fix)::before{background:var(--gold-deep)}
.move:has(.move-tag.t-fix)::before{background:var(--red)}
.move-head{flex:1;font-size:14px;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.move-x{font-style:normal;font-family:var(--disp);font-weight:700;font-size:22px;color:var(--gold);
  line-height:1;transition:transform .18s;flex:none}
.move.open .move-x{transform:rotate(45deg)}
.move-b{display:none;padding:0 13px 13px 13px}
.move.open .move-b{display:block}
.move-b p{color:#c9cdd6;font-size:13.5px}
.ev-btn{background:none;border:none;color:var(--gold);font-size:12px;font-weight:600;
  padding:10px 0 0;letter-spacing:.4px}
.ev{list-style:none;margin-top:8px;border-left:2px solid var(--gold-deep);padding-left:12px}
.ev li{color:var(--mut);font-size:12.5px;margin-bottom:5px;font-variant-numeric:tabular-nums}

/* ============ RECEIPTS — THE ACCURACY STRIP ============ */
.rcpt{margin:22px 0 0;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold-deep);
  padding:10px 14px 6px}
.rcpt-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.rcpt-badge{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold)}
.rcpt-line{color:var(--faint);font-size:11.5px}
.rcpt-line b{color:#e6e9ee;font-variant-numeric:tabular-nums}
.rc-row{display:flex;gap:9px;align-items:flex-start;padding:8px 0 7px}
.rc-row + .rc-row{border-top:1px solid rgba(255,255,255,.05)}
.rc-mark{font-style:normal;font-weight:700;font-size:13px;width:15px;text-align:center;flex:none;margin-top:1px}
.rc-hit{color:var(--green)}.rc-miss{color:var(--red)}.rc-push{color:var(--faint)}.rc-pend{color:var(--gold)}
.rc-body{flex:1;min-width:0}
.rc-short{display:block;font-size:13.5px;color:#dfe3ea;line-height:1.4}
.rc-tag{font-family:var(--disp);font-size:11px;letter-spacing:1.6px;color:var(--gold);margin-right:6px}
.rc-note{display:block;color:var(--faint);font-size:11.5px;margin-top:2px;line-height:1.45}
.rc-st{flex:none;font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--faint);margin-top:3px;font-family:var(--mono)}
.rc-st-hit{color:var(--green)}.rc-st-miss{color:var(--red)}
.rc-none{color:var(--faint);font-size:12.5px}

/* ============ COMPARATOR — HEAD-TO-HEAD PANEL ============ */
.cmp-grp{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--faint);margin:12px 0 7px}
.cmp-chips{display:flex;flex-wrap:wrap;gap:7px}
.cmp-chip{border:1px solid var(--line2);background:rgba(255,255,255,.03);color:#dfe3ea;font-size:12.5px;
  font-weight:600;padding:9px 13px;min-height:44px;display:inline-flex;align-items:center;gap:7px}
.cmp-chip.on{border-color:var(--gold);color:var(--gold);background:rgba(226,186,84,.08)}
.cmp-chip .ci{font-style:normal;font-size:9.5px;letter-spacing:.8px;text-transform:uppercase;font-weight:700}
.ci.warn{color:var(--amber)}.ci.bad{color:var(--red)}.ci.ok{color:var(--green)}
.cmp-wait{color:var(--faint);font-size:12.5px;padding:2px 0 10px}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.cmp-col{border:1px solid var(--line);border-top:2px solid var(--line2);padding:12px;background:var(--panel);min-width:0}
.cmp-col:first-child{border-top-color:var(--gold-deep)}
.cmp-nm{font-family:var(--disp);font-weight:800;font-size:21px;letter-spacing:.4px;text-transform:uppercase;line-height:1.05;overflow-wrap:anywhere}
.cmp-sub{color:var(--faint);font-size:11.5px;margin-top:2px}
.cmp-inj{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;margin-top:8px}
.cmp-inj.ok{color:var(--green)}.cmp-inj.warn{color:var(--amber)}.cmp-inj.bad{color:var(--red)}
.cmp-proj{font-family:var(--disp);font-size:34px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.05;margin-top:5px}
.cmp-bar{height:8px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:6px;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 100%,0 100%)}
.cmp-bar i{display:block;height:100%;background:var(--gold)}
.cmp-ceil{margin-top:9px;color:var(--gold);font-size:12px;letter-spacing:2.5px}
.cmp-ceil span{color:var(--faint);font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;margin-left:6px}
.cmp-note{color:var(--mut);font-size:11.5px;line-height:1.45;margin-top:8px}
.cmp-verdict{border:1px solid var(--gold-deep);overflow:hidden;margin-bottom:6px}
.cv-slab{position:relative;overflow:hidden;background:var(--gold);color:#171307;font-family:var(--disp);
  font-weight:800;font-size:21px;letter-spacing:1.5px;text-transform:uppercase;padding:9px 18px;
  margin:8px 8px 0;display:inline-block}
.cv-line{color:#dfe3ea;font-size:12.5px;padding:8px 14px 11px;line-height:1.45}
@media (prefers-reduced-motion:no-preference){
  .cmp-verdict{animation:cvIn .36s var(--ease) both}
  @keyframes cvIn{from{transform:translateY(9px) scale(.985);opacity:0}to{transform:none;opacity:1}}
  .cv-slab::after{content:"";position:absolute;top:0;left:-75%;width:55%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
    transform:skewX(-18deg);animation:cvShine 1.15s ease-out .2s both}
  @keyframes cvShine{to{left:145%}}
  .cv-line{animation:cvLine .42s ease-out .14s both}
  @keyframes cvLine{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}
.cmp-chip:focus-visible,.info-i:focus-visible,.vs-row.them:focus-visible,.led-row:focus-visible,
.wl-row:focus-visible,.rank-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ============ RUNDOWN (section dropdowns) ============ */
.page{counter-reset:secn}
.sec{border-top:1px solid var(--line);counter-increment:secn}
.sec:last-of-type{border-bottom:1px solid var(--line)}
.sec-h{width:100%;background:none;border:none;text-align:left;padding:15px 2px;min-height:64px;
  display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center;position:relative}
.sec-t{grid-column:1;grid-row:1;font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:1px;text-transform:uppercase;line-height:1.05}
.sec-t::before{content:counter(secn,decimal-leading-zero);color:#171307;background:var(--gold);
  font-size:12px;letter-spacing:.5px;font-weight:800;padding:1px 8px;margin-right:11px;vertical-align:3px;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.sec-s{grid-column:1;grid-row:2;color:var(--faint);font-size:12px;line-height:1.4;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sec-x{grid-column:2;grid-row:1/span 2;font-style:normal;font-family:var(--disp);font-weight:700;font-size:26px;
  color:var(--gold);line-height:1;transition:transform .18s}
.sec.open .sec-x{transform:rotate(45deg)}
.sec-b{display:none;padding:2px 0 24px}
.sec.open .sec-b{display:block}
.sec-b>.kicker{margin-top:24px}
.sec-b>.kicker:first-child{margin-top:8px}

/* ============ FOCUS / GRADES / MOVE ============ */
.focus{margin:20px 0 4px;border-left:3px solid var(--gold);padding:4px 0 6px 16px}
.focus-head{font-family:var(--disp);font-weight:800;font-size:clamp(27px,7.5vw,36px);line-height:1.04;
  margin:6px 0 10px;letter-spacing:.3px}
.focus-why{color:#cbd0d9;font-size:14px}
.grades{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;margin:18px 0 10px}
.gcell{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--line2);
  padding:12px 8px;text-align:center}
.gcell b{display:block;font-family:var(--disp);font-weight:800;font-size:31px;line-height:1;font-variant-numeric:tabular-nums}
.gcell span{color:var(--faint);font-size:10px;letter-spacing:1.2px;text-transform:uppercase}
.gcell.big{border-top-color:var(--gold)}
.gcell.big b{font-size:44px;color:var(--gold)}
.movecard{border-top:1px solid var(--line);padding:12px 2px 4px}
.movetag{display:inline-block;font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;background:var(--gold);color:#171307;padding:3px 13px}
.movetarget{color:var(--faint);font-size:12.5px;margin:9px 0 7px;letter-spacing:.3px}
.movecard p{color:#c9cdd6;font-size:14px}
.bg-hint{color:var(--faint);font-size:12px;margin:-4px 0 10px}
.bg-chips{display:flex;flex-wrap:wrap;gap:8px}
.bg-chip{background:var(--surface);border:1px solid var(--line2);padding:10px 15px;
  font-size:13.5px;font-weight:600;min-height:44px;transition:border-color .15s,background .15s,color .15s}
.bg-chip.on{background:var(--gold);border-color:var(--gold);color:#171307}
.bg-panel{margin-top:12px;border-left:3px solid var(--line2);padding:8px 14px}
.bg-panel p{color:#c9cdd6;font-size:14px}
.bg-level{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:2.2px;text-transform:uppercase;margin-bottom:6px}
.bg-level.red{color:var(--red)} .bg-level.amber{color:var(--amber)} .bg-level.green{color:var(--green)}
.readp{color:#c6cbd4;font-size:14px}

/* finishes strip */
.finrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:2px}
.fin{background:var(--surface2);border:1px solid var(--line);padding:3px 11px;font-size:12px;color:var(--mut);
  font-variant-numeric:tabular-nums}
.fin i{font-style:normal;color:var(--faint);margin-right:6px}
.fin.alt{color:var(--faint)}
.fin.ghost{background:transparent;border-style:dashed;color:#5b616d}
.fin.ghost i{color:#4a505a}
.priorrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;padding-top:9px;border-top:1px dashed var(--line)}
.priorlbl{color:var(--faint);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;margin-right:2px}

/* keepers */
.keeper-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.keeper{background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold-deep);padding:11px 12px}
.keeper b{font-size:14.5px;line-height:1.25}
@media (min-width:540px){ .keeper-strip{grid-template-columns:repeat(4,1fr)} }

/* accordions */
.acc{border-top:1px solid var(--line);background:none}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc-h{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:none;border:none;padding:14px 2px;min-height:52px;font-size:15px;font-weight:600;text-align:left}
.acc-h i{font-style:normal;font-family:var(--disp);font-size:24px;font-weight:700;color:var(--gold);
  line-height:1;transition:transform .18s}
.acc.open .acc-h i{transform:rotate(45deg)}
.acc-b{display:none;padding:0 2px 16px;color:#c6cbd4;font-size:14px}
.acc.open .acc-b{display:block}
.acc.weak .acc-h i{color:var(--red)}
ul.dash{list-style:none}
ul.dash li{padding-left:15px;position:relative;margin-bottom:8px}
ul.dash li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:5px;background:var(--gold);
  clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
.weak ul.dash li::before,.acc.weak ul.dash li::before{background:var(--red)}

/* lineup sheets */
.lineup{list-style:none}
.lineup li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:13.5px;align-items:baseline}
.lineup li:last-child{border-bottom:none}
.lineup .pos{width:46px;flex:none;color:var(--faint);font-family:var(--disp);font-weight:700;letter-spacing:1px}
.lineup li.lu{background:linear-gradient(90deg,rgba(226,186,84,.10) var(--w),transparent var(--w))}
.lu-proj{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--mut);padding-left:8px}
.li-inj{font-style:normal;color:var(--amber);font-size:10.5px;letter-spacing:.8px;text-transform:uppercase}

/* ============ TROPHY WALL ============ */
.trophy{margin:22px 0 4px;background:var(--panel);border:1px solid var(--line);padding:14px 14px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.tc-title{font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold)}
.tc-title.dim{color:var(--faint);font-weight:700;font-size:13.5px}
.tc-since{float:right;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.5px;color:var(--faint);text-transform:none}
.tc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.tc-cell{text-align:center;background:none;border:1px solid var(--line);padding:11px 6px}
.tc-cell b{display:block;font-family:var(--disp);font-weight:800;font-size:30px;line-height:1;color:var(--text)}
.tc-cell b.zero{color:#39404d}
.tc-cell b.lit{color:var(--gold)}
.tc-cell span{display:block;color:var(--faint);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;margin-top:3px}
.tc-cell i{display:block;font-style:normal;color:var(--mut);font-size:11px;margin-top:4px;font-variant-numeric:tabular-nums}
.tc-foot{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);color:var(--mut);font-size:12px;letter-spacing:.3px}
.trophy.champ{border-color:var(--gold-deep);
  background:radial-gradient(120% 130% at 50% 0%,rgba(226,186,84,.13),transparent 62%),var(--panel)}
.ringrow{display:flex;gap:10px;margin:14px 0 12px;flex-wrap:wrap}
.ring{flex:1;min-width:88px;text-align:center;padding:13px 6px 11px;
  background:linear-gradient(165deg,#3a2f14,#1b1a15);border:1px solid var(--gold-deep);
  box-shadow:inset 0 1px 0 rgba(255,220,140,.22);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.ring-yr{display:block;font-family:var(--disp);font-weight:800;font-size:27px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.ring-lbl{display:block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:#a08a53;margin-top:4px}
.tc-line{display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid rgba(226,186,84,.25);
  padding-top:11px;color:var(--mut);font-size:12.5px}
.tc-line b{color:var(--gold);font-family:var(--disp);font-size:17px;font-weight:800;margin-right:3px}
.trophy.champ .tc-foot{border-color:rgba(226,186,84,.25)}
.trophy.champ-3{border-width:1.5px;
  background:radial-gradient(130% 150% at 50% 0%,rgba(226,186,84,.2),transparent 60%),linear-gradient(180deg,#1e1a10,#12141b)}
.trophy.champ-3 .tc-title{font-size:19px;letter-spacing:3.4px;
  background:linear-gradient(95deg,#f4dc9a,#e2ba54 45%,#b8912f);-webkit-background-clip:text;background-clip:text;color:transparent}
.trophy.champ-3 .ring{background:linear-gradient(165deg,#54431a,#241f13);
  box-shadow:inset 0 1px 0 rgba(255,232,170,.35),0 3px 14px rgba(226,186,84,.16)}
.trophy.champ-3 .ring-yr{font-size:30px}
.trophy.champ-1 .ring{position:relative;overflow:hidden}
.trophy.champ-1 .ring::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,238,190,.28) 50%,transparent 62%)}
.trophy.champ-1 .ring-yr{font-size:31px}
.hero-champ{position:relative}
.hero-champ::before{content:"";position:absolute;left:-16px;right:-16px;top:-30px;height:210px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(226,186,84,.12),transparent 70%);pointer-events:none;z-index:-1}

/* ============ LEDGER ============ */
.ledger{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.led-row{display:flex;align-items:center;gap:10px;background:none;border:none;border-bottom:1px solid var(--line);
  padding:11px 2px;min-height:52px;text-align:left;width:100%}
.led-row:active{background:var(--surface)}
.led-name{flex:1;min-width:0;font-weight:600;font-size:14.5px}
.led-name .led-own{display:block;color:var(--faint);font-size:11.5px;font-weight:400}
.led-flag{font-family:var(--disp);font-weight:800;font-size:11px;letter-spacing:1.6px;color:#0d1a12;
  background:var(--green);padding:2px 10px;flex:none}
.led-flag.bad{background:var(--red);color:#fff}
.led-rec{font-family:var(--disp);font-weight:800;font-size:19px;flex:none;font-variant-numeric:tabular-nums}
.led-rec .po{display:block;font-style:normal;font-family:var(--body);font-weight:600;font-size:10px;
  color:var(--gold);text-align:right;letter-spacing:.4px}
.led-row.own{border-left:3px solid var(--green);padding-left:10px}
.led-row.owned{border-left:3px solid var(--red);padding-left:10px}
.career-yr{padding:10px 0;border-bottom:1px solid var(--line)}
.career-yr:last-child{border-bottom:none}
.cy-head b{font-family:var(--disp);font-size:17px;color:var(--gold);margin-right:6px}
.cy-team{font-weight:600}
.cy-line{display:block;color:var(--mut);font-size:12.5px;margin-top:1px}
.po-line{font-size:12.5px;margin-top:5px;padding-left:10px;border-left:2px solid var(--line);color:var(--mut)}
.po-line.w{border-color:var(--green)} .po-line.l{border-color:var(--red)}

/* ============ GRAPH KIT ============ */
.arc{width:100%;height:auto;display:block}
.arc text{font-family:var(--body)}
@media (prefers-reduced-motion:no-preference){
  .arc path[stroke]{stroke-dasharray:600;stroke-dashoffset:0;animation:arcDraw 1s var(--ease) .2s backwards}
  @keyframes arcDraw{from{stroke-dashoffset:600}}
}
.wl{display:flex;flex-direction:column;gap:1px}
.wl-row{display:flex;align-items:center;gap:10px;background:none;border:none;padding:2px 0;width:100%;text-align:left;min-height:44px}
.wl-name{flex:none;width:32%;font-size:12px;color:var(--mut);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-row.me .wl-name{color:var(--gold)}
.wl-pips{font-style:normal;color:var(--gold);font-size:9px;letter-spacing:1px;margin-left:4px;vertical-align:1px}
.wl-track{flex:1;height:13px;background:rgba(255,255,255,.05);overflow:hidden;display:flex;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 100%,0 100%)}
.wl-bar{display:block;height:100%;background:rgba(255,255,255,.26)}
.wl-row.me .wl-bar{background:var(--gold)}
.wl-w{display:block;height:100%;background:var(--green)}
.wl-l{display:block;height:100%;background:var(--red);opacity:.8;margin-left:2px}
.wl-rec{flex:none;min-width:44px;text-align:right;font-family:var(--disp);font-weight:800;font-size:16px;font-variant-numeric:tabular-nums}
.wl-row.ghost{opacity:.55}
.wl-none{flex:1;color:var(--faint);font-size:11.5px;font-style:italic}
.pf{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.pf-row{display:flex;align-items:center;gap:10px}
.pf-yr{flex:none;width:26px;font-family:var(--disp);font-weight:700;font-size:13px;color:var(--faint)}
.pf-track{flex:1;height:13px;background:rgba(255,255,255,.05);position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 100%,0 100%)}
.pf-bar{display:block;height:100%;background:rgba(255,255,255,.22)}
.pf-bar.up{background:var(--gold)}
.pf-avg{position:absolute;top:-2px;bottom:-2px;width:2px;background:#e8ebf0;opacity:.85}
.pf-n{flex:none;min-width:44px;text-align:right;font-family:var(--disp);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}

/* ============ THE SLATE — MATCHUP STRIPS ============ */
.slate{display:flex;flex-direction:column;gap:8px}
.sl-strip{background:var(--surface);border:1px solid var(--line);padding:10px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.sl-row2{display:grid;grid-template-columns:1fr 44px;gap:8px;align-items:center;background:none;border:none;
  width:100%;text-align:left;padding:3px 0;min-height:44px;color:inherit}
.sl-team{display:flex;align-items:center;gap:8px;min-width:0}
.sl-favtick{flex:none;width:8px;height:8px;background:var(--gold);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.sl-name{font-size:13px;font-weight:600;color:#dfe3ea;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sl-name.dim{color:var(--mut)}
.sl-bar{height:6px;background:rgba(255,255,255,.05);overflow:hidden;flex:1;max-width:38%;margin-left:auto;
  clip-path:polygon(0 0,calc(100% - 3px) 0,100% 100%,0 100%)}
.sl-bar i{display:block;height:100%;background:var(--data);opacity:.7}
.sl-row2.fav .sl-bar i{background:var(--gold);opacity:1}
.sl-pts{font-family:var(--disp);font-weight:800;font-size:19px;text-align:right;font-variant-numeric:tabular-nums;color:var(--mut)}
.sl-row2.fav .sl-pts{color:var(--text)}

/* ============ THE MONEY ============ */
.money{border-top:2px solid var(--gold-deep);padding:14px 2px}
.money .pot{text-align:center;padding:6px 0 16px;border-bottom:1px solid var(--line);margin-bottom:12px}
.money .pot b{display:block;font-family:var(--disp);font-weight:800;font-size:56px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.money .pot span{display:block;color:var(--faint);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;margin-top:6px}
.pays{display:flex;flex-direction:column;gap:9px}
.pay-row{display:flex;align-items:center;gap:10px}
.pay-lbl{flex:none;width:36%;font-size:12px;color:var(--mut);font-weight:600;line-height:1.3}
.pay-bar{flex:1;height:14px;background:rgba(255,255,255,.05);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 100%,0 100%)}
.pay-bar i{display:block;height:100%;background:var(--gold)}
.pay-row:nth-child(n+2) .pay-bar i{background:rgba(226,186,84,.45)}
.pay-n{flex:none;min-width:52px;text-align:right;font-family:var(--disp);font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}

/* ============ H2H GRID ============ */
.h2h-wrap{overflow-x:auto;margin:0 -16px;padding:0 16px;-webkit-overflow-scrolling:touch}
.h2h{border-collapse:collapse;font-variant-numeric:tabular-nums}
.h2h th{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:.5px;color:var(--faint);
  padding:4px 3px;text-align:center;text-transform:uppercase}
.h2h th.rowh{text-align:right;padding-right:7px}
.h2h td{width:42px;min-width:42px;height:32px;text-align:center;font-size:10.5px;font-weight:600;
  white-space:nowrap;font-variant-numeric:tabular-nums;border:1px solid var(--bg);background:var(--surface)}
.h2h td.up{background:rgba(79,201,133,.16);color:#8fe0b4}
.h2h td.up2{background:rgba(79,201,133,.34);color:#b8f0d2}
.h2h td.down{background:rgba(224,101,92,.15);color:#eda49e}
.h2h td.down2{background:rgba(224,101,92,.32);color:#f6c4c0}
.h2h td.self{background:none;border:1px solid var(--line)}
.h2h td.me-row{outline:1px solid var(--gold-deep)}

/* ============ RANKINGS — THE BOARD ============ */
.rk-you{display:inline-flex;align-items:baseline;gap:9px;background:var(--gold);color:#171307;
  padding:5px 18px 6px;margin:2px 0 16px;font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:1px}
.rk-you i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:2px;color:#5c4a17}
.rank-item{display:flex;gap:13px;padding:14px 2px;border-bottom:1px solid var(--line);
  background:none;border-left:none;border-right:none;border-top:none;width:100%;text-align:left;position:relative}
.rank-item.me-row{background:linear-gradient(90deg,rgba(226,186,84,.07),transparent 70%);
  border-left:3px solid var(--gold);padding-left:10px;margin-left:-13px}
.rank-n{font-family:var(--disp);font-weight:800;font-size:34px;color:var(--faint);width:40px;flex:none;line-height:1;text-align:center}
.rank-item.top .rank-n{color:var(--gold)}
.rank-body{flex:1;min-width:0}
.rank-item h3{font-family:var(--disp);font-size:20px;font-weight:700;text-transform:uppercase;line-height:1.1}
.rank-item .rl{color:var(--gold);font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:.6px;text-transform:uppercase;line-height:1.15;margin:2px 0 6px}
.rank-item p{color:#b9bfc9;font-size:13px}
.rl-meter{display:flex;align-items:center;gap:10px;margin:7px 0 8px}
.rl-track{flex:1;min-width:0;height:8px;background:rgba(255,255,255,.05);overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 100%,0 100%)}
.rl-track i{display:block;height:100%;background:var(--gold)}
.rl-n{flex:none;min-width:26px;text-align:right;font-family:var(--disp);font-weight:800;font-size:15px;
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}

/* ============ TABLES ============ */
table{width:100%;border-collapse:collapse;font-size:13.5px}
.tblwrap{overflow-x:auto;margin:0 -16px;padding:0 16px}
th{color:var(--faint);font-size:11px;text-transform:uppercase;letter-spacing:.8px;text-align:left;
  padding:8px 10px 6px;border-bottom:1px solid var(--line)}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.champ-row td:first-child{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--gold)}

/* ============ LEAGUE OFFICE / HYPE ============ */
.office-card{padding:14px 15px}
.office-sub{color:var(--faint);font-size:12px;margin-bottom:12px}
.beef-row{padding:10px 0;border-top:1px solid var(--line)}
.beef-row:first-of-type{border-top:none}
.beef-who{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold)}
.beef-who i{font-style:normal;color:var(--faint);font-size:11px;letter-spacing:1px;margin-left:8px}
.beef-line{margin-top:3px;font-size:14px;color:var(--text)}
.hype-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.hype-row:first-of-type{border-top:none}
.hype-v{flex:0 0 auto;font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:1px;padding:3px 11px;margin-top:1px}
.hype-v.real{background:var(--green);color:#0d1a12}
.hype-v.noise{background:var(--surface2);color:var(--mut);border:1px solid var(--line2)}
.hype-b b{font-size:14.5px}
.hype-b span{display:block;color:var(--mut);font-size:13px;margin-top:1px}

/* keeper board */
.kboard{margin-bottom:10px}
.kb-head{font-size:12px;color:var(--gold);font-weight:600;margin-bottom:8px}
.kb-row{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);opacity:.62}
.kb-row.lock{opacity:1}
.kb-row:first-of-type{border-top:none}
.kb-n{flex:0 0 18px;font-family:var(--disp);font-weight:700;color:var(--faint);font-size:13px}
.kb-row.lock .kb-n{color:var(--gold)}
.kb-p{font-size:14px}
.kb-note{color:var(--mut);font-size:12.5px}
.kb-foot{color:var(--faint);font-size:11.5px;margin-top:8px}
.kb-static{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--mut);font-size:13.5px}

/* ============ THE BRIEFING ROWS ============ */
.bf-lead{color:var(--mut);font-size:13.5px;line-height:1.5;margin:-2px 0 10px}
.bf{border-top:1px solid var(--line);margin-bottom:4px}
.bf-row{border-bottom:1px solid var(--line)}
.bf-h{width:100%;display:flex;align-items:baseline;gap:12px;background:none;border:none;
  text-align:left;padding:13px 2px;min-height:52px}
.bf-k{flex:none;min-width:46px;font-family:var(--disp);font-weight:800;font-size:12.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);padding-top:2px}
.bf-k.red{color:var(--red)} .bf-k.amber{color:var(--amber)}
.bf-k.green{color:var(--green)} .bf-k.dim{color:var(--faint)} .bf-k.blue{color:var(--data)}
.bf-txt{flex:1;min-width:0}
.bf-head{display:block;font-size:15px;font-weight:600;line-height:1.35}
.bf-sub{display:block;color:var(--faint);font-size:12px;line-height:1.45;margin-top:2px}
.bf-x{font-style:normal;font-family:var(--disp);font-weight:700;font-size:21px;color:var(--gold);
  flex:none;transition:transform .18s;line-height:1}
.bf-row.open .bf-x{transform:rotate(45deg)}
.bf-b{display:none;padding:0 2px 16px 60px}
.bf-row.open .bf-b{display:block}
.bf-b p{color:#c9cdd6;font-size:14px;line-height:1.6}
.bf-go{display:inline-block;background:none;border:none;color:var(--gold);font-family:var(--disp);
  font-weight:700;font-size:13.5px;letter-spacing:1.2px;text-transform:uppercase;padding:10px 0 0}
@media (max-width:420px){ .bf-b{padding-left:2px} }

/* the board (boom ratings) */
.brd{border-top:1px solid var(--line);margin-top:4px}
.brd-row{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.brd-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.brd-n{font-size:14px}
.brd-pips{flex:none;color:var(--gold);font-size:11px;letter-spacing:2.5px}
.brd-pips i{font-style:normal;color:var(--faint);font-size:10.5px;letter-spacing:.4px;margin-left:7px;font-variant-numeric:tabular-nums}
.brd-note{color:var(--mut);font-size:12.5px;line-height:1.45;margin-top:2px}

/* ============ THE HOTLINE (AI Assistant) ============ */
.uplink{margin-top:14px}
.up-kick{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:12.5px;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.up-kick::before{content:"";flex:none;width:15px;height:11px;background:var(--gold);clip-path:polygon(32% 0,100% 0,68% 100%,0 100%)}
.up-kick::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent 82%)}
.up-frame{position:relative;display:flex;flex-direction:column;overflow:hidden;
  /* a fixed panel, not a growing one — the thread scrolls INSIDE it so the input
     never gets pushed under the tab bar by a long answer. */
  height:480px;height:min(74dvh,640px);
  border:1px solid var(--line2);padding:14px 14px 12px;
  background:
    radial-gradient(120% 90% at 50% -20%,rgba(226,186,84,.09),transparent 55%),
    repeating-linear-gradient(0deg,rgba(226,186,84,.028) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(90deg,rgba(226,186,84,.028) 0 1px,transparent 1px 30px),
    var(--panel);
  box-shadow:0 0 34px rgba(226,186,84,.05) inset,0 8px 30px rgba(0,0,0,.45);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
.up-c{position:absolute;width:15px;height:15px;border:2px solid var(--gold);opacity:.75;pointer-events:none}
.up-c.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.up-c.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.up-c.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.up-c.br{bottom:22px;right:22px;border-left:0;border-top:0}
.up-head{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:2px 4px 12px}
.up-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
@media (prefers-reduced-motion:no-preference){ .up-dot{animation:blip 2.4s ease-in-out infinite} }
.up-id{flex:1;min-width:0}
.up-name{display:block;font-family:var(--disp);font-weight:800;font-size:22px;line-height:1;letter-spacing:.8px;text-transform:uppercase}
.up-title{display:block;color:var(--gold);font-family:var(--mono);font-size:10px;letter-spacing:1.8px;text-transform:uppercase;margin-top:4px}
.up-status{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;color:var(--green);
  border:1px solid rgba(79,201,133,.4);padding:5px 9px;background:rgba(79,201,133,.07);
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)}
.chat-thread{flex:1 1 0%;min-height:0;overflow-y:auto;padding:10px 4px 4px;-webkit-overflow-scrolling:touch}
.cm{margin:12px 0;max-width:88%;font-size:14.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.cm.a{border-left:3px solid var(--gold-deep);padding-left:12px;color:#dfe3ea}
.cm.u{margin-left:auto;text-align:right;color:var(--mut);border-right:3px solid var(--line2);padding-right:12px}
.cm.err{color:var(--faint);font-style:italic}

/* ---- motion: every animated property is transform/opacity so it stays on the compositor
        and never triggers layout. That is the difference between smooth and choppy. ---- */
.cm{will-change:auto}
.cm.in{animation:cmIn .26s cubic-bezier(.22,.9,.32,1) both}
@keyframes cmIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
/* a caret that blinks while he's still typing the answer out */
.cm.a.live::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:3px;
  vertical-align:-2px;background:var(--gold);opacity:.9;animation:cmCaret 1s steps(1,end) infinite}
@keyframes cmCaret{0%,49%{opacity:.9}50%,100%{opacity:0}}
.chat-thread{scroll-behavior:smooth;overscroll-behavior:contain;contain:layout paint}

.chat-typing{padding:2px 0 8px 4px;font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--gold);
  display:flex;align-items:center;gap:6px}
.chat-typing[hidden]{display:none}
.chat-typing::after{content:"";width:22px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold) 0 33%,transparent 33% 100%);
  background-size:300% 100%;animation:tDots .9s linear infinite}
@keyframes tDots{from{background-position:100% 0}to{background-position:-50% 0}}
@media (prefers-reduced-motion: reduce){
  .cm.in{animation:none}
  .chat-thread{scroll-behavior:auto}
  .cm.a.live::after,.chat-typing::after{animation:none}
}
.chat-chips{display:flex;gap:8px;flex-wrap:wrap;padding:6px 2px 10px}
.chat-chip{background:rgba(255,255,255,.02);border:1px solid var(--line2);color:var(--mut);
  font-size:12.5px;font-weight:600;padding:8px 14px;min-height:44px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.chat-chip{transition:transform .12s ease,border-color .16s ease,color .16s ease}
.chat-chip:active{border-color:var(--gold-deep);color:var(--gold);transform:scale(.97)}
.chat-form{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.chat-in{flex:1;min-width:0;background:var(--bg2);border:1px solid var(--line2);color:var(--text);
  /* 16px is not a style choice — below it, iOS zooms the page the instant you tap in. */
  font-family:var(--body);font-size:16px;padding:12px 13px;min-height:48px;border-radius:0}
.chat-in{transition:border-color .16s ease,box-shadow .16s ease}
.chat-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px rgba(226,186,84,.35),0 0 18px rgba(226,186,84,.1)}
.chat-in::placeholder{color:var(--faint)}
.chat-send{flex:none;background:var(--gold);color:#171307;border:none;
  font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:1.5px;text-transform:uppercase;
  padding:0 20px;min-height:48px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.chat-send:active{background:var(--gold-deep)}
/* clears the frame's bottom-right corner bracket */
.chat-quota{color:var(--faint);font-size:11px;letter-spacing:.4px;padding:8px 46px 8px 0;text-align:right;font-family:var(--mono)}
@media (max-width:520px){
  /* long agent titles ("Independent Scout · No Group Chats") wrapped to two lines and
     shoved the header to 72px, squeezing the thread. Tighten instead of truncating —
     the title IS the joke, so it wraps, it just stops shouting. */
  .up-head{gap:9px;padding:2px 2px 10px;align-items:flex-start}
  .up-dot{margin-top:7px}
  .up-name{font-size:19px;letter-spacing:.5px}
  .up-title{font-size:9px;letter-spacing:1.2px;line-height:1.35;margin-top:3px}
  .up-status{font-size:8.5px;letter-spacing:1.4px;padding:4px 7px;margin-top:2px}
  /* the four starter prompts wrapped to three rows and ate the thread on a phone */
  .chat-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding:6px 2px 10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .chat-chips::-webkit-scrollbar{display:none}
  .chat-chip{flex:none;white-space:nowrap;scroll-snap-align:start;min-height:40px;padding:8px 13px;font-size:12px}
  .up-frame{height:min(72dvh,620px);padding:12px 12px 10px}
  .chat-send{padding:0 15px;font-size:14px}
  .chat-quota{padding-right:40px}
  .up-kick{font-size:11.5px;letter-spacing:2.2px}
  .up-dossier{font-size:11.5px;line-height:1.45}
  .cm{max-width:92%;font-size:15px}
}
.chat-quota.out{color:var(--amber)}
.up-dossier{display:block;width:100%;background:none;border:none;color:var(--faint);
  font-size:12px;line-height:1.5;letter-spacing:.3px;padding:14px 8px 4px;text-align:center;min-height:44px}
.up-dossier:active{color:var(--gold)}

/* ============================================================
   ONBOARDING SEQUENCE — assignment · naming brief · shuffle · build
   Full-screen, above the site (z 90) but under the egg ceremony (z 100).
   Everything eases in on its own --d delay so the beats breathe.
   ============================================================ */
.ob-hold{min-height:70vh}
.ob{position:fixed;inset:0;z-index:90;overflow:hidden;background:#07080b;
  display:flex;align-items:center;justify-content:center;
  animation:obIn .7s var(--ease) both}
@keyframes obIn{from{opacity:0}}
.ob-grid{position:absolute;inset:-40%;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(0deg,rgba(226,186,84,.055) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(226,186,84,.055) 0 1px,transparent 1px 46px);
  animation:obDrift 26s linear infinite}
@keyframes obDrift{to{transform:translate3d(46px,46px,0)}}
.ob-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 85% at 50% 42%,transparent 38%,rgba(0,0,0,.82) 100%)}
.ob-c{position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:0;pointer-events:none;
  animation:obCorner .8s var(--ease) .25s forwards}
@keyframes obCorner{to{opacity:.8}}
.ob-c.tl{top:16px;left:16px;border-right:0;border-bottom:0}
.ob-c.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.ob-c.bl{bottom:16px;left:16px;border-right:0;border-top:0}
.ob-c.br{bottom:16px;right:16px;border-left:0;border-top:0}
.ob-flash{position:fixed;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#f6e2ae 0%,rgba(226,186,84,.55) 32%,transparent 68%)}
.ob-flash.go{animation:obFlash .75s ease-out}
@keyframes obFlash{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}

.ob-stage{position:relative;z-index:2;width:100%;max-width:520px;padding:0 26px;
  transition:opacity .3s ease,transform .3s ease}
.ob-stage.swap{opacity:0;transform:translateY(-14px)}
.ob-scene{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ob-scene>*{opacity:0;animation:obRise .8s var(--ease) var(--d,0s) forwards}
@keyframes obRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.ob-kick{font-family:var(--mono);font-size:10.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:9px}
.ob-kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px var(--gold)}
.ob-kick.hot{color:var(--green)}
.ob-kick.hot::before{background:var(--green);box-shadow:0 0 14px var(--green)}
.ob-head{font-family:var(--disp);font-weight:800;font-size:clamp(36px,10.5vw,54px);line-height:.96;
  text-transform:uppercase;letter-spacing:.5px;margin-top:18px}
.ob-head em{font-style:normal;color:var(--gold)}
.ob-rule{width:100%;height:3px;margin-top:20px;
  background:linear-gradient(90deg,var(--gold) 0 30%,var(--gold-deep) 30% 34%,var(--line2) 34%);
  transform-origin:left center}
.ob-scene .ob-rule{animation:obRule .9s var(--ease) var(--d,0s) forwards}
@keyframes obRule{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
.ob-team{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--mut);margin-top:14px}
.ob-body{color:#c9cfda;font-size:15px;line-height:1.65;margin-top:16px;max-width:38ch}
.ob-body b{color:var(--gold)}
.ob-fine{color:var(--faint);font-size:13px;line-height:1.6;margin-top:12px;max-width:38ch}
.ob-btn{margin-top:30px;background:var(--gold);color:#171307;border:none;
  font-family:var(--disp);font-weight:800;font-size:17px;letter-spacing:2px;text-transform:uppercase;
  padding:0 30px;min-height:54px;
  clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
.ob-btn:active{background:var(--gold-hot)}
.ob-btn.ghost{background:none;border:1px solid var(--line2);color:var(--mut);font-size:15px;letter-spacing:1.4px}
.ob-btn.ghost b{color:var(--gold)}
.ob-btn.ghost:active{border-color:var(--gold-deep);color:var(--gold)}

/* ---- beat 3 · the shuffle ---- */
.ob-shuf{width:100%}
.ob-namebox{width:100%;margin-top:30px;padding:26px 0 24px;
  border-top:2px solid var(--gold-deep);border-bottom:1px solid var(--line2)}
.ob-name{font-family:var(--disp);font-weight:800;font-size:clamp(38px,11.5vw,60px);line-height:.98;
  text-transform:uppercase;letter-spacing:.5px;min-height:1em;overflow-wrap:anywhere}
.ob-title{color:var(--gold);font-family:var(--disp);font-weight:700;font-size:15px;
  letter-spacing:2px;text-transform:uppercase;margin-top:12px;min-height:1.2em;transition:opacity .2s}
.ob-title.dim{opacity:.45}
.ob-actions{display:flex;gap:10px;margin-top:26px;width:100%}
.ob-actions .ob-btn{margin-top:0;flex:1;min-width:0;white-space:nowrap;padding:0 16px;
  font-size:15px;letter-spacing:1.4px}
.ob-actions .ob-btn.ghost{font-size:13.5px;letter-spacing:1px}
.ob-stuck{color:var(--red);font-size:13px;line-height:1.6;border-left:3px solid var(--red);
  padding:4px 0 4px 12px;margin-top:20px;max-width:40ch}

/* ---- beat 4 · the build ---- */
.ob-build{align-items:center;text-align:center;width:100%}
.ob-core{position:relative;width:186px;height:186px;margin:26px 0 4px}
.ob-core svg{width:100%;height:100%;display:block;overflow:visible}
.ob-core .cr{fill:none;stroke:var(--gold-deep);stroke-width:1.5;opacity:0;
  transform-origin:50% 50%;animation:obRing 1s var(--ease) forwards}
.ob-core .r1{animation-delay:.1s} .ob-core .r2{animation-delay:.45s;stroke:var(--line2)}
.ob-core .r3{animation-delay:.8s}
@keyframes obRing{from{opacity:0;transform:scale(.55) rotate(-45deg)}to{opacity:1;transform:none}}
.ob-core .tk line{stroke:var(--gold);stroke-width:2;opacity:0;
  animation:obTick .5s ease-out forwards;animation-delay:calc(1.2s + var(--k)*.055s)}
@keyframes obTick{to{opacity:.75}}
.ob-core .core{fill:rgba(226,186,84,.07);stroke:var(--gold);stroke-width:2;opacity:0;
  transform-origin:50% 50%;animation:obCore .9s var(--ease) 2.4s forwards}
@keyframes obCore{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.ob-core .r1,.ob-core .r3{animation-name:obRing,obSpin}
.ob-core .r1{animation-duration:1s,22s;animation-timing-function:var(--ease),linear;
  animation-delay:.1s,0s;animation-iteration-count:1,infinite}
.ob-core .r3{animation-duration:1s,16s;animation-timing-function:var(--ease),linear;
  animation-delay:.8s,0s;animation-iteration-count:1,infinite;animation-direction:normal,reverse}
@keyframes obSpin{to{transform:rotate(360deg)}}
.ob-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:1px;color:var(--gold);
  opacity:0;animation:obMono .8s var(--ease) 3s forwards;text-shadow:0 0 22px rgba(226,186,84,.5)}
@keyframes obMono{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:none}}
.ob-scan{position:absolute;left:-6%;right:-6%;height:2px;top:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.75;
  animation:obScan 2.3s ease-in-out infinite}
@keyframes obScan{0%{top:4%}50%{top:94%}100%{top:4%}}
.ob-core.locked{animation:obLock .6s var(--ease)}
.ob-core.locked .ob-scan{display:none}
.ob-core.locked .core{fill:rgba(79,201,133,.12);stroke:var(--green)}
@keyframes obLock{40%{transform:scale(1.08)}100%{transform:none}}
.ob-pct{font-family:var(--disp);font-weight:800;font-size:52px;line-height:1;color:var(--gold);
  font-variant-numeric:tabular-nums;margin-top:10px}
.ob-pct i{font-style:normal;font-size:24px;color:var(--gold-deep)}
.ob-bar{width:100%;max-width:340px;height:5px;background:rgba(255,255,255,.07);margin-top:14px;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 4px) 0,100% 100%,0 100%)}
.ob-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold));
  transition:width .95s var(--ease)}
.ob-log{width:100%;max-width:360px;margin-top:20px;min-height:92px;text-align:left}
.ob-line{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.3px;color:var(--mut);padding:3.5px 0;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .35s ease}
.ob-line.in{opacity:1;transform:none}
.ob-line i{font-style:normal;color:var(--gold);flex:none}
.ob-line span{flex:1;min-width:0}
.ob-line b.ok{flex:none;color:var(--green);font-size:9.5px;letter-spacing:1.4px;opacity:0;transition:opacity .3s}
.ob-line.done b.ok{opacity:1}
.ob-line.done{color:var(--faint)}

/* ---- the hand-off: backdrop clears, the core is thrown into the tab ---- */
.ob.clearing{background:transparent;transition:background .45s ease}
.ob.clearing .ob-grid,.ob.clearing .ob-vig,.ob.clearing .ob-c,
.ob.clearing .ob-kick,.ob.clearing .ob-pct,.ob.clearing .ob-bar,.ob.clearing .ob-log{
  opacity:0;transition:opacity .4s ease}
.ob-core.throw{animation:obThrow .72s cubic-bezier(.55,-0.15,.75,1) forwards}
@keyframes obThrow{
  0%{transform:translate(0,0) scale(1);opacity:1}
  22%{transform:translate(calc(var(--dx)*.16),calc(var(--dy)*-.13)) scale(1.1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.11);opacity:.25}
}
.ob.out{animation:obOut .4s ease forwards}
@keyframes obOut{to{opacity:0;visibility:hidden}}
#tabbar button.landed{color:var(--gold)}
#tabbar button.landed .ti{animation:obLanded 1.1s var(--ease)}
@keyframes obLanded{0%{transform:scale(.4);filter:brightness(3)}
  45%{transform:scale(1.5);filter:brightness(2.2)}100%{transform:none;filter:none}}
#tabbar button.landed::after{content:"";position:absolute;top:2px;left:50%;width:34px;height:34px;
  margin-left:-17px;border-radius:50%;border:2px solid var(--gold);pointer-events:none;
  animation:obPing 1.1s var(--ease) forwards}
@keyframes obPing{from{transform:scale(.3);opacity:.9}to{transform:scale(1.7);opacity:0}}

@media (max-height:660px){
  .ob-core{width:140px;height:140px;margin-top:14px}
  .ob-pct{font-size:40px} .ob-log{min-height:70px}
  .ob-head{font-size:clamp(30px,9vw,44px)}
}

/* ============ NAMING CEREMONY (reduced-motion fallback) ============ */
.naming{padding-bottom:30px}
.nm-card{margin:26px 0 4px;border-top:2px solid var(--gold-deep);border-bottom:1px solid var(--line);
  padding:20px 2px 22px;text-align:center}
.nm-kicker{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.nm-name{font-family:var(--disp);font-weight:800;font-size:clamp(38px,11vw,58px);line-height:.98;text-transform:uppercase}
.nm-title{color:var(--gold);font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:1.6px;text-transform:uppercase;margin-top:8px}
.nm-tag{color:var(--mut);font-size:13.5px;margin-top:12px;max-width:40ch;margin-left:auto;margin-right:auto}
.nm-name.flip,.nm-title.flip{animation:nmflip .45s cubic-bezier(.2,.8,.3,1)}
@keyframes nmflip{0%{opacity:0;transform:translateY(10px) skewX(-6deg);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
.nm-actions{display:flex;gap:10px;margin-top:18px}
.nm-keep{flex:1;background:var(--gold);color:#171307;border:none;
  font-family:var(--disp);font-weight:800;font-size:16px;letter-spacing:1.6px;text-transform:uppercase;
  padding:0 14px;min-height:52px;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.nm-keep:active{background:var(--gold-deep)}
.nm-shuffle{flex:1;background:none;border:1px solid var(--line2);color:var(--mut);
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;padding:0 14px;min-height:52px}
.nm-shuffle b{color:var(--gold)}
.nm-shuffle:active{border-color:var(--gold-deep)}
.nm-stuck{margin-top:14px;color:var(--red);font-size:13px;border-left:3px solid var(--red);padding:4px 0 4px 12px}

/* ============ AGENT CARD (team page) ============ */
.agent-card{border:1px solid var(--line);border-top:2px solid var(--gold-deep);
  background:linear-gradient(180deg,#15171d,#101218);padding:18px 14px 16px;margin:8px 0 16px;text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
.ac-kicker{font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;color:var(--faint)}
.ac-name{font-family:var(--disp);font-weight:800;font-size:clamp(28px,8vw,38px);line-height:1;text-transform:uppercase;margin-top:10px}
.ac-title{color:var(--gold);font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:1.6px;text-transform:uppercase;margin-top:6px}
.ac-tag{color:var(--mut);font-size:13px;margin:10px auto 0;max-width:42ch}
.ac-line{display:inline-block;margin-top:14px;background:var(--gold);color:#171307;border:none;
  font-family:var(--disp);font-weight:800;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  padding:12px 22px;min-height:44px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.ac-line:active{background:var(--gold-deep)}

/* ============ MISC / LEGACY ============ */
.rnd{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:1px;color:var(--gold);margin:22px 0 6px;text-transform:uppercase}
.pick{display:flex;gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.pick .no{color:var(--faint);width:32px;flex:none;font-variant-numeric:tabular-nums}
.pick .pl{font-weight:600;flex:1}
.pick .pos{color:var(--faint);width:38px;flex:none;font-size:11.5px}
.pick .tm{color:var(--mut);font-size:12px;text-align:right;max-width:40%}
.pick.mine .pl{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}