/* Scarlet Serve — game.css */
:root{
  color-scheme:dark;
  --bg:#140e0e; --panel:#1e1615; --panel2:#281d1b; --line:#3b2b28;
  --ink:#f2e8d5; --mute:#b3a291; --faint:#7d6d62;
  --scarlet:#e2233f; --scarlet-d:#9e1428; --led:#ffb23a;
  --good:#7fd69b; --bad:#ff7a7a;
  --display:'Big Shoulders Display','Oswald','Arial Narrow',Impact,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--ink)}
body{font:14px/1.45 var(--body);padding-inline:16px;padding-block:12px 24px}
button,select{font:inherit;color:inherit}
.wrap{max-width:1560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
header.top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 18px;border-bottom:2px solid var(--scarlet);padding-bottom:8px}
.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font:900 clamp(30px,4vw,44px)/.9 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:0;text-wrap:balance}
.brand h1 em{font-style:normal;color:var(--scarlet)}
.ver{font:500 12px var(--mono);color:var(--led);border:1px solid var(--line);padding:2px 6px;border-radius:3px}
.tag{margin:0;color:var(--mute);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.hdr-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.chip{font:500 13px var(--mono);background:var(--panel2);padding:4px 8px;border-radius:3px;font-variant-numeric:tabular-nums}
.btn{background:var(--panel2);border:1px solid var(--line);padding:7px 11px;border-radius:4px;cursor:pointer}
.btn:hover:not(:disabled){border-color:var(--scarlet)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:var(--scarlet);border-color:var(--scarlet);color:#fff;font-weight:600}
.btn.primary:hover:not(:disabled){background:#f0344f}
:focus-visible{outline:2px solid var(--led);outline-offset:2px}

.app{display:grid;grid-template-columns:290px minmax(0,1fr) 310px;grid-template-areas:"left center right";gap:14px;align-items:start}
.left{grid-area:left}.center{grid-area:center}.right{grid-area:right}
.left,.right{display:flex;flex-direction:column;gap:12px;min-width:0}
@media (max-width:1180px){
  .app{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"center right" "left right"}
}
@media (max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"center" "right" "left"}
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px}
.card h2{font:800 15px var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}

/* scoreboard */
.board{background:#0b0808;border:1px solid #2e2220;border-radius:6px;padding:12px;font-family:var(--mono)}
.sb-row{display:grid;grid-template-columns:10px 1fr 26px 52px 14px;align-items:center;gap:8px;padding:3px 0}
.sb-sw{width:10px;height:26px;border-radius:2px}
.sb-rank{font:700 12px var(--mono);color:var(--mute);margin-right:5px;vertical-align:4px}
.sb-name{font:800 22px var(--display);letter-spacing:.06em}
.sb-sets{font-weight:700;color:var(--mute);text-align:center;font-size:18px}
.sb-pts{font-weight:700;color:var(--led);font-size:34px;text-align:right;text-shadow:0 0 12px rgba(255,178,58,.45);font-variant-numeric:tabular-nums}
.sb-srv{color:var(--led);font-size:12px;text-align:center}
.sb-meta{margin-top:6px;border-top:1px dashed #2e2220;padding-top:6px;color:var(--mute);font-size:12px;display:flex;flex-wrap:wrap;gap:4px 12px;font-variant-numeric:tabular-nums}

.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:13px}
.kv dt{color:var(--mute)}.kv dd{margin:0}
.rot{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-size:12px}
.rot div{background:var(--panel2);padding:5px 6px;border-radius:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rot small{display:block;color:var(--faint);font:500 10px var(--mono);letter-spacing:.06em}
.rot .net{grid-column:1/-1;text-align:center;background:none;color:var(--faint);font:500 10px var(--mono);letter-spacing:.3em;padding:0;border-bottom:1px solid var(--line)}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:12px;font-variant-numeric:tabular-nums}
th,td{padding:4px 5px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line)}
th{color:var(--mute);font-weight:500;font:500 11px var(--mono)}
th:first-child,td:first-child,th.l,td.l{text-align:left}
tr.me td{background:rgba(226,35,63,.12)}
tr.tot td{color:var(--mute);border-bottom:none}
.bar{height:7px;background:var(--panel2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--scarlet)}
.bar.f i{background:linear-gradient(90deg,var(--good),var(--led) 60%,var(--bad))}
.scout-row{display:grid;grid-template-columns:86px 1fr 34px 28px;gap:8px;align-items:center;font-size:12px;margin-bottom:4px}
.scout-row span:nth-child(3),.scout-row span:nth-child(4){font-family:var(--mono);text-align:right;color:var(--mute)}
.note{color:var(--mute);font-size:12px;margin:6px 0 0}

/* center */
.tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.tabs button{background:none;border:1px solid var(--line);color:var(--mute);padding:6px 12px;border-radius:4px;cursor:pointer;font:700 14px var(--display);letter-spacing:.1em;text-transform:uppercase}
.tabs button[aria-selected="true"]{background:var(--scarlet);border-color:var(--scarlet);color:#fff}
.courtwrap{position:relative;background:#0b0808;border:1px solid var(--line);border-radius:6px;overflow:hidden}
#court{display:block;width:100%;aspect-ratio:22.4/14.2;max-width:100%;touch-action:none;cursor:grab}
#court.drag{cursor:grabbing}
.zoom{position:absolute;right:8px;top:8px;display:flex;gap:4px}
.zoom button{background:rgba(20,14,14,.8);border:1px solid var(--line);border-radius:4px;min-width:30px;padding:3px 8px;cursor:pointer}
.hint{position:absolute;left:10px;bottom:6px;font:500 11px var(--mono);color:rgba(242,232,213,.75);background:rgba(11,8,8,.7);padding:2px 6px;border-radius:3px;pointer-events:none}
.log{list-style:none;margin:8px 0 0;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:6px;height:190px;overflow-y:auto;font-size:13px}
.log li{padding:2px 0;border-bottom:1px solid rgba(59,43,40,.5)}
.log li.pn{color:#ffd0d6}.log li.pn b{color:var(--scarlet)}
.log li.po{color:var(--mute)}
.log li.sys{color:var(--led);font-family:var(--mono);font-size:12px}
.log .sc{font-family:var(--mono);color:var(--faint);margin-right:6px}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px}
.pane h3{font:800 20px var(--display);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
.w{color:var(--good)}.l{color:var(--bad)}
.ss{color:var(--faint);font-family:var(--mono);font-size:11px}
.badge{font:600 10px var(--mono);border:1px solid var(--line);color:var(--mute);padding:1px 4px;border-radius:3px;margin-left:4px}

/* decision */
.decide h2{color:var(--led)}
/* the panel keeps its height between decisions so the Bench buttons below never jump under the pointer */
.decide{min-height:392px}
.decide .dtitle{font:800 22px/1.1 var(--display);letter-spacing:.03em;margin:0 0 4px;text-transform:uppercase}
.decide .dsub{color:var(--mute);font-size:13px;margin:0 0 10px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{display:grid;grid-template-columns:24px 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:7px 9px;cursor:pointer}
.opt:hover:not(:disabled){border-color:var(--scarlet);background:#331f1e}
.opt:disabled{opacity:.38;cursor:not-allowed}
.opt kbd{grid-row:1/3;align-self:center;font:700 13px var(--mono);background:#0b0808;border:1px solid var(--line);border-radius:3px;text-align:center;padding:2px 0;color:var(--led)}
.opt .ol{font-weight:600}
.opt .os{font-size:12px;color:var(--mute)}
.ctrl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ctrl label{display:flex;align-items:center;gap:6px;font-size:13px}
.ctrl select{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:5px}
.lu{display:grid;grid-template-columns:40px 1fr 54px;gap:6px;align-items:center;font-size:12px;margin-bottom:5px}
.lu b{font:500 11px var(--mono);color:var(--mute)}
.lu select{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:4px;min-width:0}
footer{color:var(--faint);font-size:12px;border-top:1px solid var(--line);padding-top:8px}
.ctrl input[type=range]{width:110px;accent-color:var(--scarlet)}
.btn[aria-pressed="true"]{background:var(--led);border-color:var(--led);color:#1a1000;font-weight:600}
.paused-banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,8,8,.55);font:900 44px var(--display);letter-spacing:.2em;color:var(--led);pointer-events:none}
@media (max-width:760px){.log{height:130px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.decide .ctrl{flex-wrap:wrap;min-width:0}
.decide select{max-width:100%;min-width:0;background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:5px;width:100%}
.board-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px}
.hl-cap{display:block;font:500 13px var(--mono);letter-spacing:0;text-transform:none;color:var(--ink);text-align:center;margin-top:6px;max-width:90%;text-shadow:0 1px 3px #000}
#replayBanner{flex-direction:column;justify-content:flex-end!important;align-items:center!important;padding:0 0 34px!important}


/* v1.7: live coaching clipboard, focus mode, fullscreen/high-contrast controls */
.clip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:8px}
.clip-grid div{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:7px 8px;min-width:0}
.clip-grid span{display:block;color:var(--mute);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.clip-grid b{display:block;font:800 22px var(--display);color:var(--led);font-variant-numeric:tabular-nums}
.clip-list{margin:0;padding-left:18px;color:var(--ink);font-size:12px}
.clip-list li{margin:3px 0}
body.focus-mode .app{grid-template-columns:minmax(0,1fr);grid-template-areas:"center"}
body.focus-mode .left,body.focus-mode .right{display:none}
body.focus-mode .wrap{max-width:1800px}
body.focus-mode #court{max-height:calc(100vh - 170px);aspect-ratio:auto;height:min(72vh,900px)}
body.high-contrast{--bg:#000;--panel:#0d0d0d;--panel2:#171717;--line:#777;--ink:#fff;--mute:#e7e7e7;--faint:#c8c8c8;--scarlet:#ff2448;--scarlet-d:#d9002c;--led:#ffd24d;--good:#88f0a6;--bad:#ff8f8f}
body.high-contrast .card,body.high-contrast .board,body.high-contrast .pane,body.high-contrast .log{border-width:2px}
@media (max-width:980px){.hdr-right{width:100%;margin-left:0}.hdr-right .btn{flex:1 1 auto}}
@media (prefers-contrast:more){
  body{--bg:#000;--panel:#0d0d0d;--panel2:#171717;--line:#777;--ink:#fff;--mute:#e7e7e7;--faint:#c8c8c8;--scarlet:#ff2448;--scarlet-d:#d9002c;--led:#ffd24d;--good:#88f0a6;--bad:#ff8f8f}
  .card,.board,.pane,.log{border-width:2px}
}


/* v1.8: Assistant Coach recommendations */
.opt.coach-rec{border-color:var(--led);box-shadow:0 0 0 1px color-mix(in srgb,var(--led) 45%,transparent);background:#302619}
.coach-badge{display:inline-block;margin-left:6px;padding:1px 5px;border-radius:9px;background:var(--led);color:#1a1000;font:700 9px var(--mono);letter-spacing:.04em;vertical-align:1px}
.coach-tip{margin-top:9px;padding:8px 9px;border-left:3px solid var(--led);background:color-mix(in srgb,var(--led) 8%,var(--panel2));border-radius:3px;display:grid;gap:2px;font-size:12px}
.coach-tip b{font:800 13px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--led)}
.coach-tip span{color:var(--ink)}
.coach-tip.pregame{margin-bottom:8px}
body.high-contrast .opt.coach-rec{outline:2px solid var(--led);outline-offset:-2px}

/* v1.9: coaching review and one-key staff call */
.coach-call{justify-self:start;margin-top:3px;border:1px solid color-mix(in srgb,var(--led) 70%,var(--line));background:transparent;color:var(--led);border-radius:3px;padding:4px 7px;font:700 10px var(--mono);letter-spacing:.04em;cursor:pointer}
.coach-call:hover,.coach-call:focus-visible{background:color-mix(in srgb,var(--led) 14%,var(--panel2));outline:1px solid var(--led)}
.coach-meter{margin:9px 0 5px;padding:8px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel2);display:grid;grid-template-columns:1fr auto;align-items:end;gap:1px 8px}
.coach-meter span{font:800 11px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.coach-meter b{grid-row:1/3;grid-column:2;font:900 25px var(--display);color:var(--led)}
.coach-meter small{color:var(--faint);font:500 10px var(--mono)}
.decision-log{list-style:none;padding:0;margin:7px 0 0;display:grid;gap:5px}
.decision-log li{padding:6px 7px;border-left:3px solid var(--line);background:var(--panel2);font-size:11px;line-height:1.35}
.decision-log li.agree{border-left-color:var(--good)}
.decision-log li.differ{border-left-color:var(--led)}
.decision-log.compact li{padding:4px 6px;font-size:10px}
.coach-review{margin:10px 0 12px;padding:10px;border:1px solid var(--line);border-radius:5px;background:color-mix(in srgb,var(--panel2) 88%,var(--led) 12%)}
.coach-review-head{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-bottom:8px}
.coach-review-head>div{display:grid;min-width:110px}.coach-review-head span{font:800 11px var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.coach-review-head b{font:900 30px var(--display);color:var(--led)}
.coach-review-head p{margin:0;color:var(--faint);font-size:11px;line-height:1.35}
.coach-review h3{margin:10px 0 4px;font:800 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
body.high-contrast .coach-review,body.high-contrast .coach-meter{border-width:2px}


/* v2.0: Match Lab film-room analytics */
.lab-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.lab-head h3{margin-bottom:2px}.lab-head p{margin:0;color:var(--mute);font-size:12px}.lab-kpis{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:7px;margin-bottom:14px}.lab-kpis>div{background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:9px}.lab-kpis span{display:block;color:var(--mute);font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.06em}.lab-kpis b{display:block;color:var(--led);font:900 25px var(--display);font-variant-numeric:tabular-nums}.lab-kpis small{color:var(--faint);font:500 10px var(--mono)}.lab-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:14px}.lab-grid>section,.lab-notes{border-top:1px solid var(--line);padding-top:10px}.lab-dist-head,.lab-dist-row{display:grid;grid-template-columns:105px minmax(70px,1fr) 36px minmax(70px,1fr) 36px;gap:7px;align-items:center}.lab-dist-head{font:600 10px var(--mono);color:var(--mute);text-transform:uppercase;text-align:center;margin-bottom:5px}.lab-dist-row{font-size:11px;margin:5px 0}.lab-dist-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lab-dist-row>div{height:8px;border-radius:5px;background:#0b0808;overflow:hidden}.lab-dist-row i{display:block;height:100%}.lab-dist-row i.neb{background:var(--scarlet)}.lab-dist-row i.opp{background:var(--led)}.lab-dist-row b{font:600 10px var(--mono);text-align:right;color:var(--mute)}.lab-notes{margin:14px 0}.lab-notes ul{margin:5px 0 0;padding-left:20px}.lab-notes li{margin:5px 0}.lab-notes li::marker{color:var(--led)}body.high-contrast .lab-kpis>div{border-width:2px}@media(max-width:1180px){.lab-kpis{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.lab-head{flex-direction:column}.lab-kpis{grid-template-columns:repeat(2,1fr)}.lab-grid{grid-template-columns:1fr}.lab-dist-head,.lab-dist-row{grid-template-columns:90px minmax(50px,1fr) 34px minmax(50px,1fr) 34px}}

/* v2.1: opponent rotation scouting */
.opp-scout{margin:14px 0;border-top:1px solid var(--line);padding-top:10px}
.opp-scout-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:8px}
.opp-scout-head h3{margin-bottom:2px}.opp-scout-head p{margin:0;color:var(--mute);font-size:11px;max-width:680px}
.target-card{min-width:150px;border:1px solid color-mix(in srgb,var(--led) 55%,var(--line));background:color-mix(in srgb,var(--led) 8%,var(--panel2));border-radius:5px;padding:8px 10px;display:grid}
.target-card span{font:700 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.target-card b{font:900 25px var(--display);color:var(--led)}.target-card small{font:500 9px var(--mono);color:var(--faint)}
.serve-window{margin:8px 0;padding:7px 8px;border-left:3px solid var(--good);background:color-mix(in srgb,var(--good) 8%,var(--panel2));border-radius:3px;display:grid;gap:2px}
.serve-window b{font:800 10px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--good)}.serve-window span{font-size:11px;color:var(--ink)}
body.high-contrast .target-card{border-width:2px}
@media(max-width:760px){.opp-scout-head{flex-direction:column}.target-card{width:100%}}

/* v2.2 rotation matchup matrix */
.matchup-matrix{margin:14px 0;border-top:1px solid var(--line);padding-top:10px}.matchup-matrix .tbl{overflow:auto}.matchup-matrix table{min-width:650px}.mx-cell{text-align:center;min-width:78px;position:relative}.mx-cell b{display:block;font:800 15px var(--mono);color:var(--text)}.mx-cell small{display:block;font:500 9px var(--mono);color:var(--faint);margin-top:2px}.mx-cell span{color:var(--faint)}.mx-cell.current{outline:2px solid var(--led);outline-offset:-2px}.mx-cell.best{background:color-mix(in srgb,var(--led) 10%,var(--panel2))}.mx-cell.watch{background:color-mix(in srgb,var(--scarlet) 10%,var(--panel2))}.mx-cell.best b{color:var(--led)}.mx-cell.watch b{color:#ff9d91}body.high-contrast .mx-cell.current{outline-width:3px}

/* v2.3: pressure index and timeout intelligence */
.pressure-card{margin:9px 0;padding:8px 9px;border:1px solid var(--line);border-radius:5px;background:var(--panel2)}
.pressure-head{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:end}.pressure-head span{font:800 10px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.pressure-head b{grid-row:1/3;grid-column:2;font:900 25px var(--display);color:var(--led)}.pressure-head small{font:500 10px var(--mono);color:var(--faint)}
.pressure-card p{margin:5px 0 0;color:var(--mute);font-size:10px;line-height:1.35}.pressure-track{height:6px;border-radius:4px;background:#0b0808;overflow:hidden;margin-top:5px}.pressure-track i{display:block;height:100%;background:var(--good)}.pressure-card.building .pressure-track i,.pressure-badge.building+* i{background:var(--led)}.pressure-card.high .pressure-track i,.pressure-card.critical .pressure-track i{background:var(--scarlet)}
.timeout-advice{margin:8px 0;padding:8px 9px;border-left:3px solid var(--line);background:color-mix(in srgb,var(--panel2) 90%,var(--line) 10%);border-radius:3px;display:flex;align-items:center;justify-content:space-between;gap:8px}.timeout-advice>div{display:grid;gap:2px}.timeout-advice b{font:800 11px var(--display);letter-spacing:.07em;text-transform:uppercase}.timeout-advice span{font-size:10px;color:var(--mute);line-height:1.35}.timeout-advice.call{border-left-color:var(--scarlet);background:color-mix(in srgb,var(--scarlet) 9%,var(--panel2))}.timeout-advice.consider{border-left-color:var(--led);background:color-mix(in srgb,var(--led) 8%,var(--panel2))}.timeout-advice.queued{border-left-color:var(--good)}.timeout-call{white-space:nowrap;padding:5px 7px;font-size:10px}
.timeout-intel{margin:14px 0;border-top:1px solid var(--line);padding-top:10px}.timeout-intel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.timeout-intel-head h3{margin-bottom:2px}.timeout-intel-head p{margin:0;color:var(--mute);font-size:11px;max-width:660px}.pressure-badge{min-width:105px;border:1px solid var(--line);border-radius:5px;padding:7px 9px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 8px;background:var(--panel2)}.pressure-badge span{font:700 9px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}.pressure-badge b{grid-row:1/3;grid-column:2;font:900 24px var(--display);color:var(--led)}.pressure-badge small{font:500 9px var(--mono);color:var(--faint)}.pressure-track.wide{height:8px;margin:9px 0}.pressure-track.wide i{background:linear-gradient(90deg,var(--good),var(--led) 52%,var(--scarlet))}
body.high-contrast .pressure-card,body.high-contrast .pressure-badge{border-width:2px}@media(max-width:760px){.timeout-intel-head{flex-direction:column}.pressure-badge{width:100%}.timeout-advice{align-items:flex-start;flex-direction:column}.timeout-call{width:100%}}