:root{
  --bg:#070a12; --ink:#eaf0ff; --dim:rgba(234,240,255,.55);
  --line:rgba(140,180,255,.16); --glass:rgba(10,16,30,.66);
  --accent:#39e0ff; --accent2:#ffd24a; --hot:#ff3b5c; --good:#6ef0a0;
  --font:'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:var(--font);user-select:none;-webkit-font-smoothing:antialiased}
canvas{display:block}
#game{position:fixed;inset:0}
.hidden{display:none !important}
button{font-family:var(--font);cursor:pointer;border:0;outline:0}

.card{background:var(--glass);border:1px solid var(--line);border-radius:14px;
  backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 8px 34px rgba(0,0,0,.45)}

/* ------------------------------- HUD ------------------------------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud>*{position:absolute}
#hudTopLeft{top:20px;left:20px;display:flex;gap:10px}
.stat{padding:9px 15px;min-width:88px;text-align:center}
.stat .v{font-size:29px;font-weight:800;font-style:italic;line-height:1.05;letter-spacing:.5px}
.stat .v sup{font-size:13px;font-weight:700;margin-left:1px}
.stat .l{font-size:9px;letter-spacing:3px;opacity:.55;margin-top:3px}
#posVal{color:var(--accent2)}
#boostCard .v{color:var(--accent)}
.stat .bar{height:4px;border-radius:3px;background:rgba(255,255,255,.14);margin-top:6px;overflow:hidden}
#boostFill{height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#1f8bff,var(--accent));
  box-shadow:0 0 12px var(--accent);transition:width .1s linear}
#hpFill{height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,#ff4b4b,#6ef0a0);
  transition:width .15s linear}

#hudTopRight{top:20px;right:20px;padding:8px;line-height:0}
#minimap{border-radius:8px}

#hudStandings{top:236px;right:20px;padding:9px 12px;font-size:11.5px;min-width:172px;letter-spacing:.4px}
#hudStandings .r{display:flex;justify-content:space-between;gap:12px;padding:2px 0;opacity:.72}
#hudStandings .r.me{opacity:1;color:var(--accent2);font-weight:700}
#hudStandings .r .g{font-variant-numeric:tabular-nums;opacity:.75}

#hudTimes{bottom:22px;left:20px;padding:10px 15px;font-size:13px;min-width:212px}
#hudTimes .row{display:flex;justify-content:space-between;gap:20px;padding:2px 0}
#hudTimes .lab{opacity:.5;letter-spacing:2px;font-size:10px;align-self:center}
#hudTimes .tv{font-variant-numeric:tabular-nums;font-weight:650}
#hudTimes .best{color:var(--good)}
#tDelta.up{color:var(--hot)} #tDelta.dn{color:var(--good)}

#hudSpeed{bottom:22px;right:22px;text-align:right}
#gearVal{font-size:16px;font-weight:800;color:var(--accent2);letter-spacing:2px}
#spdVal{font-size:66px;font-weight:900;font-style:italic;line-height:.92;letter-spacing:-1px;
  text-shadow:0 2px 26px rgba(57,224,255,.4)}
#spdUnit{font-size:11px;letter-spacing:5px;opacity:.5;margin-top:2px}
#rpmBar{width:236px;height:7px;border-radius:4px;background:rgba(255,255,255,.13);margin-top:10px;overflow:hidden}
#rpmFill{height:100%;width:0%;border-radius:4px;
  background:linear-gradient(90deg,#2ee88a 0%,var(--accent2) 62%,var(--hot) 100%);transition:width .05s linear}
#rpmBar.red #rpmFill{animation:redline .12s infinite alternate}
@keyframes redline{from{filter:brightness(1)}to{filter:brightness(1.75)}}

#driftTag{bottom:150px;right:24px;text-align:right;opacity:0;transition:opacity .15s}
#driftTag span{font-size:34px;font-weight:900;font-style:italic;color:var(--accent);
  text-shadow:0 0 22px rgba(57,224,255,.65)}
#driftTag em{display:block;font-size:15px;font-weight:800;color:var(--accent2);font-style:italic;letter-spacing:2px}
#driftBank{bottom:120px;right:24px;font-size:13px;letter-spacing:2px;opacity:.65}

#centerMsg{top:20%;left:50%;transform:translateX(-50%);text-align:center;font-size:44px;
  font-weight:900;font-style:italic;letter-spacing:2px;opacity:0;transition:opacity .3s;
  text-shadow:0 4px 26px rgba(0,0,0,.7);white-space:nowrap}
#countdown{top:32%;left:50%;transform:translate(-50%,-50%);font-size:150px;font-weight:900;
  font-style:italic;color:var(--accent2);text-shadow:0 8px 40px rgba(0,0,0,.6);display:none}
#wrongWay{top:13%;left:50%;transform:translateX(-50%);font-size:32px;font-weight:900;color:var(--hot);
  letter-spacing:5px;display:none;animation:blink .5s infinite alternate}
@keyframes blink{from{opacity:1}to{opacity:.2}}
#hudHint{bottom:calc(50% - 260px);left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:3px;opacity:.4}

/* ------------------------------ LOADER ------------------------------ */
#loader{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(ellipse at 50% 40%,#101a33 0%,#05070d 70%)}
#splashImg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s;pointer-events:none}
#loader.art #splashImg{opacity:1}
#loaderScrim{position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
  background:linear-gradient(transparent,rgba(3,4,10,.88));opacity:0;transition:opacity .6s}
