/* Gridlock tokens: dark mode only changes these values. */
:root {
  --g-gridlock: #2f8f83;
  --gl-floor: #eceae4;
  --gl-line: #d9d6ce;
  --gl-frame: #4a4a46;
  --gl-wall: #8d8a82;
  --gl-wall-stripe: #a5a29a;
  --gl-target: #d93a3a;
  --gl-car-ink: #ffffff;
  --gl-car-1: #3b7fc4;
  --gl-car-2: #e29a2e;
  --gl-car-3: #3f9e5c;
  --gl-car-4: #8a5cd6;
  --gl-car-5: #1f9fae;
  --gl-car-6: #d0689a;
  --gl-car-7: #8c6d4f;
  --gl-car-8: #5f72c9;
  --gl-car-9: #8f9f2c;
  --gl-car-10: #c8742f;
  --gl-car-11: #5f7f8f;
  --gl-car-12: #a8517c;
  --gl-car-13: #4c7a3d;
}
:root[data-theme='dark'] {
  --g-gridlock: #4cb8aa;
  --gl-floor: #24242a;
  --gl-line: #34343c;
  --gl-frame: #8a8a92;
  --gl-wall: #55555e;
  --gl-wall-stripe: #64646e;
  --gl-target: #ef5757;
  --gl-car-ink: #ffffff;
  --gl-car-1: #4f8fd6;
  --gl-car-2: #d79a3c;
  --gl-car-3: #4cab6a;
  --gl-car-4: #9a70e0;
  --gl-car-5: #2fa9b8;
  --gl-car-6: #d576a5;
  --gl-car-7: #9c7d5f;
  --gl-car-8: #7083d6;
  --gl-car-9: #98a83a;
  --gl-car-10: #d0803c;
  --gl-car-11: #7894a3;
  --gl-car-12: #c0628f;
  --gl-car-13: #5f9450;
}

