/* ============================================================
   NEON VELOCITY — UI layer
   ============================================================ */
:root{
  --cyan:#35e0f5;
  --cyan-dim:#1a8fa3;
  --orange:#ff6b2c;
  --amber:#ffb347;
  --ink:#04060b;
  --panel:rgba(8,12,20,.72);
  --line:rgba(120,200,220,.16);
  --text:#e9f1f7;
  --muted:#7e8d9f;
  --mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:var(--ink);color:var(--text);font-family:var(--sans);
  overflow:hidden;overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
}
#app{position:fixed;inset:0;overflow:hidden;}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;}

#vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 42%, rgba(0,0,0,.55) 100%),
    linear-gradient(180deg, rgba(2,4,8,.5) 0%, rgba(2,4,8,0) 22%, rgba(2,4,8,0) 78%, rgba(2,4,8,.62) 100%);
}
#grain{
  position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.7'/></svg>");
  mix-blend-mode:overlay;
}

.screen{position:absolute;inset:0;z-index:5;opacity:0;visibility:hidden;transition:opacity .45s ease;pointer-events:none;}
.screen.active{opacity:1;visibility:visible;}

/* ============================ GARAGE ============================ */
#garage{
  display:flex;justify-content:space-between;align-items:stretch;
  padding:clamp(22px,3.4vw,54px);
}
#garage.active{pointer-events:none;}
.garage-left,#garage .btn-primary,#garage .chip{pointer-events:auto;}

.garage-left{
  width:min(46vw,560px);display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.4vh,18px);position:relative;
}

