:root{--bg: #060b12;--panel: #121c2b;--panel-2: #1d2a3f;--text: #e8eff7;--muted: #93a4b8;--you: #34d399;--rival: #fb923c;--accent: #7dd3fc;--gold: #fbbf24;--danger: #fb7185;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}.game{height:100%;max-width:960px;margin-inline:auto;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px}.scoreboard{display:flex;flex-direction:column;gap:4px;min-width:0}.team{display:flex;align-items:center;gap:8px;min-width:0}.team-name{min-width:4.5ch;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:10ch}.team-score{min-width:1.2ch;font-size:20px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.team-you .team-score{color:var(--you)}.team-rival .team-score{color:var(--rival)}.pips{display:flex;gap:4px;align-items:center}.pip{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;background:currentColor}.team-you .pip{color:var(--you)}.team-rival .pip{color:var(--rival)}.pip[data-state=open]{background:transparent;opacity:.45}.pip[data-state=no]{color:#56637a;background:transparent;position:relative}.pip[data-state=no]:after{content:"";position:absolute;inset:1px;border-radius:50%;background:linear-gradient(45deg,transparent 42%,currentColor 42%,currentColor 58%,transparent 58%)}.hud-actions{display:flex;gap:8px;flex:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 16px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:default}.btn-glyph{display:none;font-size:17px;line-height:1}.btn-icon{padding:0 10px;font-size:17px}.btn-primary{background:var(--accent);color:#05202f;padding:0 28px;font-size:16px}.meter{height:8px;flex:none}.meter-track{height:100%;border-radius:999px;background:var(--panel);overflow:hidden}.meter-fill{height:100%;border-radius:999px;background:var(--muted);transform-origin:left center;transform:scaleX(0)}[dir=rtl] .meter-fill{transform-origin:right center}.meter[data-mode=charge] .meter-fill{background:linear-gradient(90deg,var(--accent),var(--gold) 62%,var(--danger))}.meter[data-mode=runup] .meter-fill{background:var(--rival)}.meter[data-mode=idle] .meter-fill{transform:scaleX(0)}.board-wrap{position:relative;flex:1;min-height:0;border-radius:12px;overflow:hidden;touch-action:none;cursor:crosshair}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.status{margin:0;flex:none;min-height:1.3em;text-align:center;font-size:clamp(11px,2.7vw,14px);font-weight:600;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status[data-tone=call]{color:var(--text)}.status[data-tone=good]{color:var(--you)}.status[data-tone=bad]{color:var(--danger)}.banner{position:absolute;inset-inline:0;top:8%;display:flex;justify-content:center;padding-inline:12px;text-align:center;pointer-events:none}.banner[hidden]{display:none}.banner-title{padding:6px 16px;border-radius:999px;background:#060b12cc;font-size:clamp(15px,4vw,26px);font-weight:800;color:var(--gold);text-shadow:0 2px 14px rgba(2,8,20,.9)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center;background:#060b12cc;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.overlay-title{margin:0;font-size:clamp(20px,6vw,40px)}.overlay-score{margin:0;font-size:15px;font-weight:600;color:var(--gold)}.overlay-score[hidden]{display:none}.overlay-hint{margin:0;color:var(--muted);max-width:44ch;font-size:14px}.overlay-hint[hidden]{display:none}@media(max-width:560px){.btn-text{display:none}.btn-glyph{display:inline-flex;align-items:center}.btn{padding:0 12px}.btn-primary{padding:0 24px}}@media(max-height:430px){.game{padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));gap:6px}.btn{min-height:40px}.team-score{font-size:17px}.overlay{gap:8px;padding:10px}.overlay-title{font-size:clamp(16px,5vw,28px)}.overlay-hint{font-size:12px}}@media(max-width:380px){.team-name{display:none}.hud,.hud-actions{gap:6px}.pip{width:7px;height:7px}.pips{gap:3px}.team-score{font-size:16px}}@media(max-width:300px),(max-height:260px){.overlay-hint{display:none}}