/* ============ MAXIMUM CARNAGE — UI ============ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700;900&display=swap');

:root{
  --hot:#ff6a00;
  --hot2:#ffc400;
  --ice:#38e8ff;
  --bad:#ff2d55;
  --ink:#07080c;
  --panel:rgba(8,10,16,.72);
  --stroke:rgba(255,255,255,.14);
  --font:'Barlow Condensed','Oswald','Arial Narrow',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--ink);overscroll-behavior:none;touch-action:none;}
body{
  font-family:var(--font);
  color:#fff;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  text-transform:uppercase;
  letter-spacing:.02em;
}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;display:block;}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;
  display:none;
  flex-direction:column;
  align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  z-index:10;
}
.screen.active{display:flex}
.screen.overlay{pointer-events:none;background:none}
.screen.overlay.active{display:block}

#loading,#garage,#pause,#results{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,106,0,.18), transparent 60%),
    radial-gradient(90% 70% at 50% 110%, rgba(56,232,255,.10), transparent 60%),
    rgba(4,5,9,.86);
  backdrop-filter:blur(6px);
}
#garage{background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,106,0,.20), transparent 55%),
    linear-gradient(180deg, rgba(4,5,9,.92) 0%, rgba(4,5,9,.35) 34%, rgba(4,5,9,.30) 62%, rgba(4,5,9,.94) 100%);
  backdrop-filter:none;
  justify-content:space-between;
}

/* ---------- logo ---------- */
.logo{display:flex;flex-direction:column;align-items:center;line-height:.82;}
.logo-top{
  font-weight:700;font-size:clamp(22px,4.2vw,44px);letter-spacing:.42em;
  color:#fff;text-indent:.42em;opacity:.9;
}
.logo-bot{
  font-weight:900;font-size:clamp(52px,11vw,130px);letter-spacing:-.01em;
  background:linear-gradient(178deg,#fff 6%,var(--hot2) 38%,var(--hot) 70%,#c0270a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 34px rgba(255,106,0,.55));
}
.logo.small .logo-top{font-size:clamp(11px,1.4vw,15px)}
.logo.small .logo-bot{font-size:clamp(26px,3.6vw,44px)}

/* ---------- loading ---------- */
.load-bar{margin-top:38px;width:min(420px,66vw);height:8px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--stroke)}
.load-bar i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--hot2),var(--hot));
  box-shadow:0 0 18px rgba(255,140,0,.9);transition:width .25s ease}
.load-msg{margin-top:14px;font-size:14px;letter-spacing:.22em;opacity:.62}

/* ---------- garage ---------- */
.garage-top{width:100%;display:flex;flex-direction:column;align-items:center;padding:26px 20px 0;gap:6px;flex:0 0 auto}
.garage-hint{font-size:13px;letter-spacing:.4em;opacity:.5}
.garage-mid{flex:1 1 auto;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(10px,4vw,60px);pointer-events:none}
.truck-card{flex:1;text-align:center;align-self:flex-end;padding-bottom:2vh;pointer-events:none}
.truck-name{
  font-weight:900;font-size:clamp(34px,6.4vw,78px);line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.6), 0 0 40px rgba(255,106,0,.45);
}
.truck-tag{font-size:clamp(11px,1.5vw,16px);letter-spacing:.28em;opacity:.65;margin-top:8px}

.arrow{
  pointer-events:auto;
  width:clamp(46px,5vw,64px);height:clamp(46px,5vw,64px);flex:0 0 auto;
  border-radius:50%;border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);color:#fff;font-size:22px;cursor:pointer;
  display:grid;place-items:center;transition:.16s;backdrop-filter:blur(4px)
}
.arrow:hover{background:var(--hot);border-color:var(--hot);transform:scale(1.08);box-shadow:0 0 26px rgba(255,106,0,.6)}
.arrow:active{transform:scale(.96)}

.garage-bottom{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 20px 24px;flex:0 0 auto}
.stats{display:grid;grid-template-columns:repeat(5,minmax(90px,150px));gap:clamp(8px,1.4vw,18px)}
.stat label{display:block;font-size:10px;letter-spacing:.2em;opacity:.55;margin-bottom:5px}
.stat .bar{height:7px;background:rgba(255,255,255,.09);border-radius:99px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--stroke)}
.stat .bar i{display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,var(--ice),var(--hot2) 55%,var(--hot));
  transition:width .35s cubic-bezier(.2,.9,.2,1)}

