/* ============================================================
   scene.css
     - .car-cabin + .window-frame (chrome trim)
     - .window-view + direction-forward/left/right toggles
     - scene-forward: sky, sun, clouds, mountains, mesas, road, poles
     - scene-side:    sky, sun, horizon, building-row, powerline, ground, fence, curb
     - signs: all types (highway, service, diamond, regulatory, stop, brown,
              billboard, storefront) and their drive-by / side-slide animations
     - passing cars (forward) + parked cars (side) + license plates
     - AI callout, wrong-click shake
   ============================================================ */

/* ============================================================
   CABIN + WINDOW
   ============================================================ */
.car-cabin {
  position: absolute;
  top: 86px; left: 0; right: 0; bottom: 140px;
  overflow: hidden;
}
.window-frame {
  position: absolute;
  inset: 20px;
  border: 8px solid var(--chrome);
  border-radius: 24px 24px 12px 12px;
  background: var(--sky-horizon);
  overflow: hidden;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.2),
    0 0 0 3px var(--chrome-dark),
    0 8px 20px rgba(0,0,0,0.5);
}
.window-frame::before, .window-frame::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  background: var(--chrome-dark);
  border-radius: 50%;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.5);
  z-index: 5;
}
.window-frame::before { top: 8px; left: 8px; }
.window-frame::after  { top: 8px; right: 8px; }

.window-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.4s ease-out;
}

/* direction toggles: only one scene visible at a time */
.window-view .scene-forward { display: block; }
.window-view .scene-side    { display: none;  }
.window-view.direction-left  .scene-forward,
.window-view.direction-right .scene-forward { display: none; }
.window-view.direction-left  .scene-side,
.window-view.direction-right .scene-side    { display: block; }

/* ============================================================
   SCENE — FORWARD
   ============================================================ */
.scene-forward { position: absolute; inset: 0; }

.sky-layer {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 30%,
    var(--sky-low) 70%,
    var(--sky-horizon) 100%);
}
.sun-disc {
  position: absolute;
  top: 12%;
  right: 15%;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE4A8 0%, #FFB17A 50%, transparent 80%);
  filter: blur(2px);
  box-shadow: 0 0 60px rgba(255,180,120,0.6);
  transition: background 2s, box-shadow 2s;
}
.sun-disc.moon {
  background: radial-gradient(circle, #E0E6F0 0%, #9FA8C0 60%, transparent 85%);
  box-shadow: 0 0 50px rgba(200,210,230,0.5);
}

.cloud {
  position: absolute;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  filter: blur(1px);
}
.cloud-1 { top: 15%; left: 10%; width: 100px; height: 22px; animation: drift 60s linear infinite; }
.cloud-2 { top: 25%; left: 60%; width: 140px; height: 26px; animation: drift 80s linear infinite reverse; }
.cloud-3 { top: 10%; left: 40%; width:  80px; height: 18px; animation: drift 70s linear infinite; }
@keyframes drift {
  from { transform: translateX(-50px); }
  to   { transform: translateX(120%);  }
}

.mountains {
  position: absolute;
  bottom: 40%;
  left: 0; right: 0;
  height: 25%;
  background:
    linear-gradient(120deg, transparent 30%, var(--mountain-1) 30%, var(--mountain-1) 45%, transparent 45%),
    linear-gradient(70deg,  transparent 45%, var(--mountain-2) 45%, var(--mountain-2) 60%, transparent 60%),
    linear-gradient(100deg, transparent 60%, var(--mountain-3) 60%, var(--mountain-3) 80%, transparent 80%);
  opacity: 0.7;
  filter: blur(0.5px);
}
.horizon-mesa {
  position: absolute;
  bottom: 40%;
  width: 120px;
  height: 40px;
  background: var(--mesa-color);
  border-top: 3px solid var(--terracotta);
  opacity: 0.6;
  filter: blur(0.5px);
}
.horizon-mesa.m1 { left: 5%;  }
.horizon-mesa.m2 { left: 70%; width: 90px; height: 30px; }

.road-layer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: var(--ground-grad);
  overflow: hidden;
}
.road-surface {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, var(--road-gray) 15%, #3a342d 100%);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0% 100%);
}
.road-lines {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
}
.road-line-segment {
  position: absolute;
  left: 50%;
  background: var(--road-line);
  transform: translateX(-50%);
  animation: roadLineScroll 1.2s linear infinite;
}
@keyframes roadLineScroll {
  0%   { bottom: 90%; height:  4px; width:  2px; opacity: 0.4; }
  100% { bottom:-20%; height: 40px; width: 18px; opacity: 1;   }
}

/* telephone poles */
.pole {
  position: absolute;
  bottom: 40%;
  width: 3px;
  background: var(--wood-grain);
  animation: poleDriveby 4s linear infinite;
}
.pole::before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  width: 23px;
  height: 3px;
  background: var(--wood-grain);
}
@keyframes poleDriveby {
  0%   { left: 75%; height: 30px; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 105%; height: 220px; opacity: 1; }
}
.pole.left { animation-name: poleDrivebyLeft; }
@keyframes poleDrivebyLeft {
  0%   { left: 25%; height: 30px; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: -10%; height: 220px; opacity: 1; }
}

/* ============================================================
   SCENE — SIDE (left/right window)
   ============================================================ */
