/* ==========================================================================
   WEBCADE :: NEON RIVALS
   Presentation layer. The race itself is 100% canvas; this file only styles
   the shell, the menus and the touch controls.
   ========================================================================== */

:root{
  --neon-cyan:   #22e7ff;
  --neon-pink:   #ff2fb4;
  --neon-purple: #9d5cff;
  --neon-yellow: #ffd23f;
  --neon-green:  #4dff9f;
  --ink:         #05020c;
  --ink-2:       #0d0620;
  --panel-edge:  rgba(34,231,255,.55);
  --font-arcade: "Press Start 2P", "Courier New", ui-monospace, SFMono-Regular,
                 Menlo, Consolas, monospace;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  width:100%; height:100%;
  background:var(--ink);
  color:#e9f6ff;
  font-family:var(--font-arcade);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

#app{
  position:fixed; inset:0;
  background:#000;
  overflow:hidden;
  /* dvh tracks Safari's collapsing bars, so the game always fills exactly
     what is visible instead of hiding under the URL bar */
  height:100dvh;
}
@supports not (height: 100dvh){
  #app{ height:100vh; }
}

/* ------------------------------ canvas ---------------------------------- */
#game-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background:#05020c;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  -ms-interpolation-mode:nearest-neighbor;
}

#safe-probe{
  position:absolute; top:0; left:0;
  width:0; height:0;
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
  padding-top:var(--safe-t);
  padding-bottom:var(--safe-b);
  pointer-events:none; visibility:hidden;
}

.hidden{ display:none !important; }

/* ==========================================================================
   TOUCH CONTROLS
   Zones are deliberately enormous. The visible art is smaller than the
   touch target so nothing ever needs a precise tap.
   ========================================================================== */
#touch-controls{ position:absolute; inset:0; z-index:20; }
/* desktop: keep the pause button, drop the thumb controls */
#touch-controls.keyboard-only #steer-zone,
#touch-controls.keyboard-only #joystick,
#touch-controls.keyboard-only #brake-zone,
#touch-controls.keyboard-only #gas-zone{ display:none; }
.touch-zone{ position:absolute; touch-action:none; }

/* left half = steering */
#steer-zone{
  left:0; top:0;
  width:48%; height:100%;
}

/* joystick art. JS moves it to wherever the thumb lands. */
#joystick{
  position:absolute;
  left:calc(var(--safe-l) + 96px);
  bottom:calc(var(--safe-b) + 96px);
  width:170px; height:170px;
  margin:-85px 0 0 -85px;
  transform:translate3d(0,0,0);
  opacity:.55;
  pointer-events:none;
  transition:opacity .18s ease;
}
#joystick.active{ opacity:.9; }
#joystick .joy-ring{
  position:absolute; inset:0;
  border-radius:50%;
  border:3px solid var(--neon-cyan);
  background:radial-gradient(circle at 50% 50%,
             rgba(34,231,255,.16) 0%, rgba(10,4,24,.42) 62%, rgba(10,4,24,.15) 100%);
  box-shadow:0 0 18px rgba(34,231,255,.55), inset 0 0 22px rgba(34,231,255,.28);
}
#joystick .joy-axis{
  position:absolute; top:50%; width:22px; height:3px;
  background:var(--neon-cyan); opacity:.75; margin-top:-1.5px;
  box-shadow:0 0 8px var(--neon-cyan);
}
#joystick .joy-axis-l{ left:10px; }
#joystick .joy-axis-r{ right:10px; }
#joystick .joy-knob{
  position:absolute; left:50%; top:50%; z-index:1;
  width:74px; height:74px; margin:-37px 0 0 -37px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #ffffff 0%, var(--neon-cyan) 38%, #0b6b86 100%);
  box-shadow:0 0 22px rgba(34,231,255,.85), inset 0 -6px 12px rgba(0,0,0,.45);
  will-change:transform;
}

/* right side pedals: each zone is ~38% wide, half the screen tall */
.pedal-zone{ right:0; width:38%; display:flex; }
#brake-zone{ top:0; height:50%; align-items:flex-end; justify-content:flex-end; }
#gas-zone  { bottom:0; height:50%; align-items:flex-end;  justify-content:flex-end; }

