:root{
  color-scheme: dark; --bg:#0b1220; --panel:#0c1528; --soft:#111b33; --text:#e8f0ff; --muted:#9fb0d6;
  --acc:#27c9ff; --acc2:#ff3355; --ok:#66ff8a; --warn:#ffd028;
}
*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{background:linear-gradient(180deg,#08101f,#0b1220 55%,#0a1122);color:var(--text);font:14px/1.3 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}

/* Screens */
.screen{position:fixed;inset:0;display:none;align-items:center;justify-content:center}
.screen.active{display:flex}
.screen-menu .logo{font-size:56px;font-weight:900;letter-spacing:.5px;text-shadow:0 6px 24px #0009}
.screen-menu .logo span{color:var(--acc)}
.menu-cards{display:flex;gap:14px;justify-content:center;margin:16px 0}
.tracks{display:grid;grid-template-columns:repeat(3, minmax(220px, 1fr));gap:12px;max-width:980px}
.track-card{background:var(--panel);border:1px solid #ffffff14;border-radius:16px;padding:14px;box-shadow:0 10px 30px #0007;cursor:pointer}
.track-card:hover{outline:2px solid #ffffff22}
.tname{font-weight:800;margin-bottom:6px}
.stars{color:var(--warn)}
.meta{color:var(--muted)}

.card{background:var(--panel);border:1px solid #ffffff14;border-radius:18px;padding:18px;box-shadow:0 12px 36px #0009;min-width:300px}
.h{font-weight:900;font-size:20px;margin-bottom:12px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.gap{gap:12px}
.btn{background:linear-gradient(180deg,#182746,#0f1a33);border:1px solid #ffffff22;border-radius:14px;color:#e8f0ff;padding:10px 14px;cursor:pointer;box-shadow:0 6px 20px #0007}
.btn:hover{filter:brightness(1.06)}
.btn.xl{font-size:16px;font-weight:800;padding:12px 18px}
.icon{background:#0000;border:0;color:#fff;font-size:18px;cursor:pointer}

/* Car select */
.screen-car .panel{position:relative;max-width:900px;width:90%;}
.cars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0}
.car-card{background:var(--panel);border:1px solid #ffffff14;border-radius:12px;padding:10px;cursor:pointer}
.car-card.selected{outline:2px solid var(--acc)}
.car-name{font-weight:800;margin-bottom:8px}
.specs{font-size:12px;color:var(--muted)}
.colors{display:flex;gap:10px;margin:10px 0}
.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #ffffff55;cursor:pointer}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;display:none}
.hud.active{display:block}
.hud-top-left{position:fixed;top:12px;left:12px;background:#0006;border:1px solid #ffffff2a;border-radius:12px;padding:8px 10px;backdrop-filter:blur(4px)}
.hud-top-right{position:fixed;top:12px;right:12px;background:#0006;border:1px solid #ffffff2a;border-radius:12px;padding:8px;backdrop-filter:blur(4px)}
.hud-bottom{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;display:flex;align-items:center;gap:14px;background:#0006;border:1px solid #ffffff2a;border-radius:16px;padding:8px 12px;backdrop-filter:blur(4px)}
.speed{font-weight:900;font-size:34px;min-width:96px;text-align:center}
.mini-bar{display:flex;gap:8px}
.mini{pointer-events:auto;background:#0000;color:#fff;border:1px solid #ffffff50;border-radius:10px;padding:6px 10px}
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:#0009;border:1px solid #ffffff33;border-radius:12px;padding:8px 12px;display:none}
.toast.show{display:block}

/* Touch HUD */
.touch{position:fixed;inset:0;display:none;pointer-events:none}
.touch .pad{position:absolute}
.touch .steer{left:12px;bottom:60px;display:flex;gap:8px}
.touch .throttle{right:12px;bottom:24px}
.touch .brake{left:12px;bottom:24px}
.touch .handbrake{right:120px;bottom:24px}
.tbtn{pointer-events:auto;background:linear-gradient(180deg,#1a2748,#0f1b33);border:1px solid #ffffff3a;border-radius:14px;color:#fff;padding:10px 12px;min-width:58px}
.tbtn.big{padding:16px 24px;min-width:120px}

/* Overlays */
.overlay{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center}
.overlay.show{display:flex}

/* Pops */
.credits-pop,.options-pop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#0007}
.credits-pop.show,.options-pop.show{display:flex}
.switch{display:flex;align-items:center;gap:10px}

/* Accessibility */
@media (max-width:920px){
  .tracks{grid-template-columns:1fr}
}