.gridlock-shell {
  --game-accent: var(--g-gridlock);
}
.gridlock-shell .shell-stage {
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.gridlock-shell .shell-board-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
/* The side padding holds the exit label; it is symmetric so the board stays centred. */
.gl-board-wrap {
  position: relative;
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px), calc(100dvh - 300px));
  margin: 0 auto;
  padding: 0 20px;
}
.gl-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  aspect-ratio: 1;
  border: 6px solid var(--gl-frame);
  border-radius: 14px;
  background: var(--gl-floor);
  /* Dragging must not scroll or zoom the page. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.gl-cell {
  min-width: 0;
  min-height: 0;
  box-shadow: inset 0 0 0 0.5px var(--gl-line);
}
/* The floor's corners follow the frame's rounded inner edge. */
.gl-cell:nth-child(1) {
  border-top-left-radius: 8px;
}
.gl-cell:nth-child(6) {
  border-top-right-radius: 8px;
}
.gl-cell:nth-child(31) {
  border-bottom-left-radius: 8px;
}
.gl-cell:nth-child(36) {
  border-bottom-right-radius: 8px;
}
.gl-cell.wall {
  margin: 3px;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, var(--gl-wall) 0 6px, var(--gl-wall-stripe) 6px 12px);
}
.gl-cell.hint-context {
  background: color-mix(in srgb, var(--hint-context) 35%, transparent);
}
.gl-vehicle,
.gl-ghost {
  position: absolute;
  top: calc(var(--r) * 100% / 6);
  left: calc(var(--c) * 100% / 6);
  width: calc(var(--w) * 100% / 6);
  height: calc(var(--h) * 100% / 6);
}
.gl-vehicle {
  z-index: 2;
  box-sizing: border-box;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--gl-car-ink);
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.gl-body {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  border-radius: 10px;
  background: var(--car);
  box-shadow:
    inset 0 -4px 0 color-mix(in srgb, #000000 18%, transparent),
    0 1px 3px color-mix(in srgb, #000000 25%, transparent);
  font: 800 clamp(12px, 3.6vw, 17px) / 1 var(--font-app);
  transition: box-shadow 120ms ease;
}
.gl-body b {
  opacity: 0.85;
}
.gl-body svg {
  width: 46%;
  max-width: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gl-vehicle.target {
  --car: var(--gl-target);
}
.gl-vehicle.car-1 {
  --car: var(--gl-car-1);
}
.gl-vehicle.car-2 {
  --car: var(--gl-car-2);
}
.gl-vehicle.car-3 {
  --car: var(--gl-car-3);
}
.gl-vehicle.car-4 {
  --car: var(--gl-car-4);
}
.gl-vehicle.car-5 {
  --car: var(--gl-car-5);
}
.gl-vehicle.car-6 {
  --car: var(--gl-car-6);
}
.gl-vehicle.car-7 {
  --car: var(--gl-car-7);
}
.gl-vehicle.car-8 {
  --car: var(--gl-car-8);
}
.gl-vehicle.car-9 {
  --car: var(--gl-car-9);
}
.gl-vehicle.car-10 {
  --car: var(--gl-car-10);
}
.gl-vehicle.car-11 {
  --car: var(--gl-car-11);
}
.gl-vehicle.car-12 {
  --car: var(--gl-car-12);
}
.gl-vehicle.car-13 {
  --car: var(--gl-car-13);
}
.gl-vehicle:focus-visible {
  outline: 0;
}
.gl-vehicle.selected .gl-body,
.gl-vehicle:focus-visible .gl-body {
  outline: 3px solid var(--text);
  outline-offset: 1px;
}
.gl-vehicle.hint-target .gl-body {
  box-shadow:
    0 0 0 3px var(--hint-target),
    0 1px 3px color-mix(in srgb, #000000 25%, transparent);
}
.gl-vehicle.dragging {
  z-index: 3;
  cursor: grabbing;
}
.gl-vehicle.dragging .gl-body {
  box-shadow:
    inset 0 -4px 0 color-mix(in srgb, #000000 18%, transparent),
    0 6px 14px color-mix(in srgb, #000000 30%, transparent);
}
.gl-vehicle.snapping {
  z-index: 3;
  transition: transform 120ms ease-out;
}
.gl-ghost {
  z-index: 1;
  box-sizing: border-box;
  border: 3px dashed var(--hint-target);
  border-radius: 12px;
  margin: 2px;
  width: calc(var(--w) * 100% / 6 - 4px);
  height: calc(var(--h) * 100% / 6 - 4px);
  pointer-events: none;
}
.gl-arrow {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.gl-arrow line {
  stroke: var(--hint-target);
  stroke-width: 0.12;
  stroke-linecap: round;
}
.gl-arrow marker path {
  fill: var(--hint-target);
}
/* The exit: a gap in the right frame on the red car's row. */
.gl-exit {
  position: absolute;
  z-index: 1;
  top: calc(var(--r) * 100% / 6 + 3px);
  right: -6px;
  width: 6px;
  height: calc(100% / 6 - 6px);
  background: var(--gl-floor);
}
.gl-exit-mark {
  position: absolute;
  top: calc(6px + var(--r) * (100% - 12px) / 6);
  right: 0;
  display: grid;
  width: 18px;
  height: calc((100% - 12px) / 6);
  place-items: center;
  color: var(--gl-target);
}
.gl-exit-mark svg {
  width: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gl-board.solved .gl-vehicle.target {
  animation: gl-drive-out 800ms ease-in forwards;
}
.gl-board.solved-static .gl-vehicle.target {
  opacity: 0.45;
}
@keyframes gl-drive-out {
  to {
    transform: translateX(150%);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gl-vehicle.snapping {
    transition: none;
  }
  .gl-board.solved .gl-vehicle.target {
    animation: none;
    opacity: 0.45;
  }
}
.gl-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.gl-status b {
  color: var(--text);
}

/* Picture rules: a real 6 × 6 lot fills the demo stage; a vehicle slides in from its old place and the red car
   drives out while its frame is showing. */
.gridlock-shell .gl-demo-wrap {
  width: 100%;
  padding: 0 8%;
}
.gl-demo-wrap .gl-board {
  touch-action: auto;
}
.gl-demo-wrap .gl-vehicle {
  padding: 2px;
  cursor: default;
}
.gl-demo-wrap .gl-body {
  font-size: 15px;
}
.shell-demo-frame.on .gl-demo-slide {
  animation: gl-demo-slide 700ms ease-in-out both;
}
.shell-demo-frame.on .gl-demo-leave {
  animation: gl-drive-out 900ms ease-in 200ms forwards;
}
@keyframes gl-demo-slide {
  from {
    transform: translate(calc(var(--dc) * 100% / var(--w)), calc(var(--dr) * 100% / var(--h)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-demo-frame.on .gl-demo-slide {
    animation: none;
  }
  .shell-demo-frame .gl-demo-leave {
    opacity: 0.45;
  }
  .shell-demo-frame.on .gl-demo-leave {
    animation: none;
  }
}