/* ============================================================
   CRAZY TAXI — UI / HUD styles
   ============================================================ */
:root {
  --taxi-yellow: #ffd11a;
  --taxi-yellow-deep: #f5a800;
  --hud-cyan: #19e0ff;
  --hud-green: #2dff7a;
  --hud-red: #ff3b3b;
  --hud-orange: #ff8c1a;
  --hud-pink: #ff2d95;
  --gold: #ffd400;
  --ink: #10131a;
  --ink-soft: rgba(16, 19, 26, 0.78);
  --panel: rgba(8, 12, 20, 0.62);
  --font-display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #0a0d14; color: #fff;
  font-family: var(--font-ui);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
}
#game-root { position: fixed; inset: 0; }
#game-canvas { display: block; width: 100%; height: 100%; }

/* Subtle, permanent cinematic vignette over the WebGL view. Sits above the
   canvas but below the speed-lines (z 8) / HUD (z 10) and never eats pointer
   events. Gently darkens the screen corners for a "next-gen" framed look while
   keeping the bright arcade centre fully readable. */
#game-root::after {
  content: '';
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none;
  background: radial-gradient(ellipse 92% 88% at 50% 46%,
              rgba(0,0,0,0) 58%,
              rgba(6,10,22,0.18) 84%,
              rgba(3,6,16,0.42) 100%);
}

.hidden { display: none !important; }

/* ---------------- HUD ---------------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; font-family: var(--font-display); }

.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 66px 14px 22px; /* right pad clears the sound-toggle button */
}
.hud-money { position: relative; }
.hud-money-value {
  font-size: 40px; font-weight: 900; letter-spacing: 1px;
  color: var(--hud-green);
  text-shadow: 0 0 10px rgba(45,255,122,0.55), 3px 3px 0 rgba(0,0,0,0.6);
  font-variant-numeric: tabular-nums;
}
.hud-money-pop {
  position: absolute; left: 4px; top: 44px;
  font-size: 24px; font-weight: 900; color: var(--taxi-yellow);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(0);
}
.hud-money-value { transition: text-shadow 0.12s; will-change: transform; }
.hud-money-pop.show { animation: moneyPop 1.1s ease-out forwards; }
.hud-money-pop.big { font-size: 30px; color: var(--gold); text-shadow: 2px 2px 0 #000, 0 0 14px rgba(255,212,0,0.85); }
@keyframes moneyPop {
  0% { opacity: 0; transform: translateY(8px) scale(0.7); }
  18% { opacity: 1; transform: translateY(-2px) scale(1.15); }
  70% { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-26px) scale(0.95); }
}
/* gold sparkle ring that pops behind a big "+$N" gain */
.hud-money-pop.sparkle::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%,-50%);
  pointer-events: none;
  box-shadow:
    0 0 0 0 rgba(255,212,0,0.0),
    0 -22px 0 -7px var(--gold), 0 22px 0 -7px var(--gold),
    -22px 0 0 -7px var(--gold), 22px 0 0 -7px var(--gold),
    -16px -16px 0 -8px var(--gold), 16px -16px 0 -8px var(--gold),
    -16px 16px 0 -8px var(--gold), 16px 16px 0 -8px var(--gold);
  opacity: 0; animation: moneySparkle 0.7s ease-out forwards;
}
@keyframes moneySparkle {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.2) rotate(0deg); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5) rotate(45deg); }
}

