/* ============================================================
   GAME LIFECYCLE UI — picking, winner, new-game setup
   Uses the same tokens as terminal.css (--bg, --surface, --fg, etc.)
   ============================================================ */

.game-screen{max-width:820px;margin:0 auto;padding:48px 24px 80px;min-height:calc(100vh - 64px);display:flex;flex-direction:column;gap:28px}
.game-head{display:flex;flex-direction:column;gap:12px}
.game-eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.game-eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 var(--up-glow);animation:gpulse 2s infinite}
@keyframes gpulse{0%{box-shadow:0 0 0 0 var(--up-glow)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.game-title{font:800 clamp(34px,6vw,56px)/1.02 var(--display);letter-spacing:-.02em;margin:0}
.game-title .accent{color:var(--up)}
.game-sub{color:var(--fg-2);font-size:15px;max-width:60ch;margin:0;text-wrap:pretty}

/* Countdown */
.countdown{margin-top:6px;display:flex;flex-direction:column;gap:8px}
.cd-label{font:600 12px/1 var(--mono);letter-spacing:.04em;color:var(--fg-3);text-transform:uppercase}
.cd-cells{display:flex;gap:10px}
.cd-cell{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;min-width:64px}
.cd-num{font:700 26px/1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
.cd-unit{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)}
.cd-done{font:600 14px/1 var(--mono);color:var(--up)}

/* Roster select */
.pick-roster-label,.fs-label,.pick-roster .pick-roster-label{font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.pick-players{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pick-player-btn{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);padding:20px;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.pick-player-btn:hover{transform:translateY(-2px);border-color:var(--p-accent);background:var(--surface-2)}
.pick-player-btn.done{background:var(--p-soft);border-color:var(--p-accent)}
.pp-name{font:700 22px/1 var(--display);color:var(--fg)}
.pp-status{font:600 12px/1 var(--mono)}
.pp-status.in{color:var(--p-accent)}
.pp-status.out{color:var(--fg-4)}

/* Pick form */
.pick-form{background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:24px;display:flex;flex-direction:column;gap:20px}
.pick-form-head{display:flex;align-items:center;gap:14px}
.pick-form-name{font:800 26px/1 var(--display);color:var(--p-accent)}
.link-btn{background:none;border:none;color:var(--fg-3);font:600 13px/1 var(--sans);cursor:pointer;padding:4px 0}
.link-btn:hover{color:var(--fg)}
.pick-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pick-col{display:flex;flex-direction:column;gap:10px}
.pick-col-h{font:700 13px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;margin-bottom:2px}
.pick-col-h.up{color:var(--up)}
.pick-col-h.down{color:var(--down)}
.pick-input{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:14px 16px;font:700 18px/1 var(--mono);color:var(--fg);letter-spacing:.04em;text-transform:uppercase;outline:none;transition:border-color .12s}
.pick-input:focus{border-color:var(--p-accent)}
.pick-input::placeholder{color:var(--fg-4);font-weight:500;letter-spacing:0}
.pick-note{font:500 12px/1.4 var(--sans);color:var(--fg-4);margin:0}

/* Buttons */
.game-btn{align-self:flex-start;background:var(--surface-3);color:var(--fg);border:1px solid var(--border-2);border-radius:999px;padding:14px 26px;font:700 15px/1 var(--sans);cursor:pointer;transition:transform .12s,filter .12s}
.game-btn:hover{transform:translateY(-1px)}
.game-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.game-btn.primary{background:var(--up);color:#06210f;border-color:transparent}
.game-btn.primary:hover{filter:brightness(1.06)}
.game-btn.big{align-self:center;font-size:17px;padding:18px 40px}
.game-err{color:var(--down);font:600 13px/1.4 var(--mono);background:var(--down-soft);border:1px solid var(--down);border-radius:var(--radius-sm);padding:10px 14px}

/* Winner screen */
.winner-screen{align-items:stretch;justify-content:flex-start;gap:34px}
.winner-hero{position:relative;overflow:hidden;text-align:center;border-radius:var(--radius-lg);padding:56px 32px;background:radial-gradient(120% 140% at 50% 0%,var(--p-soft) 0%,var(--surface) 70%);border:1px solid var(--p-accent);opacity:0;transform:scale(.96);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.9,.3,1.2)}
.winner-hero.in{opacity:1;transform:scale(1)}
.winner-eyebrow{font:700 13px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.winner-label{margin-top:20px;font:600 13px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.winner-name{font:800 clamp(56px,12vw,120px)/.95 var(--display);letter-spacing:-.03em;color:var(--p-accent);margin:8px 0 18px;text-shadow:0 0 60px var(--p-soft)}
.winner-stats{display:flex;gap:22px;align-items:baseline;justify-content:center;flex-wrap:wrap}
.winner-total{font:800 clamp(32px,7vw,56px)/1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
.winner-pct{font:700 clamp(20px,4vw,30px)/1 var(--mono)}
.winner-pct.up{color:var(--up)}
.winner-pct.down{color:var(--down)}

.final-standings{display:flex;flex-direction:column;gap:2px}
.fs-row{display:grid;grid-template-columns:36px 1fr auto auto;align-items:center;gap:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.fs-row.first{border-color:var(--p-accent);background:var(--surface-2)}
.fs-rank{font:800 18px/1 var(--mono);color:var(--fg-3);text-align:center}
.fs-row.first .fs-rank{color:var(--p-accent)}
.fs-name{font:700 18px/1 var(--display);color:var(--fg)}
.fs-total{font:700 17px/1 var(--mono);color:var(--fg);font-variant-numeric:tabular-nums}
.fs-pct{font:700 15px/1 var(--mono);min-width:74px;text-align:right;font-variant-numeric:tabular-nums}
.fs-pct.up{color:var(--up)}
.fs-pct.down{color:var(--down)}

/* New-game overlay */
.game-overlay{position:fixed;inset:0;background:rgba(4,6,10,.72);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:1000}
.game-modal{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:28px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-head h2{font:800 24px/1 var(--display);margin:0}
.modal-sub{color:var(--fg-2);font-size:14px;margin:0}
.modal-note{color:var(--fg-4);font:500 12px/1.4 var(--mono);margin:0}
.ng-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
.ng-grid.two{grid-template-columns:1fr 1fr}
.ng-field{display:flex;flex-direction:column;gap:6px}
.ng-field span{font:600 11px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--fg-3)}
.ng-field input{background:var(--surface-2);border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:11px 13px;font:600 15px/1 var(--mono);color:var(--fg);outline:none;color-scheme:dark}
.ng-field input:focus{border-color:var(--up)}
[data-theme="light"] .ng-field input{color-scheme:light}

/* Admin new-game launcher */
.admin-newgame{position:fixed;left:18px;bottom:18px;z-index:900;background:var(--surface-2);color:var(--fg-2);border:1px solid var(--border-2);border-radius:999px;padding:10px 16px;font:700 13px/1 var(--sans);cursor:pointer;display:flex;align-items:center;gap:7px;transition:transform .12s,color .12s}
.admin-newgame:hover{transform:translateY(-1px);color:var(--fg)}

/* Locked-phase end countdown banner */
.end-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 20px;margin-bottom:20px}
.end-banner .eb-left{font:700 14px/1.3 var(--sans);color:var(--fg)}
.end-banner .eb-left .dim{color:var(--fg-3);font-weight:500}
.end-banner .countdown{margin:0}
.end-banner .cd-cells{gap:8px}
.end-banner .cd-cell{padding:8px 12px;min-width:54px}
.end-banner .cd-num{font-size:20px}

@media(max-width:640px){
  .pick-players{grid-template-columns:1fr}
  .pick-cols{grid-template-columns:1fr}
  .ng-grid,.ng-grid.two{grid-template-columns:1fr 1fr}
}

/* ── Today's tape ─────────────────────────── */
.today-tile{gap:14px}
.td-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.td-net{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--fg-3);white-space:nowrap}
.td-net b{margin-left:4px}
.td-net b.up{color:var(--up)}.td-net b.down{color:var(--down)}
.td-net .sep{color:var(--fg-4)}
.td-split{display:flex;width:96px;height:6px;border-radius:99px;overflow:hidden;background:var(--surface-2)}
.td-split .up-seg{background:var(--up)}
.td-split .down-seg{background:var(--down);opacity:.8}
.td-split-l{color:var(--fg-3)}
.td-spots{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:12px}
@container (max-width:900px){.td-spots{grid-template-columns:1fr}}
.spot{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(150deg,var(--surface-2) 0%,var(--surface) 70%)}
.spot::after{content:"";position:absolute;inset:auto -40px -60px auto;right:-40px;bottom:-60px;width:180px;height:180px;border-radius:50%;background:var(--p-accent);opacity:.1;filter:blur(30px);pointer-events:none}
.spot.best{border-color:color-mix(in oklch,var(--up) 32%,var(--border))}
.spot.worst{border-color:color-mix(in oklch,var(--down) 26%,var(--border))}
.spot-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);font-weight:700}
.spot-row{display:flex;align-items:center;gap:11px}
.spot-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.spot-sym{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.spot-meta{font-size:11.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spot-meta .side{text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--p-accent)}
.spot-nums{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;white-space:nowrap}
.spot-pct{font-family:var(--mono);font-size:26px;font-weight:700;letter-spacing:-.03em}
.spot-pct.up{color:var(--up)}.spot-pct.down{color:var(--down)}
.spot-usd{font-family:var(--mono);font-size:11.5px;color:var(--fg-3)}
.who-won{gap:7px}
.tdp{display:grid;grid-template-columns:8px 62px 1fr auto;align-items:center;gap:9px;cursor:pointer;padding:2px 0}
.tdp-dot{width:8px;height:8px;border-radius:50%;background:var(--p-accent)}
.tdp-name{font-size:12.5px;font-weight:600;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdp.first .tdp-name{color:var(--fg);font-weight:700}
.tdp-track{position:relative;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.tdp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--p-accent);animation:tdgrow .7s cubic-bezier(.2,.8,.2,1) both}
.tdp-fill.down{opacity:.55}
.tdp-usd{font-family:var(--mono);font-size:11.5px;font-weight:700;min-width:64px;text-align:right}
.tdp-usd.up{color:var(--up)}.tdp-usd.down{color:var(--down)}
.tdp:hover .tdp-name{color:var(--p-accent)}
@keyframes tdgrow{from{width:0 !important}}
.tape{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--border);padding-top:6px}
.tape-row{display:grid;grid-template-columns:26px 26px minmax(140px,180px) 1fr 72px 74px;align-items:center;gap:10px;padding:5px 6px;border-radius:8px;cursor:pointer;transition:background .15s}
.tape-row:hover{background:var(--surface-2)}
.tape-rank{font-family:var(--mono);font-size:10.5px;color:var(--fg-4);font-weight:600}
.sym-logo.sm{width:24px;height:24px;font-size:9.5px}
.tape-label{display:flex;align-items:center;gap:7px;min-width:0}
.tape-label .sym{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--fg)}
.side-tag{font-family:var(--mono);font-size:9px;font-weight:800;width:15px;height:15px;display:grid;place-items:center;border-radius:4px;background:var(--surface-2);color:var(--fg-3)}
.side-tag.short{background:color-mix(in oklch,var(--down) 18%,transparent);color:var(--down)}
.side-tag.long{background:color-mix(in oklch,var(--up) 16%,transparent);color:var(--up)}
.tape-label .owner{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tape-label .owner .dot{width:6px;height:6px;border-radius:50%;background:var(--p-accent);flex-shrink:0}
.tape-plot{position:relative;height:16px}
.tape-axis{position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;background:var(--border-2)}
.tape-bar{position:absolute;top:3px;bottom:3px;border-radius:3px;animation:tapegrow .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i)*32ms)}
.tape-bar.up{background:linear-gradient(90deg,color-mix(in oklch,var(--up) 55%,transparent),var(--up))}
.tape-bar.down{background:linear-gradient(270deg,color-mix(in oklch,var(--down) 55%,transparent),var(--down))}
@keyframes tapegrow{from{width:0 !important}}
.tape-val{font-family:var(--mono);font-size:12.5px;font-weight:700;text-align:right}
.tape-val.up{color:var(--up)}.tape-val.down{color:var(--down)}
.tape-usd{font-family:var(--mono);font-size:11px;color:var(--fg-4);text-align:right}
@container (max-width:700px){.tape-row{grid-template-columns:22px 24px 1fr 60px;gap:8px}.tape-plot,.tape-usd{display:none}}

/* ── Collapsible section head ─────────────── */
.collapse-head{all:unset;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;cursor:pointer;box-sizing:border-box;padding:2px 0}
.collapse-right{display:flex;align-items:center;gap:10px;color:var(--fg-3);white-space:nowrap}
.collapse-note{font-size:11px;color:var(--fg-4)}
.collapse-cta{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.collapse-chev{transition:transform .2s ease}
.collapse-head.open .collapse-chev{transform:rotate(180deg)}
.collapse-head:hover .collapse-right{color:var(--fg)}