:root{--hud-bg: rgba(8, 13, 24, .72);--hud-border: rgba(120, 190, 255, .22);--blue: #4da3ff;--orange: #ff8a3d;--text: #dbe7ff;--font-display: "Arial Black", "Impact", "Segoe UI", sans-serif;--font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif}*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#060b16;font-family:var(--font-body);color:var(--text)}#game-shell{position:fixed;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}#scoreboard{position:absolute;top:18px;left:50%;transform:translate(-50%);display:flex;align-items:stretch;gap:10px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:14px;padding:8px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}.team{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:.14em}.team strong{font-family:var(--font-display);font-size:32px;font-weight:900;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}.score-pop{animation:score-pop .6s cubic-bezier(.2,1.8,.4,1)}@keyframes score-pop{0%{transform:scale(1)}35%{transform:scale(1.65)}to{transform:scale(1)}}.team--blue .team__name,.team--blue strong{color:var(--blue)}.team--orange .team__name,.team--orange strong{color:var(--orange)}.match-center{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 12px;border-left:1px solid var(--hud-border);border-right:1px solid var(--hud-border)}.match-center__label{font-size:9px;letter-spacing:.3em;opacity:.6}#match-time{font-family:var(--font-display);font-size:23px;font-weight:900;font-variant-numeric:tabular-nums}.announcement{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%) scale(.9);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;text-shadow:0 4px 30px rgba(0,0,0,.8);-webkit-user-select:none;user-select:none}.announcement--visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.announcement--pulse strong{animation:announce-pop .45s cubic-bezier(.2,1.6,.4,1)}@keyframes announce-pop{0%{transform:scale(.6)}to{transform:scale(1)}}#announcement-kicker{font-size:15px;letter-spacing:.5em;color:#9fd8ff;text-transform:uppercase}#announcement-title{font-family:var(--font-display);font-size:64px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(180deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}#announcement-sub{font-size:16px;letter-spacing:.2em;opacity:.75;text-transform:uppercase}#controls{position:absolute;left:18px;bottom:18px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:12px;padding:12px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}#controls header{display:flex;flex-direction:column;margin-bottom:8px}#controls .eyebrow{font-size:9px;letter-spacing:.3em;opacity:.55}#controls header strong{font-size:14px;letter-spacing:.18em}#controls dl{display:flex;flex-direction:column;gap:3px}#controls dl>div{display:flex;gap:10px;align-items:baseline}#controls dt{min-width:62px;font-size:11px;font-weight:700;color:#9fd8ff;letter-spacing:.06em}#controls dd{font-size:11.5px;opacity:.8}#controls footer{margin-top:8px;padding-top:7px;border-top:1px solid var(--hud-border);font-size:9.5px;letter-spacing:.08em;opacity:.5}.status-chip{position:absolute;right:18px;top:18px;display:flex;align-items:center;gap:8px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:999px;padding:7px 14px;font-size:11px;letter-spacing:.16em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}.status-chip__key{border:1px solid var(--hud-border);border-radius:5px;padding:1px 6px;font-weight:700;color:#9fd8ff}#camera-mode{color:#9fd8ff}#mute-chip{top:58px}#mute-mode{color:#9fd8ff}#perf-chip{top:98px}#perf-chip strong{color:#9fd8ff}.status-chip--hidden{display:none}#telemetry{position:absolute;right:18px;bottom:18px;display:flex;align-items:flex-end;gap:14px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:12px;padding:12px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none}.speedometer{display:flex;flex-direction:column;align-items:center;line-height:1}.speedometer strong{font-family:var(--font-display);font-size:36px;font-weight:900;font-variant-numeric:tabular-nums}.speedometer span{font-size:9px;letter-spacing:.28em;opacity:.55;margin-top:3px}.boost-gauge{width:150px}.boost-gauge__header{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.22em;margin-bottom:5px}.boost-gauge__header strong{color:#ffd23d}.boost-gauge__track{height:10px;border-radius:999px;background:#ffffff14;overflow:hidden;border:1px solid rgba(255,255,255,.1)}.boost-gauge__fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#ffb300,#ffd23d);transition:width .08s linear}.boost-gauge__fill--low{background:linear-gradient(90deg,#ff5f3d,#ff8a3d)}#p2-telemetry{position:absolute;right:18px;bottom:92px;width:208px;background:var(--hud-bg);border:1px solid var(--hud-border);border-radius:12px;padding:10px 16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none;transition:opacity .25s ease}#p2-telemetry.telemetry--hidden{opacity:0;pointer-events:none}#p2-telemetry .boost-gauge{width:100%}.boost-gauge__fill--p2{background:linear-gradient(90deg,#ff8a3d,#ffb056)}#focus-hint{position:absolute;bottom:22px;left:50%;transform:translate(-50%);font-size:12px;letter-spacing:.12em;padding:8px 16px;border-radius:999px;background:var(--hud-bg);border:1px solid var(--hud-border);opacity:.85;transition:opacity .4s ease;-webkit-user-select:none;user-select:none}#focus-hint.hidden{opacity:0}#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 62%,rgba(2,4,10,.55) 100%)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#040810a8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;cursor:pointer;transition:opacity .3s ease}.overlay--hidden{opacity:0;pointer-events:none}.overlay__panel{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:46px 64px;border:1px solid var(--hud-border);border-radius:22px;background:#080d18d1;box-shadow:0 30px 80px #0000008c}.overlay__eyebrow{font-size:12px;letter-spacing:.5em;color:#9fd8ff}.overlay h1{font-family:var(--font-display);font-size:58px;font-weight:900;letter-spacing:.04em;background:linear-gradient(180deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.overlay__sub{font-size:15px;letter-spacing:.12em;opacity:.8}.overlay__cta{margin-top:8px;padding:14px 44px;font-size:17px;font-weight:800;letter-spacing:.28em;border:1px solid rgba(120,200,255,.55);border-radius:999px;color:#cfeeff;animation:cta-pulse 1.8s ease-in-out infinite}@keyframes cta-pulse{0%,to{box-shadow:0 0 #50b4ff00}50%{box-shadow:0 0 26px #50b4ff73}}.overlay__hint{max-width:520px;font-size:11.5px;letter-spacing:.08em;line-height:1.7;opacity:.55}#replay-chip{position:absolute;top:84px;left:18px;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--hud-bg);border:1px solid rgba(255,120,120,.4);font-family:var(--font-display);font-size:13px;letter-spacing:.3em;color:#ffd7d7;opacity:0;transition:opacity .25s ease;-webkit-user-select:none;user-select:none}#replay-chip.visible{opacity:1}.replay-chip__dot{width:9px;height:9px;border-radius:50%;background:#ff4d4d;animation:replay-blink .9s ease-in-out infinite}@keyframes replay-blink{0%,to{opacity:1}50%{opacity:.25}}.letterbox{position:absolute;left:0;right:0;height:0;background:#02040a;transition:height .45s cubic-bezier(.6,0,.3,1);z-index:5;pointer-events:none}#letterbox-top{top:0}#letterbox-bottom{bottom:0}.letterbox.visible{height:6.5vh}#ball-indicator{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;opacity:0;transition:opacity .18s ease;pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}.overlay__difficulty{display:flex;gap:10px}.difficulty-btn{padding:8px 22px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.22em;color:var(--text);background:transparent;border:1px solid var(--hud-border);border-radius:999px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.difficulty-btn:hover{border-color:#78c8ff99}.difficulty-btn--active{background:#50b4ff2e;border-color:#78c8ffcc;color:#cfeeff}.overlay__record{font-size:11px;letter-spacing:.24em;color:#ffd23d;min-height:14px;opacity:.9}