/* ═══════════════════════════════════════
   VEHICLES — play rug  v3 (2026-08-15)
   Reimagined from a single-vehicle side-view diorama into a top-down play
   rug: every vehicle sits on one road/rail/water map and can be dragged
   anywhere at any time, rotating to face the direction it's travelling
   (js/vehicles.js's "direction engine" — a single top-down sprite per
   vehicle rotated via CSS transform, rather than pre-rendered angle frames).
   The old per-scene parallax rig, vehicle switcher, and job-collection
   engine are retired along with this file's previous contents — none of it
   carries over cleanly to free-roam multi-vehicle play on one shared map.
   ═══════════════════════════════════════ */

#vehiclesScreen{
  display:none;position:fixed;inset:0;z-index:10;
  align-items:center;justify-content:center;
  touch-action:none;overflow:hidden;
  background:#87b34d; /* grass green fallback behind the grid, same family as the tiles */
}
/* Tile-based rug (Jason, 2026-08-16: "what if you made a tiled sprite so
   you can computationally make different layouts" — replaces the earlier
   single fixed-aspect-ratio bg_rug.webp image, which always letterboxed on
   some viewport shape no matter how the ratio was tuned). VEH_GRID_COLS/
   ROWS in js/vehicles.js sizes this; 1fr columns/rows always sum to
   exactly 100% of the container regardless of aspect ratio, so this fills
   the screen edge to edge on ANY viewport with zero cropping and zero
   letterboxing — the thing a single image fundamentally couldn't do.
   Road/rail tiles are drawn procedurally (see DevAssets/PY/
   generate_vehicles_tileset.py) rather than AI-generated, specifically so
   every tile's connecting band is pixel-identical and seams vanish — two
   separate AI generations can't guarantee that the way exact geometry can.
   Vehicle start positions in js/vehicles.js are now percentages of THIS
   grid's cell coordinates, computed from VEH_TILE_TEMPLATE, not of a fixed
   image. */
#vehTileGrid{
  position:relative;
  display:grid;
  /* width/height set inline by _vehBuildTileGrid() in js/vehicles.js —
     sized in JS to the largest box that keeps every cell perfectly
     square for the current screen, then centered here by the flex
     properties on #vehiclesScreen above. Any leftover margin shows that
     screen's grass-green background, not a gap. */
}
.veh-tile{
  width:100%;height:100%;
  background-size:100% 100%;
  background-repeat:no-repeat;
}
#vehFleet{position:absolute;inset:0;z-index:2;}

/* Each vehicle: one top-down sprite, rotated to face its heading. transform
   is fully JS-owned (translate + rotate set together in one inline style on
   every pointermove) — deliberately no CSS transition/animation touches
   `transform` here, both to keep drag tracking 1:1 responsive and because a
   CSS animation on the same property fights an inline style (see the
   Counting Sheep numeral-badge bug this same session: a transform set only
   inside a keyframe reverts to the base value the instant the animation
   ends). Picked-up feedback is a filter change instead, which composites
   independently of transform. */
.veh-top{
  position:absolute;
  width:clamp(58px,15vw,92px);height:auto;
  touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.32));
  user-select:none;
}
.veh-top.veh-dragging{
  cursor:grabbing;z-index:50;
  filter:drop-shadow(0 11px 18px rgba(0,0,0,.42)) brightness(1.04);
}
/* Rotor blades are baked into the single flat sprite, so there's no way to
   layer "just the blades" above other vehicles — instead keep the whole
   helicopter element above the rest of the fleet at all times (idle AND
   mid-drag), so an overlapping car/boat/etc. never covers its blades. */
.veh-helicopter{z-index:6;}
.veh-helicopter.veh-dragging{z-index:60;}
/* Gentle idle breathing when not being touched — signals "these are alive
   and tappable", same convention used across the app (Sleepy Time's
   .slp-char, Counting Sheep's landed sheep, etc.), paused while dragging so
   it never fights the JS-driven rotate transform above. */
@keyframes vehIdleBreathe{0%,100%{opacity:1;}50%{opacity:.94;}}
.veh-top:not(.veh-dragging){animation:vehIdleBreathe 3.6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){.veh-top{animation:none!important;}}

/* Motion trail — small fading puffs spawned behind a vehicle while dragging. */
.veh-trail{
  position:fixed;border-radius:50%;pointer-events:none;z-index:45;
  background:rgba(255,255,255,.7);
  animation:vehTrailFade .55s ease-out forwards;
}
@keyframes vehTrailFade{
  0%{transform:scale(.5);opacity:.75;}
  100%{transform:scale(1.5);opacity:0;}
}

/* Siren flash — firetruck only, while being driven. */
.veh-top.veh-siren-on{animation:vehSirenFlash .5s steps(1) infinite;}
@keyframes vehSirenFlash{
  0%,100%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.32)) drop-shadow(0 0 8px rgba(255,40,40,.9));}
  50%{filter:drop-shadow(0 6px 10px rgba(0,0,0,.32)) drop-shadow(0 0 8px rgba(50,110,255,.9));}
}

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

#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,.88);color:#3a6b2b;
  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;
}
#vehHint.show{opacity:1;}