*{margin:0;padding:0;box-sizing:border-box}
:root{--pink:#ff2a6d;--cyan:#05ffa1;--blue:#00c2ff;--bg:#0b0618}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:Inter,system-ui,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 62%,rgba(20,40,80,.28) 100%);z-index:5}
#flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;z-index:6;transition:opacity .3s}
/* HUD */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10;font-family:Orbitron,monospace}
#hud-top-left{position:absolute;top:18px;left:18px;display:flex;flex-direction:column;gap:8px}
#lap-box{background:rgba(10,5,30,.62);border:1px solid rgba(255,42,109,.5);backdrop-filter:blur(8px);border-radius:12px;padding:10px 16px;display:flex;gap:16px;align-items:baseline;box-shadow:0 0 24px rgba(255,42,109,.25)}
#lap{font-weight:900;font-size:18px;letter-spacing:1px}
#time{font-size:14px;opacity:.85}
#pos-box{font-size:34px;font-weight:900;background:linear-gradient(135deg,#ff2a6d,#ff9a00);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,42,109,.6))}
#pos-total{font-size:18px}
#best-box{font-size:11px;letter-spacing:2px;opacity:.8}
#hud-top-right{position:absolute;top:18px;right:18px}
#minimap{background:rgba(8,4,24,.72);border:1px solid rgba(5,255,161,.4);border-radius:50%;box-shadow:0 0 24px rgba(5,255,161,.25)}
#hud-bottom-right{position:absolute;right:22px;bottom:20px;text-align:right}
#speed-box{font-size:56px;font-weight:900;line-height:1;text-shadow:0 0 24px rgba(0,194,255,.7)}
#speed-box .unit{font-size:14px;margin-left:8px;opacity:.7}
#nitro-wrap{margin-top:8px;width:220px;margin-left:auto;background:rgba(255,255,255,.08);border-radius:99px;height:22px;position:relative;overflow:hidden;border:1px solid rgba(0,194,255,.5)}
#nitro-bar{height:100%;width:100%;background:linear-gradient(90deg,#00c2ff,#05ffa1,#ffea00);box-shadow:0 0 16px #00c2ff;transition:width .1s linear}
#nitro-wrap span{position:absolute;inset:0;font-size:10px;display:flex;align-items:center;justify-content:center;letter-spacing:2px;text-shadow:0 1px 4px #000}
#boost-hint{font-size:10px;letter-spacing:2px;opacity:.6;margin-top:6px}
#hud-bottom-left{position:absolute;left:22px;bottom:20px}
#drift-bar-wrap{width:200px;height:10px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;border:1px solid rgba(255,234,0,.5)}
#drift-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff2a6d,#ffea00);box-shadow:0 0 12px #ffea00}
#msg-small{font-size:10px;opacity:.6;margin-top:6px;letter-spacing:1px;font-family:Inter}
#center-msg{position:absolute;top:28%;width:100%;text-align:center;font-size:52px;font-weight:900;letter-spacing:4px;text-shadow:0 0 30px var(--pink),0 4px 0 #000;opacity:0;transform:scale(.8);transition:all .25s}
#center-msg.show{opacity:1;transform:scale(1)}
#wrongway{position:absolute;top:18%;width:100%;text-align:center;font-size:38px;font-weight:900;color:#ff2222;animation:blink .5s infinite alternate;text-shadow:0 0 20px #f00}
@keyframes blink{from{opacity:1}to{opacity:.3}}
/* touch */
#touch{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:0 18px 90px;z-index:11;pointer-events:none}
#touch button{pointer-events:auto;width:72px;height:72px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff;font-size:24px;font-weight:900}
#touch .t-left,#touch .t-right{display:flex;gap:12px}
/* menu */
#menu{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 120%,rgba(255,255,255,.35),transparent 60%),radial-gradient(ellipse at 50% -20%,rgba(255,255,255,.30),transparent 60%),rgba(20,40,80,.30);backdrop-filter:blur(2px)}
.menu-bg-glow{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.015) 3px 4px);pointer-events:none}
#menu h1{font-family:Orbitron;font-size:clamp(42px,8vw,84px);font-weight:900;letter-spacing:4px;background:linear-gradient(180deg,#fff 10%,#ff9ac1 35%,#ff2a6d 55%,#7b2ff7 80%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(20,30,60,.6)) drop-shadow(0 0 26px rgba(255,255,255,.7))}
#menu h1 span{background:linear-gradient(180deg,#fff,#05ffa1);-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{font-family:Orbitron;font-size:12px;letter-spacing:4px;opacity:.95;margin:6px 0 22px;color:#0a2a4a;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.menu-card{background:rgba(12,6,32,.78);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px 26px;min-width:min(440px,92vw);box-shadow:0 20px 80px rgba(0,0,0,.6),0 0 40px rgba(123,47,247,.25)}
.row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.row label{font-family:Orbitron;font-size:11px;letter-spacing:2px;opacity:.7}
#colors{display:flex;gap:8px}
#colors button{width:32px;height:32px;border-radius:50%;background:var(--c);border:2px solid transparent;cursor:pointer;box-shadow:0 0 12px var(--c)}
#colors button.sel,#diffs button.sel,#cams button.sel{border-color:#fff;transform:scale(1.15)}
#diffs,#cams{display:flex;gap:8px}
.rivals-note{font-family:Orbitron;font-size:13px;font-weight:700;letter-spacing:2px;color:#ffea00;text-shadow:0 0 14px rgba(255,234,0,.55);padding:8px 4px}
#diffs button,#cams button{font-family:Orbitron;font-size:11px;letter-spacing:1px;padding:8px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
#start-btn{width:100%;margin-top:6px;padding:16px;border:0;border-radius:14px;font-family:Orbitron;font-weight:900;font-size:18px;letter-spacing:2px;color:#06121f;cursor:pointer;background:linear-gradient(90deg,#05ffa1,#00c2ff,#ffea00);box-shadow:0 0 30px rgba(5,255,161,.5);transition:transform .15s}
#start-btn:hover{transform:scale(1.02)}
.controls-hint{font-size:11px;line-height:1.6;opacity:.55;margin-top:12px;text-align:center}
#loading{margin-top:14px;font-family:Orbitron;font-size:11px;letter-spacing:2px;opacity:.6}
#countdown{position:absolute;inset:0;z-index:15;display:flex;align-items:center;justify-content:center;font-family:Orbitron;font-size:120px;font-weight:900;text-shadow:0 0 60px var(--pink)}
#pause,#finish{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(5,2,16,.78);backdrop-filter:blur(8px)}
#pause h2,#finish h2{font-family:Orbitron;font-size:54px;font-weight:900;letter-spacing:4px}
#finish-table{margin:18px 0;min-width:min(420px,90vw);font-family:Orbitron;font-size:14px}
#finish-table .frow{display:flex;justify-content:space-between;padding:10px 16px;border-radius:10px;background:rgba(255,255,255,.06);margin-bottom:8px;border:1px solid rgba(255,255,255,.08)}
#finish-table .frow.you{border-color:var(--pink);background:rgba(255,42,109,.15);box-shadow:0 0 20px rgba(255,42,109,.3)}
.finish-btns{display:flex;gap:12px}
.finish-btns button,#resume-btn{font-family:Orbitron;padding:12px 26px;border-radius:12px;border:0;font-weight:800;letter-spacing:1px;cursor:pointer;margin-top:12px}
#restart-btn,#resume-btn{background:linear-gradient(90deg,#ff2a6d,#ff9a00);color:#fff}
#menu-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2)!important}
@media(max-width:700px){#speed-box{font-size:38px}#minimap{width:120px!important;height:120px!important}#center-msg{font-size:32px}}