.scene-side { position: absolute; inset: 0; }

.side-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 50%,
    var(--sky-low) 100%);
}
.side-sun {
  position: absolute;
  top: 20%;
  right: 60%;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFE4A8 0%, #FFB17A 50%, transparent 80%);
  filter: blur(2px);
  transition: background 2s;
}
.side-sun.moon {
  background: radial-gradient(circle, #E0E6F0 0%, #9FA8C0 60%, transparent 85%);
}

.side-horizon {
  position: absolute;
  top: 40%;
  left: 0; right: 0;
  height: 10%;
  background: linear-gradient(180deg, transparent 0%, var(--mountain-2) 60%, var(--mountain-2) 100%);
  opacity: 0.6;
  filter: blur(0.6px);
}

.side-building-row {
  position: absolute;
  top: 45%;
  left: 0; right: 0;
  height: 22%;
  background-image:
    repeating-linear-gradient(90deg,
      #8b6a50 0, #8b6a50 60px,
      #6d5440 60px, #6d5440 130px,
      #9e7a5c 130px, #9e7a5c 210px,
      #5a4532 210px, #5a4532 280px,
      #7b5942 280px, #7b5942 350px);
  background-size: 350px 100%;
  background-repeat: repeat-x;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.3);
}
/* left-window: content moves right→left, bg-pos decreases */
.window-view.direction-left  .side-building-row { animation: scrollBgLeft  5s linear infinite; }
.window-view.direction-right .side-building-row { animation: scrollBgRight 5s linear infinite; }
@keyframes scrollBgLeft  { from { background-position-x: 0; } to { background-position-x: -350px; } }
@keyframes scrollBgRight { from { background-position-x: 0; } to { background-position-x:  350px; } }

.side-powerline {
  position: absolute;
  top: 41%;
  left: 0; right: 0;
  height: 2px;
  background: #2a1a0e;
  opacity: 0.7;
}
.side-powerline::before, .side-powerline::after {
  content: '';
  position: absolute;
  top: -16px;
  width: 3px; height: 16px;
  background: var(--wood-grain);
}
.side-powerline::before { left: 22%;  }
.side-powerline::after  { right: 22%; }

.side-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 33%;
  background: var(--ground-grad);
}
.side-fence {
  position: absolute;
  bottom: 26%;
  left: 0; right: 0;
  height: 6px;
  background-image: repeating-linear-gradient(90deg,
    var(--wood-grain) 0, var(--wood-grain) 4px,
    transparent 4px, transparent 40px);
  background-size: 40px 100%;
}
.window-view.direction-left  .side-fence { animation: scrollBgLeft  2.5s linear infinite; }
.window-view.direction-right .side-fence { animation: scrollBgRight 2.5s linear infinite; }

.side-curb {
  position: absolute;
  bottom: 24%;
  left: 0; right: 0;
  height: 4px;
  background: rgba(0,0,0,0.4);
}

/* ============================================================
   SIGNS — wrapper + claim indicator + drive-by paths
   ============================================================ */
.sign-wrap {
  position: absolute;
  cursor: pointer;
  transform-origin: center center;
  z-index: 3;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.35));
}
.sign-wrap.claimed { pointer-events: none; }
.sign-wrap.claimed::after {
  content: attr(data-claim);
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--olive);
  color: var(--cream);
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  animation: claimBurst 0.6s ease-out;
}
.sign-wrap.claimed.by-ai::after { background: var(--terracotta-dk); }
@keyframes claimBurst {
  0%   { transform: translateX(-50%) scale(0);   opacity: 0; }
  50%  { transform: translateX(-50%) scale(1.2); opacity: 1; }
  100% { transform: translateX(-50%) scale(1);   opacity: 1; }
}

/* forward drive-by paths */
@keyframes signDriveByRight {
  0%   { top: 45%; right: 48%; transform: scale(0.25); opacity: 0; }
  10%  { opacity: 1; }
  100% { top: 20%; right: -30%; transform: scale(2.2); opacity: 1; }
}
@keyframes signDriveByLeft {
  0%   { top: 45%; left: 48%; transform: scale(0.25); opacity: 0; }
  10%  { opacity: 1; }
  100% { top: 20%; left: -30%; transform: scale(2.2); opacity: 1; }
}
@keyframes signDriveByCenterR {
  0%   { top: 42%; right: 42%; transform: scale(0.3); opacity: 0; }
  10%  { opacity: 1; }
  100% { top: 10%; right: -20%; transform: scale(1.8); opacity: 1; }
}

/* side slide — horizontal, middle height */
@keyframes sideSlideRtoL {
  0%   { left: 105%; top: 36%; transform: scale(0.9); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: -35%; top: 36%; transform: scale(1.1); opacity: 0; }
}
@keyframes sideSlideLtoR {
  0%   { left: -35%; top: 36%; transform: scale(0.9); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 105%; top: 36%; transform: scale(1.1); opacity: 0; }
}

/* ============================================================
   SIGN BODIES — each type gets its own styling
   ============================================================ */