.pedal-face{
  position:relative;
  width:74%; height:62%;
  margin:calc(var(--safe-t) + 14px) calc(var(--safe-r) + 14px) 10px 0;
  display:flex; align-items:center; justify-content:center;
  border-radius:22px;
  opacity:.25;                      /* 25% visible / 75% transparent */
  transition:opacity .09s linear, transform .09s linear;
}
#gas-zone .pedal-face{ margin:14px calc(var(--safe-r) + 14px) calc(var(--safe-b) + 14px) 0; }

.gas-face{
  border:4px solid var(--neon-green);
  background:linear-gradient(180deg, rgba(77,255,159,.30), rgba(77,255,159,.05));
  box-shadow:0 0 26px rgba(77,255,159,.5), inset 0 0 40px rgba(77,255,159,.22);
}
.brake-face{
  border:4px solid var(--neon-pink);
  background:linear-gradient(180deg, rgba(255,47,180,.05), rgba(255,47,180,.30));
  box-shadow:0 0 26px rgba(255,47,180,.5), inset 0 0 40px rgba(255,47,180,.22);
}
.pedal-label{
  font-size:clamp(18px, 4.2vh, 40px);
  letter-spacing:.16em;
  text-shadow:0 0 12px currentColor;
}
.gas-face   .pedal-label{ color:#dcffe9; }
.brake-face .pedal-label{ color:#ffe4f5; }

.pedal-zone.pressed .pedal-face{ opacity:.72; transform:scale(.985); }

/* NOS lives on the stick: push the thumb forward and it fires. No button,
   so nothing sits in the middle of the screen. */
#joystick .joy-nos{
  position:absolute; left:50%; top:9px; z-index:2;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  color:var(--neon-yellow);
  opacity:.4;
  pointer-events:none;
  transition:opacity .1s linear, transform .1s linear;
}
#joystick .joy-nos-arrow{ font-size:11px; line-height:1; }
#joystick .joy-nos-label{ font-size:9px; letter-spacing:.16em; }

/* boost in the tank: the cue breathes so you know it is there */
#joystick.nos-ready .joy-nos{ animation:nos-pulse 1.2s ease-in-out infinite; opacity:.7; }
#joystick.nos-ready .joy-ring{ border-color:rgba(255,210,63,.55); }

/* firing */
#joystick.nos-on{ opacity:1; }
/* pushed forward the knob sits under the label, so flip the label dark
   to keep it readable on top of it */
#joystick.nos-on .joy-nos{
  animation:none; opacity:1; transform:translateX(-50%) scale(1.16);
  color:#2a1a00;
  text-shadow:0 0 10px rgba(255,240,190,.9);
}
#joystick.nos-on .joy-ring{
  border-color:var(--neon-yellow);
  box-shadow:0 0 30px rgba(255,210,63,.85), inset 0 0 30px rgba(255,210,63,.45);
  background:radial-gradient(circle at 50% 50%,
             rgba(255,210,63,.22) 0%, rgba(24,10,4,.45) 62%, rgba(24,10,4,.15) 100%);
}
#joystick.nos-on .joy-knob{
  background:radial-gradient(circle at 38% 32%, #fffdf0 0%, var(--neon-yellow) 40%, #a86b00 100%);
  box-shadow:0 0 30px rgba(255,210,63,1), inset 0 -6px 12px rgba(0,0,0,.4);
}
@keyframes nos-pulse{
  0%,100%{ opacity:.55; transform:translateX(-50%) scale(1); }
  50%    { opacity:1;   transform:translateX(-50%) scale(1.1); }
}

#pause-button{
  position:absolute;
  left:calc(var(--safe-l) + 8px); top:calc(var(--safe-t) + 8px);
  width:44px; height:44px;
  border-radius:10px;
  border:2px solid rgba(157,92,255,.7);
  background:rgba(10,4,24,.45);
  color:#d9c6ff;
  font-family:var(--font-arcade); font-size:14px; letter-spacing:.1em;
  opacity:.45;
}
#pause-button:active{ opacity:.95; }