.hud-timer { text-align: center; }
.hud-timer-label { font-size: 13px; letter-spacing: 3px; color: #cfe9ff; opacity: 0.85; }
.hud-timer-value {
  font-size: 58px; font-weight: 900; line-height: 0.95;
  color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.35), 3px 3px 0 rgba(0,0,0,0.65);
  font-variant-numeric: tabular-nums;
}
.hud-timer-value.low { color: var(--hud-red); animation: timerPulse 0.5s ease-in-out infinite; will-change: transform; }
@keyframes timerPulse {
  0%,100% { transform: scale(1); text-shadow: 0 0 10px rgba(255,59,59,0.5), 3px 3px 0 #000; }
  50% { transform: scale(1.2); text-shadow: 0 0 30px rgba(255,59,59,1), 0 0 12px #fff, 3px 3px 0 #000; }
}
.hud-timer-bonus {
  font-size: 26px; font-weight: 900; color: var(--hud-green); height: 28px;
  text-shadow: 2px 2px 0 #000; opacity: 0;
}
.hud-timer-bonus.show { animation: bonusPop 1.4s ease-out forwards; }
@keyframes bonusPop {
  0% { opacity: 0; transform: translateY(-6px) scale(0.6); }
  20% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-22px) scale(1); }
}

.hud-fares { text-align: right; }
.hud-fares-label { font-size: 13px; letter-spacing: 3px; color: #ffd9a8; opacity: 0.85; }
.hud-fares-value {
  font-size: 40px; font-weight: 900; color: var(--taxi-yellow);
  text-shadow: 0 0 10px rgba(255,209,26,0.5), 3px 3px 0 rgba(0,0,0,0.6);
}

/* Off-screen destination arrow */
.dest-arrow {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px; margin: -32px;
  color: var(--hud-green);
  filter: drop-shadow(0 0 10px rgba(45,255,122,0.8));
  transition: color 0.2s; will-change: transform; opacity: 0;
}
.dest-arrow.show { opacity: 1; }
.dest-distance {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, 38px);
  font-size: 18px; font-weight: 900; color: #fff;
  text-shadow: 2px 2px 0 #000; opacity: 0; pointer-events: none;
}
.dest-distance.show { opacity: 0.95; }

/* Fare panel (current passenger) */
.fare-panel {
  position: absolute; left: 22px; bottom: 22px;
  display: flex; gap: 12px; align-items: center;
  background: var(--panel); border-radius: 14px; padding: 10px 16px 10px 10px;
  backdrop-filter: blur(4px); border: 2px solid rgba(255,255,255,0.12);
}
.fare-panel-portrait { width: 52px; height: 52px; border-radius: 10px; background: #444; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.2); }
.fare-panel-info { min-width: 160px; }
.fare-panel-name { font-size: 16px; font-weight: 900; letter-spacing: 1px; }
.fare-panel-bar { margin-top: 7px; height: 12px; border-radius: 6px; background: rgba(0,0,0,0.5); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.fare-panel-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--hud-green), var(--taxi-yellow)); transition: width 0.1s linear; }
.fare-panel-bar-fill.low { background: linear-gradient(90deg, var(--hud-red), var(--hud-orange)); }

