/* 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: #111113;
  position: relative;
  padding: var(--wall);
  border-radius: 24px;
  background: #2c2c2e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  overflow: hidden; /* the red car disappears through the exit */
}
.rh-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, .14) 0 1.5px, transparent 2px) 0 0 / calc(100% / 6) calc(100% / 6),
    var(--ground);
  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: 650 clamp(16px, 5vw, 30px) / 1 var(--font);
  letter-spacing: .1em;
  color: color-mix(in srgb, var(--game) 55%, 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: 2px solid 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(9px, 2.6vw, 14px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 50%), var(--car);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .18);
  cursor: grab;
  transition: filter .2s, box-shadow .2s;
  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(0, 0, 0, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.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, .2); box-shadow: none; }
.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, .2); box-shadow: none; }

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

.rh-car:focus-visible { outline: 2px solid #fff; outline-offset: 2px; z-index: 3; }
.rh-car.rh-drag {
  cursor: grabbing; z-index: 3; filter: brightness(1.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 2px rgba(255, 255, 255, .85), 0 14px 26px -8px rgba(0, 0, 0, .8);
}
.rh-car.rh-glide { transition: left .32s var(--ease-spring), top .32s var(--ease-spring), transform .32s var(--ease-spring), filter .2s, box-shadow .2s; }
.rh-car.rh-hint { animation: rh-pulse 1.1s ease-in-out infinite; z-index: 3; }
@keyframes rh-pulse {
  0%, 100% { outline: 2px solid #fff; outline-offset: 2px; }
  50% { outline: 2px solid #fff; 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: 550; font-size: .95rem;
}
.rh-status.rh-done {
  width: fit-content; padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #fff;
}
.rh-status b { color: var(--good); }

@media (prefers-reduced-motion: reduce) {
  .rh-car.rh-hint { animation: none; outline: 2px solid #fff; outline-offset: 2px; }
}