.sign-body {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-transform: uppercase;
}
.sign-body.highway {
  background: var(--sign-green);
  color: var(--sign-white);
  border: 3px solid var(--sign-white);
  padding: 10px 20px;
  border-radius: 3px;
  font-size: 18px;
  min-width: 140px;
  box-shadow: inset 0 0 0 2px var(--sign-green);
}
.sign-body.service {
  background: var(--sign-blue);
  color: var(--sign-white);
  border: 3px solid var(--sign-white);
  padding: 10px 20px;
  border-radius: 3px;
  font-size: 18px;
  min-width: 120px;
  box-shadow: inset 0 0 0 2px var(--sign-blue);
}
.sign-body.diamond {
  background: var(--sign-yellow);
  color: #000;
  width: 120px; height: 120px;
  transform: rotate(45deg);
  border: 3px solid #000;
  padding: 0;
  font-size: 14px;
}
.sign-body.diamond > span {
  transform: rotate(-45deg);
  max-width: 80px;
  line-height: 1;
}
.sign-body.regulatory {
  background: var(--sign-white);
  color: #000;
  border: 3px solid #000;
  padding: 10px 16px;
  font-size: 17px;
  min-width: 100px;
}
.sign-body.stop {
  background: var(--sign-red);
  color: white;
  width: 90px; height: 90px;
  border: 3px solid white;
  border-radius: 4px;
  font-size: 22px;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.sign-body.brown {
  background: var(--sign-brown);
  color: var(--sign-white);
  border: 3px solid var(--sign-white);
  padding: 10px 20px;
  border-radius: 3px;
  font-size: 16px;
  min-width: 130px;
}
.sign-body.billboard {
  padding: 14px 22px;
  font-size: 20px;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 2px;
  border-radius: 4px;
  border: 4px solid rgba(0,0,0,0.3);
  min-width: 140px;
  position: relative;
}
.sign-body.billboard::before, .sign-body.billboard::after {
  content: '';
  position: absolute;
  bottom: -40px;
  width: 6px; height: 40px;
  background: #4A3325;
}
.sign-body.billboard::before { left: 15%;  }
.sign-body.billboard::after  { right: 15%; }
.sign-body.billboard.red    { background: #CC3333; color: #FFEB99; }
.sign-body.billboard.yellow { background: #FFC847; color: #3D2E1F; }
.sign-body.billboard.blue   { background: #3F7ACC; color: #fff; }
.sign-body.billboard.green  { background: #3E8E41; color: #fff; }
.sign-body.billboard.orange { background: #E86B1F; color: #fff; }

/* storefront (side view) */
.sign-body.storefront {
  padding: 12px 24px 30px;
  font-size: 22px;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 2px;
  border-radius: 4px 4px 0 0;
  min-width: 150px;
  border: 3px solid rgba(0,0,0,0.3);
  position: relative;
  box-shadow: 0 6px 0 rgba(0,0,0,0.4);
}
.sign-body.storefront::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 10%; right: 10%;
  height: 8px;
  background: #2a1a0e;
}
.sign-body.storefront.red    { background: #CC3333; color: #FFEB99; }
.sign-body.storefront.yellow { background: #FFC847; color: #3D2E1F; }
.sign-body.storefront.blue   { background: #3F7ACC; color: #fff; }
.sign-body.storefront.green  { background: #3E8E41; color: #fff; }
.sign-body.storefront.orange { background: #E86B1F; color: #fff; }

/* wrong-click feedback */
@keyframes shakeSign {
  0%, 100% { transform: translateX(0);   }
  20%      { transform: translateX(-4px); }
  40%      { transform: translateX(4px);  }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px);  }
}
.sign-wrap.wrong-click > .sign-body {
  animation: shakeSign 0.3s ease-in-out;
  outline: 3px solid var(--sign-red);
}

/* ============================================================
   PASSING CARS (forward) + PARKED CARS (side)
   ============================================================ */
.passing-car {
  position: absolute;
  bottom: 8%;
  height: 40px;
  z-index: 2;
  cursor: pointer;
  animation: carDriveBy 3s linear forwards;
  transform-origin: center;
}
@keyframes carDriveBy {
  0%   { left: 50%; transform: scale(0.3); opacity: 0; bottom: 22%; }
  10%  { opacity: 1; }
  100% { left: -15%; transform: scale(1.8); opacity: 1; bottom: 4%; }
}
.passing-car.right { animation-name: carDriveByRight; }
@keyframes carDriveByRight {
  0%   { left: 50%; transform: scale(0.3); opacity: 0; bottom: 22%; }
  10%  { opacity: 1; }
  100% { left: 105%; transform: scale(1.8); opacity: 1; bottom: 4%; }
}

.parked-car {
  position: absolute;
  bottom: 22%;
  height: 42px;
  z-index: 2;
  cursor: pointer;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.parked-car.r-to-l { animation: sideSlideRtoL 5s linear forwards; }
.parked-car.l-to-r { animation: sideSlideLtoR 5s linear forwards; }

.car-body {
  width: 110px; height: 40px;
  border-radius: 10px 18px 6px 6px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}
.car-body::before {
  content: '';
  position: absolute;
  top: 4px; left: 25px; right: 20px;
  height: 18px;
  background: rgba(180,210,230,0.6);
  border-radius: 8px 12px 2px 2px;
}
.license-plate {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sign-white);
  color: #000;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  padding: 2px 6px;
  border: 1px solid var(--chrome-dark);
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}
.license-plate.matched {
  background: var(--sign-yellow);
  animation: plateBurst 0.5s ease-out;
}
@keyframes plateBurst {
  0%   { transform: translateX(-50%) scale(1);   }
  50%  { transform: translateX(-50%) scale(1.4); box-shadow: 0 0 20px var(--sign-yellow); }
  100% { transform: translateX(-50%) scale(1);   }
}

/* ============================================================
   AI CALLOUT (when brat claims a sign)
   ============================================================ */
.ai-callout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--terracotta-dk);
  color: var(--cream);
  padding: 10px 22px;
  font-family: 'Bungee', sans-serif;
  font-size: 20px;
  letter-spacing: 2px;
  border-radius: 4px;
  border: 3px solid var(--cream);
  z-index: 50;
  animation: calloutFade 1.4s ease-out forwards;
  pointer-events: none;
}
@keyframes calloutFade {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(0.5); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(0.9); }
}

/* ============================================================
   NIGHT DIMMER + HEADLIGHT CONE
     Sits above the sign layer so it actually dims signs too.
     Forward view: radial cutout at bottom-center = headlight cone.
     Side view:    uniform dim (no headlights point sideways).
   ============================================================ */
.night-dim-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 13;                   /* above sign(10), fog(11), rain/snow(12) */
  opacity: 0;
  transition: opacity 1.5s;
  background: rgba(5,5,20,0.6);
}
.night-dim-overlay.active { opacity: 1; }

/* forward: cone cutout centered at bottom */
.window-view.direction-forward .night-dim-overlay.active {
  background: radial-gradient(ellipse 55% 55% at 50% 110%,
    rgba(5,5,20,0)    0%,
    rgba(5,5,20,0.15) 35%,
    rgba(5,5,20,0.65) 70%,
    rgba(5,5,20,0.85) 100%);
}

.headlight-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 14;                   /* above night-dim */
  opacity: 0;
  transition: opacity 1.5s;
}
.window-view.direction-forward .headlight-glow.active {
  opacity: 1;
  background: radial-gradient(ellipse 45% 40% at 50% 105%,
    rgba(255,230,170,0.22) 0%,
    rgba(255,210,140,0.10) 30%,
    rgba(255,200,130,0.04) 55%,
    transparent 75%);
}
/* side view: no warm cone */
.window-view.direction-left  .headlight-glow.active,
.window-view.direction-right .headlight-glow.active { opacity: 0; }

/* ============================================================
   BIOME CALLOUT
     Big centered banner that fires when a new leg begins.
   ============================================================ */
.biome-callout {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: rgba(0,0,0,0.72);
  color: var(--cream);
  padding: 16px 36px;
  font-family: 'Bungee', sans-serif;
  font-size: 30px;
  letter-spacing: 3px;
  border: 3px solid var(--cream);
  border-radius: 4px;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--terracotta-dk);
  white-space: nowrap;
}
.biome-callout.active {
  animation: biomeCalloutShow 3.6s ease-out forwards;
}
@keyframes biomeCalloutShow {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1);   }
}