/* VIP fare: gold-tinted accent + ★ VIP badge in the fare panel */
.fare-vip-badge {
  display: none; position: relative; overflow: hidden;
  margin-left: 8px; padding: 1px 7px; border-radius: 6px;
  font-size: 12px; font-weight: 900; letter-spacing: 1px; vertical-align: middle;
  color: var(--ink); background: linear-gradient(180deg, #ffe97a 0%, var(--gold) 55%, #e0a800 100%);
  box-shadow: 0 0 10px rgba(255,212,0,0.7), 0 1px 0 rgba(0,0,0,0.4);
}
/* diagonal gold shine sweep across the VIP badge */
.fare-vip-badge::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,0.85) 50%, transparent 65%);
  transform: translateX(-130%); animation: vipShine 2.2s ease-in-out infinite;
}
@keyframes vipShine { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.fare-panel.vip { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,212,0,0.45), inset 0 0 0 1px rgba(255,212,0,0.25); }
.fare-panel.vip .fare-panel-name { color: var(--gold); text-shadow: 0 0 8px rgba(255,212,0,0.55); }
.fare-panel.vip .fare-vip-badge { display: inline-block; animation: vipBadge 1.1s ease-in-out infinite; }
.fare-panel.vip .fare-panel-portrait { box-shadow: inset 0 0 0 3px rgba(255,212,0,0.85), 0 0 12px rgba(255,212,0,0.6); }
@keyframes vipBadge { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Action-banner gold variant for VIP FARE! */
.action-banner.gold { color: var(--gold); text-shadow: 5px 5px 0 #000, 0 0 30px rgba(255,212,0,0.8); }

/* ---------------- Delivery-streak Fever meter ---------------- */
.fever-meter {
  position: absolute; left: 50%; top: 92px; transform: translateX(-50%);
  display: flex; gap: 9px; align-items: center;
  background: var(--panel); border-radius: 12px; padding: 6px 14px 6px 10px;
  border: 2px solid var(--fever-col, var(--taxi-yellow));
  box-shadow: 0 0 18px var(--fever-glow, rgba(255,209,26,0.5));
  backdrop-filter: blur(4px);
}
/* breathing glow on a pseudo-element so it stays alive independent of .pop's
   transform animation (which fully overrides the element's own animation) */
.fever-meter::before {
  content: ''; position: absolute; inset: -2px; border-radius: 12px;
  pointer-events: none; z-index: -1;
  box-shadow: 0 0 16px var(--fever-glow, rgba(255,209,26,0.6));
  animation: feverBreath 1.1s ease-in-out infinite;
}
@keyframes feverBreath {
  0%,100% { box-shadow: 0 0 12px var(--fever-glow, rgba(255,209,26,0.45)); }
  50% { box-shadow: 0 0 30px var(--fever-glow, rgba(255,209,26,0.9)), 0 0 8px var(--fever-col, var(--taxi-yellow)); }
}
.fever-meter.pop { animation: feverPop 0.4s cubic-bezier(.2,1.6,.3,1); }
@keyframes feverPop { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.22); } 100% { transform: translateX(-50%) scale(1); } }
.fever-meter-flames {
  font-size: calc(20px + var(--fever-lvl, 1) * 4px); line-height: 1;
  filter: drop-shadow(0 0 8px var(--fever-glow, rgba(255,209,26,0.8)));
  animation: feverFlicker 0.32s ease-in-out infinite alternate;
}
@keyframes feverFlicker {
  0% { transform: translateY(0) scale(0.98) rotate(-2deg); filter: drop-shadow(0 0 6px var(--fever-glow, rgba(255,209,26,0.7))) brightness(0.95); }
  100% { transform: translateY(-2px) scale(1.12) rotate(2deg); filter: drop-shadow(0 0 14px var(--fever-glow, rgba(255,209,26,1))) brightness(1.18); }
}
.fever-meter-body { text-align: left; line-height: 1.02; }
.fever-meter-label {
  font-size: 13px; font-weight: 900; letter-spacing: 4px;
  color: var(--fever-col, var(--taxi-yellow)); text-shadow: 0 0 8px var(--fever-glow, rgba(255,209,26,0.6));
}
.fever-meter-lvl {
  font-size: 26px; font-weight: 900; color: #fff; line-height: 0.95;
  text-shadow: 0 0 10px var(--fever-glow, rgba(255,209,26,0.7)), 2px 2px 0 #000;
}
.fever-meter-bonus { font-size: 11px; font-weight: 900; letter-spacing: 1px; color: var(--fever-col, var(--taxi-yellow)); opacity: 0.9; }