/* ==========================================================================
   FULL SCREEN BUTTON
   ========================================================================== */
#fullscreen-btn{
  position:absolute; z-index:60;
  right:calc(var(--safe-r) + 10px); top:calc(var(--safe-t) + 10px);
  display:flex; align-items:center; gap:7px;
  padding:8px 12px;
  border-radius:9px;
  border:2px solid rgba(34,231,255,.6);
  background:rgba(8,3,20,.6);
  color:#bdf6ff;
  font-family:var(--font-arcade); font-size:9px; letter-spacing:.14em;
  cursor:pointer;
  opacity:.75;
  transition:opacity .12s linear, box-shadow .12s linear;
}
#fullscreen-btn:hover{ opacity:1; box-shadow:0 0 18px rgba(34,231,255,.45); }
#fullscreen-btn:active{ transform:translateY(1px); }
/* four corner brackets, drawn rather than relying on an emoji font */
.fs-icon{
  position:relative; width:14px; height:12px; flex:none;
}
.fs-icon::before, .fs-icon::after{
  content:''; position:absolute; width:5px; height:5px;
  border:2px solid currentColor;
}
.fs-icon::before{ left:0; top:0; border-right:0; border-bottom:0; }
.fs-icon::after{ right:0; bottom:0; border-left:0; border-top:0; }
#fullscreen-btn.is-on .fs-icon::before{ border:2px solid currentColor; border-left:0; border-top:0; }
#fullscreen-btn.is-on .fs-icon::after{ border:2px solid currentColor; border-right:0; border-bottom:0; }

#fs-hint{
  position:absolute; z-index:61;
  right:calc(var(--safe-r) + 10px); top:calc(var(--safe-t) + 48px);
  max-width:min(300px, 70vw);
  padding:10px 12px;
  border:2px solid rgba(255,210,63,.6); border-radius:9px;
  background:rgba(8,3,20,.94);
  color:var(--neon-yellow);
  font-family:var(--font-arcade); font-size:8px; letter-spacing:.12em; line-height:2;
}

@media (max-height:430px){
  #fullscreen-btn{ padding:6px 9px; font-size:8px; }
}

/* ==========================================================================
   MENUS
   ========================================================================== */
#menu-layer{ position:absolute; inset:0; z-index:40; pointer-events:none; }

.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 10px)
          calc(var(--safe-b) + 10px) calc(var(--safe-l) + 10px);
  pointer-events:auto;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(ellipse at 50% 45%, rgba(60,10,110,.52) 0%, rgba(5,2,12,.88) 72%);
  animation:screen-in .18s ease-out;
  overflow:auto;
}
@keyframes screen-in{ from{ opacity:0; } to{ opacity:1; } }

.panel{
  width:min(560px, 96%);
  /* No max-height: the panel is measured at its natural size and then
     zoomed to fit by Menu.fitPanel(), which keeps every screen inside the
     box on a short landscape phone instead of running off the bottom. */
  padding:clamp(12px,2.6vh,26px) clamp(14px,3vw,30px);
  text-align:center;
  border:3px solid var(--panel-edge);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(16,6,38,.94), rgba(6,2,16,.96));
  box-shadow:0 0 42px rgba(34,231,255,.28), inset 0 0 60px rgba(157,92,255,.16);
}
.panel.wide{ width:min(760px, 97%); }
.panel.narrow{ width:min(400px, 90%); }

.logo{ margin-bottom:clamp(10px,2.4vh,22px); }
.logo-top{
  font-size:clamp(11px,1.9vh,16px); letter-spacing:.55em;
  color:var(--neon-cyan); text-shadow:0 0 14px var(--neon-cyan);
  margin-bottom:6px;
}
.logo-main{
  font-size:clamp(22px,5.6vh,46px); letter-spacing:.06em;
  color:#fff;
  text-shadow:
     0 0 8px #fff,
     0 0 22px var(--neon-pink),
     3px 3px 0 var(--neon-purple),
    -2px -2px 0 var(--neon-cyan);
}
.logo-sub{
  margin-top:10px;
  font-size:clamp(8px,1.5vh,11px); letter-spacing:.22em; color:#a98fd8;
}