/* ============================================================
   MISS INDICATOR — shown when a player-letter sign escapes unclaimed
   ============================================================ */
.miss-indicator {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  color: var(--sign-red);
  background: rgba(0,0,0,0.72);
  padding: 8px 18px;
  border: 3px solid var(--sign-red);
  border-radius: 4px;
  letter-spacing: 3px;
  pointer-events: none;
  z-index: 25;
  text-transform: uppercase;
  white-space: nowrap;
  animation: missFlash 1.4s ease-out forwards;
}
@keyframes missFlash {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
  15%  { opacity: 1; transform: translateX(-50%) scale(1.12); }
  30%  { opacity: 1; transform: translateX(-50%) scale(1);    }
  75%  { opacity: 0.9; transform: translateX(-50%) scale(1);  }
  100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(0.95); }
}

/* ============================================================
   PASSENGER CHATTER BUBBLE
   ============================================================ */
.chatter-bubble {
  position: absolute;
  bottom: 22%;
  right: 6%;
  background: var(--cream);
  color: var(--dashboard-dk);
  font-family: 'Special Elite', serif;
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  border: 2px solid var(--dashboard-dk);
  max-width: 200px;
  z-index: 22;
  pointer-events: none;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  animation: chatterShow 4.2s ease-out forwards;
}
.chatter-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 18px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 2px solid transparent;
  border-top: 12px solid var(--cream);
  filter: drop-shadow(0 1px 0 var(--dashboard-dk));
}
@keyframes chatterShow {
  0%   { opacity: 0; transform: translateY(12px) scale(0.8); }
  10%  { opacity: 1; transform: translateY(0)    scale(1);   }
  88%  { opacity: 1; transform: translateY(0)    scale(1);   }
  100% { opacity: 0; transform: translateY(-8px) scale(0.95);}
}

/* ============================================================
   BIOME SCENERY ACCENTS
     Each `.decor` sub-element is hidden by default; the biome class
     on #game-screen reveals the relevant one.
   ============================================================ */
.decor {
  position: absolute;
  display: none;
  pointer-events: none;
}

