.map { isolation: isolate; }
.btn.parked-pending { background: #d4dae1; color: #8993a1; }
.btn.parked-ready { animation: parked-ready .48s ease-out; }

.station-map { --station-zone-left:64px; --station-van-left:83px; height:255px; background:#dce5d7; }
.station-world { position:absolute; inset:0; }
.station-building { position:absolute; z-index:3; left:8px; right:-82px; top:8px; height:78px; border:2px solid #8e979e; border-radius:5px; background:#eef1f2; box-shadow:0 5px 10px #25333b30; }
.station-building::before { content:""; position:absolute; left:0; right:0; top:14px; height:8px; background:#2e8fbd; }
.station-building b { position:absolute; left:14px; top:38px; color:#46515a; font-size:11px; letter-spacing:1px; }
.station-pad-link { position:absolute; z-index:2; left:44px; top:80px; width:130px; height:28px; background:#b8c0c5; }
.station-road { position:absolute; z-index:1; left:-8%; right:-8%; top:101px; height:150px; border-top:3px solid #f5f6f7; border-bottom:3px solid #f5f6f7; background:#68727a; }
.station-road i { display:block; height:20%; border-bottom:2px dashed #ffffffa8; }
.station-road i:last-child { border-bottom:0; }
.station-stop-zone { position:absolute; z-index:4; left:var(--station-zone-left); top:105px; width:100px; height:27px; border:3px solid #1687e8; border-radius:6px; background:#1687e824; }
.station-map .station-van { z-index:6; left:calc(100% + 10px); top:93px; bottom:auto; width:62px; height:50px; display:grid; place-items:center; font-size:43px; line-height:1; filter:drop-shadow(0 3px 3px #15202a55); animation:station-drive 22s cubic-bezier(.42,0,.25,1) forwards; }
.station-map.arrived .station-van { animation:none; left:var(--station-van-left); }
.station-map.arrived .station-stop-zone { animation:station-zone-pulse .7s ease-out 2; }
.speed-sign { position:absolute; z-index:12; left:14px; bottom:13px; width:54px; padding:5px 3px 4px; border:3px solid #090909; border-radius:2px; background:#f2f2ed; color:#000; text-align:center; box-shadow:0 2px 4px #00000066; font-family:Arial Black,Arial,sans-serif; animation:speed-sign-cue 22s linear forwards; }
.speed-sign span { display:block; font-size:9px; font-weight:900; line-height:1.02; letter-spacing:.2px; }
.speed-sign strong { display:block; margin-top:2px; font-size:27px; line-height:.9; }
.speed-sign::after { content:""; position:absolute; left:22px; top:100%; width:5px; height:16px; background:#45494d; }
.station-checks { display:block; margin-top:4px; }
.station-check { display:block; color:#172033; }
.station-check.windows { animation:station-window-cue 22s ease forwards; }
.station-check.hazards { animation:station-hazard-cue 22s ease forwards; }
.station-direction { display:block; margin-top:9px; color:#172033; font-size:14px; font-weight:900; }

.approach-map { --approach-stop-top:141px; height:310px; background:#e8eadf; }
.map-properties { position:absolute; inset:0; background:linear-gradient(90deg,#dce8d5 0 42%,#e8eadf 42% 68%,#d8e5d2 68% 100%); }
.map-properties::before { content:""; position:absolute; inset:18px 300px 194px 18px; border:2px solid #c4d1bf; border-radius:6px; background:#d6e2d1; box-shadow:0 146px 0 #d6e2d1,0 146px 0 2px #c4d1bf; }
.map-cross-road { position:absolute; z-index:1; left:0; right:0; top:32px; height:48px; border-top:2px solid #dad8d0; border-bottom:2px solid #dad8d0; background:#faf9f5; }
.approach-map .route-road { position:absolute; z-index:3; left:184px; top:-8%; bottom:-8%; width:102px; height:auto; right:auto; border:0; border-left:2px solid #d7d5cd; border-right:2px solid #d7d5cd; background:#fbfaf7; box-shadow:0 0 0 9px #e3e1da; transform:none; }
.approach-map .route-road::before { content:""; position:absolute; z-index:2; top:0; bottom:0; left:46px; width:7px; border-radius:5px; background:#2788d8; box-shadow:0 0 0 2px #ffffffaa; }
.approach-map .route-road::after { content:""; position:absolute; top:0; bottom:0; left:49px; border-left:2px dashed #eef7ff; }
.approach-map .route-driveway { position:absolute; z-index:5; left:145px; top:112px; bottom:auto; right:auto; width:44px; height:27px; border:0; border-top:2px solid #c4c3bc; border-bottom:2px solid #c4c3bc; background:#f5f3ed; transform:none; }
.approach-map .house-marker { position:absolute; z-index:7; left:54px; top:77px; width:105px; height:95px; border:4px solid #3aa65c; border-radius:7px; background:#cfd6ce; box-shadow:0 5px 10px #65726542; transform:rotate(-1deg); }
.approach-map .house-marker::after { content:""; position:absolute; right:-15px; top:26px; width:15px; height:39px; border:3px solid #3aa65c; border-left:0; border-radius:0 4px 4px 0; background:#cfd6ce; }
.approach-map .house-marker span { position:absolute; inset:10px; border-radius:3px; background:linear-gradient(45deg,transparent 48%,#b4bcb4 49% 51%,transparent 52%),linear-gradient(-45deg,transparent 48%,#b4bcb4 49% 51%,transparent 52%),#c7cec7; }
.approach-map .delivery-zone { position:absolute; z-index:14; left:24px; top:25px; width:248px; height:218px; border:5px solid #1687e8; border-radius:50%; background:#1687e808; box-shadow:0 0 0 2px #ffffff88 inset; pointer-events:none; }
.approach-map .approaching { z-index:10; left:187px; top:calc(100% + 15px); bottom:auto; width:58px; height:58px; display:grid; place-items:center; border:3px solid #2788d8; border-radius:50%; background:#fff; font-size:32px; line-height:1; box-shadow:0 3px 8px #1d273148; animation:approach-drive 18s cubic-bezier(.42,0,.25,1) forwards; }
.approach-map.arrived .approaching { animation:none; top:var(--approach-stop-top); }
.approach-map.arrived .delivery-zone { animation:delivery-zone-pulse .7s ease-out 2; }

.damage-reminder { margin:14px 0 18px; padding:16px 18px; border:2px solid #f6a800; border-radius:12px; background:#fff8db; }
.damage-reminder h2 { margin:0; color:#7c4a00; font-size:25px; line-height:1.15; }

@keyframes station-drive { from { left:calc(100% + 10px); } to { left:var(--station-van-left); } }
@keyframes station-zone-pulse { 50% { transform:scale(1.12); box-shadow:0 0 0 12px #1687e82d; } }
@keyframes speed-sign-cue { 0%,34%,38%,42%,100% { box-shadow:0 2px 4px #00000066,0 0 0 #f6a80000; } 36%,40% { box-shadow:0 2px 4px #00000066,0 0 20px 5px #f6a800b5; } }
@keyframes station-window-cue { 0%,61% { color:#172033; } 67%,100% { color:#f6a800; } }
@keyframes station-hazard-cue { 0%,71% { color:#172033; } 77%,100% { color:#f6a800; } }
@keyframes approach-drive { from { top:calc(100% + 15px); } to { top:var(--approach-stop-top); } }
@keyframes delivery-zone-pulse { 50% { transform:scale(1.04); box-shadow:0 0 0 12px #1687e82d; } }
@keyframes parked-ready { 50% { transform:scale(1.025); box-shadow:0 0 0 5px #f6a80044; } }

@media (max-width:380px) {
  .station-map { --station-zone-left:48px; --station-van-left:67px; }
  .approach-map .route-road { left:160px; }
  .approach-map .approaching { left:163px; }
  .approach-map .delivery-zone { left:7px; width:231px; }
  .approach-map .house-marker { left:36px; }
  .approach-map .route-driveway { left:127px; width:38px; }
}

@media (prefers-reduced-motion:reduce) {
  .station-map .station-van,.station-check,.speed-sign,.approach-map .approaching { animation-duration:.01ms; }
}