.screen-title{
  font-size:clamp(14px,2.8vh,22px); letter-spacing:.2em;
  color:var(--neon-yellow); text-shadow:0 0 14px rgba(255,210,63,.7);
  margin-bottom:clamp(8px,2vh,18px);
}

.btn-col{ display:flex; flex-direction:column; gap:clamp(7px,1.5vh,12px); align-items:center; }
.btn-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:clamp(8px,2vh,16px); }

.btn{
  font-family:var(--font-arcade);
  font-size:clamp(10px,1.9vh,15px);
  letter-spacing:.14em;
  padding:clamp(9px,1.7vh,14px) clamp(14px,3vw,26px);
  min-width:190px;
  color:#dff6ff;
  background:linear-gradient(180deg, rgba(34,231,255,.14), rgba(34,231,255,.03));
  border:2px solid rgba(34,231,255,.65);
  border-radius:10px;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease;
  text-shadow:0 0 8px rgba(34,231,255,.65);
}
.btn:hover{ background:rgba(34,231,255,.22); box-shadow:0 0 20px rgba(34,231,255,.5); }
.btn:active{ transform:translateY(2px) scale(.99); }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn-primary{
  color:#fff2fb;
  border-color:rgba(255,47,180,.8);
  background:linear-gradient(180deg, rgba(255,47,180,.26), rgba(255,47,180,.05));
  text-shadow:0 0 10px rgba(255,47,180,.9);
}
.btn-primary:hover{ background:rgba(255,47,180,.34); box-shadow:0 0 26px rgba(255,47,180,.6); }

.chip{
  font-family:var(--font-arcade); font-size:9px; letter-spacing:.12em;
  padding:6px 10px; border-radius:20px; cursor:pointer;
  color:#bdf6ff; background:rgba(34,231,255,.10);
  border:1px solid rgba(34,231,255,.5);
}

.hint{
  margin-top:clamp(8px,1.8vh,16px);
  font-size:clamp(7px,1.3vh,10px); letter-spacing:.14em; color:#7f6ba8; line-height:1.9;
}
.menu-foot{
  margin-top:clamp(8px,1.6vh,16px);
  display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;
  font-size:clamp(7px,1.3vh,10px); letter-spacing:.12em; color:#9d86c9;
}
.menu-foot b{ color:var(--neon-yellow); }

/* ------------------------------ field of view --------------------------- */
.setting-row{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:clamp(6px,1.4vh,12px);
}
.setting-key{ font-size:8px; letter-spacing:.2em; color:#8f7cbb; }
.chip-step{
  width:26px; padding:5px 0; text-align:center; font-size:11px; line-height:1;
}
#fov-slider{
  -webkit-appearance:none; appearance:none;
  width:min(160px, 34vw); height:6px; border-radius:3px;
  background:linear-gradient(90deg, rgba(34,231,255,.9), rgba(157,92,255,.6));
  outline:none; cursor:pointer;
  /* the page cannot scroll anyway, and this keeps the drag in the control */
  touch-action:none;
}
#fov-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--neon-cyan) 45%, #0b6b86);
  box-shadow:0 0 12px rgba(34,231,255,.9);
  cursor:pointer;
}
#fov-slider::-moz-range-thumb{
  width:20px; height:20px; border:0; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff, var(--neon-cyan) 45%, #0b6b86);
  box-shadow:0 0 12px rgba(34,231,255,.9);
  cursor:pointer;
}
#fov-value{
  font-size:11px; letter-spacing:.1em; color:var(--neon-yellow);
  min-width:26px; text-align:left;
}