.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.brand-mark{width:26px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent);box-shadow:0 0 10px var(--cyan);}
.brand-text{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#9fb6c6;text-transform:uppercase;}
.brand-text em{color:var(--orange);font-style:normal;margin:0 6px;}

.title{display:flex;flex-direction:column;line-height:.82;user-select:none;}
.title-neon{
  font-size:clamp(20px,2.6vw,38px);font-weight:800;letter-spacing:.42em;
  color:transparent;-webkit-text-stroke:1px rgba(53,224,245,.75);
  text-shadow:0 0 22px rgba(53,224,245,.55);margin-left:4px;
}
.title-main{
  font-size:clamp(56px,8.6vw,132px);font-weight:900;letter-spacing:-.02em;
  font-style:italic;
  background:linear-gradient(96deg,#fff 0%,#ffd9a8 18%,var(--orange) 52%,#ff4d16 78%,#8f1f00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(255,107,44,.35));
  transform:skewX(-4deg);
}
.tagline{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:#8fa4b6;
  margin-top:6px;text-transform:uppercase;
}
.tagline::before{content:"";display:inline-block;width:18px;height:1px;background:var(--cyan);vertical-align:middle;margin-right:9px;opacity:.8;}

.btn-primary{
  position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:26px;
  margin-top:clamp(8px,1.6vh,18px);
  padding:17px 24px;width:min(330px,100%);
  background:linear-gradient(100deg,var(--orange),#ff8f3f 55%,var(--amber));
  color:#1a0d04;border:0;border-radius:2px;cursor:pointer;
  font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.16em;
  box-shadow:0 10px 40px -12px rgba(255,107,44,.9),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .2s,filter .2s;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 48px -14px rgba(255,107,44,1),inset 0 1px 0 rgba(255,255,255,.5);filter:brightness(1.05);}
.btn-primary:active{transform:translateY(0) scale(.99);}
.btn-arrow{font-size:18px;transition:transform .2s;}
.btn-primary:hover .btn-arrow{transform:translateX(4px);}
.btn-primary.small{width:100%;margin-top:0;padding:15px 20px;}

.garage-meta{display:flex;flex-direction:column;gap:7px;margin-top:clamp(10px,2vh,22px);max-width:360px;}
.meta-row{display:flex;gap:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;}
.meta-row .k{color:#5d6d7e;width:44px;flex:none;text-transform:uppercase;}
.meta-row .v{color:#b9c9d6;}

.garage-foot{display:flex;align-items:center;gap:14px;margin-top:clamp(8px,1.6vh,18px);}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:#9fb2c2;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;cursor:pointer;
  transition:.2s;
}
.chip:hover{border-color:rgba(53,224,245,.5);color:#dff6fb;}
.chip .dot{width:6px;height:6px;border-radius:50%;background:#4a5a68;transition:.2s;}
.chip[aria-pressed="true"] .dot{background:var(--cyan);box-shadow:0 0 10px var(--cyan);}
.chip[aria-pressed="true"]{color:#dff6fb;border-color:rgba(53,224,245,.4);}
.hint{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#55646f;}

/* ---- right card ---- */
.garage-right{
  width:min(330px,34vw);display:flex;align-items:center;pointer-events:auto;
}
.car-card{
  width:100%;background:linear-gradient(180deg,rgba(10,16,24,.86),rgba(6,10,16,.9));
  border:1px solid rgba(90,160,180,.18);border-radius:3px;
  padding:20px 20px 18px;backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);
  position:relative;overflow:hidden;
}
.car-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.7;
}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;}
.car-name{font-size:26px;font-weight:800;letter-spacing:.12em;line-height:1;}
.car-sub{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:#63788a;margin-top:7px;}
.car-class{
  display:flex;flex-direction:column;align-items:center;line-height:1;
  font-size:24px;font-weight:800;color:var(--orange);
  padding-left:12px;border-left:1px solid rgba(255,107,44,.3);
}
.car-class span{font-family:var(--mono);font-size:7px;letter-spacing:.16em;color:#6a7787;margin-top:4px;}

.stat-list{display:flex;flex-direction:column;gap:9px;margin:20px 0 18px;}
.stat{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:9px;}
.stat-k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:#6e8092;}
.stat-bar{height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden;}
.stat-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan-dim),var(--cyan));box-shadow:0 0 8px rgba(53,224,245,.6);transition:width .5s cubic-bezier(.2,.8,.3,1);}
.stat-v{font-family:var(--mono);font-size:9px;color:#a9bccb;text-align:right;}

.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.spec-grid>div{display:flex;flex-direction:column;gap:3px;}
.sk{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;color:#5e7082;}
.sv{font-size:13px;font-weight:700;letter-spacing:.02em;color:#e2edf5;}

.paint-row{display:flex;align-items:center;justify-content:space-between;margin-top:15px;}
.paint-label{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:#6e8092;}
.swatches{display:flex;gap:9px;}
.swatch{
  width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  cursor:pointer;position:relative;transition:transform .18s,box-shadow .18s;padding:0;
}
.swatch:hover{transform:scale(1.08);}
.swatch.on{box-shadow:0 0 0 2px rgba(4,6,11,1),0 0 0 3.5px rgba(255,255,255,.55);}
.swatch[data-id="cyan"]{background:radial-gradient(circle at 34% 30%,#9df4ff,#2bc8e2 55%,#0d6f83);}
.swatch[data-id="ember"]{background:radial-gradient(circle at 34% 30%,#ffd0a3,#ff6b2c 55%,#8a2600);}
.paint-name{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:#8aa0b2;margin-top:10px;text-align:right;}

.corner-tl,.corner-br{position:absolute;width:56px;height:56px;pointer-events:none;opacity:.5;}
.corner-tl{top:16px;left:16px;border-top:1px solid var(--cyan);border-left:1px solid var(--cyan);}
.corner-br{bottom:16px;right:16px;border-bottom:1px solid var(--orange);border-right:1px solid var(--orange);}

/* ============================ HUD ============================ */
#race.active{pointer-events:none;}
.hud{position:absolute;z-index:6;font-family:var(--mono);}

.hud-tl{top:clamp(16px,3vh,34px);left:clamp(16px,3vw,38px);}
.hud-lap{display:flex;align-items:baseline;gap:5px;font-size:12px;letter-spacing:.14em;color:#93a7b8;}
.hud-lap span:first-child{font-size:30px;font-weight:800;color:#fff;letter-spacing:0;font-family:var(--sans);}
.hud-lap i{font-style:normal;color:#4c5b69;}
.hud-lap em{font-style:normal;margin-left:8px;font-size:9px;color:var(--cyan);letter-spacing:.2em;}
.hud-time{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:.02em;line-height:1.05;color:#f2f8fc;text-shadow:0 0 24px rgba(53,224,245,.35);font-variant-numeric:tabular-nums;}
.hud-split{display:flex;gap:18px;margin-top:6px;}
.hud-split span{display:flex;flex-direction:column;gap:2px;}
.hud-split b{font-weight:400;font-size:8px;letter-spacing:.18em;color:#5f7183;}
.hud-split i{font-style:normal;font-size:12px;color:#b6c8d6;font-variant-numeric:tabular-nums;}

.hud-tr{top:clamp(16px,3vh,34px);right:clamp(16px,3vw,38px);display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
#minimap{width:clamp(130px,15vw,190px);height:clamp(130px,15vw,190px);filter:drop-shadow(0 0 16px rgba(53,224,245,.18));}
.map-label{font-size:8px;letter-spacing:.28em;color:#4e6072;margin-right:4px;}

.hud-bl{bottom:clamp(14px,2.4vh,30px);left:clamp(16px,3vw,38px);}
.gauge{position:relative;width:clamp(150px,17vw,210px);height:clamp(150px,17vw,210px);}
.gauge svg{width:100%;height:100%;transform:rotate(135deg);}
.gauge-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:6;stroke-linecap:round;stroke-dasharray:405 540;}
.gauge-fill{fill:none;stroke:url(#gaugeGrad);stroke-width:6;stroke-linecap:round;stroke-dasharray:0 540;filter:drop-shadow(0 0 6px rgba(53,224,245,.7));transition:stroke-dasharray .06s linear;}
.gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;}
.speed-num{font-family:var(--sans);font-size:clamp(34px,4.6vw,52px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.speed-unit{font-size:8px;letter-spacing:.26em;color:#5f7183;margin-top:3px;}
.gear{font-size:11px;letter-spacing:.1em;color:var(--orange);margin-top:7px;font-weight:700;}

.hud-br{bottom:clamp(14px,2.4vh,30px);right:clamp(16px,3vw,38px);display:flex;flex-direction:column;align-items:flex-end;gap:10px;}
.cam-pill{padding:7px 14px;border:1px solid rgba(53,224,245,.28);border-radius:100px;background:rgba(6,12,18,.55);font-size:9.5px;letter-spacing:.16em;color:#a9e9f5;backdrop-filter:blur(8px);}
.key-hints{display:flex;gap:12px;font-size:9px;letter-spacing:.1em;color:#5f7183;}
kbd{display:inline-block;padding:1px 5px;border:1px solid rgba(255,255,255,.16);border-radius:2px;font-family:var(--mono);font-size:9px;color:#9fb2c2;background:rgba(255,255,255,.04);}

.toast{
  position:absolute;left:50%;top:24%;transform:translate(-50%,-8px);
  padding:9px 20px;background:rgba(6,12,18,.78);border-left:2px solid var(--orange);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#ffd9c4;
  opacity:0;transition:.28s;pointer-events:none;z-index:8;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:9;pointer-events:none;}
.countdown span{
  font-family:var(--sans);font-size:clamp(90px,18vw,220px);font-weight:900;font-style:italic;
  color:#fff;opacity:0;letter-spacing:-.04em;transition:opacity .25s ease;
  text-shadow:0 0 60px rgba(53,224,245,.8),0 0 120px rgba(53,224,245,.4);
}
.countdown span.show{opacity:1;}
.countdown span.go{color:var(--orange);text-shadow:0 0 70px rgba(255,107,44,.95),0 0 160px rgba(255,107,44,.5);}
.countdown span.pop{animation:pop .55s cubic-bezier(.2,.9,.2,1);}
@keyframes pop{
  0%{transform:scale(1.75);filter:blur(9px);}
  55%{transform:scale(1);filter:blur(0);}
  100%{transform:scale(1);filter:blur(0);}
}
.warn-flash{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(255,60,30,.32) 100%);transition:opacity .12s;}

/* ============================ OVERLAYS ============================ */
.overlay{
  position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,9,.62);backdrop-filter:blur(9px);
  opacity:0;visibility:hidden;transition:.3s;
}
.overlay.show{opacity:1;visibility:visible;}
.panel{
  width:min(420px,88vw);padding:32px 30px 28px;
  background:linear-gradient(180deg,rgba(12,18,27,.96),rgba(6,10,16,.98));
  border:1px solid rgba(90,160,180,.2);border-radius:3px;position:relative;
  box-shadow:0 40px 120px -30px #000;
  transform:translateY(14px);transition:.35s cubic-bezier(.2,.8,.3,1);
}
.overlay.show .panel{transform:translateY(0);}
.panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orange),transparent);}
.panel-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--orange);margin-bottom:8px;}
.panel h2{font-size:30px;font-weight:800;letter-spacing:.02em;margin-bottom:20px;}
.panel-actions{display:flex;flex-direction:column;gap:9px;margin-top:22px;}
.btn-ghost{
  padding:13px 20px;background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:2px;
  color:#a9bccb;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;cursor:pointer;transition:.2s;
}
.btn-ghost:hover{border-color:rgba(53,224,245,.5);color:#e6f8fc;background:rgba(53,224,245,.06);}

.result-time{font-size:clamp(40px,7vw,60px);font-weight:800;letter-spacing:-.01em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;margin-bottom:22px;text-shadow:0 0 40px rgba(53,224,245,.4);}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);}
.result-grid>div{display:flex;flex-direction:column;gap:4px;}
.rk{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:#5f7183;}
.rv{font-size:15px;font-weight:700;color:#dbe9f2;font-variant-numeric:tabular-nums;}

#fader{position:absolute;inset:0;background:#03050a;z-index:30;opacity:1;pointer-events:none;transition:opacity .5s ease;}
#fader.clear{opacity:0;}
#fader.hold{pointer-events:auto;}

#loader{position:absolute;inset:0;z-index:40;background:#03050a;display:flex;align-items:center;justify-content:center;transition:opacity .6s;}
#loader.hide{opacity:0;pointer-events:none;}
.loader-inner{text-align:center;}
.loader-title{font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.5em;color:#7fd8e8;}
.loader-bar{width:180px;height:2px;background:rgba(255,255,255,.1);margin:16px auto 12px;overflow:hidden;}
.loader-bar i{display:block;height:100%;width:40%;background:var(--orange);animation:slide 1.1s ease-in-out infinite;}
@keyframes slide{0%{transform:translateX(-100%);}100%{transform:translateX(350%);}}
.loader-sub{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:#4e6072;}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px){
  .garage-right{width:min(300px,36vw);}
  .car-card{padding:16px;}
  .stat-list{margin:14px 0;}
}
@media (max-width: 860px){
  #garage{flex-direction:column;justify-content:flex-end;gap:14px;padding:20px 18px 24px;}
  .garage-left{width:100%;order:2;gap:8px;justify-content:flex-end;}
  .garage-right{width:100%;order:1;align-items:flex-end;}
  .title-main{font-size:clamp(48px,13vw,90px);}
  .title-neon{font-size:16px;letter-spacing:.3em;}
  .brand,.tagline,.garage-meta{display:none;}
  .btn-primary{width:100%;margin-top:4px;padding:15px 20px;}
  .garage-foot{justify-content:space-between;margin-top:6px;}
  .car-card{width:100%;max-width:none;padding:12px 14px;}
  .stat-list{display:none;}
  .spec-grid{grid-template-columns:repeat(4,1fr);padding:9px 0;margin-top:6px;}
  .paint-row{margin-top:9px;}
  .card-top .car-name{font-size:20px;}
  .hud-bl .gauge{width:118px;height:118px;}
  .speed-num{font-size:30px;}
  .hud-time{font-size:26px;}
  .hud-split{gap:12px;}
  .hud-br .key-hints{display:none;}
  .hud-tr #minimap{width:104px;height:104px;}
  .panel{padding:26px 22px 22px;}
}
@media (max-height: 620px){
  .tagline,.garage-meta{display:none;}
  .title-main{font-size:clamp(40px,7vw,80px);}
}