/* -- DESERT: saguaro cactus at roadside -- */
#game-screen.biome-desert .decor-cactus { display: block; }
.decor-cactus {
  bottom: 40%;
  left: 8%;
  width: 26px;
  height: 52px;
  z-index: 2;
}
.cactus-body {
  position: absolute;
  bottom: 0;
  left: 9px;
  width: 8px;
  height: 52px;
  background: linear-gradient(90deg, #2d4525 0%, #3d5c3a 40%, #3d5c3a 60%, #1a2d15 100%);
  border-radius: 4px 4px 1px 1px;
}
.cactus-arm-left {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 9px;
  height: 6px;
  background: #3d5c3a;
  border-radius: 0 0 0 2px;
}
.cactus-arm-left::before {
  content: '';
  position: absolute;
  left: 0; bottom: 6px;
  width: 6px; height: 16px;
  background: linear-gradient(90deg, #2d4525 0%, #3d5c3a 60%, #1a2d15 100%);
  border-radius: 2px 2px 0 0;
}
.cactus-arm-right {
  position: absolute;
  bottom: 30px;
  right: 0;
  width: 9px;
  height: 6px;
  background: #3d5c3a;
  border-radius: 0 0 2px 0;
}
.cactus-arm-right::before {
  content: '';
  position: absolute;
  right: 0; bottom: 6px;
  width: 6px; height: 20px;
  background: linear-gradient(90deg, #3d5c3a 0%, #1a2d15 100%);
  border-radius: 2px 2px 0 0;
}

/* -- FOREST: pine tree row, mesas get hidden -- */
#game-screen.biome-forest .horizon-mesa { display: none; }
#game-screen.biome-forest .decor-pines { display: block; }
.decor-pines {
  bottom: 40%;
  left: 0; right: 0;
  height: 40px;
  background-image:
    /* alternating triangle silhouettes */
    linear-gradient(45deg,  #2d4525 25%, transparent 26%),
    linear-gradient(-45deg, #2d4525 25%, transparent 26%),
    linear-gradient(45deg,  #1a2d15 25%, transparent 26%),
    linear-gradient(-45deg, #1a2d15 25%, transparent 26%);
  background-size: 28px 40px, 28px 40px, 36px 50px, 36px 50px;
  background-position: 0 100%, 14px 100%, 6px 100%, 24px 100%;
  background-repeat: repeat-x;
  opacity: 0.9;
}

/* -- PLAINS: distant windmill -- */
#game-screen.biome-plains .decor-windmill { display: block; }
.decor-windmill {
  bottom: 42%;
  right: 22%;
  width: 40px;
  height: 60px;
  opacity: 0.55;
}
.windmill-pole {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 45px;
  background: #6b6458;
}
.windmill-blades {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  animation: windmillSpin 7s linear infinite;
}
.windmill-blades::before,
.windmill-blades::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 26px; height: 3px;
  background: #6b6458;
  transform-origin: center;
  border-radius: 1px;
}
.windmill-blades::before { transform: translate(-50%, -50%) rotate(0deg);  }
.windmill-blades::after  { transform: translate(-50%, -50%) rotate(90deg); }
@keyframes windmillSpin {
  from { transform: translateX(-50%) rotate(0deg);   }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* -- COASTAL: water horizon line + drifting seagull -- */
#game-screen.biome-coastal .decor-water { display: block; }
#game-screen.biome-coastal .decor-seagull { display: block; }
#game-screen.biome-coastal .horizon-mesa { display: none; }
.decor-water {
  bottom: 40%;
  left: 0; right: 0;
  height: 8px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(62,123,163,0.8) 30%, rgba(46,96,128,0.95) 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.decor-seagull {
  top: 22%;
  left: 0;
  width: 100%;
  height: 10px;
  background-image:
    /* two 'M' shapes as seagulls using tight gradients */
    radial-gradient(ellipse 6px 1.5px at 20% 50%, #3a3a3a 50%, transparent 55%),
    radial-gradient(ellipse 6px 1.5px at 22% 50%, transparent 45%, #3a3a3a 50%, transparent 55%);
  background-size: 22px 10px;
  background-repeat: repeat-x;
  animation: seagullDrift 45s linear infinite;
  opacity: 0.7;
}
@keyframes seagullDrift {
  from { background-position: -30px 0; }
  to   { background-position: calc(100% + 30px) 0; }
}

/* -- MOUNTAIN: white snowcaps over mountain gradient -- */
#game-screen.biome-mountain .decor-snowcap { display: block; }
.decor-snowcap {
  bottom: 60%;
  left: 0; right: 0;
  height: 7%;
  background:
    linear-gradient(120deg, transparent 30%, rgba(240,228,207,0.85) 30%, rgba(240,228,207,0.85) 34%, transparent 35%),
    linear-gradient(70deg,  transparent 45%, rgba(240,228,207,0.9) 45%,  rgba(240,228,207,0.9) 50%,  transparent 51%),
    linear-gradient(100deg, transparent 60%, rgba(240,228,207,0.85) 60%, rgba(240,228,207,0.85) 65%, transparent 66%);
  filter: blur(0.5px);
}

/* -- CITY: tall building silhouettes on horizon -- */
#game-screen.biome-city .decor-skyline { display: block; }
.decor-skyline {
  bottom: 55%;
  left: 0; right: 0;
  height: 10%;
  background-image: repeating-linear-gradient(90deg,
    #2a2f3a 0px,  #2a2f3a 22px,
    transparent 22px, transparent 28px,
    #1e2330 28px, #1e2330 42px,
    transparent 42px, transparent 46px,
    #353c4a 46px, #353c4a 72px,
    transparent 72px, transparent 78px,
    #262b38 78px, #262b38 100px,
    transparent 100px, transparent 108px);
  background-position: 0 100%;
  background-size: 108px 100%;
  background-repeat: repeat-x;
  mask-image: linear-gradient(180deg, transparent 0%, black 30%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%);
  opacity: 0.85;
}

/* ============================================================
   FIREFLIES (forest + night only)
   ============================================================ */
.firefly-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  z-index: 15;            /* above night-dim so they glow through */
}
#game-screen.biome-forest.night .firefly-layer { display: block; }
.firefly {
  position: absolute;
  width: 3px; height: 3px;
  background: #a5f582;
  border-radius: 50%;
  box-shadow: 0 0 6px #a5f582, 0 0 12px rgba(165,245,130,0.5);
  animation: fireflyDrift 9s ease-in-out infinite;
}
@keyframes fireflyDrift {
  0%, 100% { opacity: 0.3; transform: translate(0, 0); }
  25%      { opacity: 1;   transform: translate(-8px, -6px); }
  50%      { opacity: 0.6; transform: translate(5px, -12px); }
  75%      { opacity: 1;   transform: translate(10px, 4px); }
}

/* ============================================================
   NIGHT + BIOME COMBOS
   ============================================================ */
/* city at night: storefronts & billboards neon-glow */
#game-screen.biome-city.night .sign-body.storefront,
#game-screen.biome-city.night .sign-body.billboard {
  filter: brightness(1.25) drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px currentColor);
}

/* coastal at night: water strip gets moonlit */
#game-screen.biome-coastal.night .decor-water {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(130,170,210,0.6) 30%,
    rgba(60,90,130,0.9) 100%);
  box-shadow: 0 0 8px rgba(200,220,240,0.3);
}

/* ============================================================
   PAUSE OVERLAY
   ============================================================ */
.pause-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pause-overlay.visible { display: flex; }

.pause-card {
  background: var(--cream);
  color: var(--dashboard-dk);
  border: 4px solid var(--dashboard-dk);
  border-radius: 6px;
  padding: 24px 40px 22px;
  text-align: center;
  box-shadow: 4px 4px 0 var(--dashboard-dk);
  font-family: 'Bungee', sans-serif;
}
.pause-icon {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 6px;
}
.pause-title {
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--terracotta);
  margin-bottom: 6px;
}
.pause-hint {
  font-family: 'Special Elite', serif;
  font-size: 12px;
  color: var(--wood-grain);
  letter-spacing: 1px;
}

/* ============================================================
   CLAIM RUMBLE — subtle cabin shake when the player grabs a sign
   ============================================================ */
.car-cabin.claim-rumble {
  animation: claimRumble 0.28s ease-out;
}
@keyframes claimRumble {
  0%   { transform: translate(0, 0);   }
  15%  { transform: translate(-3px, 1px); }
  30%  { transform: translate(3px, -2px); }
  50%  { transform: translate(-2px, 2px); }
  70%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0);   }
}

/* ============================================================
   POSTCARD SIGNS — rare collectible landmarks.
     Uses a custom bordered card look with a pulsing glow to
     telegraph rarity. Sits inside the normal sign pipeline.
   ============================================================ */
.sign-body.postcard {
  min-width: 170px;
  padding: 10px 16px 14px;
  background: var(--pc-color, #C47A3A);
  color: var(--cream);
  border: 5px solid var(--cream);
  border-radius: 6px;
  box-shadow:
    0 0 0 3px var(--dashboard-dk),
    0 0 22px rgba(244,196,48,0.55),
    inset 0 0 0 2px rgba(255,255,255,0.15);
  font-family: 'Bungee', sans-serif;
  letter-spacing: 1.5px;
  text-align: center;
  position: relative;
  animation: postcardPulse 1.6s ease-in-out infinite;
}
.sign-body.postcard .pc-emoji {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 2px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.sign-body.postcard .pc-title {
  font-size: 13px;
  line-height: 1.1;
  display: block;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}
.sign-body.postcard .pc-place {
  display: block;
  font-family: 'Special Elite', serif;
  font-size: 9px;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  margin-top: 3px;
}
@keyframes postcardPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--dashboard-dk), 0 0 22px rgba(244,196,48,0.55), inset 0 0 0 2px rgba(255,255,255,0.15); }
  50%      { box-shadow: 0 0 0 3px var(--dashboard-dk), 0 0 32px rgba(244,196,48,0.85), inset 0 0 0 2px rgba(255,255,255,0.25); }
}

/* fly-to-tray animation when a postcard is collected */
.sign-wrap.postcard-collected {
  pointer-events: none;
  animation: postcardFly 0.9s ease-in forwards !important;
}
@keyframes postcardFly {
  0%   { transform: scale(1)   rotate(0deg);   opacity: 1; }
  25%  { transform: scale(1.3) rotate(-4deg);  opacity: 1; }
  100% { transform: translate(-48vw, 36vh) scale(0.25) rotate(12deg); opacity: 0; }
}

/* ============================================================
   ROAD EVENT OVERLAYS + BANNER
     Overlay sits subtly behind the sign layer (z=1 in the view),
     banner is a loud centered announcement that comes and goes.
   ============================================================ */
.event-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
  z-index: 4;
}
.event-overlay.active { opacity: 1; }