#loader.art #loaderScrim{opacity:1}
#loader.art .logo{opacity:0}
#loaderUi{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
#loader.art #loaderUi{position:absolute;bottom:6vh;left:0;right:0}
#loader.ready #loadBarOuter{opacity:0}
#loader.ready #loadTxt{font-size:16px;letter-spacing:6px;opacity:1;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.8);animation:pressme 1.1s ease-in-out infinite}
@keyframes pressme{0%,100%{opacity:1}50%{opacity:.35}}
.logo{font-size:46px;font-weight:900;font-style:italic;letter-spacing:-1px}
.logo span{color:var(--accent);text-shadow:0 0 30px rgba(57,224,255,.5)}
.logo b{color:var(--accent2);margin-left:6px}
#loadBarOuter{width:340px;height:5px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
#loadBar{height:100%;width:0%;background:linear-gradient(90deg,#1f8bff,var(--accent));
  box-shadow:0 0 16px var(--accent);transition:width .25s}
#loadTxt{font-size:11.5px;letter-spacing:3px;opacity:.5;text-transform:uppercase}

/* ------------------------------- MENU ------------------------------- */
#menu{position:fixed;inset:0;z-index:40;display:flex}
#menuGarage{position:absolute;inset:0}
#menuPanel{position:relative;margin-left:auto;width:min(430px,94vw);height:100%;
  padding:26px 26px 22px;overflow-y:auto;background:linear-gradient(200deg,rgba(9,13,25,.9),rgba(6,9,17,.97));
  border-left:1px solid var(--line);backdrop-filter:blur(14px);box-shadow:-20px 0 60px rgba(0,0,0,.5)}
#menuPanel::-webkit-scrollbar{width:6px}
#menuPanel::-webkit-scrollbar-thumb{background:rgba(140,180,255,.22);border-radius:4px}
.brand{font-size:27px;font-weight:900;font-style:italic;letter-spacing:-.5px;margin-bottom:18px}
.brand span{color:var(--accent)} .brand b{color:var(--accent2);margin-left:4px}
.brand em{display:block;font-size:9.5px;font-style:normal;letter-spacing:2.4px;opacity:.42;
  margin-top:6px;font-weight:500}

.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{background:none;color:var(--dim);font-size:11px;font-weight:800;letter-spacing:2px;
  padding:9px 11px;border-bottom:2px solid transparent;transition:.15s}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tabPane{display:none;animation:fadein .2s}
