/* ═══════════════════════════════════════
   VEHICLES — interactive multi-part switcher  v2
   ═══════════════════════════════════════ */

#vehiclesScreen{
  display:none;position:fixed;inset:0;z-index:10;
  flex-direction:column;align-items:center;justify-content:flex-end;
  touch-action:none;overflow:hidden;
}
#vehStage{
  position:relative;width:100%;flex:1;overflow:hidden;
}
.veh-scene-sky{background:url('../Images/GameAssets/Vehicles/bg_sky.webp') center 30%/cover no-repeat, linear-gradient(180deg,#8ecdf0 0%,#c9e9fb 100%);}
.veh-scene-road{background:url('../Images/GameAssets/Vehicles/bg_road.webp') center bottom/cover no-repeat, linear-gradient(180deg,#8ecdf0 0%,#c9e9fb 60%,#8d8d8d 60%,#6b6b6b 100%);}
.veh-scene-rail{background:url('../Images/GameAssets/Vehicles/bg_rail.webp') center bottom/cover no-repeat, linear-gradient(180deg,#8ecdf0 0%,#c9e9fb 55%,#7a9e6b 55%,#5c7d4a 100%);}
.veh-scene-water{background:url('../Images/GameAssets/Vehicles/bg_water.webp') center bottom/cover no-repeat, linear-gradient(180deg,#8ecdf0 0%,#c9e9fb 45%,#4fa8d8 45%,#2f7fb0 100%);}

/* Motion trail — small fading puffs spawned behind the vehicle while it's
   being dragged, styled per scene (contrail / dust / ripple). */
.veh-trail{
  position:fixed;border-radius:50%;pointer-events:none;z-index:8;
  animation:vehTrailFade .6s ease-out forwards;
}
.veh-trail-sky{background:rgba(255,255,255,.85);}
.veh-trail-road,.veh-trail-rail{background:rgba(180,160,130,.55);}
.veh-trail-water{background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.4);}
@keyframes vehTrailFade{
  0%{transform:scale(.5);opacity:.8;}
  100%{transform:scale(1.6);opacity:0;}
}

/* Smoke puffs from the train's stack */
.veh-smoke{
  position:fixed;border-radius:50%;pointer-events:none;z-index:8;
  background:radial-gradient(circle,rgba(230,230,230,.85) 0%,rgba(200,200,200,.5) 60%,transparent 85%);
  animation:vehSmokeRise 1.4s ease-out forwards;
}
@keyframes vehSmokeRise{
  0%{transform:translateY(0) scale(.5);opacity:.75;}
  100%{transform:translateY(-46px) scale(1.8);opacity:0;}
}

/* (Removed the CSS scrolling dash/tie/ripple overlays — the illustrated
   backdrops already paint a road / rail / water surface, so the animated
   pattern rendered as a clashing second road, and on rail as full-height
   translucent bars. Motion is carried by cloud drift, the vehicle's own
   bob/tilt, and the drag motion trails instead.) */

.veh-prop{
  position:absolute;cursor:pointer;object-fit:contain;
  -webkit-tap-highlight-color:transparent;user-select:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.15));
}
.veh-prop.veh-prop-pop{animation:vehPropPop .5s ease-out;}
@keyframes vehPropPop{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}
.veh-cloud{width:clamp(64px,16vw,100px);animation:vehCloudDrift 22s linear infinite;}
.veh-cloud:nth-of-type(2){animation-duration:30s;animation-delay:-9s;}
@keyframes vehCloudDrift{from{transform:translateX(60vw);}to{transform:translateX(-160vw);}}

/* Dirt pile left behind on the ground after a dump-truck dump — sits in the
   stage layer (not the moving vehicle container) so it stays put. */
#vehDirtLayer{position:absolute;inset:0;pointer-events:none;z-index:6;}
.veh-dirt-pile{
  position:absolute;width:clamp(70px,16vw,110px);
  transform:translate(-50%,0) scale(.4);opacity:0;
  animation:vehDirtDrop .5s cubic-bezier(.3,1.4,.4,1) forwards;
}
@keyframes vehDirtDrop{
  0%{transform:translate(-50%,-30px) scale(.3);opacity:0;}
  60%{transform:translate(-50%,4px) scale(1.08);opacity:1;}
  100%{transform:translate(-50%,0) scale(1);opacity:1;}
}
.veh-dirt-pile.veh-dirt-fade{animation:vehDirtFade 1s ease-in forwards;}
@keyframes vehDirtFade{to{opacity:0;}}

/* ── JOB ENGINE — mission items, progress dots, collect fx ── */
#vehJobLayer{position:absolute;inset:0;pointer-events:none;z-index:7;}
.veh-job-item{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:flex-end;justify-content:center;
}
.veh-job-img{
  width:100%;display:block;position:relative;z-index:2;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));
  animation:vehJobIdle 2.4s ease-in-out infinite;
}
@keyframes vehJobIdle{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.veh-job-emoji{
  font-size:38px;line-height:1;text-align:center;width:auto!important;
}
.veh-job-platform{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  width:170%;z-index:1;
}
/* tapNear items pulse when the vehicle is close enough */
.veh-job-item.veh-job-near .veh-job-img{
  animation:vehJobNear .7s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(255,235,120,.95)) drop-shadow(0 4px 8px rgba(0,0,0,.22));
}
@keyframes vehJobNear{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-6px) scale(1.12);}}
/* collect fx */
.veh-job-item.veh-job-pop .veh-job-img{animation:vehJobPop .5s ease-out forwards;}
@keyframes vehJobPop{40%{transform:scale(1.35);opacity:1;}100%{transform:scale(.2);opacity:0;}}
.veh-job-item.veh-job-shrink .veh-job-img{animation:vehJobShrink .6s ease-in forwards;}
@keyframes vehJobShrink{to{transform:scale(.05) translateY(10px);opacity:0;}}
.veh-job-item.veh-job-fade .veh-job-img{animation:vehJobFade .5s ease-out forwards;}
@keyframes vehJobFade{to{opacity:0;}}
.veh-job-item.veh-job-slide-away .veh-job-img{animation:vehJobSlide .85s ease-in forwards;}
@keyframes vehJobSlide{to{transform:translate(90px,-30px) rotate(18deg);opacity:0;}}
.veh-job-item.veh-job-filled .veh-job-img{animation:vehDirtDrop .5s cubic-bezier(.3,1.4,.4,1);}
.veh-job-spray{
  position:absolute;width:80px;z-index:8;transform:translate(-50%,-50%);
  animation:vehSprayFlash .65s ease-out forwards;pointer-events:none;
}
@keyframes vehSprayFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.5);}30%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3);}}
/* progress dots — top-center pill, mirrors space's zone dots */
#vehJobDots{
  position:absolute;top:max(16px,env(safe-area-inset-top) + 10px);left:50%;
  transform:translateX(-50%);z-index:15;
  display:none;gap:8px;align-items:center;
  background:rgba(255,255,255,.75);padding:8px 14px;border-radius:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);pointer-events:none;
}
.veh-job-dot{
  width:12px;height:12px;border-radius:50%;
  background:rgba(0,0,0,.14);border:1.5px solid rgba(0,0,0,.18);
  transition:background .35s,box-shadow .35s;
}
.veh-job-dot.lit{
  background:#ffb300;border-color:#ffb300;
  box-shadow:0 0 8px rgba(255,179,0,.75);
}