.event-overlay.event-construction {
  background: repeating-linear-gradient(45deg,
    rgba(232,107,31,0.14) 0px,
    rgba(232,107,31,0.14) 18px,
    rgba(0,0,0,0.18)    18px,
    rgba(0,0,0,0.18)    36px);
}
.event-overlay.event-school {
  background: linear-gradient(180deg,
    rgba(255,200,71,0.18) 0%,
    rgba(255,200,71,0.08) 60%,
    transparent 100%);
  box-shadow: inset 0 0 80px rgba(255,200,71,0.2);
}
.event-overlay.event-scenic {
  background: linear-gradient(180deg,
    rgba(107,122,76,0.12) 0%,
    rgba(107,122,76,0.06) 50%,
    transparent 100%);
}

.event-banner {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: rgba(0,0,0,0.78);
  color: var(--sign-yellow);
  padding: 12px 28px;
  font-family: 'Bungee', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  border: 3px solid var(--sign-yellow);
  border-radius: 4px;
  z-index: 29;
  pointer-events: none;
  opacity: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.event-banner.active {
  animation: eventBannerShow 2.8s ease-out forwards;
}
@keyframes eventBannerShow {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  25%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
  100% { opacity: 0; transform: translate(-50%, -80%) scale(1);   }
}

/* ============================================================
   HITCHHIKER (Phase 6)
     A roadside character who drifts across the view holding a sign
     with a letter on it. Clicking them "picks them up".
   ============================================================ */
.hitchhiker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;   /* above signs but below night dim */
}
.hitchhiker {
  position: absolute;
  bottom: 22%;
  left: 100%;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  pointer-events: auto;
  cursor: pointer;
  animation: hitchhikerDriftBy 7s linear forwards;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.4));
  transform: scale(0.7);
}
@keyframes hitchhikerDriftBy {
  0%   { left: 100%; transform: scale(0.7); }
  80%  { left: 15%;  transform: scale(1.0); }
  100% { left: -15%; transform: scale(1.1); }
}
.hitchhiker.picked-up {
  animation: hitchhikerPickup 0.6s ease-out forwards !important;
  pointer-events: none;
}
@keyframes hitchhikerPickup {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.2) rotate(-3deg); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.3) rotate(12deg); }
}

