:root{
  --bg:#070b09; --panel:#0e1412; --panel-2:#131b18; --line:rgba(255,255,255,.10);
  --ink:#eef4f0; --dim:#8ea099; --turf:#1c6b3a;
  --accent:#f5a524; --live:#3ddc84; --bad:#ff4d5e; --cool:#38b6ff;
  --team:#9e1b32; --team-alt:#f2e6d8;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --topbar-h:56px;
  --scores-h:0px;
  --header-offset:var(--topbar-h);
}
body.has-scores-ticker{
  --scores-h:38px;
  --header-offset:calc(var(--topbar-h) + var(--scores-h));
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;overflow-x:hidden}
h1,h2,h3,.brand,.num{font-family:"Archivo Black",Barlow,sans-serif;letter-spacing:.5px}
code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;color:var(--accent)}
.hidden{display:none !important}
kbd{background:rgba(255,255,255,.10);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font:700 .62rem Barlow;margin:0 1px;color:var(--ink)}

.turf{position:fixed;inset:0;z-index:-1;opacity:.6;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 2px, transparent 2px 92px),
    radial-gradient(120% 80% at 50% -10%, rgba(28,107,58,.4), transparent 62%),
    linear-gradient(180deg,#08120d,#060908 62%);}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  padding:0 16px;height:var(--topbar-h);background:rgba(7,11,9,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  color:var(--ink);padding:0}
.brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  background:linear-gradient(140deg,var(--accent),#e2621f);color:#1b1204;
  font:900 .74rem "Archivo Black";letter-spacing:0}
.brand-txt{font-size:.9rem;letter-spacing:1.4px;white-space:nowrap}
.brand em{font-style:normal;color:var(--accent)}
.topbar-mid{flex:1;min-width:0;color:var(--dim);font-size:.78rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;gap:10px;align-items:center}
.byline{color:var(--dim);font-size:.68rem;letter-spacing:.4px}
.byline b{color:var(--accent)}
.chip{font:600 .72rem/1 Barlow;letter-spacing:.6px;color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:999px;
  padding:8px 13px;cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.version-chip{color:var(--accent);border-color:rgba(245,165,36,.35);font-weight:800}
.chip.pack-stale{color:#fff1d2;border-color:#ffb42b;background:rgba(193,74,16,.34);
  box-shadow:0 0 0 1px rgba(255,180,43,.12),0 0 22px rgba(255,116,31,.18)}
.scores-chip{display:inline-flex;align-items:center;gap:6px}
.scores-chip.active{border-color:var(--accent);color:var(--accent);background:rgba(245,165,36,.14);font-weight:800}
.scores-chip-icon{font-size:.78rem;line-height:1}
.scores-chip-live{width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px #22c55e;animation:st-pulse 1.3s infinite;display:inline-block}

/* ---------- live scores ticker strip ---------- */
.scores-ticker{position:sticky;top:var(--topbar-h);z-index:37;display:flex;align-items:center;
  height:var(--scores-h);background:rgba(8,13,10,.95);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);padding:0 8px 0 12px;gap:8px;user-select:none;
  box-shadow:0 6px 18px rgba(0,0,0,.35);font-family:Barlow,sans-serif}
.scores-ticker.hidden{display:none!important}

.st-brand{display:flex;align-items:center;gap:6px;flex:none}
.st-badge{font:900 .62rem/1 "Archivo Black";background:linear-gradient(135deg,var(--accent),#e2621f);
  color:#1b1204;padding:3px 6px;border-radius:5px;letter-spacing:.4px}
.st-live-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 8px #22c55e;animation:st-pulse 1.4s ease-in-out infinite}
@keyframes st-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}

.st-filters{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:6px;padding:2px;flex:none}
.st-filter{background:none;border:0;color:var(--dim);font:700 .62rem/1 Barlow;
  letter-spacing:.6px;padding:4px 7px;border-radius:4px;cursor:pointer;display:flex;
  align-items:center;gap:3px;transition:background .15s,color .15s}
.st-filter:hover{color:var(--ink)}
.st-filter.active{background:rgba(255,255,255,.14);color:var(--ink)}
.st-filter .st-cnt{font:800 .55rem "Archivo Black";color:var(--accent);opacity:.9}

.st-track-wrap{flex:1;min-width:0;height:100%;display:flex;align-items:center;
  overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;cursor:grab}
.st-track-wrap::-webkit-scrollbar{display:none}
.st-track-wrap.dragging{cursor:grabbing;user-select:none}
.st-track-wrap.dragging a{pointer-events:none}

.st-track{display:flex;align-items:center;gap:8px;height:100%;white-space:nowrap}

.st-game{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:2px 8px;
  height:30px;min-width:172px;max-width:220px;text-decoration:none;color:var(--ink);
  cursor:pointer;flex:none;transition:background .15s,border-color .15s}
.st-game:hover{background:rgba(255,255,255,.08);border-color:rgba(245,165,36,.4)}
.st-game.live{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.06)}
.st-game.live:hover{border-color:rgba(34,197,94,.65);background:rgba(34,197,94,.1)}

.st-teams{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:1;min-width:0}
.st-team{display:flex;align-items:center;gap:5px;height:13px;font-size:.72rem;font-weight:600}
.st-team.winner b,.st-team.leading b{color:#fff;font-weight:800}
.st-team.winner .st-score,.st-team.leading .st-score{color:var(--accent);font-weight:900}
.st-team.loser{opacity:.55}
.st-logo{width:14px;height:14px;object-fit:contain;flex:none;border-radius:2px}
.st-rank{font:800 .54rem/1 "Archivo Black";color:var(--accent);flex:none}
.st-name{letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.st-poss{font-size:.54rem;line-height:1;margin-left:2px;flex:none;filter:drop-shadow(0 0 3px rgba(245,165,36,.5))}
.st-score{margin-left:auto;font:800 .74rem/1 "Archivo Black";min-width:18px;text-align:right;color:#cbdad2}

.st-status{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:1px;padding-left:7px;border-left:1px solid rgba(255,255,255,.08);min-width:44px;flex:none}
.st-status-txt{font:800 .58rem/1 Barlow;letter-spacing:.5px;color:var(--dim);text-transform:uppercase}
.st-status.live .st-status-txt{color:#22c55e;font-weight:900;display:flex;align-items:center;gap:3px}
.st-status.live .st-status-txt::before{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e;animation:st-pulse 1.2s infinite}
.st-status-txt.redzone{color:#ff4d5e!important;font-weight:900}
.st-status-bad{color:#ff4d5e}
.st-tv{font:800 .50rem/1 Barlow;color:#788b83;letter-spacing:.4px}
.st-sit{font:700 .48rem/1 Barlow;color:var(--accent);letter-spacing:.2px;max-width:72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.st-ctrls{display:flex;align-items:center;gap:3px;flex:none}
.st-ctrl{width:22px;height:22px;display:grid;place-items:center;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--dim);
  font:700 .72rem/1 Barlow;cursor:pointer;padding:0;transition:all .15s}
.st-ctrl:hover{background:rgba(255,255,255,.12);color:var(--ink);border-color:var(--accent)}
.st-ctrl.st-close:hover{background:rgba(255,77,94,.18);color:#ff4d5e;border-color:#ff4d5e}
.st-ctrl.spinning i,.st-ctrl.spinning{animation:st-spin .6s linear infinite}
@keyframes st-spin{100%{transform:rotate(360deg)}}

.st-loading,.st-empty,.st-msg{font:600 .72rem Barlow;color:var(--dim);display:flex;
  align-items:center;gap:8px;padding:0 8px}
.st-spinner{width:12px;height:12px;border:2px solid rgba(255,255,255,.15);
  border-top-color:var(--accent);border-radius:50%;animation:st-spin .7s linear infinite}
.st-tag-offline{font:800 .50rem "Archivo Black";color:#f5a524;background:rgba(245,165,36,.14);
  padding:2px 5px;border-radius:3px;margin-left:4px;border:1px solid rgba(245,165,36,.3)}

.pack-update-banner{position:sticky;top:var(--header-offset);z-index:39;width:100%;min-height:42px;border:0;
  display:flex;align-items:center;justify-content:center;gap:13px;padding:9px 18px;cursor:pointer;
  color:#211602;background:linear-gradient(90deg,#e4a51d,#ffd75c 45%,#e9a820);
  box-shadow:0 9px 28px rgba(0,0,0,.38);font-family:Barlow;text-align:center}
.pack-update-banner span{font:800 .66rem "Archivo Black";letter-spacing:1.4px}
.pack-update-banner b{font-size:.76rem}.pack-update-banner em{font-style:normal;color:#4f3000;
  font:800 .68rem Barlow;letter-spacing:1px;white-space:nowrap}
.pack-update-banner:hover{filter:brightness(1.08)}
.pack-update-banner.required{color:#fff7e8;background:linear-gradient(90deg,#8f2f12,#d26018 45%,#9d350f)}
.pack-update-banner.required em{color:#ffe09b}
.app-update-banner{position:sticky;top:var(--header-offset);z-index:38;width:100%;min-height:42px;border:0;
  display:flex;align-items:center;justify-content:center;gap:13px;padding:9px 18px;cursor:pointer;
  color:#f2fff8;background:linear-gradient(90deg,#0b5138,#118c61 45%,#0b5138);
  box-shadow:0 9px 28px rgba(0,0,0,.38);font-family:Barlow;text-align:center}
.app-update-banner span{font:800 .66rem "Archivo Black";letter-spacing:1.4px}
.app-update-banner b{font-size:.76rem}.app-update-banner em{font-style:normal;color:#bfffe2;
  font:800 .68rem Barlow;letter-spacing:1px;white-space:nowrap}
.app-update-banner:hover{filter:brightness(1.08)}

.screen{display:none;padding:26px 18px 60px;max-width:1240px;margin:0 auto}
.screen.show{display:block}

.btn{font:700 .82rem Barlow;border-radius:10px;padding:11px 16px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:#20160a;border-color:transparent}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--dim)}
.btn.ghost:hover{color:var(--ink)}
.start-btn{cursor:pointer;border:0;border-radius:12px;padding:14px 42px;
  font:800 .95rem Barlow;letter-spacing:1.2px;text-transform:uppercase;
  background:linear-gradient(135deg,var(--accent),#f07f1d);color:#1e1406;
  box-shadow:0 14px 38px rgba(245,165,36,.3)}
.start-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.start-btn.wide{width:100%;max-width:420px;margin:0 auto;display:block}

/* ---------- main menu ------------------------------------------------------
   Ported from the Claude Design comp. The comp is a fixed 1920x1080 stage that
   scales to fit; that is fine on a desktop and unreadable on a phone, so the
   same design is rebuilt in flow layout with a breakpoint that stacks the
   tiles. Everything else — the type, the wash, the tile treatment — is the
   comp's. */
#screen-menu{display:none;position:relative;overflow:hidden;background:#07100c;
  max-width:none;padding:0;min-height:calc(100dvh - var(--header-offset));flex-direction:column}
#screen-menu.show{display:flex}
.menu-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;z-index:0}
/* Diagonal wash: keeps the left third dark enough to carry the wordmark while
   the sweep still reads on the right. */
.menu-wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(4,9,6,.97) 0%,rgba(5,12,8,.9) 30%,
    rgba(6,14,9,.55) 55%,rgba(6,14,9,.25) 75%,rgba(6,14,9,.55) 100%)}
.menu-vign{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#07100c 0%,rgba(7,16,12,.85) 18%,
    rgba(7,16,12,0) 46%,rgba(7,16,12,0) 60%,rgba(7,16,12,.92) 100%)}
.menu-inner{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  padding:clamp(20px,4vh,52px) clamp(18px,4vw,56px) clamp(14px,2vh,24px)}

.menu-hero{position:relative;max-width:920px}
.menu-kicker{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  font:600 12px "Oswald",Barlow,sans-serif;letter-spacing:3px;color:#f3a545}
.menu-kicker i{width:28px;height:1px;background:#f3a545;flex:none}
.menu-title{margin:0;font:400 clamp(46px,7.4vw,84px)/0.95 "Anton","Archivo Black",sans-serif;
  letter-spacing:.5px;text-transform:uppercase;color:#fff}
.menu-title em{font-style:italic;
  background:linear-gradient(120deg,#ffcf85,#e2610c);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.menu-beta{display:inline-block;margin-top:14px;padding:4px 12px;border-radius:20px;
  background:rgba(243,165,69,.14);border:1px solid rgba(243,165,69,.42);
  font:600 11px "Oswald",Barlow,sans-serif;letter-spacing:2px;color:#f3a545}

/* Continue-career card, top right of the comp. */
.menu-continue{position:absolute;top:clamp(20px,4vh,52px);right:clamp(18px,4vw,56px);
  width:min(400px,42vw);padding:16px 20px;border-radius:14px;z-index:3;
  background:rgba(10,16,12,.55);border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);animation:riseIn .5s ease .05s both}
.mcont-label{font:600 10px "Oswald",Barlow,sans-serif;letter-spacing:2px;
  color:rgba(255,255,255,.4);margin-bottom:6px}
.mcont-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mcont-name{font:600 16px "Oswald",Barlow,sans-serif;color:#fff}
.mcont-meta{font:400 12px "Oswald",Barlow,sans-serif;color:rgba(255,255,255,.45);margin-top:2px}
.mcont-go{width:38px;height:38px;flex:none;border:0;border-radius:50%;background:#5fe3a0;
  color:#07100c;font-size:16px;font-weight:700;cursor:pointer;transition:transform .15s}
.mcont-go:hover{transform:scale(1.08)}
.mcont-more{margin-top:10px;background:none;border:0;padding:0;cursor:pointer;
  font:600 10px "Oswald",Barlow,sans-serif;letter-spacing:1.5px;color:rgba(255,255,255,.42)}
.mcont-more:hover{color:#f3a545}

.menu-grid{margin-top:auto;display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.menu-card{position:relative;overflow:hidden;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;
  height:clamp(210px,26vh,290px);border-radius:16px;padding:22px;
  background:#0b1410 var(--mc-img,none) center/cover no-repeat;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .3s,box-shadow .3s,border-color .3s;color:#fff}
.mc-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(190deg,rgba(6,12,8,.35) 0%,rgba(6,12,8,.85) 65%,rgba(6,12,8,.96) 100%)}
.menu-card:hover,.menu-card:focus-visible{transform:translateY(-8px);
  border-color:rgba(243,165,69,.6);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(243,165,69,.15);outline:none}
.mc-num{position:absolute;top:16px;right:20px;z-index:1;
  font:400 46px "Anton","Archivo Black",sans-serif;color:rgba(255,255,255,.08)}
.mc-icon{position:relative;z-index:1;flex:none;display:flex;width:44px;height:44px;
  align-items:center;justify-content:center;border-radius:9px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15);
  font:700 14px "Oswald",Barlow,sans-serif;color:rgba(255,255,255,.55);transition:.3s}
.menu-card:hover .mc-icon{border-color:#f3a545;color:#f3a545}
.mc-body{position:relative;z-index:1}
.mc-tag{display:block;margin-bottom:6px;font:600 11px "Oswald",Barlow,sans-serif;
  letter-spacing:2px;color:rgba(255,255,255,.55);transition:color .3s}
.menu-card:hover .mc-tag,.menu-card:hover .mc-enter{color:#f3a545}
.menu-card>.mc-body>b{display:block;font:400 clamp(24px,2vw,34px) "Anton","Archivo Black",sans-serif;
  margin-bottom:8px;text-transform:none}
.mc-note{display:block;margin-bottom:14px;
  font:400 14px/1.4 "Oswald",Barlow,sans-serif;color:rgba(255,255,255,.6)}
.mc-enter{display:block;font:600 12px "Oswald",Barlow,sans-serif;letter-spacing:1.5px;
  color:rgba(255,255,255,.55);transition:color .3s}
.menu-card.pack-locked{filter:saturate(.2);opacity:.56}
.menu-card.pack-locked .mc-enter{color:#ffca67;opacity:1}
.menu-card.pack-locked .mc-enter::before{content:"DATAPACK REQUIRED · "}
.menu-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-top:auto;padding-top:16px;font:400 11px "Oswald",Barlow,sans-serif;letter-spacing:1px;
  color:rgba(255,255,255,.3)}
.menu-foot-left{display:flex;flex-direction:column;align-items:flex-start;gap:12px;z-index:2}
.now-playing, .now-playing-pill, #nowPlaying, #menuNowPlaying{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;
  border-radius:12px;background:rgba(12,20,15,.78);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);cursor:pointer;transition:all .2s ease;min-width:240px;max-width:340px;user-select:none}
.now-playing:hover, .now-playing-pill:hover, #nowPlaying:hover, #menuNowPlaying:hover{background:rgba(22,34,26,.88);border-color:rgba(243,165,69,.5);transform:translateY(-1px)}
.now-playing:active, .now-playing-pill:active, #nowPlaying:active, #menuNowPlaying:active{transform:translateY(0)}
.np-disc{width:28px;height:28px;border-radius:8px;background:rgba(243,165,69,.12);
  border:1px solid rgba(243,165,69,.3);display:flex;align-items:center;justify-content:center;flex:none}
.np-bars{display:flex;align-items:flex-end;gap:2.5px;height:12px}
.np-bars i{display:block;width:2px;background:#f3a545;border-radius:1px;
  animation:np-eq 1.2s ease-in-out infinite alternate}
.np-bars i:nth-child(1){height:40%;animation-delay:.1s}
.np-bars i:nth-child(2){height:95%;animation-delay:.35s}
.np-bars i:nth-child(3){height:60%;animation-delay:.2s}
.now-playing.paused .np-bars i, .now-playing-pill.paused .np-bars i, #nowPlaying.paused .np-bars i{animation:none;height:30%;opacity:.4}
@keyframes np-eq{0%{height:25%}50%{height:100%}100%{height:40%}}
.np-info{display:flex;flex-direction:column;min-width:0;flex:1}
.np-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}
.np-badge{font:700 9px/1 "Oswald",Barlow,sans-serif;letter-spacing:1.5px;color:rgba(243,165,69,.85)}
.np-time{font:600 10px/1 "Oswald",Barlow,sans-serif;letter-spacing:.5px;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.np-title{font:600 12px/1.2 "Oswald",Barlow,sans-serif;letter-spacing:.5px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.np-timeline{position:relative;width:100%;height:4px;background:rgba(255,255,255,.14);
  border-radius:2px;margin-top:5px;overflow:hidden;cursor:pointer;transition:height .15s ease, background .15s ease}
.np-timeline:hover{height:6px;background:rgba(255,255,255,.24)}
.np-progress-bar{height:100%;width:0%;background:linear-gradient(90deg, #f3a545, #ffca67);
  border-radius:2px;pointer-events:none;transition:width .1s linear}
.menu-credit b{color:rgba(255,255,255,.55)}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.pack-download{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  background:#f5a524!important;color:#171008!important;border-color:#f5a524!important}
.resume-btn{cursor:pointer;background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.4);
  color:#a8f0c6;border-radius:999px;padding:8px 16px;font:700 .74rem Barlow}
.save-dock{width:min(900px,94vw);margin:8px auto 0;padding:12px;border-radius:14px;background:rgba(8,13,11,.76);
  border:1px solid var(--line);text-align:left}.save-dock>strong{display:block;color:#a6b5af;font:800 .55rem Barlow;
  letter-spacing:2px;margin:0 0 8px 3px}.save-list{display:flex;gap:8px;overflow-x:auto;padding:1px}
.save-slot{flex:0 0 min(270px,78vw);display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center;
  padding:10px 11px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.save-slot:hover{border-color:rgba(61,220,132,.45)}.save-slot b{font-size:.78rem}.save-slot span{grid-column:1;color:var(--dim);font-size:.64rem}
.save-slot .load-save{grid-row:1/3;grid-column:2;background:#3ddc84;color:#062416;border:0;border-radius:7px;
  padding:7px 9px;font:800 .6rem Barlow;cursor:pointer}.save-slot .delete-save{grid-column:1/-1;justify-self:start;background:0;border:0;
  color:#71817a;font:600 .58rem Barlow;padding:2px 0;cursor:pointer}.save-slot .delete-save:hover{color:#ff7b86}

/* ---------- team select ---------- */
#screen-select{padding:0;max-width:none;height:calc(100dvh - var(--header-offset));overflow:hidden}
.sel-shell{position:relative;height:100%;display:flex;flex-direction:column;
  align-items:center;padding:12px 18px 16px;
  background:radial-gradient(120% 62% at 50% -6%, var(--tc-glow,rgba(158,27,50,.55)), transparent 62%)}
.sel-shell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(100% 60% at 50% 120%, rgba(0,0,0,.5), transparent 60%)}
.sel-top{display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:1000px;gap:12px;z-index:2}
.sel-link{background:none;border:0;color:var(--dim);font:600 .78rem Barlow;
  cursor:pointer;padding:8px;letter-spacing:.4px;white-space:nowrap}
.sel-link:hover{color:var(--accent)}
.sel-title{text-align:center;flex:1;min-width:0}
.sel-conf{font:700 .82rem "Archivo Black";letter-spacing:2.5px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel-count{color:var(--dim);font-size:.68rem;margin-top:3px;letter-spacing:1px}
.sel-stage{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(8px,3vw,42px);
  width:100%;max-width:1000px;min-height:0;z-index:2}
.arrow{flex:none;width:46px;height:46px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);
  font-size:1.5rem;line-height:1;display:grid;place-items:center}
.arrow:hover{background:rgba(255,255,255,.12);border-color:var(--accent)}
.hero{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;
  animation:heroIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes heroIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.hero-crest{width:min(26vh,196px);height:min(26vh,196px);border-radius:22px;
  display:grid;place-items:center;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--tc,#9e1b32),color-mix(in srgb,var(--tc,#9e1b32) 50%,#000));
  box-shadow:0 26px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14)}
.hero-crest img{width:66%;height:66%;object-fit:contain;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}
.hero-crest .initials{font:800 clamp(34px,6vh,66px)/1 "Archivo Black";color:#fff}
.hero-name{margin:0;font-size:clamp(24px,4.6vh,42px);text-align:center;line-height:1.05;
  max-width:min(90vw,640px)}
.hero-meta{color:var(--dim);font-size:.76rem;letter-spacing:.6px}
.hero-stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hstat{min-width:88px;text-align:center;padding:8px 14px;border-radius:11px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);backdrop-filter:blur(6px)}
.hstat span{display:block;color:var(--dim);font-size:.56rem;letter-spacing:1.4px;
  text-transform:uppercase;margin-bottom:3px}
.hstat b{font:800 1.2rem/1 "Archivo Black"}
.coach-setup{z-index:2;width:min(900px,94vw);display:grid;grid-template-columns:auto minmax(150px,.7fr) minmax(260px,1.3fr) minmax(220px,1fr);
  align-items:center;gap:12px;padding:11px 13px;margin:2px 0 3px;border-radius:14px;
  background:linear-gradient(110deg,rgba(4,8,7,.9),rgba(18,26,23,.84));border:1px solid rgba(255,255,255,.13);
  box-shadow:0 16px 44px rgba(0,0,0,.3);backdrop-filter:blur(10px)}
.coach-badge{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--tc,#9e1b32),color-mix(in srgb,var(--tc,#9e1b32) 58%,#000));
  border:1px solid rgba(255,255,255,.18);font:800 .7rem "Archivo Black";letter-spacing:1px}
.coach-setup label{display:block;min-width:0}.coach-setup label>span{display:block;color:#91a29b;
  font:800 .5rem Barlow;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 4px 2px}
.coach-setup input,.coach-setup select{width:100%;height:35px;border-radius:8px;border:1px solid rgba(255,255,255,.13);
  background:#101713;color:#f2f6f4;padding:0 10px;font:700 .74rem Barlow;outline:none}
.coach-setup input:focus,.coach-setup select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(245,165,36,.12)}
.coach-path b{display:block;color:#ffca67;font:800 .58rem "Archivo Black";letter-spacing:1.3px}
.coach-path span{display:block;color:#90a099;font-size:.65rem;line-height:1.3;margin-top:3px}
.strip-wrap{width:100%;max-width:1000px;overflow:hidden;z-index:2;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.strip{display:flex;gap:8px;padding:10px 4px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip-item{flex:none;width:42px;height:42px;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.05);
  border:1px solid transparent;opacity:.42;transition:opacity .14s,transform .14s}
.strip-item img{width:74%;height:74%;object-fit:contain}
.strip-item .ini{font:800 .62rem Barlow;color:#fff}
.strip-item.on{opacity:1;transform:scale(1.14);border-color:var(--accent);background:rgba(255,255,255,.12)}
.sel-actions{display:flex;gap:10px;align-items:center;z-index:2;margin-top:4px}
.sel-hints{margin-top:10px;color:var(--dim);font-size:.66rem;letter-spacing:.6px;z-index:2}
.conf-sheet{position:absolute;inset:0;z-index:5;display:none;
  background:rgba(4,7,6,.9);backdrop-filter:blur(10px);padding:24px;overflow:auto}
.conf-sheet.show{display:block}
.conf-sheet-inner{max-width:760px;margin:0 auto}
.conf-sheet h3{margin:6px 0 16px;font-size:.9rem;letter-spacing:2.4px;text-align:center}
.conf-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.conf-item{padding:14px;border-radius:11px;cursor:pointer;text-align:left;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);font:600 .86rem Barlow}
.conf-item:hover{border-color:var(--accent)}
.conf-item b{display:block;font:800 .92rem "Archivo Black";margin-bottom:3px}
.conf-item span{color:var(--dim);font-size:.7rem}

/* ---------- quick game ---------- */
.qg,.ol,.how{max-width:960px;margin:0 auto}
.qg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.qg-head h2{margin:0;font-size:1rem;letter-spacing:3px}
.qg-matchup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  margin-bottom:26px}
.qg-slot{position:relative;cursor:pointer;padding:22px 16px;border-radius:18px;color:var(--ink);
  border:1px solid var(--line);background:linear-gradient(165deg,var(--c,#1a2320),rgba(10,14,12,.9));
  display:flex;flex-direction:column;align-items:center;gap:10px;min-height:220px;justify-content:center}
.qg-slot:hover{border-color:var(--accent)}
.qg-label{position:absolute;top:12px;left:14px;color:var(--dim);font:800 .58rem Barlow;letter-spacing:2.2px}
.qg-crest{width:96px;height:96px;border-radius:16px;display:grid;place-items:center;
  background:rgba(0,0,0,.35);overflow:hidden}
.qg-crest img{width:76%;height:76%;object-fit:contain}
.qg-crest .initials{font:800 1.5rem "Archivo Black"}
.qg-slot b{font:800 1.05rem/1.2 "Archivo Black";text-align:center}
.qg-ovr{font:700 .72rem Barlow;color:var(--dim);letter-spacing:1px}
.qg-change{margin-top:4px;padding:6px 10px;border-radius:999px;background:rgba(245,165,36,.14);
  border:1px solid rgba(245,165,36,.38);color:#ffca67;font:800 .58rem Barlow;letter-spacing:1.2px}
.qg-vs{font:800 1.4rem "Archivo Black";color:var(--accent)}
.qg-rules{display:grid;gap:12px;margin-bottom:26px}
.rule{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px 16px}
.rule>span{font:700 .8rem Barlow;letter-spacing:.4px}
.seg{display:flex;gap:4px;background:rgba(0,0,0,.35);padding:4px;border-radius:10px}
.seg button{cursor:pointer;border:0;background:transparent;color:var(--dim);
  font:700 .74rem Barlow;padding:7px 13px;border-radius:7px;white-space:nowrap}
.seg button.on{background:var(--accent);color:#20160a}
.seg button:hover:not(.on){color:var(--ink)}

.picker{position:fixed;inset:0;z-index:60;display:none;place-items:center;
  background:rgba(4,7,6,.8);backdrop-filter:blur(8px);padding:18px}
.picker.show{display:grid}
.picker-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  width:100%;max-width:620px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.picker-head{display:flex;gap:10px;align-items:center;padding:14px;border-bottom:1px solid var(--line)}
.picker-head input{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;color:var(--ink);font:600 .86rem Barlow;outline:none}
.picker-head input:focus{border-color:var(--accent)}
.picker-list{overflow:auto;padding:8px}
.pick-row{display:flex;align-items:center;gap:11px;width:100%;cursor:pointer;text-align:left;
  padding:9px 11px;border-radius:10px;background:transparent;border:1px solid transparent;color:var(--ink)}
.pick-row:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.pick-row .pc{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;flex:none;
  font:800 .58rem Barlow;overflow:hidden}
.pick-row .pc img{width:80%;height:80%;object-fit:contain}
.pick-row .pn{flex:1;min-width:0;font-weight:600;font-size:.86rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-row .pcf{color:var(--dim);font-size:.68rem}

/* ---------- online ---------- */
.ol-body{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.ol-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.ol-card h3{margin:0 0 8px;font-size:.82rem;letter-spacing:2.2px;color:var(--accent)}
.ol-card p{color:var(--dim);font-size:.82rem;line-height:1.5;margin:0 0 14px}
.ol-join{display:flex;gap:8px}
.ol-join input{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;color:var(--ink);font:800 1.1rem "Archivo Black";letter-spacing:5px;
  text-transform:uppercase;outline:none;text-align:center}
.ol-room{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:24px;text-align:center}
.ol-code{font:800 3rem "Archivo Black";letter-spacing:14px;color:var(--accent);
  text-shadow:0 10px 34px rgba(245,165,36,.3)}
.ol-status{color:var(--dim);font-size:.84rem;margin-top:8px}
.ol-seats{display:flex;gap:12px;justify-content:center;margin:18px 0;flex-wrap:wrap}
.ol-seat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:12px 18px;min-width:150px}
.ol-seat b{display:block;font:800 .9rem "Archivo Black"}
.ol-seat.ready{border-color:var(--live)}
.ol-seat span{color:var(--dim);font-size:.68rem;letter-spacing:1.2px}
.ol-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- how to play ---------- */
.how-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.how-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.how-card h3{margin:0 0 8px;font-size:.86rem;letter-spacing:1.4px;color:var(--accent)}
.how-card p{margin:0;color:var(--dim);font-size:.84rem;line-height:1.65}
.how-card b{color:var(--ink)}

/* ---------- hub ---------- */
.hub{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.hub-side{position:sticky;top:calc(var(--header-offset) + 18px);display:flex;flex-direction:column;gap:12px}
.myteam{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:16px;position:relative;overflow:hidden}
.myteam::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--team)}
.myteam-top{display:flex;align-items:center;gap:12px}
.myteam-logo{width:52px;height:52px;border-radius:10px;object-fit:contain;
  background:rgba(255,255,255,.05);display:grid;place-items:center;font:800 1rem Barlow}
.myteam h3{margin:0;font-size:1rem;line-height:1.15}
.myteam .conf{color:var(--dim);font-size:.72rem;margin-top:3px}
.myteam-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.stat{background:var(--panel-2);border-radius:9px;padding:9px 10px}
.stat b{display:block;font:800 1.15rem "Archivo Black";line-height:1}
.stat span{color:var(--dim);font-size:.62rem;letter-spacing:.8px;text-transform:uppercase}
.hub-nav{display:flex;flex-direction:column;gap:4px}
.nav-btn{text-align:left;background:transparent;border:1px solid transparent;color:var(--dim);
  border-radius:9px;padding:10px 13px;font:600 .86rem Barlow;cursor:pointer}
.nav-btn:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.nav-btn.active{background:var(--panel);border-color:var(--line);color:var(--ink)}
.nav-btn.active::before{content:"▸ ";color:var(--accent)}
.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);
  border-radius:9px;padding:9px;font:600 .8rem Barlow;cursor:pointer}
.ghost:hover{color:var(--ink);border-color:var(--accent)}
.hub-main{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px;min-height:60vh}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:16px;flex-wrap:wrap}
.panel-head h2{margin:0;font-size:1.05rem;letter-spacing:1px}
.panel-head .muted{color:var(--dim);font-size:.78rem}

.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th{text-align:left;color:var(--dim);font:600 .66rem Barlow;letter-spacing:1px;
  text-transform:uppercase;padding:8px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--panel)}
.tbl td{padding:9px;border-bottom:1px solid rgba(255,255,255,.05)}
.tbl tr:hover td{background:rgba(255,255,255,.03)}
.ovr{display:inline-grid;place-items:center;min-width:30px;height:24px;border-radius:6px;
  font:800 .78rem "Archivo Black";background:rgba(255,255,255,.08)}
.ovr.elite{background:rgba(245,165,36,.22);color:#ffd07a}
.ovr.good{background:rgba(61,220,132,.18);color:#a8f0c6}
.ovr.mid{background:rgba(255,255,255,.08);color:#cfe0d8}
.ovr.low{background:rgba(255,77,94,.15);color:#ffb3ba}
.tag{display:inline-block;font:700 .6rem Barlow;letter-spacing:.7px;padding:3px 7px;
  border-radius:5px;background:rgba(255,255,255,.07);color:var(--dim)}
.tag.dev-Elite{background:rgba(245,165,36,.2);color:#ffd07a}
.tag.dev-Star{background:rgba(124,140,255,.2);color:#c3ccff}
.scroll{max-height:60vh;overflow:auto;border-radius:10px}
.depth-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.depth-card{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px}
.depth-card h4{margin:0 0 9px;font:700 .74rem Barlow;letter-spacing:1.2px;color:var(--accent)}
.depth-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.8rem}
.depth-row .slot{width:34px;color:var(--dim);font-size:.58rem;font-weight:700}
.depth-row .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.depth-row.starter{margin:0 -6px;padding:7px 6px;border-radius:7px;background:rgba(245,165,36,.08);border:1px solid rgba(245,165,36,.16)}
.depth-row.starter .slot{color:var(--accent)}
.depth-controls{display:flex;gap:3px}.depth-controls button{width:24px;height:24px;padding:0;border-radius:5px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink);cursor:pointer}
.depth-controls button:hover{border-color:var(--accent)}.depth-controls button:disabled{opacity:.2;cursor:not-allowed}
.week-row{display:flex;align-items:center;gap:12px;padding:11px;border-radius:10px;
  background:var(--panel-2);margin-bottom:7px;border:1px solid transparent}
.week-row.next{border-color:var(--accent)}
.week-row .wk{width:34px;color:var(--dim);font:700 .7rem Barlow}
.week-row .opp{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.week-row .res{font:800 .8rem "Archivo Black";min-width:56px;text-align:right}
.res.w{color:var(--live)} .res.l{color:var(--bad)}
.empty{color:var(--dim);text-align:center;padding:50px 20px;font-size:.9rem;line-height:1.6}
.career-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(190px,1.3fr) repeat(3,minmax(85px,.55fr));
  gap:10px;align-items:center;padding:17px;margin:0 0 20px;border-radius:14px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--team) 23%,#101714),#111916 62%);border:1px solid rgba(255,255,255,.12)}
.career-card::after{content:"HC";position:absolute;right:-9px;bottom:-30px;color:rgba(255,255,255,.035);
  font:800 90px "Archivo Black";pointer-events:none}
.career-id b{display:block;font:800 1.15rem "Archivo Black"}.career-id span{display:block;color:var(--dim);font-size:.7rem;margin-top:4px}
.career-stat{padding:9px 10px;border-radius:9px;background:rgba(0,0,0,.28)}
.career-stat b{display:block;font:800 1rem "Archivo Black"}.career-stat span{display:block;color:var(--dim);font-size:.55rem;letter-spacing:1px;text-transform:uppercase}
.job-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:10px;margin-bottom:16px}
.job-card{position:relative;padding:14px;border-radius:13px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.job-card::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--jc,var(--accent))}
.job-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}.job-logo{width:42px;height:42px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.05);padding:4px}
.job-top b{display:block;font-size:.85rem}.job-top span{display:block;color:var(--dim);font-size:.65rem;margin-top:2px}
.job-meta{display:flex;gap:7px;margin-bottom:11px}.job-meta span{background:rgba(255,255,255,.06);border-radius:6px;padding:5px 7px;color:#c8d4cf;font-size:.61rem}
.job-card .btn{width:100%;padding:9px}

/* ---------- recruiting: a phone, in a 1:1 feed ---------- */
.rec-wrap{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start}
.rec-board{display:grid;gap:9px}
.rec-row{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;
  background:var(--panel-2);border:1px solid transparent;cursor:pointer;text-align:left;
  color:var(--ink);width:100%}
.rec-row:hover{border-color:var(--accent)}
.rec-row.on{border-color:var(--accent);background:rgba(245,165,36,.08)}
.rec-stars{color:var(--accent);font-size:.72rem;letter-spacing:-1px;width:56px;flex:none}
.rec-id{flex:1;min-width:0}
.rec-id b{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-id span{color:var(--dim);font-size:.68rem}
.rec-int{width:96px;flex:none}
.rec-int i{display:block;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.rec-int i>b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--live))}
.rec-int span{display:block;color:var(--dim);font-size:.6rem;letter-spacing:.8px;margin-top:3px}
.rec-hours{display:flex;align-items:center;gap:10px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:14px;
  font:700 .78rem Barlow}
.rec-hours b{color:var(--accent);font-family:"Archivo Black"}

.phone{position:sticky;top:calc(var(--header-offset) + 18px);background:#0a100e;border:1px solid var(--line);
  border-radius:26px;padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  height:min(72vh,640px)}
.phone-top{display:flex;align-items:center;gap:10px;padding:6px 6px 12px;border-bottom:1px solid var(--line)}
.phone-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font:800 .74rem Barlow;background:var(--team);flex:none}
.phone-who{flex:1;min-width:0}
.phone-who b{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone-who span{color:var(--dim);font-size:.66rem}
.phone-feed{flex:1;overflow:auto;padding:12px 4px;display:flex;flex-direction:column;gap:8px}
.bub{max-width:82%;padding:9px 12px;border-radius:16px;font-size:.82rem;line-height:1.45;
  animation:pop .18s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.bub.them{align-self:flex-start;background:var(--panel-2);border-bottom-left-radius:5px}
.bub.me{align-self:flex-end;background:linear-gradient(135deg,var(--accent),#f08a1e);
  color:#20160a;border-bottom-right-radius:5px;font-weight:600}
.bub.sys{align-self:center;background:transparent;color:var(--dim);font-size:.68rem;
  letter-spacing:.6px;text-transform:uppercase}
.phone-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding-top:10px;
  border-top:1px solid var(--line)}
.pa{cursor:pointer;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  border-radius:10px;padding:9px 8px;font:700 .72rem Barlow;text-align:left;line-height:1.3}
.pa:hover{border-color:var(--accent)}
.pa small{display:block;color:var(--dim);font-weight:500;font-size:.62rem;margin-top:2px}
.pa:disabled{opacity:.4;cursor:not-allowed}
.portal-note{padding:12px 14px;margin-bottom:14px;border:1px solid rgba(245,165,36,.25);
  border-radius:12px;background:rgba(245,165,36,.07);color:var(--dim);font-size:.82rem}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:10px}
.portal-card{padding:15px;border-radius:13px;background:var(--panel);border:1px solid var(--line)}
.portal-card h3{font-size:.92rem;margin:5px 0}.portal-card p{color:var(--dim);font-size:.76rem;margin:0 0 12px}
.portal-origin{color:var(--accent);font:800 .58rem Barlow;letter-spacing:1.1px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:70;display:none;place-items:center;
  background:rgba(4,7,6,.78);backdrop-filter:blur(8px);padding:18px}
.modal.show{display:grid}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:24px;max-width:520px;width:100%;box-shadow:var(--shadow)}
.modal-card h2{margin:0 0 10px;font-size:1.1rem;letter-spacing:1.5px}
.modal-sub{color:var(--dim);font-size:.86rem;line-height:1.55;margin:0 0 16px}
.pack-state{background:var(--panel-2);border-radius:10px;padding:12px;font-size:.82rem;
  margin-bottom:14px;line-height:1.5}
.pack-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pack-note{color:var(--dim);font-size:.74rem;margin:12px 0 0;line-height:1.5}
.modal-card.final{text-align:center}
.audio-settings label{display:block;padding:12px 0;border-top:1px solid var(--line)}
.audio-settings label span{display:flex;justify-content:space-between;gap:16px;
  margin-bottom:8px;font:800 .76rem Barlow;letter-spacing:.8px;text-transform:uppercase}
.audio-settings output{color:var(--accent)}
.audio-settings input[type="range"]{width:100%;accent-color:var(--accent);cursor:pointer}
.audio-settings{max-height:calc(100dvh - 32px);overflow-y:auto}
.audio-settings label.performance-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:18px;padding:18px 16px;border:1px solid #67532a;border-radius:12px;background:linear-gradient(120deg,#252517,#111b16);cursor:pointer}
.audio-settings .performance-copy{display:block;margin:0;text-transform:none;letter-spacing:0}
.performance-copy strong{display:block;font-size:.96rem}.performance-copy small{display:block;font-size:.61rem;letter-spacing:1.3px;color:var(--dim);margin-top:7px}
#graphicsModeState{font-size:.65rem;color:var(--accent);margin-left:6px}
#performanceMode{appearance:none;-webkit-appearance:none;width:50px;height:28px;flex:0 0 50px;border:1px solid #657068;
  border-radius:20px;background:#333f37;position:relative;cursor:pointer;margin:0}
#performanceMode::before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#e6eee9;transition:transform .15s ease}
#performanceMode:checked{background:#f5a524;border-color:#f5a524}#performanceMode:checked::before{transform:translateX(22px);background:#171e14}
#performanceMode:focus-visible{outline:3px solid #eaf7ff;outline-offset:4px}
.graphics-hint{font-size:.8rem;line-height:1.5;color:var(--dim);margin:10px 2px 12px}
.settings-game-hint{font-size:.75rem;color:var(--accent);margin:0 2px 16px}.settings-game-hint:empty{display:none}
.settings-section{font-size:.71rem;letter-spacing:2px;margin:22px 0 8px;color:var(--text)}
.audio-settings label.camera-motion-toggle{display:flex;align-items:center;justify-content:space-between;gap:15px}
.camera-motion-toggle span{margin:0!important}.camera-motion-toggle input{width:22px;height:22px;accent-color:var(--accent);cursor:pointer}
#displayStatus:empty{display:none}
html:fullscreen{background:#07100c;overflow:auto}html:-webkit-full-screen{background:#07100c;overflow:auto}
@media(prefers-reduced-motion:reduce){#performanceMode::before{transition:none}}
.patch-notes{max-width:590px;max-height:calc(100dvh - 36px);display:flex;flex-direction:column;
  background:linear-gradient(155deg,#111a16,#080d0b 72%);overflow:hidden}
.patch-notes> :not(ul){flex-shrink:0}
.patch-notes>.patch-version{align-self:flex-start}
.patch-version{display:inline-block;padding:5px 9px;border-radius:999px;background:rgba(245,165,36,.13);
  border:1px solid rgba(245,165,36,.32);color:var(--accent);font:800 .58rem Barlow;letter-spacing:1.6px}
.patch-notes h2{font-size:1.55rem;margin:13px 0 5px}.patch-type{margin:0 0 17px;color:var(--dim);
  font:800 .61rem Barlow;letter-spacing:1.5px}
.patch-notes ul{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--line);
  min-height:0;overflow-y:auto;overscroll-behavior:contain}
.patch-notes li{position:relative;padding:11px 10px 11px 29px;border-bottom:1px solid var(--line);
  color:#dce6e0;font-size:.83rem;line-height:1.38}
.patch-notes li::before{content:"✓";position:absolute;left:7px;color:#49dd91;font-weight:900}
.patch-rule{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:var(--dim);
  font:800 .55rem Barlow;letter-spacing:1.05px}.patch-rule i{height:1px;flex:1;background:var(--line)}
.final-score{font:800 3rem "Archivo Black";margin:10px 0 6px;letter-spacing:2px}
.final-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;
  margin:16px 0 20px}
.fs{background:var(--panel-2);border-radius:10px;padding:10px 8px}
.fs b{display:block;font:800 1.1rem "Archivo Black"}
.fs span{color:var(--dim);font-size:.6rem;letter-spacing:1px;text-transform:uppercase}

/* ---------- game day ---------- */
/* Keep update notices in menus so the scoreboard and field stay unobstructed. */
body[data-screen="game"] #appUpdateBanner,
body[data-screen="game"] #packUpdateBanner{display:none !important}
#screen-game{padding:0;max-width:none}
.gd-wrap{position:relative;height:calc(100dvh - var(--header-offset));overflow:hidden;background:#060a10}
#gdCanvas{width:100%;height:100%;display:block}
.gd-board{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  display:flex;align-items:stretch;border-radius:11px;overflow:hidden;
  background:rgba(5,9,12,.92);border:1px solid var(--line);backdrop-filter:blur(8px);
  box-shadow:0 18px 46px rgba(0,0,0,.68);font-family:"Oswald",Barlow,sans-serif}
.gd-team{display:flex;align-items:center;gap:9px;padding:9px 14px}
.gd-team b{font:800 .8rem Barlow;letter-spacing:.8px;max-width:130px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-team i{font:800 1.3rem/1 "Archivo Black";font-style:normal;min-width:30px;text-align:center}
.gd-dot{width:5px;height:26px;border-radius:3px;flex:none}
.gd-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:6px 18px;background:rgba(255,255,255,.05);border-left:1px solid var(--line);
  border-right:1px solid var(--line)}
.gd-qtr{font:700 .6rem Barlow;letter-spacing:1.6px;color:var(--dim)}
.gd-clock{font:800 1.08rem/1 "Archivo Black";margin-top:2px}
.gd-venue{font:800 .42rem Barlow;letter-spacing:1.1px;color:#87968f;margin-top:3px;max-width:130px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-dd{position:absolute;top:62px;left:50%;transform:translateX(-50%);display:flex;
  align-items:center;gap:10px;background:rgba(5,9,12,.88);border:1px solid var(--line);
  border-radius:9px;padding:7px 15px;font:700 .76rem Barlow;letter-spacing:.9px;
  backdrop-filter:blur(6px);white-space:nowrap}
.gd-sep{width:1px;height:12px;background:var(--line)}
.gd-poss{color:var(--live);font-size:.64rem;letter-spacing:1.4px}
.gd-poss.def{color:var(--cool)}
.gd-playclock{display:flex;align-items:center;gap:5px;margin-left:2px;padding-left:10px;
  border-left:1px solid var(--line);color:#d9e3df;transition:color .16s,transform .16s}
.gd-playclock small{font:800 .48rem Barlow;letter-spacing:1.3px;color:var(--dim)}
.gd-playclock b{font:800 .75rem "Archivo Black";min-width:18px;text-align:right}
.gd-playclock.warn{color:#ff5b62;transform:scale(1.08)}
.gd-playclock.warn b{animation:clock-pulse .8s steps(2,end) infinite}
@keyframes clock-pulse{50%{opacity:.35}}
.gd-msg{position:absolute;top:44%;left:50%;transform:translateX(-50%);
  font:800 1.5rem "Archivo Black";letter-spacing:1px;text-shadow:0 6px 26px rgba(0,0,0,.85);
  pointer-events:none;text-align:center;white-space:nowrap}
.gd-coin{position:absolute;z-index:13;left:50%;top:34%;transform:translate(-50%,-50%);display:grid;place-items:center;
  min-width:300px;padding:18px 26px;border-radius:18px;background:rgba(4,8,11,.93);border:1px solid rgba(255,194,71,.45);
  box-shadow:0 28px 80px rgba(0,0,0,.72);backdrop-filter:blur(12px);text-align:center}
.gd-coin>span{color:#ffca67;font:800 .55rem Barlow;letter-spacing:2.6px}.gd-coin>b{font:800 1.05rem "Archivo Black";letter-spacing:1.2px;margin-top:9px}
.gd-coin>small{color:#9aaba4;font:600 .68rem Barlow;margin-top:4px}.coin-disc{position:relative;width:62px;height:62px;margin:13px 0 4px;
  transform-style:preserve-3d;animation:coin-flip .62s cubic-bezier(.2,.7,.2,1) 5}
.coin-disc i{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden;
  background:radial-gradient(circle at 35% 25%,#ffe198,#e99a17 64%,#8c4f08);border:3px solid #ffd36c;color:#291900;
  font:800 1.35rem "Archivo Black";font-style:normal;box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 0 0 3px rgba(73,37,0,.25)}
.coin-disc i+ i{transform:rotateY(180deg)}
@keyframes coin-flip{0%{transform:translateY(0) rotateY(0) rotateZ(0)}50%{transform:translateY(-28px) rotateY(540deg) rotateZ(12deg)}100%{transform:translateY(0) rotateY(1080deg) rotateZ(0)}}
.gd-flash{position:absolute;top:32%;left:50%;transform:translateX(-50%) scale(.9);
  text-align:center;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}
.gd-flash.on{opacity:1;transform:translateX(-50%) scale(1)}
.gd-flash b{display:block;font:800 clamp(28px,5vw,58px) "Archivo Black";letter-spacing:2px;
  color:var(--accent);text-shadow:0 8px 40px rgba(0,0,0,.9)}
.gd-flash span{color:#dbe7e1;font:600 .84rem Barlow;letter-spacing:1px;text-shadow:0 3px 12px #000}
.gd-flash.live-event{top:134px;max-width:calc(100% - 24px);width:max-content;padding:7px 13px;
  border:1px solid #f4c45455;border-left:3px solid #f4c454;border-radius:4px;background:#04111fe8;z-index:17;transition:opacity .2s}
.gd-flash.live-event b{font:800 16px/1.2 Barlow,sans-serif;letter-spacing:.7px;text-shadow:none}
.gd-flash.live-event span{display:block;font-size:11px;line-height:1.4;letter-spacing:.3px;text-shadow:none}
@media(max-width:620px){
  .gd-flash.live-event{top:164px;left:8px;max-width:calc(100% - 172px);padding:6px 10px;text-align:left;transform:scale(.96)}
  .gd-flash.live-event.on{transform:none}.gd-flash.live-event b{font-size:14px}
}
.gd-replay{position:absolute;z-index:18;left:18px;top:76px;display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-left:4px solid var(--accent);border-radius:3px 8px 8px 3px;
  background:rgba(4,8,10,.88);box-shadow:0 10px 30px rgba(0,0,0,.45);backdrop-filter:blur(7px)}
.gd-replay span{color:var(--accent);font:800 .5rem Barlow;letter-spacing:1.8px}.gd-replay b{font:800 .68rem "Archivo Black";letter-spacing:1px}
.gd-return-choice{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);z-index:12;
  width:min(560px,92vw);padding:15px;border-radius:16px;background:rgba(4,8,11,.95);
  border:1px solid rgba(255,194,71,.5);box-shadow:0 22px 70px rgba(0,0,0,.72),0 0 32px rgba(255,153,32,.12);
  backdrop-filter:blur(12px);text-align:center}
.grc-eyebrow{display:block;color:#ffca67;font:800 .54rem Barlow;letter-spacing:2.3px;margin-bottom:5px}
.gd-return-choice>b{display:block;font:800 1.05rem "Archivo Black";letter-spacing:1.1px;margin-bottom:11px}
.grc-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.grc-actions button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;
  align-items:center;text-align:left;padding:11px 13px;border-radius:11px;cursor:pointer;color:#eef5f2;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14)}
.grc-actions button.run{background:rgba(61,220,132,.12);border-color:rgba(61,220,132,.45)}
.grc-actions button:hover{transform:translateY(-1px);border-color:#ffca67}
.grc-actions kbd{grid-row:1/3;display:grid;place-items:center;min-width:56px;height:42px;border-radius:8px;
  background:#ffc247;color:#211500;font:800 .58rem "Archivo Black";box-shadow:none}
.grc-actions .run kbd{background:#48d890;color:#052515}
.grc-actions strong{font:800 .76rem "Archivo Black";letter-spacing:.9px}
.grc-actions small{color:#8fa19a;font:600 .6rem Barlow;margin-top:2px}

.gd-turbo{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;
  background:rgba(5,9,12,.82);border:1px solid var(--line);border-radius:9px;padding:8px 12px;
  backdrop-filter:blur(6px)}
.gd-turbo span{font:800 .58rem Barlow;letter-spacing:1.8px;color:var(--dim)}
.tb{width:120px;height:7px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.tb i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#3ddc84,#f5a524);transition:width .08s linear}
.tb i.low{background:linear-gradient(90deg,#ff4d5e,#f5a524)}
.gd-abilities{position:absolute;left:16px;bottom:58px;display:flex;gap:6px;align-items:center;
  pointer-events:none}
.gd-abilities span{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:7px;
  background:rgba(5,9,12,.76);border:1px solid rgba(255,255,255,.11);color:#aebdb7;
  font:800 .54rem Barlow;letter-spacing:1px;backdrop-filter:blur(5px)}
.gd-abilities b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border-radius:4px;
  background:rgba(255,194,71,.18);color:#ffd477;font:800 .54rem "Archivo Black"}
.gd-abilities span.cool{opacity:.38}
.gd-abilities span.active{opacity:1;color:#fff2cc;border-color:#ffb02e;background:rgba(86,51,7,.92)}
.gd-actor{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);display:flex;
  align-items:baseline;gap:8px;padding:7px 11px;border-radius:8px;background:rgba(5,9,12,.78);
  border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);pointer-events:none}
.gd-actor span{font:800 .48rem Barlow;letter-spacing:1.4px;color:#57caff}
.gd-actor b{font:800 .64rem "Archivo Black";letter-spacing:.7px;color:#f2f5f3}
.gd-drive{position:absolute;right:16px;bottom:17px;padding:7px 11px;border-radius:8px;
  background:rgba(5,9,12,.78);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);
  color:#aebdb7;font:800 .55rem Barlow;letter-spacing:1.1px;pointer-events:none}
.gd-flight{position:absolute;left:16px;top:104px;display:flex;align-items:baseline;gap:5px;
  padding:7px 10px;border-radius:8px;background:rgba(5,9,12,.8);border:1px solid var(--line);
  backdrop-filter:blur(6px);pointer-events:none}
.gd-flight b{font:800 .66rem "Archivo Black";letter-spacing:1.4px;color:#7bd7ff}
.gd-flight span{font:800 .5rem Barlow;letter-spacing:1.5px;color:var(--dim)}
.qg-saved{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin:20px 0;padding:20px;border:1px solid #f5a52488;border-radius:14px;background:#f5a5240a}
.qg-saved b{color:var(--accent);font-size:.75rem;letter-spacing:1.6px}
.qg-saved p{margin:8px 0}.qg-saved small{color:var(--dim)}

.gd-throw-style{position:absolute;right:16px;bottom:172px;display:flex;align-items:center;gap:9px;
  min-height:44px;padding:10px 13px;border:1px solid #7bd7ff80;border-radius:9px;
  background:#08161eef;color:#b5eaff;font:800 .72rem Barlow;letter-spacing:1px;pointer-events:auto}
.gd-throw-style kbd{border:1px solid #7bd7ff66;border-radius:4px;padding:3px 6px}
.gd-throw-style small{color:#a2b4ba;font-size:.56rem}
.gd-throw-style:focus-visible{outline:3px solid #f5a524;outline-offset:3px}
.gd-throw-style:disabled{opacity:.6;cursor:default}
@media(max-width:640px){.gd-throw-style{right:8px;bottom:auto;top:156px;max-width:172px;gap:5px;padding:8px}.gd-throw-style small{max-width:45px}}

.gd-pass{position:absolute;right:16px;bottom:16px;width:210px;
  background:rgba(5,9,12,.9);border:1px solid var(--line);border-radius:11px;padding:11px 12px;
  backdrop-filter:blur(6px)}
.pm-name{font:800 .74rem "Archivo Black";letter-spacing:1px;margin-bottom:7px;color:var(--accent)}
.pm-bar{position:relative;height:16px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.pm-sweet{position:absolute;top:0;bottom:0;background:rgba(61,220,132,.45);
  border-left:2px solid #3ddc84;border-right:2px solid #3ddc84}
.pm-fill{position:absolute;top:0;bottom:0;left:0;width:0;
  background:linear-gradient(90deg,rgba(245,165,36,.85),#fff2cf);mix-blend-mode:screen}
.pm-types{display:grid;grid-template-columns:34fr 36fr 30fr;gap:3px;margin-top:6px}
.pm-types span{display:flex;flex-direction:column;align-items:center;padding:4px 2px;border-radius:5px;
  color:#75837e;background:rgba(255,255,255,.035);font:800 .49rem Barlow;letter-spacing:.7px}
.pm-types span b{font-size:.4rem;letter-spacing:1px;color:#64716d;margin-bottom:1px}
.pm-types span.active{color:#07100c;background:#f5a524;box-shadow:0 0 15px rgba(245,165,36,.35)}
.pm-types span.active b{color:rgba(7,16,12,.65)}
.pm-hint{color:var(--dim);font-size:.62rem;margin-top:6px;letter-spacing:.8px}

.gd-kick{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:280px;
  background:rgba(5,9,12,.92);border:1px solid var(--line);border-radius:12px;padding:14px;
  backdrop-filter:blur(6px);text-align:center}
.km-title{font:800 .78rem "Archivo Black";letter-spacing:2px;color:var(--accent);margin-bottom:9px}
.km-bar{height:18px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.km-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3ddc84,#f5a524,#ff4d5e)}
.km-acc{position:relative;height:14px;margin-top:8px;border-radius:6px;
  background:linear-gradient(90deg,#ff4d5e,#f5a524 30%,#3ddc84 50%,#f5a524 70%,#ff4d5e)}
.km-acc span{position:absolute;top:-4px;width:3px;height:22px;background:#fff;left:50%;
  border-radius:2px;box-shadow:0 0 8px #fff}
.km-hint{color:var(--dim);font-size:.66rem;margin-top:9px;letter-spacing:1px}

.gd-cards{position:absolute;left:12px;right:12px;bottom:10px;padding:12px 14px 11px;
  max-width:1040px;margin:auto;background:rgba(5,9,12,.96);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.66);backdrop-filter:blur(11px)}
.cards-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.cards-head>div:first-child{display:flex;align-items:baseline;gap:11px;min-width:0}
.cards-head b{font:800 .82rem "Archivo Black";letter-spacing:2.4px;white-space:nowrap}
.cards-head span{color:var(--accent);font:700 .7rem Barlow;letter-spacing:1.1px}
.cards-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.cards-actions button{border:1px solid var(--line);background:rgba(255,255,255,.055);color:var(--ink);
  padding:6px 8px;border-radius:7px;font:800 .57rem Barlow;letter-spacing:.8px;cursor:pointer}
.cards-actions button:hover{border-color:var(--accent)}.cards-actions button:disabled{opacity:.35;cursor:not-allowed}
.cards-actions button span{font-size:inherit}.cards-info{font-size:.54rem!important;color:var(--dim)!important;white-space:nowrap}
.cards-actions .cards-back{color:#ffd07a;border-color:rgba(245,165,36,.42);background:rgba(245,165,36,.1)}
.cards-body{display:grid;grid-template-columns:168px 1fr;gap:12px;min-height:268px}
.play-categories{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);padding-right:10px;max-height:320px;overflow-y:auto;overscroll-behavior:contain}
.play-categories>*{flex-shrink:0}.play-browse{position:sticky;top:0;z-index:2;width:100%;padding:7px 4px;margin-bottom:5px;border:1px solid var(--line);border-radius:6px;background:#101c20;color:var(--ink);font:700 .65rem Barlow}
.play-categories button{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;
  border:1px solid transparent;border-radius:7px;background:transparent;color:#aab8b2;padding:7px 9px;
  font:800 .62rem Barlow;letter-spacing:.9px;text-align:left;cursor:pointer}
.play-categories button span{color:#718079;font-size:.54rem}.play-categories button:hover{background:rgba(255,255,255,.05)}
.play-categories button.on{color:#181009;background:linear-gradient(90deg,var(--accent),#f28721);border-color:transparent}
.play-categories button.on span{color:#5b390b}.play-page{min-width:0}
.play-page-head{height:26px;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--dim);
  font:800 .56rem Barlow;letter-spacing:1.4px}
.play-page-head button{border:0;background:transparent;color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer}
.play-page-head button:disabled{opacity:.2}.cards-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.pcard{position:relative;min-width:0;cursor:pointer;border-radius:11px;padding:10px;text-align:left;color:var(--ink);
  background:linear-gradient(160deg,rgba(20,31,36,.98),rgba(8,14,17,.98));border:1px solid var(--line);
  transition:transform .14s,border-color .14s,box-shadow .14s}
.pcard:hover,.pcard:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pcard-key{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;
  background:var(--accent);color:#20160a;font:800 .7rem "Archivo Black";margin-bottom:7px}
.pcard b{display:block;font:800 .88rem/1.2 "Archivo Black";margin-bottom:4px}
.pcard .pc-blurb{display:block;color:#aab8b2;font-size:.67rem;line-height:1.34;min-height:2.6em}
.pcard svg{display:block;width:100%;height:112px;margin-top:6px;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px),
    rgba(20,60,34,.5);border-radius:8px}
.pcard .pc-tags{display:flex;gap:5px;margin-top:7px;flex-wrap:wrap}
.pc-tag{font:700 .56rem Barlow;letter-spacing:1px;padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.08);color:var(--dim)}
.pc-tag.pass{background:rgba(56,182,255,.18);color:#9ad7ff}
.pc-tag.run{background:rgba(61,220,132,.18);color:#a8f0c6}
.pc-tag.st{background:rgba(245,165,36,.2);color:#ffd07a}
.pc-read{margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.07)}
.pc-read span{display:block!important;min-height:0!important;color:#718079!important;font:800 .48rem Barlow!important;letter-spacing:1.1px}
.pc-read b{margin:2px 0 0!important;color:#dce7e2;font:800 .56rem Barlow!important;letter-spacing:.7px}
.cards-foot{text-align:center;color:var(--dim);font-size:.58rem;margin-top:8px;letter-spacing:.8px}

.gd-personnel-info{position:absolute;right:14px;top:178px;bottom:14px;z-index:19;width:min(420px,42vw);
  overflow:hidden;display:flex;flex-direction:column;background:rgba(5,9,12,.95);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;box-shadow:0 22px 60px rgba(0,0,0,.62);backdrop-filter:blur(10px);pointer-events:none}
.gpi-head{padding:12px 13px 10px;border-bottom:1px solid var(--line)}.gpi-head span{display:block;color:var(--accent);
  font:800 .53rem Barlow;letter-spacing:1.7px}.gpi-head b{display:block;margin-top:3px;font:800 .82rem "Archivo Black";letter-spacing:1.2px}
.gpi-grid{overflow:auto;padding:8px}.gpi-group{margin-bottom:8px}.gpi-group>strong{display:block;color:var(--accent);
  font:800 .52rem Barlow;letter-spacing:1.5px;padding:3px 4px}.gpi-player{display:grid;grid-template-columns:1fr 42px 72px;
  gap:7px;align-items:center;padding:5px 7px;border-radius:7px;background:rgba(255,255,255,.035);margin-bottom:3px}
.gpi-player b{font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gpi-player b small{color:var(--dim);font-size:.55rem}
.gpi-energy{height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.gpi-energy i{display:block;height:100%;background:#3ddc84}
.gpi-energy i.winded{background:#f5a524}.gpi-energy i.gassed{background:#ff4d5e}.gpi-player em{font:700 .49rem Barlow;
  font-style:normal;color:#aab8b2;letter-spacing:.6px;text-align:right}.gpi-foot{padding:8px 12px;border-top:1px solid var(--line);
  color:var(--dim);font-size:.53rem;letter-spacing:.7px}

.gd-help{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  background:rgba(5,9,12,.84);border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;color:var(--dim);font-size:.68rem;backdrop-filter:blur(6px);white-space:nowrap}
.gd-exit{position:absolute;top:12px;right:14px;background:rgba(5,9,12,.88);
  border:1px solid var(--line);color:var(--dim);border-radius:8px;padding:8px 12px;
  font:600 .72rem Barlow;cursor:pointer}
.gd-exit:hover{color:var(--ink);border-color:var(--accent)}
.gd-save{position:absolute;top:12px;right:120px;background:rgba(5,9,12,.88);
  border:1px solid rgba(243,165,69,.45);color:#f3a545;border-radius:8px;padding:8px 12px;
  font:600 .72rem Barlow;cursor:pointer;transition:all .2s ease;z-index:10}
.gd-save:hover{color:#fff;border-color:var(--accent);background:rgba(243,165,69,.2)}
.gd-save.saved{background:rgba(46,125,50,.85);border-color:#81c784;color:#fff}
.gd-pause{position:absolute;top:12px;right:211px;z-index:10;background:rgba(5,9,12,.9);color:#eaf1ed;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:600 .72rem Barlow;cursor:pointer}
.gd-pause kbd{margin-left:5px;color:var(--accent)}
.gd-fullscreen{position:absolute;top:12px;left:14px;z-index:10;padding:8px 10px;border:1px solid #526661;
  border-radius:8px;background:rgba(5,9,12,.9);color:#eaf1ed;font:600 .72rem Barlow;cursor:pointer}
.gd-fullscreen:hover{border-color:var(--accent)}.gd-fullscreen:disabled{opacity:.5;cursor:default}
.match-pause{max-width:440px}.match-pause h2{margin:20px 0 10px}.match-pause>button{width:100%;margin:6px 0;display:flex;justify-content:space-between}
.match-pause .graphics-hint{margin:14px 0 0}
.gd-presnap{position:absolute;bottom:58px;left:16px;width:min(410px,calc(100% - 32px));z-index:12;padding:12px 14px;
  border:1px solid #7b6335;border-left:3px solid var(--accent);border-radius:9px;background:rgba(5,12,16,.94);box-shadow:0 8px 24px #0005}
.presnap-status{display:flex;justify-content:space-between;gap:8px;align-items:center;font:800 .65rem Barlow;letter-spacing:.7px}
.presnap-status>b{color:var(--accent)}.presnap-status>span{color:#bdcbc4;font-size:.6rem}.gd-presnap[data-ready="true"] .presnap-status>b{color:#71e59d}
.motion-controls{display:flex;align-items:center;gap:5px;margin-top:9px}.motion-controls label{font:800 .6rem Barlow;color:var(--dim)}
.motion-controls label kbd{color:var(--accent);display:block}.motion-controls select{min-width:0;flex:1;font-size:.72rem;padding:7px 5px}
.motion-controls button{border:1px solid #647469;border-radius:5px;padding:7px 9px;background:#20302a;color:#eef6f1;cursor:pointer}
.motion-controls button:disabled,.motion-controls select:disabled{opacity:.45;cursor:default}
.motion-controls select:disabled{opacity:1;color:#cfddd5;-webkit-text-fill-color:#cfddd5;background:#18251f}
.gd-presnap>small{display:block;color:#a3b5ac;font-size:.63rem;margin-top:8px}
@media(max-width:600px){.gd-pause{top:6px;right:171px;font-size:.58rem;padding:5px 7px}.gd-pause kbd{display:none}
  .gd-fullscreen{top:6px;left:8px;font-size:.58rem;padding:5px 7px}
  .gd-presnap{bottom:66px;padding:10px}.motion-controls select{font-size:.65rem}}
body.touch .gd-presnap{bottom:172px}
.week-row.next.in-progress{border-color:rgba(243,165,69,.6);background:rgba(243,165,69,.07)}

@media (max-width:900px){
  .menu-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .menu-card{height:auto;min-height:150px;padding:16px}
  .mc-icon{width:36px;height:36px;font-size:12px}
  .mc-note{display:none}
  .mc-num{font-size:32px;top:10px;right:14px}
  .menu-continue{position:static;width:auto;margin:18px 0 0}
  .coach-setup{grid-template-columns:auto 1fr 1.4fr}.coach-path{display:none}
  .career-card{grid-template-columns:1.4fr repeat(3,1fr)}
  .hub{grid-template-columns:1fr}
  .hub-side{position:static}
  .hub-nav{flex-direction:row;flex-wrap:wrap}
  .nav-btn{flex:1 1 auto;text-align:center}
  .rec-wrap{grid-template-columns:1fr}
  .phone{position:static;height:520px}
}
@media (max-width:620px){
  #screen-menu{padding-left:10px;padding-right:10px}.menu-hero{padding-top:24px}.menu-title{font-size:clamp(38px,13vw,54px);letter-spacing:-1px}
  .menu-feature-strip span{padding:0 8px;font-size:.48rem}.menu-grid{grid-template-columns:1fr 1fr;gap:7px}
  .menu-broadcast{grid-template-columns:1fr auto;gap:8px;padding:0 9px}.mb-track{display:none}
  .menu-card{min-height:168px;padding:14px 12px}.mc-icon{margin-bottom:12px}.mc-note{font-size:.65rem}.mc-enter{display:none}
  .coach-setup{grid-template-columns:auto 1fr;padding:8px 10px}.coach-setup label:nth-of-type(2){display:none}
  .coach-path{display:none}.career-card{grid-template-columns:1fr 1fr}.career-id{grid-column:1/-1}
  .gd-abilities{display:none}
  .gd-actor,.gd-drive{display:none!important}
  .gd-playclock{padding-left:6px;gap:3px}
  .gd-playclock small{display:none}
  .brand-txt{display:none}
  .byline{display:none}
  .scores-ticker{padding:0 4px 0 8px;gap:5px}
  #scoresPrevBtn,#scoresNextBtn{display:none!important}
  .st-badge{padding:2px 5px;font-size:.55rem}
  .st-filter{padding:3px 4px;font-size:.54rem;letter-spacing:.2px}
  .st-filter .st-cnt{display:none}
  .st-game{min-width:148px;max-width:185px;padding:2px 6px;gap:5px}
  .st-name{max-width:58px}
  .arrow{width:38px;height:38px;font-size:1.2rem}
  .hero-crest{width:min(22vh,150px);height:min(22vh,150px);border-radius:18px}
  .sel-hints{display:none}
  .qg-matchup{grid-template-columns:1fr;gap:8px}
  .qg-vs{text-align:center}
  .gd-help{display:none}
  .gd-team b{max-width:62px;font-size:.66rem}
  .gd-cards{left:5px;right:5px;bottom:5px;padding:8px}.cards-head{align-items:flex-start}.cards-head>div:first-child{display:block}
  .cards-info{display:none}.cards-body{grid-template-columns:105px 1fr;gap:7px;min-height:230px}
  .play-categories{padding-right:6px}.play-categories button{padding:6px 5px;font-size:.53rem}.play-categories button span{display:none}
  .cards-row{grid-template-columns:1fr 1fr}.cards-row .pcard:nth-child(3){display:none}.pcard{min-width:0}
  .pcard svg{height:82px}
  .gd-personnel-info{left:7px;right:7px;top:120px;bottom:8px;width:auto}
  .gd-pass{width:150px;bottom:auto;top:110px}
  .gd-msg{font-size:1.05rem}
  .gd-return-choice{bottom:150px;padding:12px}
  .grc-actions button{padding:9px}
  .grc-actions kbd{min-width:44px}
}

/* ---------- play-card diagrams ---------- */
.pcard .losl{stroke:rgba(255,255,255,.55);stroke-width:1.6;stroke-dasharray:4 3}
.pcard .ol{fill:#8fa8bd}
.pcard .qb{fill:#f5a524}
.pcard .sk{fill:#e9f3ff}
.pcard .rt{fill:none;stroke:#8fd6ff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pcard .rt.keyed{stroke:#f5a524;stroke-width:2.6}
.pcard .rt.run{stroke:#3ddc84;stroke-width:2.8}
.pcard .tip{fill:#f5a524}
.pcard .kb{fill:#f5a524}
.pcard .kt{fill:#20160a;font:800 9px "Archivo Black",Barlow;text-anchor:middle}

/* ---------- touch controls ---------- */
.gd-touch{position:absolute;inset:auto 0 0 0;display:none;justify-content:space-between;
  align-items:flex-end;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events:none;gap:12px}
body.touch .gd-touch{display:flex}
body.touch .gd-help{display:none}
body.touch .gd-abilities{display:none}
body.touch .gd-turbo{bottom:auto;top:104px;left:12px}
.tstick{pointer-events:auto;width:118px;height:118px;border-radius:50%;flex:none;
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border:1px solid var(--line);position:relative;touch-action:none;backdrop-filter:blur(4px)}
.tstick i{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;
  border-radius:50%;background:rgba(245,165,36,.85);box-shadow:0 6px 20px rgba(0,0,0,.5)}
.tbtns{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.trow{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.tbtn{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;
  min-width:56px;padding:12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(6,10,14,.86);border:1px solid var(--line);color:var(--ink);
  font:800 .7rem Barlow;letter-spacing:1px;backdrop-filter:blur(4px)}
.tbtn:active,.tbtn.on{background:var(--accent);color:#20160a;border-color:transparent}
.tbtn.small{min-width:48px;padding:10px;font-size:.62rem}
.tbtn.go{background:rgba(61,220,132,.9);color:#062;border-color:transparent;min-width:78px}
.tbtn.turbo{background:rgba(245,165,36,.22);border-color:rgba(245,165,36,.5)}
.tbtn.rcv{min-width:52px;background:rgba(56,182,255,.2);border-color:rgba(56,182,255,.45)}
.tbtn.rcv b{display:block;font:800 .95rem "Archivo Black"}
.tbtn.rcv span{display:block;font-size:.54rem;color:var(--dim);letter-spacing:.6px}
@media (max-width:620px){
  .gd-board{top:8px;left:8px;transform:none;font-size:.9em}
  .gd-exit{top:8px;right:8px;padding:6px 9px;font-size:.62rem}
  .gd-save{top:8px;right:96px;padding:6px 9px;font-size:.62rem}
  .gd-dd{top:52px;left:8px;transform:none;padding:5px 10px;font-size:.66rem;gap:6px}
  .pcard{padding:9px}
  .pcard b{font-size:.78rem}
  .pcard .pc-blurb{display:none}
  .pcard svg{height:82px}
  .cards-foot{font-size:.6rem;margin-top:6px}
  .gd-kick{width:min(94vw,280px);bottom:150px}
  .gd-pass{right:8px;top:auto;bottom:172px;width:150px}
}
body.touch.calling .gd-touch{display:none}
@media (max-width:620px){
  .gd-board{left:50%;transform:translateX(-50%);top:6px}
  .gd-team{padding:6px 8px;gap:5px}
  .gd-team i{font-size:1.05rem;min-width:22px}
  .gd-mid{padding:4px 10px}
  .gd-clock{font-size:.9rem}
  .gd-exit{top:6px;right:6px;background:rgba(6,10,14,.7);padding:5px 8px;
    font-size:.56rem;opacity:.7}
  .gd-save{top:6px;right:84px;background:rgba(6,10,14,.7);padding:5px 8px;
    font-size:.56rem}
  .gd-dd{top:48px;left:50%;transform:translateX(-50%)}
  body.touch .gd-turbo{top:84px;left:8px;padding:5px 9px}
  body.touch .tb{width:88px}
}

/* ---------- game-day sub line, crowd meter, box score ---------- */
.gd-sub{position:absolute;top:calc(44% + 34px);left:50%;transform:translateX(-50%);
  font:700 .8rem Barlow;letter-spacing:1.4px;color:#cfe0d8;text-shadow:0 3px 14px rgba(0,0,0,.9);
  pointer-events:none;text-align:center;max-width:88vw}
.gd-crowd{position:absolute;right:16px;top:62px;display:flex;align-items:center;gap:9px;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.72))}
.cr-pulse{width:170px;height:62px;position:relative;padding:6px 11px 17px;
  background:linear-gradient(180deg,rgba(17,23,27,.97),rgba(3,6,8,.97));
  border:2px solid rgba(210,222,225,.38);border-radius:5px 5px 8px 8px;
  box-shadow:inset 0 0 0 2px #05080a,inset 0 -15px 0 rgba(0,0,0,.64);
  clip-path:polygon(5% 0,95% 0,100% 13%,96% 100%,4% 100%,0 13%)}
.cr-bars{height:38px;display:flex;align-items:flex-end;gap:3px;transform:skewX(-4deg)}
.cr-bars i{display:block;flex:1;height:calc(8px + (var(--bar) * 2.8px));min-width:6px;
  opacity:.15;background:#50d66b;border:1px solid rgba(255,255,255,.2);border-radius:1px 1px 0 0;
  box-shadow:inset 0 1px rgba(255,255,255,.28);transition:opacity .16s ease,filter .16s ease,transform .16s ease}
.cr-bars i:nth-child(1){--bar:1}.cr-bars i:nth-child(2){--bar:2}.cr-bars i:nth-child(3){--bar:3}
.cr-bars i:nth-child(4){--bar:4}.cr-bars i:nth-child(5){--bar:5;background:#a9d94f}
.cr-bars i:nth-child(6){--bar:6;background:#d9d746}.cr-bars i:nth-child(7){--bar:7;background:#f0be3a}
.cr-bars i:nth-child(8){--bar:8;background:#f38b35}.cr-bars i:nth-child(9){--bar:9;background:#ef513e}
.cr-bars i:nth-child(10){--bar:10;background:#e82835}
.cr-bars i.on{opacity:1;filter:saturate(1.18) brightness(1.1);box-shadow:0 0 7px currentColor,inset 0 1px rgba(255,255,255,.5)}
.cr-bars i.peak{animation:stadium-pulse .72s ease-in-out infinite alternate}
.cr-label{position:absolute;left:8px;right:8px;bottom:2px;text-align:center;
  font:900 .58rem Barlow;letter-spacing:1.65px;color:#f5f7f4;text-shadow:0 1px 3px #000;white-space:nowrap}
.cr-word{padding:6px 8px;background:rgba(5,9,12,.88);border:1px solid var(--line);border-radius:6px;
  font:900 .55rem Barlow;letter-spacing:1.3px;color:var(--accent);min-width:64px;text-align:center}
@keyframes stadium-pulse{to{transform:translateY(-1px) scaleY(1.06);filter:saturate(1.3) brightness(1.35)}}
@media (prefers-reduced-motion:reduce){.cr-bars i.peak{animation:none}}
.gd-stats-btn{position:absolute;top:104px;right:16px;background:rgba(5,9,12,.85);
  border:1px solid var(--line);color:var(--dim);border-radius:8px;padding:7px 12px;
  font:700 .64rem Barlow;letter-spacing:1.4px;cursor:pointer}
.gd-stats-btn:hover{color:var(--ink);border-color:var(--accent)}
.gd-camera{position:absolute;right:16px;top:104px;background:rgba(5,9,12,.78);
  border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:#b9c8c2;
  font:800 .56rem Barlow;letter-spacing:1.25px;pointer-events:none;backdrop-filter:blur(6px)}
.gd-stats-btn{top:140px}

.gd-stats{position:absolute;inset:0;z-index:20;display:none;place-items:center;
  background:rgba(4,7,10,.82);backdrop-filter:blur(8px);padding:16px}
.gd-stats.show{display:grid}
.gs-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  width:100%;max-width:760px;max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.gs-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.gs-head b{font:800 .8rem "Archivo Black";letter-spacing:2.2px}
.gs-body{overflow:auto;padding:14px 16px}
.gs-team{display:grid;grid-template-columns:1fr 78px 78px;gap:6px;align-items:center;
  font-size:.8rem;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.gs-team.head{color:var(--dim);font:700 .62rem Barlow;letter-spacing:1.2px;text-transform:uppercase}
.gs-team span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.gs-team b{font-weight:700}
.gs-sec{margin:16px 0 6px;font:800 .64rem Barlow;letter-spacing:2px;color:var(--accent)}
.gs-line{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:.78rem;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.04)}
.gs-line em{font-style:normal;color:var(--dim);font-size:.7rem}
.gs-line span{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.final-box{text-align:left;margin:6px 0 14px;max-height:38vh;overflow:auto}
@media (max-width:620px){
  .gd-crowd{right:8px;left:auto;top:80px}
  .cr-pulse{width:116px;height:47px;padding:4px 7px 13px}
  .cr-bars{height:28px;gap:1.5px}
  .cr-bars i{min-width:4px;height:calc(5px + (var(--bar) * 2px))}
  .cr-label{font-size:.44rem;letter-spacing:1.05px}
  .cr-word{display:none}
  .gd-stats-btn{display:none}
  .gd-camera{right:8px;top:112px;padding:5px 7px;font-size:.5rem}
  .gd-msg{top:38%;font-size:1.15rem}
  .gd-sub{top:calc(38% + 26px);font-size:.62rem;white-space:normal;line-height:1.35}
  body.touch .gd-turbo{top:80px;left:8px}
  .gd-flight{left:8px;top:112px;padding:5px 7px}
}

/* ---------- playoff ---------- */
.champ-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px;
  border-radius:16px;margin-bottom:18px;text-align:center;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c,#f5a524) 34%,transparent),rgba(10,14,12,.9));
  border:1px solid color-mix(in srgb,var(--c,#f5a524) 55%,transparent)}
.champ-logo{width:74px;height:74px;object-fit:contain;border-radius:12px}
.champ-card b{font:800 1.3rem "Archivo Black";letter-spacing:.5px}
.champ-card span{color:var(--accent);font:800 .64rem Barlow;letter-spacing:2.4px}
.gd-timeouts{color:var(--accent);font-size:.62rem;letter-spacing:2px}

/* ---------- personnel cards ---------- */
.pcard-energy{margin-top:8px;min-height:104px;display:flex;flex-direction:column;
  justify-content:center;gap:7px}
.pcard-energy i{display:block;height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.pcard-energy i>b{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#3ddc84,#9ae86b)}
.pcard-energy i>b.winded{background:linear-gradient(90deg,#f5a524,#ffd07a)}
.pcard-energy i>b.gassed{background:linear-gradient(90deg,#ff4d5e,#ff8f6b)}
.pcard-energy span{font:800 .6rem Barlow;letter-spacing:1.6px;color:var(--dim)}
.gd-tradition{position:absolute;top:calc(38% + 64px);left:50%;transform:translateX(-50%);
  font:800 .78rem "Archivo Black";letter-spacing:4px;color:var(--accent);opacity:0;
  transition:opacity .35s ease;pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,.9)}
.gd-tradition.on{opacity:1}

/* ---------- datapack drop zone ---------- */
.pack-drop{margin:0 0 14px;padding:22px 16px;border-radius:14px;text-align:center;
  border:2px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.03);
  transition:border-color .15s,background .15s,transform .15s}
.pack-drop b{display:block;font:800 .95rem "Archivo Black";letter-spacing:.6px;margin-bottom:6px}
.pack-drop span{color:var(--dim);font-size:.76rem;line-height:1.5}
.pack-drop code{color:var(--accent)}
.pack-drop.hot{border-color:var(--accent);background:rgba(245,165,36,.12);transform:scale(1.015)}
.pack-drop.busy{border-style:solid;border-color:var(--live);background:rgba(61,220,132,.10)}
body.dropping .pack-drop{border-color:var(--accent)}
.pack-soft{margin-top:8px;color:var(--accent);font-size:.76rem;line-height:1.5;opacity:.92}

/* ---------- datapack download choices ---------- */
.pack-picks{margin-bottom:12px}
.pack-pick{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  text-decoration:none;color:var(--ink);padding:15px 16px;
  border-radius:12px;border:1px solid var(--line);background:var(--panel-2);
  transition:border-color .14s,transform .14s,background .14s}
.pack-pick:hover{border-color:var(--accent);transform:translateY(-2px)}
.pack-pick:disabled{opacity:.55;cursor:progress;transform:none}
.pack-pick.full{border-color:rgba(245,165,36,.55);background:rgba(245,165,36,.09)}
.pack-pick b{display:block;font:800 .9rem "Archivo Black";letter-spacing:.4px;margin-bottom:5px}
.pack-pick code{background:rgba(255,255,255,.07);border-radius:4px;padding:0 4px}
.pack-pick b em{font-style:normal;font:800 .52rem Barlow;letter-spacing:1.6px;
  color:#20160a;background:var(--accent);border-radius:4px;padding:2px 5px;
  margin-left:6px;vertical-align:middle}
.pack-pick span{display:block;color:var(--dim);font-size:.74rem;line-height:1.45}
.pack-pick i{display:block;font-style:normal;margin-top:6px;color:var(--accent);
  font:700 .62rem Barlow;letter-spacing:1.1px}

/* The in-app installer is the product path. Manual imports are retained only
   as a collapsed compatibility escape hatch. */
.pack-modal-card{max-width:700px;padding:30px}
.pack-modal-card>h2{text-align:center;font-size:clamp(1.25rem,3vw,1.8rem);letter-spacing:1.2px;margin:8px 0}
.pack-modal-card>.modal-sub{text-align:center;max-width:560px;margin:0 auto 20px;font-size:.92rem}
.pack-required-badge{width:max-content;margin:0 auto;color:#201305;background:var(--accent);
  border-radius:999px;padding:5px 10px;font:900 .58rem Barlow;letter-spacing:1.8px}
.pack-picks{margin:0 0 14px}
.pack-pick.full{min-height:178px;display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:18px;
  padding:24px;border:2px solid #ffc45b;border-radius:18px;color:#1c1205;
  background:linear-gradient(135deg,#ffbd35 0%,#f58a1f 58%,#ef6d1f 100%);
  box-shadow:0 12px 34px rgba(245,138,31,.30),inset 0 1px rgba(255,255,255,.42)}
.pack-pick.full:hover,.pack-pick.full:focus-visible{border-color:#fff2c9;transform:translateY(-3px) scale(1.006);
  box-shadow:0 18px 48px rgba(245,138,31,.45),0 0 0 4px rgba(245,165,36,.15)}
.pack-install-icon{display:grid!important;place-items:center!important;width:72px;height:72px;border-radius:18px;
  background:rgba(26,15,3,.88);color:#ffd77d!important;font:900 2.25rem/1 "Archivo Black"!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.pack-install-copy{display:block!important;color:#1c1205!important}
.pack-install-copy small{display:block;margin-bottom:4px;font:900 .62rem Barlow;letter-spacing:1.7px;opacity:.72}
.pack-install-copy b{margin:0 0 8px;font-size:clamp(1.35rem,3.5vw,2rem);line-height:1;letter-spacing:.2px}
.pack-install-copy span{color:rgba(28,18,5,.76);font-size:.86rem;font-weight:700;line-height:1.35}
.pack-install-copy i{color:rgba(28,18,5,.72);font-size:.64rem;margin-top:9px}
.pack-install-arrow{font:900 2rem/1 "Archivo Black";transition:transform .16s}
.pack-pick.full:hover .pack-install-arrow{transform:translateX(5px)}
.pack-pick.full.installing{cursor:progress;filter:saturate(.65);transform:none}
.pack-pick.full.installing .pack-install-copy b::after{content:"…"}
.pack-state{margin-bottom:12px;text-align:center;border:1px solid var(--line)}
.pack-legacy{margin:0 0 16px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.018)}
.pack-legacy summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;padding:10px 12px;
  color:var(--dim);font:700 .68rem Barlow;letter-spacing:.5px;list-style-position:inside}
.pack-legacy summary span{font-size:.58rem;text-transform:uppercase;letter-spacing:1px;opacity:.7}
.pack-legacy[open] summary{border-bottom:1px solid var(--line)}
.pack-legacy .pack-drop{margin:12px;padding:12px;border-width:1px;border-radius:9px;opacity:.78}
.pack-legacy .pack-drop b{font:800 .72rem Barlow;margin-bottom:3px}
.pack-legacy .pack-drop span{font-size:.66rem}
.pack-legacy .pack-actions{padding:0 12px 12px}
.pack-legacy .pack-note{padding:0 12px 12px;margin:0}
@media (max-width:620px){
  .pack-modal-card{padding:20px 14px}.pack-pick.full{min-height:158px;grid-template-columns:54px 1fr;
    gap:12px;padding:18px 14px}.pack-install-icon{width:54px;height:54px;border-radius:14px;font-size:1.7rem!important}
  .pack-install-arrow{display:none}.pack-install-copy b{font-size:1.25rem}.pack-install-copy span{font-size:.74rem}
}

/* ---------- halftime & save transfer ---------- */
.halftime-card{max-width:540px;background:linear-gradient(155deg,#0d1624,#050a12 85%);text-align:center;padding:24px;border:1px solid rgba(255,255,255,0.12)}
.ht-kicker{color:var(--accent);font:800 .65rem Barlow;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:6px}
.ht-title{font:800 2.2rem "Archivo Black";letter-spacing:1px;margin:0 0 16px}
.ht-score-banner{display:flex;align-items:center;justify-content:center;gap:20px;background:rgba(255,255,255,0.04);border-radius:12px;padding:14px 20px;margin-bottom:18px;border:1px solid var(--line)}
.ht-team{display:flex;flex-direction:column;align-items:center}
.ht-team .ht-name{font:800 .8rem Barlow;letter-spacing:.8px;color:var(--dim)}
.ht-team .ht-score{font:800 2.2rem "Archivo Black";color:#fff}
.ht-vs{font:800 .85rem "Archivo Black";color:var(--dim);opacity:.6}
.ht-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:18px}
.ht-track-info{font-size:.78rem;color:var(--dim);margin:0 0 18px}
.ht-track-info b{color:var(--accent)}
.save-slot .export-save{grid-column:1/-1;justify-self:start;background:none;border:0;color:var(--accent);font:700 .62rem Barlow;padding:2px 0;cursor:pointer}
.save-slot .export-save:hover{text-decoration:underline}
.import-save-btn{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);font:700 .68rem Barlow;cursor:pointer}
.import-save-btn:hover{background:rgba(255,255,255,.14);border-color:var(--accent)}



/* ---------- in-game atmosphere -------------------------------------------
   Sits between the WebGL canvas and the HUD. A radial vignette pulls the eye
   to the middle of the field, a cool top and warm bottom give the frame some
   colour separation, and a faint scanline-free darkening at the very edges
   stops the render from looking like it was pasted onto the page. All of it is
   compositing, so it adds nothing to the frame budget. */
.gd-grade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 46%, rgba(0,0,0,0) 38%, rgba(3,8,6,.30) 78%, rgba(2,6,5,.62) 100%),
    linear-gradient(180deg, rgba(96,140,190,.10) 0%, rgba(0,0,0,0) 26%,
                    rgba(0,0,0,0) 72%, rgba(28,12,2,.16) 100%);
  mix-blend-mode:normal}
.gd-wrap{position:relative}
/* NOTE: do not add a blanket rule here forcing position/z-index onto every
   child. Doing that overrode `position:absolute` on the HUD — the play-call
   sheet among them — and dropped it out of its layout entirely, which took the
   play picker off the screen. It is also unnecessary: the canvas is static and
   the grade is absolute, so the grade already paints over the canvas, and every
   HUD element comes later in the DOM so it already paints over the grade. */


/* The scoreboard and the flash titles now speak the same language as the menu —
   Anton for the numbers and the big calls, Oswald for the labels — instead of
   sitting in a different typeface from the rest of the product. */
.gd-board .gd-team i{font-family:"Anton","Archivo Black",sans-serif;letter-spacing:.5px;font-style:normal}
.gd-board .gd-team b{font-family:"Oswald",Barlow,sans-serif;letter-spacing:1.4px}
.gd-board .gd-clock{font-family:"Anton","Archivo Black",sans-serif;letter-spacing:.5px}
.gd-board .gd-qtr,.gd-board .gd-venue{font-family:"Oswald",Barlow,sans-serif;letter-spacing:1.6px}
.gd-dd{font-family:"Oswald",Barlow,sans-serif}
/* A single broadcast unit: stable column widths keep scores and clock from
   jumping, while the situation strip shares the same edge and quieter type. */
.gd-scorebug{position:absolute;top:12px;left:50%;transform:translateX(-50%);
  --broadcast-gold:#f4c454;--broadcast-ink:#071728;
  width:min(540px,calc(100% - 24px));border:1px solid #7895aa66;border-top:2px solid var(--broadcast-gold);border-radius:4px;
  overflow:hidden;background:var(--broadcast-ink);box-shadow:0 8px 22px #0006;pointer-events:none}
.gd-broadcast{display:grid;grid-template-columns:52px 1fr 145px;align-items:center;height:22px;border-bottom:1px solid #b09b6344;background:#04111f}
.gd-broadcast strong{font:900 14px/1 Barlow,sans-serif;color:var(--broadcast-gold);text-align:center;border-right:1px solid #b09b6370}
.gd-broadcast>span{font:800 9px/1 Barlow,sans-serif;letter-spacing:2.5px;text-align:center}
.gd-broadcast small{font:600 8px/1 Barlow,sans-serif;letter-spacing:.8px;color:#a0b0c2;text-align:right;padding-right:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.gd-scorebug .gd-board{position:static;transform:none;display:grid;grid-template-columns:1fr 104px 1fr;
  width:100%;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;background:none}
.gd-scorebug .gd-team{min-width:0;gap:9px;padding:9px 10px;background:linear-gradient(115deg,color-mix(in srgb,var(--team-color,#17345c) 82%,#030b16),#071728);border-bottom:2px solid transparent}
.gd-scorebug .gd-team.away{background:linear-gradient(245deg,color-mix(in srgb,var(--team-color,#17345c) 82%,#030b16),#071728)}
.gd-scorebug .gd-team[data-possession="true"]{border-bottom-color:var(--broadcast-gold)}
.gd-team-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.gd-scorebug .gd-team b{font:800 14px/1.1 Barlow,sans-serif;letter-spacing:.7px;max-width:none;display:block}
.gd-scorebug .gd-team.away .gd-team-meta{align-items:flex-end}
.gd-scorebug .gd-team i{font:800 36px/1 Barlow,sans-serif;font-style:normal;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px;min-width:39px}
.gd-scorebug .gd-dot{flex:none;width:7px;height:12px;border-radius:0;background:var(--broadcast-gold);clip-path:polygon(0 0,100% 50%,0 100%);opacity:0}
.gd-scorebug .away .gd-dot{transform:rotate(180deg)}
.gd-scorebug [data-possession="true"] .gd-dot{opacity:1}
.gd-logo{width:30px;flex:none;font:900 29px/1 Georgia,serif;color:#fff;filter:drop-shadow(0 1px 1px #0008);text-align:center}
.gd-logo img{width:30px;height:32px;object-fit:contain;display:block}
.gd-team-timeouts{display:flex;gap:3px}
.gd-team-timeouts em{display:block;width:9px;height:3px;border-radius:1px;background:var(--broadcast-gold)}
.gd-team-timeouts em.used{background:#ffffff30}
.gd-scorebug .gd-mid{padding:6px 8px;background:#061323;border-color:#a0b0c244}
.gd-scorebug .gd-clock{font:800 25px/1.12 Barlow,sans-serif;letter-spacing:.2px;font-variant-numeric:tabular-nums;margin:3px 0 0}
.gd-scorebug .gd-qtr{font:700 10px/1 Barlow,sans-serif;letter-spacing:1px;color:#bac7cc}
.gd-scorebug .gd-venue{font:600 8px/1.2 Barlow,sans-serif;letter-spacing:.3px;max-width:90px;margin-top:2px;color:#8f9da4}
.gd-scorebug .gd-dd{position:static;transform:none;justify-content:center;width:100%;min-height:30px;
  gap:12px;padding:6px 10px;border:0;border-top:1px solid #ffffff14;border-radius:0;
  background:#04111f;backdrop-filter:none;font:700 12px/1.1 Barlow,sans-serif;letter-spacing:.2px}
.gd-scorebug #gdDown{color:#ffd182;font-weight:800}
.gd-scorebug #gdSpot{color:#bac7cc}
.gd-scorebug .gd-poss{font:700 10px/1.1 Barlow,sans-serif;letter-spacing:.5px}
.gd-scorebug .gd-timeouts{font-size:8px;letter-spacing:2px}
.gd-scorebug .gd-playclock{padding-left:8px;margin-left:0}
.gd-scorebug .gd-playclock b{font:800 13px/1 Barlow,sans-serif;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .gd-scorebug{top:50px;width:min(400px,calc(100% - 16px))}
  .gd-broadcast{grid-template-columns:36px 1fr 108px;height:19px}
  .gd-broadcast>span{font-size:8px;letter-spacing:1.1px}
  .gd-broadcast small{font-size:7px;padding-right:7px}
  .gd-scorebug .gd-board{grid-template-columns:1fr 74px 1fr}
  .gd-scorebug .gd-team{padding:7px 5px;gap:5px}
  .gd-scorebug .gd-team b{font-size:12px}
  .gd-scorebug .gd-team i{font-size:25px;min-width:30px}
  .gd-scorebug .gd-dot{width:5px;height:9px}
  .gd-scorebug .gd-clock{font-size:22px}
  .gd-logo,.gd-logo img{width:21px;height:24px;font-size:23px}
  .gd-team-timeouts em{width:7px}
  .gd-scorebug .gd-dd{gap:7px;font-size:11px;padding:7px 6px}
  .gd-scorebug .gd-poss{font-size:9px;letter-spacing:0}
  .gd-scorebug .gd-playclock small{display:block;font-size:7px;letter-spacing:.5px}
  .gd-scorebug .gd-sep{display:none}
  body.touch .gd-turbo{top:214px}
  .gd-crowd{top:154px}
  .gd-camera{top:206px}
  .gd-flight{top:188px}
  .gd-throw-style{left:8px;right:auto;top:154px}
}
@media(max-width:360px){.gd-logo{display:none}.gd-scorebug .gd-poss{display:none}.gd-scorebug .gd-team{gap:5px;padding-inline:7px}}
#gdMsg{font-family:"Anton","Archivo Black",sans-serif;letter-spacing:.6px}
#gdSub{font-family:"Oswald",Barlow,sans-serif;letter-spacing:1.5px}
#gdMsg.kick-presentation{top:25%;font-size:1.15rem}
#gdSub.kick-presentation{top:calc(25% + 30px);max-width:90%;font-size:.72rem;white-space:normal;text-align:center}
.gd-flash b{font-family:"Anton","Archivo Black",sans-serif;letter-spacing:.5px}

/* Live passing feedback stays in the existing meter/nameplate. */
.pm-cue{margin-top:8px;font:800 .7rem Barlow;letter-spacing:1.2px;color:#f5c57b}
.gd-pass[data-timing="ready"]{border-color:#3ddc84;box-shadow:0 0 18px #3ddc8433}
.gd-pass[data-timing="ready"] .pm-cue{color:#63ffa5}
.gd-pass[data-timing="late"] .pm-cue,.gd-actor[data-alert="true"] span{color:#ffab7c}

/* A receiver selection is not a power meter. Show only the chosen arc. */
.gd-pass .pm-types {display:none}
.gd-pass .pm-bar{display:block;height:10px;margin-top:9px}
.gd-pass .pm-fill{background:linear-gradient(90deg,#eeb357,#ffdb84);transition:width 45ms linear}
.gd-pass[data-timing="ready"] .pm-fill{background:#63ffa5}
.gd-pass .pm-cue{font-size:.64rem;letter-spacing:.6px}
[data-pass-type]:not(.active) {display:none}

/* Dream Loop passing target: one selected arc, one instruction. */
.gd-throw-style{bottom:142px;gap:12px;padding:10px 14px;min-width:226px;border-color:#71b2c780;background:#07151bef;color:#ffd16a;border-radius:9px}
.gd-throw-style .throw-arc{width:54px;height:32px;fill:none;stroke:#ffc34e;stroke-width:2.1;stroke-linecap:round;flex-shrink:0}
.gd-throw-style .throw-label{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.gd-throw-style strong{font-size:.84rem;letter-spacing:.06em}
.gd-throw-style .throw-label small{font-size:.65rem;font-weight:500;letter-spacing:.025em;text-transform:none;white-space:nowrap;color:#b6c6ce}
.gd-throw-style .throw-key{display:flex;align-items:center;gap:7px;margin-left:auto;color:#c6e8f3}
.gd-throw-style .throw-instruction{position:absolute;top:calc(100% + 6px);left:0;width:100%;color:#f5f3df;font-size:.63rem;text-align:center;text-transform:none;letter-spacing:.02em;text-shadow:0 1px 3px #000}
@media(max-width:640px){.gd-throw-style{min-width:0;max-width:178px;padding:7px 9px;gap:7px;bottom:auto;top:154px}.gd-throw-style .throw-arc{width:35px;height:25px}.gd-throw-style .throw-key small{display:none}.gd-throw-style .throw-label small{max-width:none;font-size:.57rem}.gd-throw-style strong{font-size:.7rem}.gd-throw-style .throw-instruction{font-size:.56rem}}

/* Pregame broadcast: keep the field clear. */
.gd-entrance{position:absolute;inset:auto 24px 32px;z-index:20;display:flex;align-items:end;justify-content:space-between;gap:18px;pointer-events:none}
.gd-entrance>div{padding:18px 24px;background:linear-gradient(115deg,#071116f5,#101b22d9);border-left:6px solid var(--entrance-color,#ff8200);border-bottom:3px solid var(--entrance-color,#ff8200);box-shadow:0 10px 30px #0006}
.gd-entrance small,.gd-entrance b,.gd-entrance span{display:block}.gd-entrance small{font:700 .72rem Barlow;letter-spacing:3px;color:#e2e4de}.gd-entrance b{font:800 clamp(20px,2.6vw,36px) Barlow;margin:5px 0;color:white}.gd-entrance span{font:500 .9rem Barlow;color:#d8e2dc}
.gd-entrance button{pointer-events:auto;background:#071116c9;border:1px solid #ffffff87;border-radius:24px;color:white;padding:12px 18px;cursor:pointer;font:600 .8rem Barlow;white-space:nowrap}
.defense-controls{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px}.defense-controls button,.formation-shift{border:1px solid #54635f;border-radius:5px;padding:8px;background:#1b2a29;color:#e9eee8;cursor:pointer;font:600 .7rem Barlow;text-align:left}.defense-controls button:hover,.formation-shift:hover{border-color:#f3a545}.formation-shift{margin-top:7px;width:100%}.formation-shift:disabled{opacity:.45}
@media(max-width:600px){.gd-entrance{inset:auto 12px 24px;display:block}.gd-entrance>div{padding:12px 14px}.gd-entrance small{font-size:.6rem}.gd-entrance span{font-size:.72rem}.gd-entrance button{margin-top:12px;float:right;padding:8px 12px}.defense-controls button{font-size:.64rem}}

.gd-wrap[data-entrance="true"] :is(.gd-scorebug,.gd-crowd,.gd-camera,.gd-stats-btn,.gd-turbo,.gd-help,.gd-actor,.gd-tradition,.gd-flash){visibility:hidden!important}
.defense-controls button{display:flex;align-items:center;gap:9px;padding:8px 9px;min-width:0;background:linear-gradient(145deg,#1c2a2b,#101b20)}
.defense-controls kbd{display:grid;place-items:center;flex:none;width:25px;height:27px;border:1px solid #536965;border-radius:5px;font:800 1rem Barlow;color:#e8efea}
.defense-controls button>span{display:block;min-width:0}.defense-controls b{display:block;font:800 .73rem Barlow;color:#f1f5ed}.defense-controls small{display:block;color:#aabbb3;font:500 .62rem Barlow;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.defense-controls [data-active="true"]{border-color:#b18a42;background:linear-gradient(120deg,#382e19,#18221e)}.defense-controls [data-active="true"] b{color:#ffd276}
@media(max-width:600px){.defense-controls small{font-size:.58rem}.defense-controls b{font-size:.66rem}.defense-controls button{padding:6px;gap:6px}}
@media(max-width:600px){
 .topbar{gap:8px;padding:0 8px}.topbar-mid,.byline{display:none}.topbar-right{gap:5px;min-width:0;flex:1;justify-content:flex-end}.topbar .chip{padding:8px;font-size:.65rem;letter-spacing:0}
 body[data-screen="game"] #importSaveBtn,body[data-screen="game"] #packBtn{display:none}
 .gd-save{top:6px;right:89px;font-size:.58rem;padding:5px 7px}.gd-pause{top:6px;right:162px;font-size:.58rem;padding:5px 7px}
}

.gd-actor:has(small:not([hidden])){flex-wrap:wrap;justify-content:center;max-width:90%;width:max-content;gap:4px 8px}
.gd-actor small{flex-basis:100%;text-align:center;color:#d7dbd7;font:700 .56rem Barlow;letter-spacing:.7px}