.tabPane.on{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.lab{font-size:9.5px;letter-spacing:3px;opacity:.42;margin:16px 0 8px;font-weight:700}
.lab:first-child{margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips.wide .chip{flex:1 1 45%}
.chip{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim);
  border-radius:9px;padding:8px 12px;font-size:11.5px;font-weight:700;letter-spacing:.8px;transition:.14s}
.chip:hover{background:rgba(255,255,255,.11);color:var(--ink)}
.chip.on{background:linear-gradient(180deg,rgba(57,224,255,.24),rgba(57,224,255,.1));
  border-color:var(--accent);color:#fff;box-shadow:0 0 16px rgba(57,224,255,.22)}
.chip small{display:block;font-size:9px;font-weight:500;opacity:.6;letter-spacing:1px;margin-top:2px}

.swatches{display:flex;flex-wrap:wrap;gap:7px}
.sw{width:30px;height:30px;border-radius:9px;border:2px solid rgba(255,255,255,.16);transition:.14s}
.sw:hover{transform:translateY(-2px)}
.sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(57,224,255,.55),0 0 18px rgba(57,224,255,.4)}

.statGrid{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin-top:12px;
  font-size:10.5px;letter-spacing:1.4px;align-items:center}
.statGrid .n{opacity:.5}
.statGrid .b{height:5px;border-radius:3px;background:rgba(255,255,255,.11);overflow:hidden}
.statGrid .b i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#1f8bff,var(--accent))}

.blurb{font-size:11px;line-height:1.6;opacity:.5;margin-top:10px}
.note{font-size:10.5px;line-height:1.65;opacity:.42;margin-top:14px}
.note b{opacity:.85}
.keys{font-size:10.5px;line-height:2;opacity:.5;margin-top:18px}
.keys b{display:inline-block;background:rgba(255,255,255,.09);border:1px solid var(--line);
  border-radius:4px;padding:1px 6px;font-size:10px;opacity:.95}

.toggles{display:flex;flex-direction:column;gap:1px}
.tg{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;
  font-size:11.5px;letter-spacing:1.2px;border-bottom:1px solid rgba(140,180,255,.07);cursor:pointer}
.tg em{font-style:normal;opacity:.55}
.tg i{width:34px;height:18px;border-radius:10px;background:rgba(255,255,255,.13);position:relative;transition:.16s}
.tg i:after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#8a99b5;transition:.16s}
.tg.on i{background:rgba(57,224,255,.35)}
.tg.on i:after{left:18px;background:var(--accent);box-shadow:0 0 10px var(--accent)}

#btnGo{width:100%;margin-top:26px;padding:15px;border-radius:12px;font-size:15px;font-weight:900;
  font-style:italic;letter-spacing:3px;color:#04121a;
  background:linear-gradient(100deg,var(--accent),#8ff0ff 55%,var(--accent2));
  box-shadow:0 10px 34px rgba(57,224,255,.3);transition:.15s}
#btnGo:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(57,224,255,.45)}
.credits{font-size:9px;letter-spacing:1.4px;opacity:.28;margin-top:14px;text-align:center}

/* --------------------------- RESULTS / PAUSE --------------------------- */
#results,#pause{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,14,.72);backdrop-filter:blur(7px)}
#results .card,#pause .card{padding:32px 38px;min-width:420px;text-align:center}
#results h2,#pause h2{font-size:30px;font-weight:900;font-style:italic;letter-spacing:2px;margin-bottom:20px}
#resTable{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:16px}
#resTable td{padding:7px 9px;border-bottom:1px solid rgba(140,180,255,.09);text-align:left}
#resTable tr.head td{font-size:9px;letter-spacing:2.4px;opacity:.4;border-bottom-color:rgba(140,180,255,.2)}
#resTable tr.me{color:var(--accent2);font-weight:800}
#resTable td.num{font-variant-numeric:tabular-nums;text-align:right}
#resExtra{font-size:12px;opacity:.6;margin-bottom:18px;line-height:1.8}
.btnRow{display:flex;gap:10px;justify-content:center}
.btnRow button{padding:12px 22px;border-radius:10px;font-size:12px;font-weight:800;letter-spacing:2px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--ink);transition:.15s}
.btnRow button:hover{background:rgba(57,224,255,.18);border-color:var(--accent)}
.btnRow button:first-child{background:linear-gradient(100deg,var(--accent),#8ff0ff);color:#04121a}

#fpsTag{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:30;font-size:10px;
  letter-spacing:2px;opacity:.35;pointer-events:none;font-variant-numeric:tabular-nums}

/* --------------------------- intro cinematics --------------------------- */
body.cine #hudTopLeft, body.cine #hudTopRight, body.cine #hudStandings,
body.cine #hudTimes, body.cine #hudSpeed, body.cine #driftTag, body.cine #fpsTag {
  opacity: 0; transition: opacity .35s;
}
body.cine::before, body.cine::after {
  content: ''; position: fixed; left: 0; right: 0; height: 9vh; background: #000;
  z-index: 40; pointer-events: none; animation: cinebars .5s ease-out;
}
body.cine::before { top: 0 }
body.cine::after { bottom: 0 }
@keyframes cinebars { from { height: 0 } }
body.cine #centerMsg { top: 76%; font-size: 26px; letter-spacing: 5px; }
body.cine #hudHint { bottom: calc(9vh + 14px); opacity: .55; z-index: 41; }

/* ---------- the car radio: a tunable dial in the HUD ---------------------- */
#hudRadio{top:372px;right:20px;width:196px;padding:9px 10px 8px;pointer-events:auto;
  user-select:none;display:flex;flex-direction:column;gap:6px}
#hudRadio .rdTop{display:flex;align-items:center;justify-content:space-between}
#hudRadio .rdBand{font-size:9px;letter-spacing:2px;opacity:.55;font-weight:700}
#hudRadio #rdPower{background:none;border:0;color:var(--accent2);opacity:.5;cursor:pointer;
  font-size:12px;padding:0 2px;line-height:1}
#hudRadio #rdPower.on{opacity:1;text-shadow:0 0 8px var(--accent2)}
/* the LCD: amber-on-dark like a period head unit, name scrolls if it overruns */
#hudRadio .rdLcd{background:#07090e;border:1px solid rgba(120,160,220,.18);border-radius:6px;
  padding:4px 7px;overflow:hidden;white-space:nowrap;position:relative}