/* ── The vehicle container — holds body + spinner/wheel/bed part layers ── */
#vehImg{
  /* JS overrides this per-vehicle (base × scale) — keep them in sync. */
  position:absolute;width:clamp(120px,34vw,240px);
  touch-action:none;cursor:grab;
  --vehFlip:1;
}
.veh-part-body{width:100%;height:auto;display:block;pointer-events:none;user-select:none;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.25));}
#vehImg.veh-driving .veh-part-body{filter:drop-shadow(0 12px 20px rgba(0,0,0,.3));}

.veh-part-spinner{position:absolute;pointer-events:none;user-select:none;
  animation:vehSpin .35s linear infinite;}
@keyframes vehSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

.veh-part-wheel{position:absolute;pointer-events:none;user-select:none;}
.veh-part-wheel.veh-wheel-spin{animation:vehSpin .45s linear infinite;}

.veh-part-bed{position:absolute;pointer-events:none;user-select:none;
  transform-origin:14% 100%;transition:transform .55s cubic-bezier(.3,.9,.4,1);}
.veh-part-bed.veh-dumping{transform:rotate(-38deg);}

#vehImg.veh-hop{animation:vehHop .4s ease-out;}
@keyframes vehHop{
  0%{transform:translate(-50%,-50%) scaleX(var(--vehFlip));}
  40%{transform:translate(-50%,-65%) scaleX(var(--vehFlip));}
  100%{transform:translate(-50%,-50%) scaleX(var(--vehFlip));}
}
/* Idle "in motion" wobble/drift — sells the illusion of movement while the
   vehicle actually sits still on screen. Paused during drag (class removed). */