/* character body — cartoon silhouette, ~48px tall */
.hh-body {
  position: relative;
  width: 28px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hh-head {
  width: 18px; height: 18px;
  background: #d9b88f;
  border: 2px solid #2a1a0e;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  z-index: 2;
}
.hh-torso {
  width: 22px;
  height: 22px;
  background: var(--terracotta);
  border: 2px solid var(--terracotta-dk);
  border-radius: 4px 4px 2px 2px;
  margin-top: -2px;
  position: relative;
  z-index: 1;
}
.hh-legs {
  width: 18px;
  height: 10px;
  background: #4a3a2a;
  border: 2px solid #2a1a0e;
  border-radius: 2px 2px 0 0;
  margin-top: -2px;
}
.hh-arm {
  position: absolute;
  top: 18px;
  right: -9px;
  width: 4px;
  height: 16px;
  background: #d9b88f;
  border: 2px solid #2a1a0e;
  border-radius: 2px;
  transform-origin: top center;
  animation: hhArmWave 0.8s ease-in-out infinite;
  z-index: 3;
}
@keyframes hhArmWave {
  0%, 100% { transform: rotate(-25deg); }
  50%      { transform: rotate(-55deg); }
}
/* the letter sign they hold */
.hh-sign {
  position: relative;
  margin-bottom: 22px;
  background: #f0e4cf;
  color: #2a1a0e;
  border: 2px solid #2a1a0e;
  padding: 3px 7px 4px;
  border-radius: 2px;
  font-family: 'Bungee', sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.35);
}
.hh-sign::after {
  /* tiny stick under the sign */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 2px; height: 10px;
  background: #2a1a0e;
  transform: translateX(-50%);
}
/* hover + click feedback */
.hitchhiker:hover .hh-sign {
  background: var(--sign-yellow);
  box-shadow: 0 0 10px rgba(244,196,48,0.5);
}
.hitchhiker-bubble {
  position: absolute;
  bottom: 70%;
  right: 105%;
  background: var(--cream);
  color: var(--dashboard-dk);
  font-family: 'Special Elite', serif;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 12px 12px 2px 12px;
  border: 2px solid var(--dashboard-dk);
  max-width: 220px;
  white-space: normal;
  pointer-events: none;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  animation: hhBubbleShow 2.2s ease-out forwards;
  opacity: 0;
}
@keyframes hhBubbleShow {
  0%   { opacity: 0; transform: translateY(6px) scale(0.9); }
  15%  { opacity: 1; transform: translateY(0)    scale(1);   }
  80%  { opacity: 1; transform: translateY(0)    scale(1);   }
  100% { opacity: 0; transform: translateY(-4px) scale(0.95); }
}
/* night variant: spookier shadow */
#game-screen.night .hitchhiker { filter: drop-shadow(0 0 6px rgba(100,140,200,0.4)); }

