/* Park & Slide: an asphalt lot with painted bays; vehicles are rounded glossy blocks. */
.ps-lot { --pad: 10px; position: relative; width: min(100%, 430px); aspect-ratio: 1; margin: 6px auto 0; padding: var(--pad); border-radius: 22px; background:
  linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px) var(--pad) var(--pad) / calc((100% - 2 * var(--pad)) / 6) calc((100% - 2 * var(--pad)) / 6),
  linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px) var(--pad) var(--pad) / calc((100% - 2 * var(--pad)) / 6) calc((100% - 2 * var(--pad)) / 6),
  linear-gradient(160deg, #4B5368, #343A4C); border: 4px solid #2A2F3E; box-shadow: var(--glass-shadow); touch-action: none; overflow: visible; }
.ps-exit { position: absolute; right: -4px; top: calc(var(--pad) + (100% - 2 * var(--pad)) / 6 * 2); height: calc((100% - 2 * var(--pad)) / 6); width: 8px; background: #F5C542; border-radius: 3px; font-size: 0; box-shadow: 0 0 12px rgba(245, 197, 66, .8); }
.ps-exit::after { content: '➜'; position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 15px; color: #F5C542; }
.ps-car { position: absolute; left: calc(var(--pad) + (100% - 2 * var(--pad)) / 6 * var(--c)); top: calc(var(--pad) + (100% - 2 * var(--pad)) / 6 * var(--r)); padding: 0;
  border: 0; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--paint, #ccc) 70%, #fff), var(--paint, #ccc)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 5px 10px rgba(0,0,0,.35); cursor: grab; transition: left .14s ease-out, top .14s ease-out; touch-action: none; }
.ps-car.h { width: calc((100% - 2 * var(--pad)) / 6 * var(--len) - 8px); height: calc((100% - 2 * var(--pad)) / 6 - 8px); margin: 4px; transform: translateX(calc(var(--shift, 0) * (100% + 8px) / var(--len))); }
.ps-car.v { height: calc((100% - 2 * var(--pad)) / 6 * var(--len) - 8px); width: calc((100% - 2 * var(--pad)) / 6 - 8px); margin: 4px; transform: translateY(calc(var(--shift, 0) * (100% + 8px) / var(--len))); }
.ps-car.drag { transition: none; cursor: grabbing; z-index: 3; box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), 0 10px 18px rgba(0,0,0,.45); }
.ps-car.truck { border-radius: 10px; }
.ps-glass { position: absolute; background: rgba(30, 45, 70, .55); border-radius: 6px; }
.ps-car.h .ps-glass { top: 18%; bottom: 18%; right: 14%; width: 18%; }
.ps-car.v .ps-glass { left: 18%; right: 18%; bottom: 14%; height: 18%; }
.ps-car.truck.h .ps-glass { right: 8%; width: 12%; }
.ps-car.truck.v .ps-glass { bottom: 8%; height: 12%; }
.ps-car.mine { --paint: #F5B400; background: linear-gradient(160deg, #FFE38F, #E0A100); }
.ps-star { position: absolute; left: 22%; top: 50%; transform: translateY(-50%); color: #fff; font-size: clamp(14px, 4vw, 22px); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ps-car:focus-visible { outline: 3px solid #7FD8FF; outline-offset: 2px; }
.ps-car.hint { animation: ps-glow 1s ease-in-out 3; }
.ps-car.out { transition: left .5s ease-in, opacity .5s; left: 110%; opacity: 0; }
@keyframes ps-glow { 50% { box-shadow: 0 0 0 4px #7FD8FF, 0 0 18px #7FD8FF; } }
@media (prefers-reduced-motion: reduce) { .ps-car { transition: none; } .ps-car.hint { animation: none; outline: 3px solid #7FD8FF; } }