:root{--neon-cyan: #33e1ff;--neon-magenta: #ff2bd6;--bg: #05060a}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:#eaf6ff;font-family:system-ui,-apple-system,Segoe UI,sans-serif}#app{position:fixed;top:0;right:0;bottom:0;left:0}canvas{position:absolute;top:0;right:0;bottom:0;left:0}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;pointer-events:none}.overlay>*{pointer-events:auto}.panel{text-align:center;padding:2rem 2.5rem;background:#0508108c;border:1px solid rgba(51,225,255,.25);border-radius:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.title{margin:0 0 .25rem;font-size:clamp(2rem,7vw,4rem);font-weight:800;letter-spacing:.12em;color:var(--neon-cyan);text-shadow:0 0 18px rgba(51,225,255,.7),0 0 42px rgba(255,43,214,.35)}.subtitle{margin:0 0 1.5rem;opacity:.6;font-size:.85rem}.btn{pointer-events:auto;cursor:pointer;font:inherit;font-weight:700;letter-spacing:.1em;color:var(--bg);background:var(--neon-cyan);border:0;border-radius:999px;padding:.7rem 2.2rem;box-shadow:0 0 24px #33e1ff99;transition:transform .08s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 0 34px #33e1ffe6}.btn:active{transform:translateY(0) scale(.98)}.btn-secondary{background:transparent;color:var(--neon-cyan);border:1px solid var(--neon-cyan);box-shadow:none;margin-top:.5rem}.btn-secondary:hover{background:#33e1ff1a;box-shadow:0 0 16px #33e1ff66}.btn:disabled{opacity:.25;cursor:default;pointer-events:none;transform:none;box-shadow:none}.intro-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#03040ad1;display:grid;place-items:center;z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:introFadeIn .25s ease}@keyframes introFadeIn{0%{opacity:0}to{opacity:1}}.intro-modal{width:min(560px,92vw);max-height:90vh;overflow-y:auto;background:#050812f5;border:1px solid rgba(51,225,255,.3);border-radius:16px;padding:2rem 2.2rem 1.6rem;display:flex;flex-direction:column;align-items:center;gap:.8rem;box-shadow:0 0 60px #33e1ff1f,inset 0 0 40px #ff2bd60a}.intro-progress{display:flex;gap:.45rem}.intro-pip{width:8px;height:8px;border-radius:50%;background:#33e1ff40;transition:background .2s}.intro-pip.active{background:var(--neon-cyan);box-shadow:0 0 8px var(--neon-cyan)}.intro-icon{width:80px;height:80px}.intro-icon svg{width:100%;height:100%}.intro-title{margin:0;font-size:clamp(1.3rem,4vw,1.9rem);font-weight:800;letter-spacing:.1em;color:var(--neon-cyan);text-shadow:0 0 14px rgba(51,225,255,.6);text-align:center}.intro-body{font-size:.88rem;line-height:1.6;color:#dcf0ffd9;text-align:left;width:100%}.intro-body p{margin:0 0 .5rem}.intro-body b{color:#eaf6ff}.intro-controls{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin-top:.6rem}.ctrl-row{display:contents}.key{display:inline-block;background:#33e1ff1f;border:1px solid rgba(51,225,255,.35);border-radius:5px;padding:.1rem .55rem;font-size:.8rem;color:var(--neon-cyan);white-space:nowrap;text-align:center}.intro-list{margin:.4rem 0 0;padding-left:1.3rem}.intro-list li{margin-bottom:.35rem}.intro-items{width:100%;display:flex;flex-direction:column;gap:.7rem}.intro-item{display:flex;align-items:flex-start;gap:.75rem;background:#ffffff08;border-radius:8px;padding:.55rem .7rem;border:1px solid rgba(255,255,255,.06)}.dot{display:inline-block;flex-shrink:0;width:14px;height:14px;border-radius:50%;margin-top:.2rem}.hazard-icon{flex-shrink:0;width:36px;height:36px}.intro-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem;width:100%}.results{display:grid;grid-template-columns:auto auto;gap:.35rem 1.5rem;margin:0 auto 1.5rem;width:fit-content;font-variant-numeric:tabular-nums}.results dt{text-align:right;opacity:.6}.results dd{margin:0;text-align:left;color:var(--neon-cyan)}.hud{position:absolute;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:.75rem;align-items:center;cursor:pointer}.hud-tag{font-weight:800;letter-spacing:.15em;color:var(--neon-magenta);text-shadow:0 0 12px rgba(255,43,214,.6)}.hud-hint{opacity:.55;font-size:.8rem}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 75% 65% at 50% 50%,transparent 40%,rgba(10,4,24,.55) 78%,rgba(4,2,12,.92) 100%)}.raceinfo{position:absolute;top:max(1rem,env(safe-area-inset-top));left:max(1.5rem,env(safe-area-inset-left));display:flex;gap:1.4rem;font-variant-numeric:tabular-nums}.raceinfo .stat{display:flex;flex-direction:column;line-height:1.05}.raceinfo label{font-size:.65rem;letter-spacing:.18em;opacity:.5}.raceinfo span{font-size:1.5rem;font-weight:800;color:var(--neon-cyan)}.raceinfo small{font-size:.8rem;opacity:.55;font-weight:600}.banner{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-weight:800;letter-spacing:.08em;color:#fff;text-shadow:0 0 24px rgba(51,225,255,.8),0 0 60px rgba(255,43,214,.5);opacity:0;pointer-events:none}.banner.show{animation:banner-pop 1s ease-out forwards}.banner.count{font-size:clamp(4rem,16vw,11rem)}.banner.go{font-size:clamp(4rem,16vw,11rem);color:var(--neon-cyan)}.banner.lap{font-size:clamp(2rem,7vw,4rem)}.banner.finish{font-size:clamp(3rem,11vw,7rem);color:var(--neon-magenta);animation-duration:2.6s}@keyframes banner-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.85)}}.flash{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0}.flash.show{animation:flash-fade .6s ease-out forwards}.flash.lap{background:radial-gradient(ellipse at center,rgba(51,225,255,.35),transparent 70%)}.flash.win{background:radial-gradient(ellipse at center,rgba(255,43,214,.45),transparent 75%);animation-duration:1.1s}@keyframes flash-fade{0%{opacity:1}to{opacity:0}}.energy{position:absolute;left:max(1.5rem,env(safe-area-inset-left));bottom:max(1.6rem,env(safe-area-inset-bottom));width:min(38vw,320px);height:14px;border:1px solid rgba(51,225,255,.4);border-radius:999px;overflow:hidden;background:#05081080}.energy i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--neon-magenta),var(--neon-cyan));box-shadow:0 0 14px #33e1ff99;transition:width .08s linear}.energy.low{border-color:#ff3c3ce6;animation:energy-warn .45s ease-in-out infinite alternate;transform-origin:left center}.energy.low i{background:linear-gradient(90deg,#ff2b2b,#ff7a2b);box-shadow:0 0 20px #ff2b2be6}@keyframes energy-warn{0%{opacity:1;transform:scaleY(1);box-shadow:0 0 #ff2b2b00}to{opacity:.55;transform:scaleY(1.35);box-shadow:0 0 0 4px #ff2b2b59}}.minimap{position:absolute;inset:auto;top:max(1rem,env(safe-area-inset-top));right:max(1.2rem,env(safe-area-inset-right));background:#05081073;border:1px solid rgba(51,225,255,.25);border-radius:10px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.speedo{position:absolute;right:max(1.5rem,env(safe-area-inset-right));bottom:max(1.5rem,env(safe-area-inset-bottom));display:flex;align-items:baseline;gap:.3rem;font-variant-numeric:tabular-nums;color:var(--neon-cyan);text-shadow:0 0 16px rgba(51,225,255,.6)}.speedo [data-speed]{font-size:3rem;font-weight:800;letter-spacing:.02em}.speedo small{font-size:.9rem;opacity:.6}.intro-touch-hint{display:flex;width:100%;gap:.4rem;margin-top:.6rem}.touch-zone-l,.touch-zone-r,.touch-zone-b{flex:1;text-align:center;padding:.55rem .3rem;border-radius:8px;font-size:.75rem;font-weight:700;letter-spacing:.06em}.touch-zone-l,.touch-zone-r{background:#33e1ff1a;border:1px solid rgba(51,225,255,.3);color:var(--neon-cyan)}.touch-zone-b{background:#ff2bd61a;border:1px solid rgba(255,43,214,.3);color:var(--neon-magenta);flex:.8}@media (hover: none) and (pointer: coarse){.touch-boost{position:absolute;bottom:max(4.5rem,env(safe-area-inset-bottom) + 3rem);left:50%;transform:translate(-50%);z-index:50;pointer-events:auto;cursor:pointer;font:inherit;font-weight:800;font-size:1.1rem;letter-spacing:.15em;color:var(--bg);background:var(--neon-magenta);border:0;border-radius:999px;padding:.9rem 2.6rem;box-shadow:0 0 28px #ff2bd6b3;touch-action:none;-webkit-user-select:none;user-select:none}.touch-boost:active{transform:translate(-50%) scale(.95);box-shadow:0 0 14px #ff2bd666}#app:before,#app:after{content:"";position:absolute;top:0;bottom:0;width:40%;z-index:10;pointer-events:none;opacity:0;transition:opacity .15s}#app:before{left:0;background:linear-gradient(90deg,rgba(51,225,255,.08),transparent)}#app:after{right:0;background:linear-gradient(270deg,rgba(51,225,255,.08),transparent)}}