/* ============================================================
   CUTSCENE OVERLAY (Phase 6)
     Full-viewport theatrical moment — gameplay continues beneath
     but the scene is briefly veiled. Each cutscene has a themed
     class that changes the backdrop tint/gradient.
   ============================================================ */
.cutscene-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 35;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, transparent 20%, rgba(0,0,0,0.55) 80%);
  transition: opacity 0.4s;
}
.cutscene-overlay.active {
  opacity: 1;
  animation: cutsceneFade 2.8s ease-in-out forwards;
}
@keyframes cutsceneFade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { opacity: 0; }
}
.cutscene-title {
  font-family: 'Bungee', sans-serif;
  font-size: 38px;
  letter-spacing: 4px;
  color: var(--cream);
  text-shadow:
    3px 3px 0 var(--dashboard-dk),
    0 0 20px rgba(0,0,0,0.6);
  transform: scale(0.9);
  animation: cutsceneTitleIn 2.8s ease-out forwards;
  text-align: center;
  padding: 0 20px;
}
@keyframes cutsceneTitleIn {
  0%   { opacity: 0; transform: translateY(-12px) scale(0.85); }
  20%  { opacity: 1; transform: translateY(0)     scale(1);    }
  85%  { opacity: 1; transform: translateY(0)     scale(1);    }
  100% { opacity: 0; transform: translateY(8px)   scale(1.05); }
}
.cutscene-subtitle {
  font-family: 'Special Elite', serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--cream-dark);
  margin-top: 8px;
  opacity: 0;
  animation: cutsceneSubtitleIn 2.8s ease-out forwards;
  animation-delay: 0.4s;
  text-align: center;
  padding: 0 20px;
}
@keyframes cutsceneSubtitleIn {
  0%   { opacity: 0; }
  35%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
/* per-cutscene backdrop tints */
.cutscene-overlay.cs-desert   { background: radial-gradient(circle, rgba(232,150,80,0.2)   20%, rgba(60,30,15,0.7)   90%); }
.cutscene-overlay.cs-forest   { background: radial-gradient(circle, rgba(80,120,70,0.2)    20%, rgba(20,40,20,0.75)  90%); }
.cutscene-overlay.cs-plains   { background: radial-gradient(circle, rgba(180,170,110,0.2)  20%, rgba(80,70,40,0.7)   90%); }
.cutscene-overlay.cs-coastal  { background: radial-gradient(circle, rgba(100,160,200,0.25) 20%, rgba(20,50,80,0.75)  90%); }
.cutscene-overlay.cs-mountain { background: radial-gradient(circle, rgba(160,160,180,0.2)  20%, rgba(30,40,60,0.75)  90%); }
.cutscene-overlay.cs-city     { background: radial-gradient(circle, rgba(220,100,60,0.2)   20%, rgba(30,20,40,0.8)   90%); }
.cutscene-overlay.cs-dusk     { background: radial-gradient(circle, rgba(230,130,80,0.3)   20%, rgba(50,30,60,0.8)   90%); }
.cutscene-overlay.cs-night    { background: radial-gradient(circle, rgba(80,100,160,0.25)  20%, rgba(5,10,25,0.9)    90%); }

/* ============================================================
   DRIVER CRASH WARNING (Phase 7)
     Two-stage nudge → urgent → crash. Visible only when the driver
     looks out the side for too long.
   ============================================================ */
.crash-warning {
  position: absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 22px;
  border-radius: 4px;
  font-family: 'Bungee', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}
.crash-warning.visible { opacity: 1; }

/* nudge — gentle, yellow, matter-of-fact */
.crash-warning.nudge {
  background: rgba(30,20,10,0.8);
  color: var(--sign-yellow);
  border: 2px solid var(--sign-yellow);
  font-size: 14px;
  text-transform: lowercase;
  letter-spacing: 2px;
  font-family: 'Special Elite', serif;
  animation: crashNudge 0.8s ease-out;
}
@keyframes crashNudge {
  0%   { transform: translate(-50%, -60%); opacity: 0; }
  100% { transform: translate(-50%, -50%); opacity: 1; }
}

/* urgent — loud, red, pulsing */
.crash-warning.urgent {
  background: rgba(80,20,20,0.92);
  color: var(--cream);
  border: 3px solid var(--sign-red);
  font-size: 22px;
  box-shadow: 0 0 24px rgba(196,72,72,0.7);
  animation: crashUrgent 0.6s ease-in-out infinite;
}
@keyframes crashUrgent {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}

/* Crash shake — scene-wide impact when the crash fires. Overrides claim-rumble
   via !important because we're briefly committing the shake. */
.car-cabin.crash-shake {
  animation: crashShake 0.55s ease-out !important;
}
@keyframes crashShake {
  0%   { transform: translate(0, 0);        filter: brightness(1);   }
  10%  { transform: translate(-12px, 4px);  filter: brightness(1.8); }
  20%  { transform: translate(10px, -5px);  filter: brightness(1.3); }
  30%  { transform: translate(-8px, 6px);   filter: brightness(1);   }
  45%  { transform: translate(6px, -3px);   filter: brightness(0.7); }
  65%  { transform: translate(-4px, 2px);   filter: brightness(0.85);}
  100% { transform: translate(0, 0);        filter: brightness(1);   }
}