/* ------------------------------ track select ---------------------------- */
.track-grid{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.track-card{
  width:min(300px, 44vw);
  padding:10px;
  border:2px solid rgba(157,92,255,.45);
  border-radius:12px;
  background:rgba(10,4,26,.7);
  color:#e9f6ff; cursor:pointer;
  font-family:var(--font-arcade);
  transition:border-color .15s, box-shadow .15s, transform .12s;
}
.track-card.selected{
  border-color:var(--neon-yellow);
  box-shadow:0 0 26px rgba(255,210,63,.45), inset 0 0 30px rgba(255,210,63,.1);
  transform:translateY(-3px);
}
.track-art{
  position:relative; height:clamp(56px,13vh,104px);
  border-radius:8px; overflow:hidden; margin-bottom:9px;
}
/* Card art is themed from the TRACKS registry: the sky and sun come in as
   inline backgrounds, the grid colour as the --track-grid custom property.
   No per-track CSS class is needed for a new map. */
.track-card.locked{ opacity:.45; cursor:not-allowed; }
.art-sun{
  position:absolute; left:50%; top:34%; width:54%; padding-top:54%;
  transform:translate(-50%,-50%); border-radius:50%;
}
.art-grid{
  position:absolute; left:-20%; right:-20%; bottom:0; height:52%;
  background:
    repeating-linear-gradient(90deg, var(--track-grid,#22e7ff) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  var(--track-grid,#22e7ff) 0 1px, transparent 1px 12px);
  opacity:.5;
  transform:perspective(60px) rotateX(48deg);
  transform-origin:bottom center;
}
.track-name{ font-size:clamp(9px,1.7vh,13px); letter-spacing:.1em; color:#fff; margin-bottom:6px; }
.track-meta{ font-size:clamp(6px,1.1vh,9px); letter-spacing:.1em; color:#9d86c9; margin-bottom:8px; }
.track-stat{ font-size:clamp(6px,1.1vh,9px); letter-spacing:.08em; color:#7fd8e8; line-height:1.7; }
.track-stat b{ color:var(--neon-pink); }
.track-stat i{ font-style:normal; color:rgba(157,92,255,.4); }
/* four or more maps: narrower cards so the grid stays a grid */
.track-grid.dense .track-card{ width:min(210px, 30vw); }
.track-grid.dense .track-art{ height:clamp(42px,9vh,74px); }

/* ------------------------------ garage ---------------------------------- */
#garage-preview{
  display:block; margin:0 auto clamp(6px,1.4vh,12px);
  width:min(380px, 92%); height:auto;
  image-rendering:pixelated;
  border:2px solid rgba(157,92,255,.4); border-radius:10px;
  background:#0d0620;
}
.garage-presets{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  margin-bottom:clamp(6px,1.4vh,12px);
}
.garage-preset{
  font-family:var(--font-arcade); font-size:9px; letter-spacing:.12em;
  padding:7px 10px; cursor:pointer; color:#e9f6ff;
  border:2px solid var(--c); border-radius:8px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, transparent), transparent);
  box-shadow:inset 0 -3px 0 var(--a);
}
.garage-preset.is-on{ box-shadow:inset 0 -3px 0 var(--a), 0 0 16px var(--c); color:#fff; }
.garage-rows{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:4px 16px; margin-bottom:clamp(4px,1vh,10px);
}
.garage-row{ display:flex; align-items:center; gap:8px; }
.garage-key{
  font-size:8px; letter-spacing:.14em; color:#8f7cbb; width:52px; text-align:right; flex:none;
}
.garage-swatches{ display:flex; gap:4px; flex-wrap:wrap; }
.garage-swatch{
  width:19px; height:19px; border-radius:5px; cursor:pointer;
  border:2px solid rgba(255,255,255,.22);
}
.garage-swatch.is-on{ border-color:#fff; box-shadow:0 0 10px rgba(255,255,255,.75); }
.garage-style{
  font-family:var(--font-arcade); font-size:8px; letter-spacing:.1em;
  padding:5px 7px; border-radius:6px; cursor:pointer;
  color:#bdf6ff; background:rgba(34,231,255,.08);
  border:1px solid rgba(34,231,255,.4);
}
.garage-style.is-on{ background:rgba(34,231,255,.3); color:#fff; border-color:#22e7ff; }

/* ------------------------------ multiplayer ----------------------------- */
.join-row{ display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
#mp-code-input{
  font-family:var(--font-arcade); font-size:clamp(12px,2.2vh,18px);
  letter-spacing:.35em; text-align:center; text-transform:uppercase;
  width:170px; padding:11px 8px;
  color:var(--neon-yellow); background:rgba(0,0,0,.55);
  border:2px solid rgba(255,210,63,.55); border-radius:9px;
}
#mp-code-input::placeholder{ color:rgba(255,210,63,.32); }

.code-box{
  margin:0 auto clamp(8px,2vh,16px);
  padding:clamp(8px,1.8vh,14px);
  border:2px dashed rgba(255,210,63,.6); border-radius:10px;
  display:inline-flex; flex-direction:column; gap:8px;
}
.code-label{ font-size:9px; letter-spacing:.24em; color:#9d86c9; }
.code-value{
  font-size:clamp(20px,4.6vh,36px); letter-spacing:.35em; color:var(--neon-yellow);
  text-shadow:0 0 18px rgba(255,210,63,.8);
}
.lobby-list{ list-style:none; margin:0 auto clamp(6px,1.4vh,12px); display:inline-block; text-align:left; }
.lobby-list li{
  font-size:clamp(8px,1.5vh,12px); letter-spacing:.12em; color:#cfe9ff;
  padding:6px 0; display:flex; align-items:center; gap:10px;
}
.lobby-list b{ color:var(--neon-green); margin-left:auto; padding-left:20px; }
.dot{ width:12px; height:12px; border-radius:3px; display:inline-block; }
.dot-p1{ background:var(--neon-cyan); box-shadow:0 0 10px var(--neon-cyan); }
.dot-p2{ background:var(--neon-pink); box-shadow:0 0 10px var(--neon-pink); }
.lobby-net{
  display:flex; gap:16px; justify-content:center;
  font-size:8px; letter-spacing:.14em; color:#7f6ba8; margin-bottom:6px;
}

/* ------------------------------ results --------------------------------- */
.winner-block{ margin-bottom:clamp(8px,2vh,18px); }
.winner-name{
  font-size:clamp(20px,5vh,42px); letter-spacing:.08em; color:#fff;
  text-shadow:0 0 10px #fff, 0 0 28px var(--neon-cyan), 3px 3px 0 var(--neon-purple);
}
.winner-word{
  font-size:clamp(16px,4vh,34px); letter-spacing:.3em; color:var(--neon-yellow);
  text-shadow:0 0 22px rgba(255,210,63,.85); margin-top:6px;
}
.takes-all{
  margin-top:10px; font-size:clamp(8px,1.5vh,11px); letter-spacing:.32em; color:var(--neon-pink);
  text-shadow:0 0 14px rgba(255,47,180,.8);
}
.stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(96px,1fr));
  gap:6px; margin:clamp(5px,1.2vh,12px) 0;
}
.stat{
  border:1px solid rgba(34,231,255,.28); border-radius:8px;
  padding:6px 5px; background:rgba(34,231,255,.05);
}
.stat .k{ display:block; font-size:7px; letter-spacing:.18em; color:#8f7cbb; margin-bottom:6px; }
.stat .v{ display:block; font-size:clamp(10px,1.9vh,14px); letter-spacing:.06em; color:var(--neon-cyan); }
.stat .v small{ font-size:8px; color:#8f7cbb; letter-spacing:.1em; }

/* ------------------------------ score ----------------------------------- */
.score-block{
  margin:clamp(6px,1.4vh,12px) auto;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.score-label{ font-size:9px; letter-spacing:.4em; color:#8f7cbb; }
.score-total{
  font-size:clamp(22px,5vh,42px); letter-spacing:.06em; color:var(--neon-yellow);
  text-shadow:0 0 10px rgba(255,210,63,.55), 0 0 26px rgba(255,210,63,.35);
}
.score-best{ font-size:9px; letter-spacing:.2em; color:#8f7cbb; }
.score-best.is-new{
  color:var(--neon-green);
  text-shadow:0 0 12px rgba(77,255,159,.8);
  animation:nos-pulse 1s ease-in-out infinite;
}
/* filled in by the host's submitScore hook when it returns a rank */
.score-rank{
  font-size:clamp(6px,1.2vh,10px); letter-spacing:.14em;
  color:var(--neon-yellow); text-align:center; margin-bottom:6px;
}
.score-rows{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(128px,1fr));
  gap:1px 12px;
  margin-bottom:clamp(4px,1vh,10px);
  padding:5px 8px;
  border-top:1px solid rgba(34,231,255,.18);
  border-bottom:1px solid rgba(34,231,255,.18);
}
.score-row{
  display:flex; justify-content:space-between; gap:10px;
  font-size:8px; letter-spacing:.1em; color:#9d86c9; line-height:1.9;
}
.score-row b{ color:var(--neon-cyan); }
.score-row.is-penalty b{ color:#ff5b7f; }

/* ------------------------------ rotate ---------------------------------- */
#rotate-overlay{
  position:absolute; inset:0; z-index:90;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #1b0640 0%, #04010a 72%);
  text-align:center;
}
.rotate-inner h2{
  font-size:clamp(13px,3.4vw,22px); letter-spacing:.18em; color:#fff;
  text-shadow:0 0 18px var(--neon-cyan); margin-bottom:12px;
}
.rotate-inner p{ font-size:clamp(8px,2.2vw,11px); letter-spacing:.18em; color:#9d86c9; }
.rotate-tip{
  margin-top:10px; font-size:clamp(7px,1.9vw,10px); letter-spacing:.16em;
  color:var(--neon-cyan); text-shadow:0 0 10px rgba(34,231,255,.5);
}
.rotate-hint:empty{ display:none; }
.rotate-hint{
  margin-top:16px; max-width:22em; margin-inline:auto;
  font-size:clamp(7px,1.9vw,10px); line-height:2; color:var(--neon-yellow);
  text-shadow:0 0 10px rgba(255,210,63,.5);
}
.rotate-phone{
  width:86px; height:150px; margin:0 auto 26px;
  border:4px solid var(--neon-cyan); border-radius:14px;
  box-shadow:0 0 30px rgba(34,231,255,.6), inset 0 0 22px rgba(34,231,255,.25);
  display:flex; align-items:center; justify-content:center;
  animation:rotate-hint 2.1s ease-in-out infinite;
}
.rotate-arrow{ font-size:42px; color:var(--neon-pink); text-shadow:0 0 18px var(--neon-pink); }
@keyframes rotate-hint{
  0%,45%   { transform:rotate(0deg); }
  70%,100% { transform:rotate(-90deg); }
}

/* short landscape phones: tighten everything up */
/* short landscape phones: everything tightens before the scaler has to */
@media (max-height:520px){
  .panel{ padding:9px 14px; }
  .logo{ margin-bottom:8px; }
  .btn-col{ gap:6px; }
  .btn-row{ margin-top:8px; }
  .winner-block{ margin-bottom:6px; }
  .score-block{ margin:4px auto; gap:2px; }
  .score-rows{ gap:0 10px; padding:4px 6px; }
  .score-row{ line-height:1.7; }
  .stats-grid{ gap:5px; margin:5px 0; }
  .stat{ padding:5px 4px; }
  .stat .k{ margin-bottom:3px; }
  .hint{ margin-top:6px; line-height:1.7; }
  .garage-rows{ gap:2px 12px; }
  #garage-preview{ width:min(300px, 80%); }
}

@media (max-height:430px){
  .panel{ padding:8px 12px; }
  .btn{ min-width:150px; padding:8px 16px; }
  .track-art{ height:48px; }
  #joystick{ width:146px; height:146px; margin:-73px 0 0 -73px; }
  #joystick .joy-knob{ width:64px; height:64px; margin:-32px 0 0 -32px; }
  .pedal-label{ font-size:clamp(16px, 5vh, 30px); }
  .menu-foot{ gap:8px; }
  .chip{ font-size:8px; padding:5px 8px; }
}
@media (prefers-reduced-motion: reduce){
  #joystick.nos-ready .joy-nos, .rotate-phone{ animation:none; }
}