/* Parkoló (Rush Hour). The lot is a wall (padding) around a 6×6 ground grid; vehicles are
   absolutely positioned buttons, placed by --pos (along their axis) and --fixed (row/column). */
.rh-lot {
  --wall: clamp(8px, 2.4%, 14px);
  --ground: color-mix(in srgb, var(--game) 4%, var(--surface));
  position: relative;
  padding: var(--wall);
  border-radius: 22px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%),
    color-mix(in srgb, var(--text) 16%, var(--surface));
  box-shadow: var(--glass-shadow), inset 0 0 0 1px var(--glass-edge);
  overflow: hidden; /* the red car disappears through the exit */
}
.rh-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 0) 0 0 / calc(100% / 6) 100%,
    linear-gradient(transparent calc(100% - 1px), var(--line) 0) 0 0 / 100% calc(100% / 6),
    var(--ground);
  box-shadow: inset 0 2px 8px rgba(20, 16, 70, .12);
  outline: none;
  touch-action: none;
}
/* Road marking towards the exit, under the cars. */
.rh-grid::before {
  content: "› › ›";
  content: "› › ›" / ""; /* decorative: hidden from screen readers where supported */
  position: absolute; right: 2%; top: calc(100% / 6 * 2); height: calc(100% / 6);
  display: flex; align-items: center;
  font: 800 clamp(16px, 5vw, 30px) / 1 var(--display);
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--game) 40%, transparent);
  pointer-events: none;
}
/* The gap in the right wall. */
.rh-exit {
  position: absolute; right: 0; width: calc(var(--wall) + 2px);
  top: calc(var(--wall) + (100% - 2 * var(--wall)) / 6 * var(--row));
  height: calc((100% - 2 * var(--wall)) / 6);
  background: var(--ground);
  border-block: 3px dashed var(--game);
  box-sizing: border-box;
}

/* --- Vehicles ---------------------------------------------------------------------- */
.rh-car {
  --car: #ef4444;
  --gap: clamp(2px, .7vw, 4px);
  position: absolute;
  margin: 0; padding: 0; border: 0;
  border-radius: clamp(8px, 2.6vw, 14px);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 45%),
    linear-gradient(0deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 40%),
    var(--car);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--car) 60%, #000), 0 8px 14px -6px rgba(10, 8, 40, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .25);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 1;
}
.rh-h {
  left: calc(var(--pos) * 100% / 6 + var(--gap));
  top: calc(var(--fixed) * 100% / 6 + var(--gap));
  width: calc(var(--len) * 100% / 6 - 2 * var(--gap));
  height: calc(100% / 6 - 2 * var(--gap));
}
.rh-v {
  top: calc(var(--pos) * 100% / 6 + var(--gap));
  left: calc(var(--fixed) * 100% / 6 + var(--gap));
  height: calc(var(--len) * 100% / 6 - 2 * var(--gap));
  width: calc(100% / 6 - 2 * var(--gap));
}
/* Windscreen (front) and rear window; horizontal cars face right, vertical ones face up. */
.rh-car::before, .rh-car::after {
  content: ""; position: absolute; border-radius: 4px;
  background: rgba(16, 20, 48, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.rh-h::before { right: 17%; top: 16%; bottom: 16%; width: 13%; }
.rh-h::after { left: 12%; top: 22%; bottom: 22%; width: 9%; }
.rh-v::before { top: 17%; left: 16%; right: 16%; height: 13%; }
.rh-v::after { bottom: 12%; left: 22%; right: 22%; height: 9%; }
/* Trucks: a short cab window and a light cargo box behind it. */
.rh-truck.rh-h::before { right: 9%; width: 8%; }
.rh-truck.rh-h::after { left: 6%; top: 12%; bottom: 12%; width: 64%; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.rh-truck.rh-v::before { top: 9%; height: 8%; }
.rh-truck.rh-v::after { bottom: 6%; left: 12%; right: 12%; height: 64%; background: rgba(255, 255, 255, .28); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }

.rh-red { --car: #ef4444; z-index: 2; }
.rh-red::before { background: rgba(40, 10, 20, .45); }

.rh-car:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 3; }
.rh-car.rh-drag { cursor: grabbing; z-index: 3; filter: brightness(1.06); box-shadow: 0 3px 0 color-mix(in srgb, var(--car) 60%, #000), 0 14px 22px -8px rgba(10, 8, 40, .55); }
.rh-car.rh-glide { transition: left .18s ease, top .18s ease, transform .18s ease; }
.rh-car.rh-hint { animation: rh-pulse 1.1s ease-in-out infinite; z-index: 3; }
@keyframes rh-pulse {
  0%, 100% { outline: 3px solid var(--accent); outline-offset: 2px; }
  50% { outline: 3px solid var(--accent); outline-offset: 6px; }
}

/* The red car drives out through the gap. */
.rh-car.rh-red.rh-out {
  transform: translateX(170%);
  opacity: 0;
  pointer-events: none;
  transition: transform .55s cubic-bezier(.5, 0, .9, .5), opacity .25s ease .35s;
}
.rh-lot.rh-solved .rh-exit { border-color: var(--good); }

/* --- Move counter / summary --------------------------------------------------------- */
.rh-status {
  margin: 12px auto 0; max-width: min(600px, 100cqw);
  text-align: center; color: var(--muted); font-weight: 650; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.rh-status.rh-done {
  width: fit-content; padding: 8px 16px; border-radius: 999px;
  background: var(--good-soft); color: var(--text);
}
.rh-status b { color: var(--good); }

@media (prefers-reduced-motion: reduce) {
  .rh-car.rh-glide, .rh-car.rh-red.rh-out { transition: none; }
  .rh-car.rh-hint { animation: none; outline: 3px solid var(--accent); outline-offset: 2px; }
}