.dots{display:flex;gap:9px}
.dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);cursor:pointer;transition:.2s}
.dots span.on{background:var(--hot);width:26px;border-radius:99px;box-shadow:0 0 14px rgba(255,106,0,.8)}

/* stadium selector */
.stadium-row{display:flex;align-items:center;gap:14px}
.stad{text-align:center;min-width:230px}
.stad-name{font-weight:900;font-size:19px;letter-spacing:.08em;color:var(--hot2);
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 22px rgba(255,180,0,.35)}
.stad-tag{font-size:10px;letter-spacing:.26em;opacity:.5;margin-top:2px}
.sarrow{
  pointer-events:auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--stroke);background:rgba(255,255,255,.05);color:#fff;
  font-size:14px;cursor:pointer;display:grid;place-items:center;transition:.16s
}
.sarrow:hover{background:var(--hot);border-color:var(--hot)}
.sarrow:active{transform:scale(.94)}

.modes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.btn{
  pointer-events:auto;cursor:pointer;font-family:var(--font);text-transform:uppercase;
  border:1px solid var(--stroke);background:rgba(255,255,255,.055);color:#fff;
  padding:12px 26px;border-radius:10px;transition:.16s;backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;gap:2px;min-width:150px;
}
.btn b{font-weight:900;font-size:19px;letter-spacing:.06em}
.btn span{font-size:11px;letter-spacing:.14em;opacity:.55;text-transform:none}
.btn:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);border-color:rgba(255,255,255,.3)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,var(--hot2),var(--hot));border-color:transparent;color:#180a00;
  box-shadow:0 8px 26px rgba(255,106,0,.42)}
.btn.primary span{opacity:.7}
.btn.primary:hover{filter:brightness(1.1);box-shadow:0 10px 34px rgba(255,106,0,.6)}

.controls-hint{font-size:11px;letter-spacing:.1em;opacity:.42;text-align:center;max-width:820px;text-transform:none}
.controls-hint b{color:var(--hot2);opacity:.9}

/* ---------- HUD ---------- */
#hud > div{position:absolute}
.hud-tl{top:18px;left:18px}
.hud-tr{top:18px;right:18px;display:flex;gap:10px;flex-direction:column;align-items:flex-end}
.hud-bl{bottom:20px;left:20px}
.hud-br{bottom:20px;right:20px;text-align:center}
.hud-center{top:16%;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px}

/* Brushed-steel plates rather than soft translucent cards. Arena games read
   as physical hardware bolted to the rig, and the flat glassy panel was the
   most obviously "web app" thing left on screen. */
.panel{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#727a86 0%,#3d444f 18%,#272c34 54%,#171a20 100%);
  border:1px solid #080a0d;
  border-radius:6px;
  padding:9px 15px 10px;min-width:124px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.7),
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(0,0,0,.55),
    0 5px 18px rgba(0,0,0,.65)
}
.panel label{display:block;font-size:9px;letter-spacing:.28em;color:#aeb6c2;
  text-shadow:0 1px 0 rgba(0,0,0,.9)}