#vehImg.veh-idle{animation:vehIdleBob 4.2s ease-in-out infinite;}
@keyframes vehIdleBob{
  0%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(0,0) rotate(0deg);}
  25%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(6px,-8px) rotate(-2.5deg);}
  50%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(0,-2px) rotate(0deg);}
  75%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(-6px,-9px) rotate(2.5deg);}
  100%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(0,0) rotate(0deg);}
}
/* Boat gets a wider, slower rock instead of the generic flight-style bob */
#vehImg.veh-idle.veh-rock{animation:vehBoatRock 3.4s ease-in-out infinite;}
@keyframes vehBoatRock{
  0%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(0,0) rotate(0deg);}
  50%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(0,-5px) rotate(-4deg);}
  100%{transform:translate(-50%,-50%) scaleX(var(--vehFlip)) translate(0,0) rotate(0deg);}
}
#vehImg.veh-slide-out{transition:transform .22s ease-in,opacity .22s;transform:translate(-150%,-50%) scaleX(var(--vehFlip));}
#vehImg.veh-slide-in{animation:vehSlideIn .35s ease-out;}
@keyframes vehSlideIn{from{transform:translate(150%,-50%) scaleX(var(--vehFlip));opacity:0;}to{transform:translate(-50%,-50%) scaleX(var(--vehFlip));opacity:1;}}

#vehSwitcher{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);width:100%;z-index:5;
}
.veh-switch-btn{
  width:100%;aspect-ratio:1/1;border-radius:18px;border:3px solid transparent;
  background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;-webkit-tap-highlight-color:transparent;padding:10px;
}
.veh-switch-btn img{width:100%;height:100%;object-fit:contain;}
.veh-switch-btn.active{border-color:#42a5f5;background:#e3f2fd;transform:scale(1.04);}

#vehHint{
  position:absolute;top:max(64px,env(safe-area-inset-top) + 58px);left:50%;
  transform:translateX(-50%);z-index:15;
  background:rgba(255,255,255,.85);color:#2b6ea3;
  font-family:'Baloo 2',cursive;font-weight:700;font-size:.9rem;
  padding:8px 16px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.12);
  opacity:0;transition:opacity .6s ease;pointer-events:none;
  white-space:nowrap;
}

/* Calm mode — ambient "moving" illusion pauses; the vehicle itself keeps a
   slower, gentler breathing motion instead of stopping dead. */
.veh-calm .veh-cloud{animation-play-state:paused;}
.veh-calm #vehImg.veh-idle{animation-duration:8s;}
.veh-calm .veh-part-spinner{animation-duration:.7s;}

/* Parallax rig stacking: far(1) mid(2) road(3) < VEHICLE(6) < fore(8).
   Without this the vehicle has z-index:auto and the foreground layer, which is
   meant to pass in front, buries it entirely. */
#vehImg,.veh-vehicle{position:absolute;z-index:6;}
#vehJobLayer,#vehDirtLayer{z-index:7;}