:root{--bg-glass: rgba(8, 12, 24, .78);--border-glass: rgba(148, 163, 184, .18);--accent-cyan: #38bdf8;--accent-orange: #f97316;--text-primary: #f8fafc;--text-muted: #94a3b8}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body,#app{width:100vw;height:100vh;overflow:hidden;overscroll-behavior:none;touch-action:none;background-color:#050811;font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text-primary)}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:none}.hud-rail{position:absolute;top:14px;width:226px;display:flex;flex-direction:column;gap:10px;z-index:10;pointer-events:none}.hud-rail-left{left:16px}.hud-rail-right{right:16px}.scorebug,.telemetry-card,.settings-card,.stance-card{background:var(--bg-glass);backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:10px;overflow:hidden;box-shadow:0 10px 28px #00000080}.settings-card,.stance-card{pointer-events:auto}.scorebug-header{display:flex;align-items:center;gap:7px;padding:5px 10px;background:linear-gradient(90deg,#f9731640,#38bdf824);border-bottom:1px solid var(--border-glass);font-size:9.5px;font-weight:800;letter-spacing:.08em;color:#e2e8f0}.live-dot{width:6px;height:6px;border-radius:50%;background:#f97316;box-shadow:0 0 8px #f97316;animation:pulse 1.6s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.player-row{display:grid;grid-template-columns:9px 36px 1fr 26px 34px;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid rgba(148,163,184,.08)}.serve-indicator{width:7px;height:7px;border-radius:50%;background:transparent}.serve-indicator.active{background:#facc15;box-shadow:0 0 8px #facc15}.flag-badge{font-size:9px;font-weight:800;padding:2px 4px;border-radius:3px;text-align:center}.you-badge{background:#38bdf833;color:#38bdf8;border:1px solid rgba(56,189,248,.38)}.ai-badge{background:#f9731633;color:#fb923c;border:1px solid rgba(249,115,22,.38)}.player-name{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.set-score{font-family:JetBrains Mono,monospace;font-size:11.5px;font-weight:700;text-align:center;color:#94a3b8;background:#0f172ab3;padding:2px 0;border-radius:4px}.point-score{font-family:JetBrains Mono,monospace;font-size:15px;font-weight:800;text-align:center;color:#0f172a;background:#f8fafc;padding:1px 0;border-radius:4px}.scorebug-footer{display:flex;justify-content:space-between;padding:4px 10px;font-size:10px;color:var(--text-muted);background:#02061773}.scorebug-footer strong{color:#38bdf8;font-family:JetBrains Mono,monospace}.telemetry-card{padding:9px 11px;display:flex;flex-direction:column;gap:8px}.panel-title{font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--text-muted)}.telemetry-row{display:flex;align-items:center;gap:12px}.spin-sphere{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff,#cbd5e1 65%,#475569);position:relative;box-shadow:0 0 14px #38bdf859;display:flex;align-items:center;justify-content:center;flex-shrink:0}.spin-axis-ring{position:absolute;width:100%;height:6px;background:#f97316e0;border-radius:3px}.telemetry-metrics{display:flex;flex-direction:column;gap:4px;flex:1}.metric-line{display:flex;justify-content:space-between;align-items:baseline}.stat-label{font-size:10px;font-weight:700;color:var(--text-muted)}.stat-value{font-family:JetBrains Mono,monospace;font-size:13.5px;color:#f8fafc}.stat-value small{font-size:9.5px;color:var(--text-muted)}.telemetry-badge-row{display:flex;justify-content:flex-end}.stat-badge{width:100%;text-align:center;font-size:10px;font-weight:800;padding:3px 8px;border-radius:5px;background:#38bdf829;color:#38bdf8;border:1px solid rgba(56,189,248,.35)}.center-callout{position:absolute;top:14px;left:50%;transform:translate(-50%);text-align:center;padding:7px 20px;background:#080c18c7;backdrop-filter:blur(12px);border:1px solid rgba(56,189,248,.3);border-radius:999px;box-shadow:0 8px 24px #00000073;pointer-events:none;z-index:10;transition:opacity .2s ease,transform .2s ease}.center-callout.hidden{opacity:0;transform:translate(-50%,-8px)}.callout-main{font-size:14px;font-weight:900;letter-spacing:.08em;color:#f8fafc;text-shadow:0 0 12px rgba(56,189,248,.5)}.callout-sub{font-size:10.5px;font-weight:600;color:#cbd5e1;margin-top:1px}.settings-card{padding:9px 11px;display:flex;flex-direction:column;gap:6px}.control-row{display:flex;justify-content:space-between;align-items:center;gap:8px}.control-row label{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--text-muted)}.control-row select{width:132px;background:#0f172aeb;color:#f8fafc;border:1px solid rgba(148,163,184,.28);border-radius:5px;padding:4px 6px;font-size:10.5px;font-weight:600;cursor:pointer;outline:none}.btn-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:2px}.hud-btn{background:#1e293be0;color:#f8fafc;border:1px solid rgba(148,163,184,.28);border-radius:5px;padding:5px 4px;font-size:10px;font-weight:700;cursor:pointer;transition:all .15s ease}.hud-btn:hover{border-color:#38bdf8;background:#38bdf833}.hud-btn.accent{background:linear-gradient(135deg,#ea580c,#f97316);border-color:#fb923c}.stance-card{padding:9px 11px;display:flex;flex-direction:column;gap:6px}.stance-item{display:flex;justify-content:space-between;align-items:center;font-size:10.5px}.stance-item span{font-size:9.5px;font-weight:800;color:var(--text-muted)}.mode-drive{color:#facc15}.mode-topspin{color:#fb923c}.mode-chop{color:#38bdf8}.mode-smash{color:#f43f5e}.touch-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:2px}.touch-pill{background:#0f172ad9;color:#94a3b8;border:1px solid rgba(148,163,184,.22);border-radius:5px;padding:5px 4px;font-size:9.5px;font-weight:800;cursor:pointer;transition:all .15s ease}.touch-pill.active{background:#38bdf838;color:#38bdf8;border-color:#38bdf8}.help-toggle-btn{width:100%;background:#0f172ab3;color:#94a3b8;border:1px solid rgba(148,163,184,.2);border-radius:5px;padding:4px;font-size:9.5px;font-weight:700;cursor:pointer;margin-top:2px}.help-toggle-btn:hover{color:#f8fafc;border-color:#38bdf8}.controls-drawer{display:flex;flex-direction:column;gap:3px;font-size:10px;color:#cbd5e1;padding-top:4px;border-top:1px solid rgba(148,163,184,.14)}.controls-drawer.collapsed{display:none}.controls-drawer strong{color:#38bdf8}.menu-toggle{display:none;width:100%;pointer-events:auto;letter-spacing:.08em}@media (max-width: 820px){.hud-rail{top:8px;width:158px;gap:6px}.hud-rail-left{left:8px}.hud-rail-right{right:8px}.scorebug-header{font-size:8px;padding:4px 7px}.player-row{grid-template-columns:7px 28px 1fr 20px 26px;padding:4px 7px;gap:4px}.player-name{font-size:10px}.point-score{font-size:12.5px}.telemetry-card{padding:6px 8px}.spin-sphere{width:30px;height:30px}.stat-value{font-size:11px}.settings-card,.stance-card{padding:6px 8px}.control-row select{width:92px;font-size:9.5px;padding:2px 4px}.controls-drawer,.help-toggle-btn{display:none}.center-callout{top:auto;bottom:14%;padding:6px 14px;max-width:86vw}.callout-main{font-size:12px}.callout-sub{font-size:9.5px}}@media (pointer: coarse){.hud-btn,.touch-pill,.help-toggle-btn,.control-row select{min-height:44px;touch-action:manipulation}.control-row select{-webkit-appearance:none;appearance:none;width:140px;padding:0 22px 0 8px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.btn-row{gap:4px}.touch-mode-grid{gap:6px}}@media (max-width: 820px),(pointer: coarse) and (max-height: 560px){.menu-toggle{display:block;min-height:44px}.settings-card{display:none}.hud-rail-right.menu-open{pointer-events:auto;max-height:calc(100dvh - 16px);overflow-y:auto}.hud-rail-right.menu-open .settings-card{display:flex}.hud-rail-right.menu-open .stance-card{display:none}.control-row{flex-direction:column;align-items:stretch;gap:3px}.control-row select{width:100%}.help-toggle-btn,.controls-drawer{display:none}}