.panel .big{font-size:30px;font-weight:900;line-height:1.02;font-variant-numeric:tabular-nums;
  color:#f2f6fb;text-shadow:0 2px 3px rgba(0,0,0,.92),0 0 14px rgba(150,190,255,.16)}
.panel .big small{font-size:15px;opacity:.5;font-weight:700}
.panel .sub{font-size:11px;letter-spacing:.16em;color:#9aa3b0;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(0,0,0,.8)}
.panel .sub.good{color:#4ef08a}
.panel .sub.bad{color:var(--bad)}

/* speedo */
.speedo{width:clamp(150px,17vw,210px);height:auto;display:block;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.speedo .dial-bg{fill:none;stroke:rgba(255,255,255,.13);stroke-width:11;stroke-linecap:round}
.speedo .dial-fill{fill:none;stroke:url(#g);stroke:var(--hot);stroke-width:11;stroke-linecap:round;
  stroke-dasharray:252;stroke-dashoffset:252;transition:stroke-dashoffset .06s linear;
  filter:drop-shadow(0 0 8px rgba(255,106,0,.9))}
.speedo #needle line{stroke:#fff;stroke-width:3.5;stroke-linecap:round;transform-origin:100px 110px;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
.speedo .hub{fill:#fff}
.speed-read{margin-top:-30px;font-weight:900;font-size:clamp(30px,3.6vw,46px);line-height:1;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 12px rgba(0,0,0,.8)}
.speed-read small{font-size:12px;opacity:.5;margin-left:4px;font-weight:700}
.gear{margin-top:2px;font-weight:900;font-size:15px;letter-spacing:.2em;color:var(--hot2);opacity:.9}

/* nitro */
.nitro label{font-size:9px;letter-spacing:.3em;opacity:.5;display:block;margin-bottom:4px}
.nbar{width:clamp(130px,15vw,190px);height:9px;background:rgba(255,255,255,.10);border-radius:99px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--stroke)}
.nbar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--ice),#8affff);box-shadow:0 0 16px rgba(56,232,255,.85);transition:width .1s linear}
.nbar.empty i{background:#555;box-shadow:none}
.air{margin-top:10px;font-size:12px;letter-spacing:.24em;color:var(--ice);
  text-shadow:0 0 16px rgba(56,232,255,.8)}
.air b{font-variant-numeric:tabular-nums}
.air .trickhint{display:block;margin-top:3px;font-size:10px;letter-spacing:.18em;opacity:.6;color:#fff;text-shadow:none}

/* popups */
.popup{
  font-weight:900;font-size:clamp(22px,3.6vw,44px);
  color:var(--hot2);text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 34px rgba(255,180,0,.75);
  animation:pop 1.5s cubic-bezier(.2,1.2,.3,1) forwards;
}
.popup.ice{color:var(--ice);text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 34px rgba(56,232,255,.8)}
.popup.bad{color:var(--bad);text-shadow:0 3px 0 rgba(0,0,0,.6),0 0 34px rgba(255,45,85,.8)}
@keyframes pop{
  0%{opacity:0;transform:scale(.5) translateY(18px)}
  16%{opacity:1;transform:scale(1.12) translateY(0)}
  28%{transform:scale(1)}
  74%{opacity:1;transform:scale(1) translateY(0)}
  100%{opacity:0;transform:scale(.94) translateY(-30px)}
}

/* countdown */
#countdown{display:none;align-items:center;justify-content:center;background:none}
#countdown.active{display:flex}
.count{font-weight:900;font-size:clamp(90px,20vw,240px);line-height:1;
  background:linear-gradient(180deg,#fff,var(--hot2) 45%,var(--hot));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.5)) drop-shadow(0 0 50px rgba(255,106,0,.8));
  animation:cnt .95s ease-out}
@keyframes cnt{0%{transform:scale(2.2);opacity:0}22%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0;transform:scale(.9)}}

/* dialogs */
.dialog{
  background:rgba(10,12,18,.9);border:1px solid var(--stroke);border-radius:16px;
  padding:34px 40px;display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:320px;
  box-shadow:0 24px 80px rgba(0,0,0,.7)
}
.dialog.wide{min-width:min(520px,90vw)}
.dialog h2{font-weight:900;font-size:34px;text-align:center;margin-bottom:10px;
  background:linear-gradient(180deg,#fff,var(--hot2) 60%,var(--hot));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dialog .btn{width:100%}
.toggles{display:flex;gap:18px;justify-content:center;margin-top:8px;font-size:12px;letter-spacing:.14em;opacity:.72}
.toggles label{display:flex;align-items:center;gap:6px;cursor:pointer}
.toggles input{accent-color:var(--hot);width:15px;height:15px;cursor:pointer}

.res-body{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.res-row{display:flex;justify-content:space-between;gap:20px;padding:9px 12px;border-radius:8px;font-size:16px}
.res-row:nth-child(odd){background:rgba(255,255,255,.045)}
.res-row b{font-weight:900;font-variant-numeric:tabular-nums}
.res-row.hi{background:linear-gradient(90deg,rgba(255,106,0,.28),rgba(255,106,0,.05));color:var(--hot2)}
.res-row .lbl{opacity:.7}

/* ---------- touch controls ---------- */
.touch{position:absolute;inset:0;pointer-events:none}
.touch button{touch-action:none;-webkit-touch-callout:none}
.tbtn{
  pointer-events:auto;
  border-radius:50%;border:1px solid var(--stroke);
  background:rgba(255,255,255,.10);color:#fff;font-weight:900;font-family:var(--font);
  text-transform:uppercase;letter-spacing:.04em;
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
}
.tbtn:active,.tbtn.on{background:var(--hot);border-color:var(--hot);color:#1a0900}

/* pause / camera / reset — small, top centre, clear of the timer and lap panels */
.tc-sys{
  position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:flex;gap:10px;
}
.tc-sys .tbtn{width:52px;height:52px;font-size:12px;border-radius:14px;opacity:.85}

/* flip buttons — above the steer pad, where the left thumb already lives */
.tc-flips{
  position:absolute;bottom:calc(170px + env(safe-area-inset-bottom));
  left:calc(18px + env(safe-area-inset-left));
  display:flex;gap:12px;
}
.tc-flips .tbtn{width:84px;height:52px;font-size:13px;border-radius:26px;color:var(--ice)}
.tc-flips .tbtn:active{color:#1a0900}

/* circular steering joystick for the left thumb */
.steerpad{
  pointer-events:auto;touch-action:none;
  position:absolute;bottom:calc(20px + env(safe-area-inset-bottom));
  left:calc(22px + env(safe-area-inset-left));
  width:136px;height:136px;border-radius:50%;
  border:1px solid var(--stroke);background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;
}
/* crosshair tick marks so the centre reads */
.steerpad::before{
  content:'';position:absolute;left:50%;top:10px;bottom:10px;width:2px;
  transform:translateX(-50%);
  background:linear-gradient(rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.18));
}
.steerpad::after{
  content:'';position:absolute;top:50%;left:10px;right:10px;height:2px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 30%,transparent 70%,rgba(255,255,255,.18));
}
.steerpad i{
  display:block;width:58px;height:58px;border-radius:50%;position:relative;z-index:1;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
  transition:transform .04s linear;
}
.steerpad:active i{background:var(--hot);border-color:var(--hot)}

/* right-hand action cluster */
.tc-right{
  position:absolute;bottom:calc(22px + env(safe-area-inset-bottom));
  right:calc(18px + env(safe-area-inset-right));
  display:grid;gap:12px;justify-items:end;align-items:end;
  grid-template-columns:auto auto;
  grid-template-areas:"drift nos" "brk gas";
}
.tc-right .gas{grid-area:gas;width:96px;height:96px;font-size:17px;
  background:rgba(255,140,0,.18);border-color:rgba(255,160,60,.5)}
.tc-right .brk{grid-area:brk;width:76px;height:76px;font-size:14px}
.tc-right .nos{grid-area:nos;width:60px;height:60px;font-size:12px;
  color:var(--ice);background:rgba(56,232,255,.12);border-color:rgba(56,232,255,.4)}
.tc-right .nos:active{color:#062126;background:var(--ice);border-color:var(--ice)}
.tc-right .aux{width:60px;height:60px;font-size:11px}
.tc-right [data-key="Space"]{grid-area:drift}

/* landscape-please nudge — non-blocking, portrait phones only */
.rotate-hint{display:none}
@media (orientation:portrait) and (pointer:coarse){
  .rotate-hint{
    display:block;position:absolute;top:calc(72px + env(safe-area-inset-top));
    left:50%;transform:translateX(-50%);
    font-size:12px;letter-spacing:.18em;opacity:.55;white-space:nowrap;
  }
}

@media (max-width:760px){
  .stats{grid-template-columns:repeat(5,minmax(52px,1fr));width:100%;max-width:560px}
  .stat label{font-size:8px;letter-spacing:.08em}
}

/* Phone HUD. Keyed off pointer:coarse rather than width — a landscape phone is
   844+ px wide and sails past every width breakpoint while still needing all
   of this. The bottom corners belong to the thumbs now, so the speedo moves to
   bottom centre and the nitro bar sits above it. */
@media (pointer:coarse){
  .controls-hint{display:none}
  .hud-tl,.hud-tr{transform:scale(.78)}
  .hud-tl{transform-origin:top left;top:10px;left:10px}
  .hud-tr{transform-origin:top right;top:10px;right:10px}
  .hud-br{right:50%;transform:translateX(50%) scale(.62);transform-origin:bottom center;
    bottom:calc(4px + env(safe-area-inset-bottom))}
  .hud-bl{left:50%;transform:translateX(-50%) scale(.8);transform-origin:bottom center;
    bottom:calc(96px + env(safe-area-inset-bottom));text-align:center}
  .nitro label{display:none}
}