#hudRadio .rdLcd span{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.1px;
  color:#ffb445;text-shadow:0 0 9px rgba(255,180,69,.55)}
#hudRadio .rdLcd span.scroll{animation:rdScroll 7s linear infinite}
@keyframes rdScroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-100% + 168px))}}
#hudRadio.off .rdLcd span{color:#5c6675;text-shadow:none}
#hudRadio .rdRow{display:flex;align-items:center;gap:6px}
#hudRadio .rdBtn{background:rgba(255,255,255,.05);border:1px solid var(--line);color:#cfd8e6;
  border-radius:6px;font-size:10px;line-height:1;padding:4px 6px;cursor:pointer}
#hudRadio .rdBtn:hover{background:rgba(57,224,255,.16);color:#fff}
/* the tuning scale: ticks per station, needle slides between them */
#hudRadio .rdScale{position:relative;flex:1;height:22px;cursor:pointer;
  background:linear-gradient(#0a0d14,#11151f);border:1px solid rgba(120,160,220,.16);border-radius:5px}
#hudRadio .rdTicks{position:absolute;inset:0}
#hudRadio .rdTicks i{position:absolute;top:4px;width:1px;height:7px;background:rgba(190,210,240,.4)}
#hudRadio .rdTicks i.on{height:12px;background:var(--accent2);box-shadow:0 0 6px var(--accent2)}
#hudRadio .rdNeedle{position:absolute;top:1px;bottom:1px;width:2px;border-radius:2px;
  background:#ff5a3c;box-shadow:0 0 8px #ff5a3c;transition:left .28s cubic-bezier(.3,1.4,.5,1)}
/* the knob rotates as you tune — the bit that makes it feel like a radio */
#hudRadio .rdKnobWrap{display:flex;justify-content:center}
#hudRadio .rdKnob{width:30px;height:30px;border-radius:50%;cursor:grab;position:relative;
  background:conic-gradient(from 0deg,#2a3240,#39434f,#222a35,#39434f,#2a3240);
  border:1px solid rgba(160,190,230,.22);box-shadow:inset 0 1px 2px rgba(255,255,255,.14),0 2px 5px #0008;
  transition:transform .28s cubic-bezier(.3,1.4,.5,1)}
#hudRadio .rdKnob:active{cursor:grabbing}
#hudRadio .rdKnob i{position:absolute;left:50%;top:3px;width:2px;height:9px;margin-left:-1px;
  background:var(--accent2);border-radius:1px;box-shadow:0 0 6px var(--accent2)}
body.cine #hudRadio,body.photo #hudRadio{opacity:0;pointer-events:none}

/* ---------- opening film ------------------------------------------------- */
#introVid{position:fixed;inset:0;z-index:60;background:#000;
  display:flex;align-items:center;justify-content:center;transition:opacity .5s}
#introVid.fading{opacity:0}
#introVideo{width:100%;height:100%;object-fit:cover;display:block}
#introSkip{position:absolute;bottom:26px;left:0;right:0;text-align:center;
  font-size:11px;letter-spacing:3px;color:#fff;opacity:.35;pointer-events:none;
  text-shadow:0 2px 10px #000;animation:skipPulse 2.6s ease-in-out infinite}
@keyframes skipPulse{0%,100%{opacity:.22}50%{opacity:.5}}

/* ------------------------------- replay -------------------------------- */
#replayTag{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:45;display:none;
  font:600 13px/1.4 system-ui,sans-serif;color:#fff;letter-spacing:1.5px;text-align:center;
  background:rgba(8,10,16,.55);padding:8px 16px;border-radius:10px;backdrop-filter:blur(6px)}
#replayTag b{color:#ff4b4b;margin-right:8px;animation:recblink 1.2s steps(2) infinite}
#replayTag small{display:block;opacity:.55;font-size:10.5px;letter-spacing:2px;margin-top:2px}
body.replay #replayTag{display:block}
body.replay #hud #hudRadio, body.replay #hud #centerMsg, body.replay #hud #countdown,
body.replay #hud #hudHint, body.replay #hud #wrongWay{display:none}
@keyframes recblink{50%{opacity:.25}}

/* v4 style tag: what is earning boost right now */
#styleTag{bottom:128px;right:24px;text-align:right;font-size:15px;font-weight:900;font-style:italic;
  letter-spacing:3px;color:#7fd8ff;text-shadow:0 0 12px rgba(80,180,255,.8);opacity:0;transition:opacity .2s}
#styleTag.on{opacity:1}
body.cine #styleTag{display:none}