/* Combo popups */
.combo-layer { position: absolute; inset: 0; overflow: hidden; }
.combo-pop {
  position: absolute; font-family: var(--font-display); font-weight: 900;
  white-space: nowrap; text-shadow: 3px 3px 0 #000, 0 0 16px currentColor;
  transform: translate(-50%, -50%) rotate(var(--rot, -4deg));
  will-change: transform, opacity;
}
.combo-pop .amt { color: var(--taxi-yellow); }
.combo-pop .cx { -webkit-text-stroke: 1px rgba(0,0,0,0.6); }
/* big / huge chains get an extra punchy outline + drop shadow trail */
.combo-pop.big { -webkit-text-stroke: 1px rgba(0,0,0,0.55); }
.combo-pop.huge { -webkit-text-stroke: 1.5px rgba(0,0,0,0.7); letter-spacing: 1px; }
@keyframes comboFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot,-4deg)) scale(0.35); }
  14% { opacity: 1; transform: translate(-50%, -56%) rotate(calc(var(--rot,-4deg) * 0.5)) scale(var(--punch, 1.18)); }
  30% { transform: translate(-50%, -58%) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -86%) rotate(var(--rot,-4deg)) scale(0.95); }
}
/* expanding shockwave ring behind big combo pops */
.combo-ring {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  border: 4px solid var(--taxi-yellow); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2); opacity: 0.9;
  pointer-events: none; will-change: transform, opacity;
}
.combo-ring.huge { border-width: 6px; }
@keyframes comboRing {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(4.5); }
}

/* Center action banner */
.action-banner {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-size: 84px; font-weight: 900;
  color: var(--taxi-yellow); text-shadow: 5px 5px 0 #000, 0 0 30px rgba(255,209,26,0.7);
  opacity: 0; letter-spacing: 2px; text-align: center; white-space: nowrap;
}
.action-banner.show { animation: bannerPop 1.5s ease-out forwards; }
@keyframes bannerPop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-8deg); }
  14% { opacity: 1; transform: translate(-50%,-50%) scale(1.15) rotate(-2deg); }
  78% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.1); }
}

