:root {
  --bg: #111319;
  --panel: #1d2029;
  --border: #343947;
  --text: #f2f3f6;
  --muted: #9ba2b0;
  --good: #4ade80;
  --hint: #ffd65a;
  --asphalt: #22252d;
  --cell: 60px;
  --pad: 14px;
  --gap: 4px;
  --row: 2;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); overflow: hidden; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 70% at 50% 0%, #1c2030 0%, var(--bg) 65%) var(--bg);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#app { height: 100vh; height: 100dvh; max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 6px; }

.top { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.title { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 19px; white-space: nowrap; }
.logo { width: 24px; height: 24px; border-radius: 6px; background: #3d7cf5; color: #fff; display: grid; place-items: center;
  font-size: 15px; font-weight: 900; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); }
.title small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 99px; padding: 2px 7px; }
.title small:empty { display: none; }
.chip { margin-left: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 5px 11px;
  font-size: 13px; color: #dfe2e8; white-space: nowrap; font-variant-numeric: tabular-nums; }

.msg { text-align: center; min-height: 20px; font-size: 14px; color: var(--muted); transition: color 0.2s; }
.msg.good { color: var(--good); font-weight: 700; }
.msg.hint { color: #f3d57a; }

.stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; touch-action: none; }
.lot { position: relative; flex: none; margin-right: calc(var(--cell) * 0.7); border-radius: calc(var(--pad) * 0.9);
  background: linear-gradient(#474d5a, #373c47); transition: box-shadow 0.4s;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.asphalt { position: absolute; inset: var(--pad); border-radius: 6px; background: var(--asphalt); display: grid;
  grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 1fr); box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.55); }
.bay { position: relative; }
.bay::after { content: ""; position: absolute; inset: 9%; border: 1.5px dashed rgba(255, 255, 255, 0.075); border-radius: 6px; }
.lane { position: absolute; left: 0; right: 0; top: calc(var(--row) * var(--cell)); height: var(--cell); pointer-events: none;
  background: linear-gradient(90deg, rgba(239, 61, 74, 0), rgba(239, 61, 74, 0.07) 60%, rgba(74, 222, 128, 0.12)); }

/* opening in the curb + exit sign */
.gate { position: absolute; right: 0; width: var(--pad); top: calc(var(--pad) + var(--row) * var(--cell)); height: var(--cell);
  background: var(--asphalt); }
.gate::before, .gate::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--good);
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); }
.gate::before { top: -1px; }
.gate::after { bottom: -1px; }
.sign { position: absolute; left: calc(100% + var(--cell) * 0.06); top: calc(var(--pad) + var(--row) * var(--cell));
  width: calc(var(--cell) * 0.6); height: var(--cell); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; color: var(--good); font-weight: 900; font-size: max(9px, calc(var(--cell) * 0.17)); letter-spacing: 0.5px; pointer-events: none; }
.sign svg { width: calc(var(--cell) * 0.46); height: calc(var(--cell) * 0.46); fill: none; stroke: currentColor; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round; animation: go 1.6s ease-in-out infinite; }

/* vehicles */
.car, .ghost { position: absolute; left: calc(var(--pad) + var(--gap)); top: calc(var(--pad) + var(--gap)); }
.car { z-index: 2; touch-action: none; will-change: transform; transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1); }
.car.h { cursor: ew-resize; }
.car.v { cursor: ns-resize; }
.car svg { display: block; width: 100%; height: 100%; overflow: visible; }
.car.hero svg { filter: drop-shadow(0 0 5px rgba(239, 61, 74, 0.45)); }
.car.drag { transition: none; z-index: 3; }
.car.drag svg { filter: brightness(1.12); }
.car.hinted svg { animation: glow 1.1s ease-in-out infinite; }
.car.nudge.h svg { animation: nudge-h 0.28s; }
.car.nudge.v svg { animation: nudge-v 0.28s; }
.car.leaving { transition: transform 0.75s cubic-bezier(0.55, 0, 0.85, 0.35), opacity 0.4s ease 0.4s; opacity: 0; pointer-events: none; }
.still .car { transition: none !important; }
.ghost { z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.2s; border: 2px dashed rgba(255, 214, 90, 0.85);
  border-radius: calc(var(--cell) * 0.2); background: rgba(255, 214, 90, 0.08); }
.ghost.on { opacity: 1; }
.solved .lot { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.55), 0 14px 34px rgba(0, 0, 0, 0.5); }

.bar { display: flex; gap: 8px; }
.bar button { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: 10px; background: var(--panel); color: var(--text);
  font: 600 14px system-ui, sans-serif; cursor: pointer; padding: 0 4px; white-space: nowrap; touch-action: manipulation; }
.bar button:hover:not(:disabled) { background: #282c38; }
.bar button:disabled { opacity: 0.38; cursor: default; }

@media (max-width: 420px) {
  .title { font-size: 17px; }
  .title small { display: none; }
  .chip { font-size: 12px; padding: 4px 9px; }
  .bar button { font-size: 13px; }
}

@keyframes go { 50% { transform: translateX(15%); opacity: 0.65; } }
@keyframes glow { 50% { filter: drop-shadow(0 0 7px rgba(255, 214, 90, 0.95)) brightness(1.12); } }
@keyframes nudge-h { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes nudge-v { 25% { transform: translateY(-3px); } 75% { transform: translateY(3px); } }