@import 'https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap';:root{--bg:#02020a;--surface:rgba(11, 11, 30, 0.7);--border:rgba(26, 26, 68, 0.85);--glow-cyan:#00f0dc;--glow-magenta:#ff00b4;--glow-violet:#a000ff;--glow-yellow:#ffe600;--glow-red:#ff2500;--text-primary:#e2e2ff;--text-muted:#6d6d9e;--accent:#00f0dc}*{box-sizing:border-box;margin:0;padding:0}body{font-family:outfit,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text-primary);min-height:100vh;padding:20px 16px;overflow-x:hidden;position:relative;background-image:linear-gradient(rgba(0,240,220,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,220,.015) 1px,transparent 1px);background-size:32px 32px}.glow-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;background:radial-gradient(circle at 15% 15%,rgba(160,0,255,7%) 0%,transparent 45%),radial-gradient(circle at 85% 85%,rgba(255,0,180,7%) 0%,transparent 45%);z-index:-1}main{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:16px}header{text-align:center;margin-bottom:8px}h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:700;letter-spacing:.16em;background:linear-gradient(90deg,var(--glow-cyan),var(--glow-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 12px rgba(0,240,220,.45));text-transform:uppercase;margin-bottom:4px}.subtitle{color:var(--text-muted);font-size:clamp(.72rem,2vw,.85rem);letter-spacing:.12em;font-weight:600;text-transform:uppercase}.dashboard{background:var(--surface);border:1px solid var(--border);border-radius:12px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 20px;box-shadow:0 8px 32px rgba(0,0,0,.45);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}.control-group{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.font-hud{font-family:monospace}.hud-item{display:flex;flex-direction:column;gap:4px;min-width:140px}.score-container{min-width:110px}.hud-label{font-size:.72rem;font-weight:700;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase}.hud-value{font-size:1.3rem;font-weight:700;letter-spacing:.05em}.hud-label-row{display:flex;justify-content:space-between;align-items:baseline}.neon-text-cyan{color:var(--glow-cyan);text-shadow:0 0 8px rgba(0,240,220,.6)}.neon-text-magenta{color:var(--glow-magenta);text-shadow:0 0 8px rgba(255,0,180,.6)}.shield-bar-bg{width:100%;height:10px;background:rgba(10,10,25,.8);border:1px solid var(--border);border-radius:5px;overflow:hidden;position:relative}.shield-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--glow-cyan),var(--glow-magenta));box-shadow:0 0 8px var(--glow-magenta);transition:width .15s ease-out,background .3s,box-shadow .3s}.shield-bar-fill.warning{background:linear-gradient(90deg,var(--glow-yellow),var(--glow-magenta));box-shadow:0 0 8px var(--glow-magenta)}.shield-bar-fill.critical{background:var(--glow-red);box-shadow:0 0 10px var(--glow-red)}button{font-family:inherit;font-size:.8rem;font-weight:600;letter-spacing:.04em;padding:8px 16px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn-icon{font-size:.95rem}#audioToggleButton{border:1px solid var(--glow-magenta);background:0 0;color:var(--glow-magenta)}#audioToggleButton:hover{background:rgba(255,0,180,.1);box-shadow:0 0 14px rgba(255,0,180,.45);color:#fff}#audioToggleButton.playing{background:rgba(255,0,180,.2);box-shadow:0 0 20px rgba(255,0,180,.8);color:#fff;border-color:#fff;animation:neon-pulse 1.8s infinite alternate}@keyframes neon-pulse{0%{box-shadow:0 0 10px rgba(255,0,180,.5),inset 0 0 5px rgba(255,0,180,.3)}100%{box-shadow:0 0 24px rgba(255,0,180,.9),inset 0 0 10px rgba(255,0,180,.5)}}#themeButton{border:1px solid var(--glow-cyan);background:0 0;color:var(--glow-cyan)}#themeButton:hover{background:rgba(0,240,220,.1);box-shadow:0 0 14px rgba(0,240,220,.45);color:#fff}#trackButton{border:1px solid var(--glow-violet);background:0 0;color:var(--glow-violet)}#trackButton:hover{background:rgba(160,0,255,.1);box-shadow:0 0 14px rgba(160,0,255,.45);color:#fff}.volume-control{display:flex;align-items:center;gap:8px;background:rgba(8,8,20,.8);border:1px solid var(--border);padding:4px 12px;border-radius:6px;height:38px}.volume-control span{font-size:.78rem;font-weight:600;color:var(--glow-magenta);min-width:60px;text-align:left}input[type=range]{-webkit-appearance:none;appearance:none;width:80px;height:5px;border-radius:3px;background:#111126;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--glow-magenta);box-shadow:0 0 6px var(--glow-magenta);cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.25)}.viewport-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:10px;box-shadow:0 0 32px rgba(0,240,220,5%);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;max-width:100%}.loading-pulse{color:var(--text-muted);font-size:.9rem;letter-spacing:.12em;padding:60px;font-weight:600;animation:pulse 1.5s infinite alternate}@keyframes pulse{0%{opacity:.3}100%{opacity:.85}}.canvas-viewport{max-width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}canvas{max-width:100%;height:auto;display:block;border-radius:8px;image-rendering:pixelated;border:1px solid rgba(255,0,180,8%);box-shadow:0 8px 30px rgba(0,0,0,.55)}.off-track-flash-element{position:absolute;top:10px;left:10px;right:10px;bottom:10px;border-radius:8px;pointer-events:none;z-index:10;border:0 solid transparent;transition:border-width .15s,border-color .15s}.off-track-flash-element.danger-flash{border:6px solid var(--glow-red);box-shadow:inset 0 0 20px rgba(255,37,0,.35);animation:hazard-flash .5s infinite alternate}@keyframes hazard-flash{0%{border-color:rgba(255,37,0,.4);box-shadow:inset 0 0 10px rgba(255,37,0,.15)}100%{border-color:#ff2500;box-shadow:inset 0 0 30px rgba(255,37,0,.55)}}.game-over-modal{position:absolute;top:10px;left:10px;right:10px;bottom:10px;background:rgba(2,2,8,.85);border-radius:8px;display:flex;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fade-in .4s cubic-bezier(.1,.8,.25,1)}@keyframes fade-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.modal-content{text-align:center;padding:30px 40px;border:1px solid rgba(255,37,0,.25);border-radius:12px;background:rgba(20,5,5,.55);box-shadow:0 0 30px rgba(255,37,0,.15)}.neon-alert-text{font-size:2.2rem;font-weight:700;letter-spacing:.1em;color:var(--glow-red);text-shadow:0 0 16px var(--glow-red);margin-bottom:8px;text-transform:uppercase}.modal-sub{font-size:.85rem;color:var(--text-muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}.btn-restart{font-family:inherit;font-size:.95rem;font-weight:700;letter-spacing:.1em;padding:12px 28px;border-radius:8px;border:1px solid var(--glow-cyan);background:0 0;color:var(--glow-cyan);box-shadow:0 0 10px rgba(0,240,220,.2);margin:0 auto;text-transform:uppercase;animation:pulse-cyan 1.5s infinite}@keyframes pulse-cyan{0%{box-shadow:0 0 8px rgba(0,240,220,.3)}50%{box-shadow:0 0 18px rgba(0,240,220,.7);transform:scale(1.02)}100%{box-shadow:0 0 8px rgba(0,240,220,.3)}}.btn-restart:hover{background:rgba(0,240,220,.15);color:#fff;box-shadow:0 0 24px var(--glow-cyan)}.touch-steering-zones{position:absolute;top:10px;left:10px;right:10px;bottom:10px;display:flex;z-index:15;pointer-events:auto}.steer-zone{flex:1;height:100%;cursor:pointer;transition:background .15s;opacity:0;position:relative}.left-zone:hover{background:linear-gradient(90deg,rgba(0,240,220,4%) 0%,transparent 60%)}.right-zone:hover{background:linear-gradient(270deg,rgba(255,0,180,4%) 0%,transparent 60%)}.left-zone::before{content:'◀';position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:2rem;color:var(--glow-cyan);text-shadow:0 0 8px var(--glow-cyan);opacity:0;transition:opacity .25s,transform .25s}.left-zone:hover::before{opacity:.55;transform:translateY(-50%)scale(1.1)}.right-zone::before{content:'▶';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:2rem;color:var(--glow-magenta);text-shadow:0 0 8px var(--glow-magenta);opacity:0;transition:opacity .25s,transform .25s}.right-zone:hover::before{opacity:.55;transform:translateY(-50%)scale(1.1)}footer{text-align:center;color:var(--text-muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;margin-top:8px;opacity:.75}@media(max-width:680px){.dashboard{flex-direction:column;align-items:stretch;gap:12px;padding:12px}.control-group{justify-content:space-between}.hud-item{flex-grow:1}}@media(max-width:768px){.dashboard,.game-over-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(11,11,30,.96)!important}}