/* Speedometer */
.speedo {
  position: absolute; right: 22px; bottom: 22px;
  width: 132px; height: 96px; text-align: center;
  background: var(--panel); border-radius: 14px; padding: 8px;
  border: 2px solid rgba(255,255,255,0.12); backdrop-filter: blur(4px);
}
.speedo-value { font-size: 50px; font-weight: 900; line-height: 0.9; color: #fff; text-shadow: 2px 2px 0 #000; font-variant-numeric: tabular-nums; }
.speedo-unit { font-size: 13px; letter-spacing: 3px; color: #bcd; }
.speedo-gear {
  position: absolute; top: 8px; right: 12px; width: 30px; height: 30px; line-height: 30px;
  font-size: 19px; font-weight: 900; color: var(--ink); background: var(--taxi-yellow);
  border-radius: 7px; box-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
.speedo-gear.rev { background: var(--hud-red); color: #fff; }

/* Minimap */
.minimap {
  position: absolute; left: 22px; top: 86px;
  width: 180px; height: 180px; border-radius: 12px;
  background: rgba(8,12,20,0.55); border: 2px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(2px);
}

/* Crazy combo meter */
.crazy-meter {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 240px; text-align: center;
  background: var(--panel); border-radius: 12px; padding: 6px 10px;
  border: 2px solid rgba(255,45,149,0.5);
}
.crazy-meter-label { font-size: 13px; letter-spacing: 4px; color: var(--hud-pink); }
.crazy-meter-mult { font-size: 34px; font-weight: 900; color: #fff; text-shadow: 0 0 12px var(--hud-pink), 2px 2px 0 #000; line-height: 1; }
.crazy-meter-bar { margin-top: 4px; height: 10px; border-radius: 5px; background: rgba(0,0,0,0.5); overflow: hidden; }
.crazy-meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--hud-pink), var(--hud-orange), var(--taxi-yellow)); transition: width 0.08s linear; }

/* ---------------- Overlays ---------------- */
.overlay {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(20,28,48,0.72), rgba(4,6,12,0.94));
  backdrop-filter: blur(3px);
}

/* Loading */
.loading { background: linear-gradient(160deg, #ff8c1a 0%, #ff2d95 60%, #6a1bff 100%); }
.loading-logo, .menu-logo { font-family: var(--font-display); font-weight: 900; font-size: clamp(54px, 11vw, 130px); line-height: 0.9; letter-spacing: 2px; color: #fff; text-shadow: 6px 6px 0 rgba(0,0,0,0.35); }
.loading-logo span, .menu-logo span { display: block; color: var(--ink); -webkit-text-stroke: 3px #fff; }
.loading-bar { width: min(360px, 70vw); height: 16px; border-radius: 8px; background: rgba(0,0,0,0.35); overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4); }
.loading-bar-fill { height: 100%; width: 0%; background: var(--taxi-yellow); transition: width 0.2s ease; }
.loading-status { font-family: var(--font-display); letter-spacing: 2px; font-weight: 700; }

/* Menu — translucent attract-mode scrim so the live WebGL city shows through.
   Soft top vignette for title legibility + a darkened bottom band so the
   mode buttons / controls stay readable over the moving scene. Keep the
   backdrop crisp (no blur) so the skyline behind reads clearly. */
.menu {
  background:
    radial-gradient(ellipse 120% 80% at 50% 12%, rgba(10,16,34,0.55) 0%, rgba(8,12,26,0.18) 40%, rgba(4,6,14,0.0) 62%),
    linear-gradient(to bottom, rgba(4,6,14,0.0) 38%, rgba(4,6,14,0.30) 66%, rgba(3,5,12,0.62) 100%);
  backdrop-filter: none;
}
.menu-logo {
  position: relative; transform: rotate(-3deg);
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.55)) drop-shadow(0 0 24px rgba(255,209,26,0.4));
}
/* animated diagonal shine sweep across the CRAZY TAXI logo */
.menu-logo span {
  color: var(--taxi-yellow); -webkit-text-stroke: 3px var(--ink);
  background: linear-gradient(105deg, var(--taxi-yellow) 0%, var(--taxi-yellow) 38%, #fff9d6 50%, var(--taxi-yellow) 62%, var(--taxi-yellow) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: logoShine 4.5s ease-in-out infinite;
}
@keyframes logoShine { 0% { background-position: 130% 0; } 55%, 100% { background-position: -30% 0; } }
.menu-sub {
  font-family: var(--font-display); letter-spacing: 6px; color: var(--hud-cyan);
  font-size: clamp(13px, 2vw, 20px); margin-top: -8px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7), 0 0 18px rgba(25,224,255,0.4);
}
.menu-modes { display: flex; flex-direction: column; gap: 12px; width: min(420px, 86vw); margin-top: 6px; }

.menu-btn {
  pointer-events: auto; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 14px 20px; border: none; border-radius: 14px;
  background: rgba(12,18,34,0.46); color: #fff;
  font-family: var(--font-display); text-align: center;
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  transition: transform 0.14s cubic-bezier(.2,1.3,.4,1), background 0.14s, box-shadow 0.14s, border-color 0.14s;
}
/* sheen that wipes across on hover */
.menu-btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.55s ease; pointer-events: none;
}
.menu-btn:hover, .menu-btn:focus-visible {
  transform: translateY(-3px) scale(1.025); outline: none;
  background: rgba(30,44,76,0.62); border-color: rgba(255,255,255,0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.5), 0 0 22px rgba(25,224,255,0.25);
}
.menu-btn:hover::after, .menu-btn:focus-visible::after { transform: translateX(120%); }
.menu-btn:active { transform: translateY(-1px) scale(0.99); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.menu-btn.primary {
  background: linear-gradient(180deg, #ffe04d 0%, var(--taxi-yellow) 55%, var(--taxi-yellow-deep) 100%);
  color: var(--ink); border-color: #fff;
  box-shadow: 0 6px 18px rgba(245,168,0,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
}
.menu-btn.primary:hover, .menu-btn.primary:focus-visible {
  background: linear-gradient(180deg, #fff0a0 0%, #ffdf4d 55%, var(--taxi-yellow) 100%);
  box-shadow: 0 12px 30px rgba(245,168,0,0.6), 0 0 24px rgba(255,209,26,0.5);
}
.menu-btn-title { font-size: 26px; font-weight: 900; letter-spacing: 1px; }
.menu-btn-desc { font-family: var(--font-ui); font-size: 13px; font-weight: 700; opacity: 0.78; letter-spacing: 0.5px; }

.menu-controls { margin-top: 8px; width: min(460px, 90vw); background: rgba(6,10,22,0.5); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 14px 18px; backdrop-filter: blur(6px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.menu-controls-title { font-family: var(--font-display); letter-spacing: 3px; color: var(--hud-cyan); font-size: 14px; margin-bottom: 8px; }
.menu-controls-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-family: var(--font-ui); font-size: 14px; text-align: left; align-items: center; }
.menu-controls-grid span:nth-child(odd) { text-align: right; }
.menu-tips { margin-top: 10px; font-family: var(--font-ui); font-size: 12.5px; line-height: 1.5; color: #cfe0ff; text-align: left; }
.menu-tips b { color: var(--taxi-yellow); }
kbd { font-family: var(--font-ui); display: inline-block; min-width: 20px; padding: 1px 6px; margin: 0 1px; border-radius: 5px; background: #1c2336; border: 1px solid #38415c; border-bottom-width: 3px; font-size: 12px; font-weight: 700; }
.menu-footer {
  font-family: var(--font-display); letter-spacing: 1px; color: #dfeaff; font-size: 14px; margin-top: 4px;
  padding: 6px 16px; border-radius: 999px;
  background: rgba(6,10,22,0.42); border: 1px solid rgba(255,255,255,0.08);
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  animation: footerPulse 1.8s ease-in-out infinite;
}
.menu-footer kbd { animation: none; }
@keyframes footerPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Pause */
.pause-title, .results-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 8vw, 84px); color: var(--taxi-yellow); text-shadow: 5px 5px 0 #000; letter-spacing: 2px; }
.pause .menu-btn { width: min(320px, 80vw); }

/* Results */
.results { background: radial-gradient(circle at 50% 24%, #3a2350 0%, #160e26 55%, #05030a 100%); }
.results-rank { margin-top: -4px; }
.results-rank-label { font-family: var(--font-display); letter-spacing: 4px; color: var(--hud-cyan); font-size: 15px; }
.results-rank-letter { font-family: var(--font-display); font-weight: 900; font-size: clamp(90px, 18vw, 180px); line-height: 0.9; color: #fff; text-shadow: 0 0 40px var(--taxi-yellow), 6px 6px 0 #000; animation: rankIn 0.7s var(--ease, cubic-bezier(.2,1.5,.4,1)) both; }
.results-rank-letter.top { color: var(--taxi-yellow); text-shadow: 0 0 60px var(--taxi-yellow), 0 0 24px #fff, 6px 6px 0 #000; animation: rankSlam 0.6s cubic-bezier(.2,1.6,.3,1) both; }
@keyframes rankSlam { 0% { opacity: 0; transform: scale(3) rotate(12deg); } 60% { opacity: 1; transform: scale(0.92) rotate(-4deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes rankIn { 0% { opacity: 0; transform: scale(0.2) rotate(-20deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.results-stats { display: flex; flex-direction: column; gap: 6px; width: min(380px, 86vw); }
.results-stat { display: flex; justify-content: space-between; font-family: var(--font-display); background: rgba(255,255,255,0.06); border-radius: 8px; padding: 8px 14px; }
.results-stat span { color: #bcd; font-size: 15px; font-weight: 700; }
.results-stat b { color: var(--taxi-yellow); font-size: 19px; }
.results-best-score { font-family: var(--font-display); color: var(--hud-green); letter-spacing: 1px; height: 22px; }
.results .menu-btn { width: min(320px, 80vw); }

/* Countdown */
.countdown { position: absolute; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.countdown span { font-family: var(--font-display); font-weight: 900; font-size: clamp(120px, 28vw, 320px); color: var(--taxi-yellow); text-shadow: 8px 8px 0 #000, 0 0 60px rgba(255,209,26,0.8); }
.countdown span.tick { animation: cdTick 1s ease-out; }
@keyframes cdTick { 0% { opacity: 0; transform: scale(2.4); } 20% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.6); } }

/* Sound toggle */
.sound-toggle {
  position: absolute; right: 14px; top: 14px; z-index: 40;
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  background: rgba(8,12,20,0.6); border: 2px solid rgba(255,255,255,0.18);
  font-size: 20px; line-height: 1; color: #fff; pointer-events: auto;
}
.sound-toggle:hover { background: rgba(255,255,255,0.16); }

/* FX layers */
.speedlines {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  width: 100%; height: 100%; display: block;
}
.screen-flash { position: absolute; inset: 0; z-index: 25; pointer-events: none; background: #fff; opacity: 0; }
.speed-vignette {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 45%, rgba(0,0,0,0.0) 60%, rgba(20,40,80,0.0) 100%);
  box-shadow: inset 0 0 220px 40px rgba(10,20,50,0.0);
  transition: opacity 0.2s;
}

/* Faint arcade-cabinet overlay: a soft vignette + very low-opacity scanlines.
   Sits below the speed-lines (z 8) and HUD (z 10); never eats pointer events
   and is deliberately faint so it can't hurt readability. */
.arcade-fx {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.045) 1px, rgba(0,0,0,0.0) 3px),
    radial-gradient(ellipse 120% 120% at 50% 50%,
      rgba(0,0,0,0.0) 62%, rgba(0,0,0,0.14) 100%);
  mix-blend-mode: multiply; opacity: 0.55;
}

/* Red edge-vignette urgency pulse driven from hud.update() when time is low */
.urgency-vignette {
  position: absolute; inset: 0; z-index: 24; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 92% 88% at 50% 50%,
    rgba(255,0,0,0.0) 52%, rgba(255,20,30,0.14) 80%, rgba(220,0,10,0.55) 100%);
  will-change: opacity;
}

/* Full-screen milestone tint flash (gold) */
.milestone-flash {
  position: absolute; inset: 0; z-index: 26; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,224,120,0.55), rgba(255,180,0,0.25) 60%, rgba(255,150,0,0.0) 100%);
}
.milestone-flash.show { animation: milestoneFlash 0.7s ease-out; }
@keyframes milestoneFlash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }

/* ★ $N ★ milestone banner */
.milestone-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 27; pointer-events: none; opacity: 0;
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 7vw, 78px);
  letter-spacing: 3px; white-space: nowrap;
  color: var(--gold);
  text-shadow: 5px 5px 0 #000, 0 0 36px rgba(255,212,0,0.95), 0 0 12px #fff;
  -webkit-text-stroke: 2px rgba(120,70,0,0.6);
}
.milestone-banner.show { animation: milestoneBanner 1.5s cubic-bezier(.2,1.4,.3,1) forwards; }
@keyframes milestoneBanner {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(-6deg); }
  16% { opacity: 1; transform: translate(-50%,-50%) scale(1.18) rotate(2deg); }
  74% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
  100% { opacity: 0; transform: translate(-50%,-58%) scale(1.05); }
}

/* DOM confetti burst on dropoff celebrations */
.confetti-layer { position: absolute; inset: 0; z-index: 23; pointer-events: none; overflow: hidden; }
.confetti-bit {
  position: absolute; opacity: 0; will-change: transform, opacity;
  text-shadow: 0 2px 3px rgba(0,0,0,0.5); line-height: 1;
}
@keyframes confettiFly {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3) rotate(0deg); }
  12% { opacity: 1; transform: translate(-50%,-50%) scale(1.1) rotate(calc(var(--spin) * 0.2)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.7) rotate(var(--spin)); }
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .minimap { width: 120px; height: 120px; }
  .hud-timer-value { font-size: 44px; }
  .hud-money-value, .hud-fares-value { font-size: 30px; }
  .speedo { width: 104px; height: 80px; }
  .speedo-value { font-size: 38px; }
}