/* ============================================================================
   HARDWOOD — auto-battler UI
   Combines: TFT/Battlegrounds shop+synergy layout · NBA 2K player cards (OVR,
   gem tiers, attribute bars) · basketball playbook half-court (lines, dashed
   pass + shot trails). Pure CSS/SVG, system fonts — no images, no genAI.
   ============================================================================ */
/* Jersey nameplate font: Oswald (SIL Open Font License — free/legal to use,
   degrades to a condensed system stack offline). */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');
:root{
  --bg:#0b0e13; --bg2:#0e1219; --panel:#161b24; --panel2:#1b212c;
  --line:#2a323d; --ink:#e9eef4; --muted:#8b97a6;
  --you:#3da5ff; --opp:#ff6b5e; --good:#3ddc84; --court:#c8813f; --court2:#a96a2c;
  --accent:#ffcf4d;
  --off:#ff6b5e; --def:#3da5ff; --pas:#3ddc84; --stl:#ffcf4d;
  /* tier gem colors (bronze · emerald · sapphire · amethyst · ruby · diamond) */
  --t1:#9aa6b2; --t2:#3ddc84; --t3:#3da5ff; --t4:#c08bff; --t5:#ff6fae; --t6:#6fe3ff;
}
*{box-sizing:border-box}
body{
  margin:0; background:radial-gradient(140% 120% at 50% -10%,#141b27,var(--bg));
  color:var(--ink); font:14px/1.45 "Segoe UI","Inter",system-ui,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{margin:0; letter-spacing:.2px}
.muted{color:var(--muted); font-weight:400; font-size:.82em}
b{font-variant-numeric:tabular-nums}

/* ---------- header + scoreboard --------------------------------------- */
header{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:14px; padding:10px 20px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#11161f,#0b0e13)}
h1{font-size:1.15em; font-weight:800}
.logo{background:linear-gradient(90deg,var(--accent),#ff8a3d);
  -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:900}
.tag{font-size:.55em; vertical-align:middle; background:var(--panel2);
  border:1px solid var(--line); color:var(--muted); padding:2px 7px; border-radius:20px}
.goal{justify-self:end; text-align:right}

.scoreboard{display:flex; align-items:center; justify-content:center; gap:22px}
.scoreboard .team{display:flex; flex-direction:column; align-items:center; min-width:74px}
.scoreboard .label{font-size:.6em; letter-spacing:.18em; font-weight:800; color:var(--muted)}
.scoreboard .team #you-score,.scoreboard .team #opp-score{font-size:2.3em; font-weight:900;
  line-height:1; font-variant-numeric:tabular-nums}
.team.you #you-score{color:var(--you); text-shadow:0 0 16px rgba(61,165,255,.4)}
.team.opp #opp-score{color:var(--opp); text-shadow:0 0 16px rgba(255,107,94,.4)}
.scoreboard .mid{text-align:center; min-width:130px}
#round-label{font-weight:800; letter-spacing:.04em}
#record{font-weight:800; font-variant-numeric:tabular-nums; color:var(--accent); font-size:.95em}
/* possession game-clock + per-team possessions remaining */
.clock{font-family:'Oswald',ui-monospace,"Courier New",monospace; font-weight:700;
  font-size:1.55em; line-height:1.1; color:var(--accent); letter-spacing:.04em; margin-top:3px;
  font-variant-numeric:tabular-nums; text-shadow:0 0 10px rgba(255,207,77,.45)}
.poss-left{font-size:.6em; color:var(--muted); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; margin-top:3px; min-height:1em}

/* ---------- main layout: compact team (left) · court+shop+feed (right) - */
main{display:grid; grid-template-columns:198px 1fr; gap:14px;
  padding:14px; align-items:start}
@media(max-width:640px){main{grid-template-columns:1fr}}

/* ---------- LEFT: your team (compact) + opponent --------------------- */
.leftcol{display:flex; flex-direction:column; gap:10px}
.posbar{display:flex; flex-direction:column; gap:5px}
.panel-head{font-size:.7em; font-weight:800; letter-spacing:.14em; color:var(--muted);
  text-transform:uppercase}
.slot{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--line);
  border-radius:8px; padding:5px 7px; transition:border-color .15s, background .15s}
/* compact YOUR TEAM bar */
.slot .pos{font-size:.62em}
.slot .filled{margin:3px 0 4px}
.slot .who b{font-size:.78em}
.slot .who .arch,.slot .who .abil{font-size:.62em}
.slot .statline{font-size:.62em; margin-top:1px}
.lvlbar{height:6px; margin-bottom:4px}
.team-tot{padding:5px 7px; font-size:.64em}
.chem-box{padding:6px}
.slot.t1{border-left-color:var(--t1)} .slot.t2{border-left-color:var(--t2)}
.slot.t3{border-left-color:var(--t3)} .slot.t4{border-left-color:var(--t4)}
.slot.t5{border-left-color:var(--t5)} .slot.t6{border-left-color:var(--t6)}
.slot .pos{font-size:.66em; letter-spacing:.08em; font-weight:800; color:var(--muted)}
/* level bar at the top of the player card (fills as copies are absorbed) */
.lvlbar{position:relative; height:8px; border-radius:5px; background:#0c1118;
  border:1px solid var(--line); overflow:hidden; margin-bottom:6px}
.lvlbar i{display:block; height:100%; background:linear-gradient(90deg,var(--accent),#ffe08a);
  transition:width .4s ease}
.lvlbar.max i{background:linear-gradient(90deg,#ffd24d,#fff0b8)}
.lvlbar .lp{position:absolute; top:-1px; right:4px; font-size:8px; font-weight:900;
  color:#fff; text-shadow:0 1px 2px #000; line-height:10px}
.slot.eligible{border-color:var(--you); background:rgba(61,165,255,.08)}
.slot.eligible .empty{border-color:var(--you); color:var(--you)}
.slot.mergeable{border-color:var(--accent); background:rgba(255,207,77,.08)}
.slot.mergeable .filled{outline:2px dashed var(--accent); outline-offset:2px; border-radius:6px}
.slot.over{background:rgba(61,165,255,.2); border-color:var(--you)}
.slot .empty{margin-top:6px; font-size:.74em; color:var(--muted);
  border:1px dashed var(--line); border-radius:6px; padding:9px 4px; text-align:center}
.slot .filled{display:flex; align-items:center; gap:7px; margin:4px 0 6px; cursor:grab;
  touch-action:none}            /* touch-action:none lets touch drag (not scroll) */
.slot .filled:active{cursor:grabbing}
.slot .filled .x{cursor:pointer}
.drag-src{opacity:.45}
/* floating label that follows the finger/cursor while dragging a card/player */
.drag-ghost{position:fixed; z-index:40; pointer-events:none; transform:translate(-50%,-140%);
  background:var(--accent); color:#0b0e13; font-weight:800; font-size:.8em;
  padding:4px 10px; border-radius:7px; box-shadow:0 6px 18px rgba(0,0,0,.5);
  white-space:nowrap}
.slot .who{display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1}
.slot .who b{font-size:.84em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.slot .who .arch{font-size:.66em; color:var(--muted); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
/* clear level badge in the team panel */
.lvl-badge{display:inline-block; font-size:.92em; font-weight:900; letter-spacing:.02em;
  background:var(--accent); color:#0b0e13; border-radius:4px; padding:0 5px; line-height:1.5;
  vertical-align:middle}
.lvl-badge.max{background:linear-gradient(90deg,#ffd24d,#fff0b8);
  box-shadow:0 0 8px rgba(255,207,77,.6)}
.slot .who .abil{font-size:.66em; font-weight:700; color:var(--accent); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.slot .x{background:none; padding:2px 4px; color:var(--muted); align-self:flex-start}
.slot .x:hover{color:var(--opp)}

/* attribute numbers (no bars — skill is uncapped) */
.statline{display:flex; justify-content:space-between; gap:4px; font-size:.7em; margin-top:2px}
.st{font-variant-numeric:tabular-nums; font-weight:700}
.st b{font-weight:900}

.team-tot{background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding:6px 8px; font-size:.7em; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:3px}
.st{font-variant-numeric:tabular-nums; font-weight:700}
/* SHT shooting (red) · DEF defense (blue) · PLM playmaking (green) · ATH athleticism (gold) */
.st.sht{color:var(--off)} .st.def{color:var(--def)} .st.plm{color:var(--pas)} .st.ath{color:var(--stl)}

/* chemistry tracker (TFT trait list) */
.chem-box{background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:8px; display:flex; flex-direction:column; gap:5px; margin-top:2px}
.chem{display:flex; align-items:center; gap:7px; padding:4px 7px; border-radius:7px;
  border:1px solid transparent; font-size:.74em; font-weight:700}
.chem .ck{font-size:.72em; font-weight:900; letter-spacing:.06em; padding:1px 5px;
  border-radius:4px; color:#0b0e13}
.chem .cn{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chem .cd{font-variant-numeric:tabular-nums; opacity:.7}
.chem.duo{background:rgba(61,165,255,.12); border-color:var(--you); color:#cfe6ff}
.chem.duo .ck{background:var(--you)}
.chem.trio{background:rgba(255,207,77,.13); border-color:var(--accent); color:#ffe6a3}
.chem.trio .ck{background:var(--accent)}
.chem-empty{font-size:.72em; color:var(--muted)}
/* duo/trio membership indicators (on tokens + roster + opponent) */
.cmark{font-size:.82em; margin-left:2px; vertical-align:middle; line-height:1}
.cmark.duo{color:var(--you); text-shadow:0 0 3px rgba(61,165,255,.7)}
.cmark.trio{color:var(--accent); text-shadow:0 0 3px rgba(255,207,77,.7)}
.token .nm .cmark{font-size:10px}

/* ---------- CENTER: playbook court ------------------------------------ */
.court-wrap{display:flex; flex-direction:column; gap:6px; align-items:center}
.court{position:relative; width:100%; max-width:470px; aspect-ratio:1/1;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 7%,rgba(255,255,255,.02) 7% 14%),
    linear-gradient(180deg,var(--court),var(--court2));
  border-radius:10px; overflow:hidden; touch-action:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 26px rgba(0,0,0,.45)}
.court-lines,.trails{position:absolute; inset:0; width:100%; height:100%}
.court-lines *{fill:none; stroke:rgba(255,255,255,.55); stroke-width:.4}
.trails{pointer-events:none; z-index:4}
.trail{stroke-width:.7; fill:none}
.trail.pass{stroke:var(--accent); stroke-dasharray:2.4 1.8;
  filter:drop-shadow(0 0 1px rgba(255,207,77,.8)); animation:dash .6s linear infinite}
.trail.shot{stroke:#7fdfff; stroke-dasharray:1.4 1.2; opacity:.9}
@keyframes dash{to{stroke-dashoffset:-8.4}}

.hoop{position:absolute; left:50%; top:7%; transform:translate(-50%,-50%);
  z-index:5; pointer-events:none; width:38px}
.hoop .board{width:34px; height:5px; margin:0 auto 1px; border-radius:1px;
  background:linear-gradient(#fff,#d2d2d2); box-shadow:0 1px 3px rgba(0,0,0,.6)}
.hoop .rim{width:20px; height:20px; margin:0 auto; border-radius:50%;
  border:3px solid #ff7a1a; background:rgba(0,0,0,.18);
  box-shadow:0 0 6px rgba(0,0,0,.6); transition:border-color .15s, box-shadow .15s}
.hoop.score .rim{border-color:var(--good); box-shadow:0 0 16px 5px var(--good)}

.token{position:absolute; width:48px; transform:translate(-50%,-50%); text-align:center;
  user-select:none; z-index:2; transition:left .55s ease, top .55s ease}
.token.mine{cursor:grab} .token.mine:active{cursor:grabbing}
.token .disc{width:30px; height:30px; margin:0 auto; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#5cb6ff,var(--you)); color:#04203b;
  display:flex; align-items:center; justify-content:center; font-weight:900;
  border:2.5px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.55); position:relative;
  font-size:11px; letter-spacing:.3px; transition:transform .15s, box-shadow .15s}
.token.opp .disc{background:radial-gradient(circle at 35% 30%,#ff9087,var(--opp)); color:#3a0d08}
.token .lvl{position:absolute; top:-7px; right:-7px; background:var(--accent); color:#000;
  font-size:9px; font-weight:800; border-radius:50%; width:15px; height:15px; line-height:15px}
.token .nm{font-family:'Oswald','Arial Narrow','Roboto Condensed',system-ui,sans-serif;
  font-size:12.5px; margin-top:2px; color:#fff; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase;
  text-shadow:0 0 2px #000,0 1px 2px rgba(0,0,0,.95),0 0 5px rgba(0,0,0,.7);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.token .nm b{color:var(--accent)}
.token.act{z-index:3}
.token.act .disc{transform:scale(1.32); box-shadow:0 0 0 3px var(--accent)}
.token.score .disc{box-shadow:0 0 0 4px var(--good)}
.token.dragging{transition:none; z-index:6}
/* dragged off the court = will be released on drop */
.token.release-zone{opacity:.5}
.token.release-zone .disc{border-color:var(--opp);
  box-shadow:0 0 0 3px var(--opp), 0 0 14px 3px var(--opp); filter:grayscale(.4)}
.token.conflict{z-index:4}
.token.conflict .disc{border-color:#ff3b30;
  box-shadow:0 0 0 4px #ff3b30, 0 0 12px 2px #ff3b30; animation:pulse .8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px #ff3b30, 0 0 18px 4px #ff3b30}}

.ball{position:absolute; width:15px; height:15px; transform:translate(-50%,-50%);
  border-radius:50%; z-index:6; pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#ffc078,#e8782a 65%,#bd5a18);
  border:1px solid #6e3310; box-shadow:0 1px 5px rgba(0,0,0,.6);
  transition:left .42s ease, top .42s ease, transform .2s}
.ball::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:rgba(0,0,0,.55); transform:translateX(-.5px)}
.ball::after{content:""; position:absolute; top:50%; left:0; right:0; height:1px;
  background:rgba(0,0,0,.55); transform:translateY(-.5px)}
.ball.shot{transform:translate(-50%,-50%) scale(.7)}
.ball.made{box-shadow:0 0 0 4px var(--good), 0 1px 5px rgba(0,0,0,.6)}

.hint{font-size:.8em; margin:2px 6px; min-height:1.1em}
.warn{color:var(--opp); font-weight:700}

/* ---------- RIGHT: opponent + feed ------------------------------------ */
.rightcol{display:flex; flex-direction:column; gap:14px; min-width:0}
.teamcard{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px; border-top:3px solid var(--opp)}
.teamcard h3{margin:0 0 8px; font-size:.74em; letter-spacing:.12em; color:var(--opp)}
.teamcard h3 .src{font-size:.8em; font-weight:700; letter-spacing:.04em; padding:1px 6px;
  border-radius:10px; background:rgba(255,107,94,.18); color:#ffb3ab; margin-left:6px}
.teamcard h3 .src.bot{background:var(--panel2); color:var(--muted)}
.teamcard{padding:8px}
.teamcard .orow{display:flex; flex-wrap:wrap; align-items:center; gap:1px 8px; padding:4px 0;
  border-bottom:1px solid var(--line)}
.teamcard .orow:last-child{border-bottom:0}
.teamcard .orow .statline{flex:1 1 100%; justify-content:flex-start; gap:7px; margin-top:1px}
.teamcard .oinfo{min-width:0; flex:1 1 100%; line-height:1.2}
.teamcard .oinfo b{font-size:.8em; display:block; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis}
.teamcard .oinfo .osub{font-size:.66em; color:var(--muted); display:block; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.teamcard .statline{flex:0 0 auto; gap:6px; font-size:.66em}

.feed-wrap{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px; height:430px; display:flex; flex-direction:column}
/* play-by-play relocated under free agency — a shorter, full-width strip */
#pbp{height:190px}
.feed-wrap h2{font-size:.8em; letter-spacing:.1em; color:var(--muted)}
.feed{overflow-y:auto; flex:1; font-size:.88em; margin-top:6px}
.feed .ev{padding:4px 8px; border-bottom:1px solid var(--line); border-left:3px solid transparent}
.feed .you-ev{border-left-color:var(--you)}
.feed .opp-ev{border-left-color:var(--opp)}
.feed .made{color:var(--good); font-weight:700}
.feed .steal{color:var(--opp); font-weight:700}
.feed .pass{color:var(--muted)}
.feed .miss{color:#aab4c0}
.feed .reb{color:var(--accent); font-weight:700}
.feed .head{font-weight:800; margin:10px 0 4px; color:#0b0e13; border-left:0;
  background:linear-gradient(90deg,var(--accent),#ffe08a); border-radius:6px;
  padding:5px 9px; letter-spacing:.05em; font-size:.92em}

/* ---------- free agency (shop) — now stacked under the court ---------- */
.shop-wrap{padding:0}
.shop-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  flex-wrap:wrap; gap:8px}
.shop-title{font-weight:800; letter-spacing:.1em}
.cap-pill{background:var(--panel2); border:1px solid var(--line); border-radius:20px;
  padding:7px 16px; font-size:.95em; font-weight:800; letter-spacing:.06em; color:var(--muted)}
.cap-pill b{color:var(--accent); font-size:1.7em; margin-left:6px}
.controls{display:flex; gap:8px; align-items:center}
button{background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  padding:9px 15px; border-radius:8px; cursor:pointer; font-weight:700}
button:hover{filter:brightness(1.25)}
button.primary{background:linear-gradient(180deg,#5cb6ff,var(--you)); color:#04203b; border-color:transparent}
button:disabled{opacity:.4; cursor:not-allowed; filter:none}

.shop{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
/* 2K-style player card */
.card{position:relative; background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-top:3px solid var(--line); border-radius:11px;
  padding:10px; cursor:pointer; touch-action:none;
  transition:transform .12s, box-shadow .12s, border-color .12s}
/* freeze toggle (SAP/Battlegrounds-style hold) */
.card .freeze{flex:0 0 auto; width:22px; height:22px; padding:0; border-radius:6px;
  background:var(--panel); border:1px solid var(--line); color:var(--muted);
  font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center}
.card .freeze:hover{color:#9fd8ff; border-color:#9fd8ff}
.card.frozen{border-color:#7fb8ff; box-shadow:0 0 0 1px #7fb8ff, 0 0 14px rgba(127,184,255,.35)}
.card.frozen::after{content:""; position:absolute; inset:0; border-radius:11px; pointer-events:none;
  background:linear-gradient(135deg,rgba(127,184,255,.16),rgba(127,184,255,0) 60%)}
.card.frozen .freeze{color:#0b0e13; background:#9fd8ff; border-color:#9fd8ff}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.45); border-color:var(--you)}
.card.t1{border-top-color:var(--t1)} .card.t2{border-top-color:var(--t2)}
.card.t3{border-top-color:var(--t3)} .card.t4{border-top-color:var(--t4);
  box-shadow:0 0 0 1px rgba(192,139,255,.25)}
.card.t5{border-top-color:var(--t5); box-shadow:0 0 0 1px rgba(255,111,174,.3)}
.card.t6{border-top-color:var(--t6); box-shadow:0 0 0 1px rgba(111,227,255,.4)}
.card.sold{opacity:.3; pointer-events:none; display:flex; align-items:center; justify-content:center;
  min-height:120px; font-style:italic; color:var(--muted)}
.card .chead{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.card .cmeta{flex:1; min-width:0; line-height:1.2}
.card .cmeta .nm{font-size:.9em; font-weight:800; display:block; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.card .cmeta .sub{font-size:.68em; color:var(--muted)}
.tier{font-size:.74em; font-weight:900; padding:2px 7px; border-radius:5px; color:#0b0e13;
  letter-spacing:.04em; box-shadow:0 1px 3px rgba(0,0,0,.4)}
.slot .pos .tier{float:right; font-size:.92em}
.tier.t1{background:var(--t1)} .tier.t2{background:var(--t2)}
.tier.t3{background:var(--t3)} .tier.t4{background:var(--t4)}
.tier.t5{background:var(--t5)} .tier.t6{background:var(--t6); box-shadow:0 0 8px rgba(111,227,255,.7)}
.card .cfoot{display:flex; justify-content:space-between; align-items:center; gap:6px;
  margin-top:8px}
.card .abil{font-size:.7em; font-weight:800; color:var(--accent); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.card .cost{font-size:1.15em; font-weight:900; color:var(--accent); flex:0 0 auto;
  background:rgba(255,207,77,.12); border:1px solid rgba(255,207,77,.35);
  border-radius:6px; padding:2px 8px}
.card .zone{font-size:.64em; color:var(--muted); margin-top:4px}

/* ---------- overlay --------------------------------------------------- */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.74); display:flex;
  align-items:center; justify-content:center; z-index:20}
.modal{background:var(--panel); padding:30px; border-radius:14px; text-align:center;
  max-width:400px; border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal h2{margin-bottom:10px}
.modal.wide{max-width:680px; width:92%}
.hidden{display:none}

/* ---------- Finals center-court logo ---------------------------------- */
.finals-logo{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1; pointer-events:none; opacity:.55}
.finals-logo .ring{width:132px; height:132px; border-radius:50%; border:3px solid var(--accent);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:radial-gradient(circle,rgba(255,207,77,.16),rgba(255,207,77,0) 70%);
  box-shadow:0 0 26px rgba(255,207,77,.35), inset 0 0 18px rgba(255,207,77,.2)}
.finals-logo .trophy{font-size:36px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.finals-logo .ftxt{font-weight:900; letter-spacing:.28em; font-size:13px; color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.75)}

/* ---------- post-game TEAM aggregate ---------------------------------- */
#pg-sub{margin:2px 0 14px}
.pg-tables{margin:6px 0 16px}
.agg{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.agg th{font-size:.72em; letter-spacing:.14em; font-weight:800; padding:0 0 8px}
.agg th.you{color:var(--you); text-align:left} .agg th.opp{color:var(--opp); text-align:right}
.agg td{padding:7px 6px; border-top:1px solid var(--line)}
.agg td.lbl{text-align:center; font-size:.74em; color:var(--muted); letter-spacing:.06em;
  text-transform:uppercase; width:40%}
.agg td.yv{text-align:left; font-size:1.45em; font-weight:800; color:#cfe6ff}
.agg td.ov{text-align:right; font-size:1.45em; font-weight:800; color:#ffd2cc}
.agg td.yv.lead{color:var(--you); text-shadow:0 0 12px rgba(61,165,255,.5)}
.agg td.ov.lead{color:var(--opp); text-shadow:0 0 12px rgba(255,107,94,.5)}

/* ---------- mobile / small screens ------------------------------------ */
/* ---------- mobile / portrait — Super Auto Pets-style vertical bands ----
   Same desktop content, stacked into horizontal "zones": a sticky scoreboard,
   a smaller court, the team band, opponent/feed, a swipeable shop row, and a
   pinned action bar so Play / Cap are always reachable without scrolling. */
@media(max-width:640px){
  body{padding-bottom:66px}                 /* leave room for the fixed action bar */

  /* zone 1 — sticky compact scoreboard */
  header{position:sticky; top:0; z-index:15; grid-template-columns:1fr;
    gap:3px; padding:7px 12px 8px; text-align:center;
    background:linear-gradient(180deg,#11161f,#0b0e13)}
  h1{font-size:.96em}
  .goal{display:none}                       /* the record + clock carry the state */
  .scoreboard{gap:18px}
  .scoreboard .team{min-width:54px}
  .scoreboard .team #you-score,.scoreboard .team #opp-score{font-size:1.75em}
  .scoreboard .mid{min-width:0}
  .clock{font-size:1.2em; margin-top:1px}
  .poss-left{margin-top:1px}

  /* zone 2-4 — court (smaller) → your team → opponent/feed, stacked */
  main{padding:10px; gap:12px}
  .court-wrap{order:-1}
  .court{width:74vw; max-width:310px}       /* deliberately small so it doesn't dominate */
  .token{width:40px}
  .token .nm{font-size:10.5px}
  .leftcol,.rightcol{width:100%}
  .feed-wrap{height:230px}

  /* zone 5 — free agency as a swipeable card row (cards keep full size) */
  .shop-wrap{padding:8px 10px 14px}
  .shop-head{flex-direction:column; align-items:stretch; gap:8px}
  .shop-title{text-align:center}
  .shop{display:flex; overflow-x:auto; gap:10px; padding:2px 2px 12px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:var(--accent) transparent}
  .shop::-webkit-scrollbar{height:6px}
  .shop::-webkit-scrollbar-thumb{background:var(--accent); border-radius:3px}
  .shop .card{flex:0 0 60%; scroll-snap-align:center; touch-action:pan-x}
  .shop .card.sold{flex:0 0 60%; min-height:150px}

  /* zone 6 — pinned bottom action bar: CAP · Reroll · Play, always reachable */
  .controls{position:fixed; left:0; right:0; bottom:0; z-index:16; margin:0;
    display:flex; align-items:center; gap:7px; flex-wrap:nowrap;
    padding:8px 10px; background:rgba(11,14,19,.97); border-top:1px solid var(--line)}
  .controls .cap-pill{flex:0 0 auto; padding:6px 11px; font-size:.85em}
  .controls .cap-pill b{font-size:1.5em}
  .controls button{flex:1 1 0; padding:11px 4px; font-size:.84em; white-space:nowrap}
  #newgame{display:none}                    /* New Run is on the end-of-run overlay */

  .pg-tables .agg td.yv,.pg-tables .agg td.ov{font-size:1.2em}
  .modal{padding:20px}
}