/* Update 6.5 - the match HUD in one visual language with the menus and the 3D scene: the same deep-green glass (a hair of blur, a
   thin light edge, a soft shadow), Segoe UI for text and tabular figures for numbers, small spaced capitals for labels, lime for what
   is yours or live. Broadcast-style score bug, compact chips, icon buttons, keycaps for the commands. Loaded last. */
:root{--hud-glass:linear-gradient(180deg,#0b312bea,#03201cee);--hud-edge:#cfe8bd33;--hud-text:#f1f6e8;--hud-dim:#a8c1b1;--hud-font:"Segoe UI Variable Text","Segoe UI",system-ui,Arial,sans-serif;--hud-num:"Segoe UI Variable Display","Segoe UI",system-ui,Arial,sans-serif;--hud-shadow:0 10px 28px #00140f70,inset 0 1px 0 #ffffff14}
#hud,#commands,.top-actions,.controller-status,#toast{font-family:var(--hud-font)}

/* ---- icon buttons (audio, pause): also in the menus ---- */
.top-actions{gap:8px}
.top-actions .icon-btn{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:var(--hud-glass);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow);color:var(--hud-text);cursor:pointer;transition:transform .15s ease,border-color .15s,background .15s}
.top-actions .icon-btn:hover{border-color:#d4f26a99;transform:translateY(-1px)}
.top-actions .icon-btn:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.top-actions .icon-btn svg{width:20px;height:20px}
#sound svg path{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}#sound svg .spk{fill:currentColor;stroke:none}
#sound .mute{display:none}#sound.muted .wave{display:none}#sound.muted .mute{display:inline}#sound.muted{color:#f0a58e}
#pause svg rect{fill:currentColor}

/* ---- controller status: a quiet chip, gone during a match when nothing is plugged in ---- */
.controller-status{top:70px;padding:6px 12px;border-radius:99px;background:var(--hud-glass);border:1px solid var(--hud-edge);color:var(--hud-dim);font-size:11px;letter-spacing:.02em;box-shadow:var(--hud-shadow)}
.controller-status:empty,body[data-screen=MATCH] .controller-status.idle{display:none}

/* ---- score bug ---- */
#hud .scoreboard{top:16px;display:flex;align-items:stretch;gap:0;padding:0;border-radius:14px;background:var(--hud-glass);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow);backdrop-filter:blur(6px);overflow:hidden}
#hud .sb-player{display:flex;align-items:center;gap:10px;padding:8px 14px;min-width:150px}
#hud .sb-player.you{box-shadow:inset 3px 0 0 var(--lime)}
#hud .sb-player.them{justify-content:flex-end}
#hud .sb-name{font:600 13px/1 var(--hud-font);letter-spacing:.09em;text-transform:uppercase;color:var(--hud-text);white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis}
#hud .sb-player.you .sb-name{color:var(--lime)}
#hud .sb-score{font:700 30px/1 var(--hud-num);font-variant-numeric:tabular-nums;color:#fff;min-width:24px;text-align:center}
#hud .sb-player.you .sb-score{margin-left:auto}#hud .sb-player.them .sb-score{margin-right:auto}
#hud .serve-dot{width:9px;height:9px;border-radius:50%;background:transparent;flex:none;transition:background .2s,box-shadow .2s}
#hud .serve-dot.on{background:#dff45e;box-shadow:0 0 0 3px #dff45e2e}
#hud .sb-center{display:grid;place-items:center;padding:0 14px;border-left:1px solid var(--hud-edge);border-right:1px solid var(--hud-edge);background:#ffffff08}
#hud .sb-center small{font:600 10px/1.2 var(--hud-font);letter-spacing:.14em;color:var(--hud-dim);white-space:nowrap}

/* ---- venue and surface ---- */
#hud .court-label{left:24px;top:86px;flex-direction:row;align-items:center;gap:8px;padding:7px 13px;border-radius:99px;background:var(--hud-glass);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow)}
#hud .court-label i{width:7px;height:7px;border-radius:50%;background:var(--lime)}
#hud .court-label span{font:600 11px/1 var(--hud-font);letter-spacing:.12em;text-transform:uppercase;color:var(--hud-text)}
#hud .court-label strong{font:400 11px/1 var(--hud-font);letter-spacing:.12em;text-transform:uppercase;color:var(--hud-dim)}
#hud .court-label strong::before{content:"·";margin-right:8px;color:var(--hud-dim)}

/* ---- rally counter: only while the ball is in play ---- */
#hud .rally-stat{right:24px;top:74px;flex-direction:row;align-items:baseline;gap:7px;padding:7px 13px;border-radius:99px;background:var(--hud-glass);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}
#hud .rally-stat.on{opacity:1;transform:none}
#hud .rally-stat span,#hud .rally-stat small{font:600 10px/1 var(--hud-font);letter-spacing:.14em;color:var(--hud-dim)}
#hud .rally-stat strong{font:700 18px/1 var(--hud-num);color:var(--lime);font-variant-numeric:tabular-nums}

/* ---- shot card: phase, aim, last shot speed ---- */
#hud .shot-hud{left:24px;bottom:66px;width:auto;min-width:228px;max-width:320px;padding:12px 16px 12px 15px;border-radius:14px;background:var(--hud-glass);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow);display:grid;gap:5px}
#hud .shot-hud>span{font:700 10px/1.2 var(--hud-font);letter-spacing:.16em;color:var(--lime);text-transform:uppercase}
#hud .shot-hud>strong#aimLabel{font:600 15px/1.2 var(--hud-font);color:var(--hud-text);margin:0}
#hud .shot-hud>strong#aimLabel:empty{display:none}
#hud .sh-speed{display:flex;align-items:baseline;gap:6px;margin-top:3px;padding-top:7px;border-top:1px solid var(--hud-edge)}
#hud .sh-speed small{font:600 9px/1 var(--hud-font);letter-spacing:.14em;color:var(--hud-dim);margin-right:auto}
#hud .sh-speed b{font:700 22px/1 var(--hud-num);color:#fff;font-variant-numeric:tabular-nums}
#hud .sh-speed em{font:400 11px/1 var(--hud-font);font-style:normal;color:var(--hud-dim)}
#hud .shot-hud .power-track,#hud .shot-hud #powerLabel{display:none}

/* ---- command strip: keycaps ---- */
#commands.bottom{min-height:0;padding:0 24px 14px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px;background:linear-gradient(transparent,#021a1690);font-size:12px}
#commands span{display:inline-flex;align-items:center;gap:7px;color:var(--hud-dim);white-space:nowrap}
#commands kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:6px;background:#ffffff14;border:1px solid #ffffff2e;border-bottom-width:2px;color:var(--hud-text);font:700 11px/1 var(--hud-font);letter-spacing:.02em}

/* ---- notices ---- */
#toast{font-size:14px;font-weight:600;letter-spacing:.01em;background:var(--hud-glass);border:1px solid var(--hud-edge);box-shadow:var(--hud-shadow);border-radius:99px;padding:9px 18px}

@media(max-width:1100px){#hud .sb-player{min-width:120px;padding:7px 11px}#hud .sb-score{font-size:25px}#commands.bottom{gap:5px 11px;font-size:11px}#hud .shot-hud{min-width:200px}}
@media(max-width:820px){#commands.bottom{display:none}#hud .court-label{display:none}#hud .sb-player{min-width:0}#hud .sb-name{max-width:70px;font-size:11px}#hud .shot-hud{bottom:20px;left:14px}}
@media(max-height:620px){#hud .shot-hud{bottom:50px;padding:9px 13px}#hud .sh-speed b{font-size:18px}}