/* Adds click-to-navigate pathfinding styling to the grid obstacle example. */
@import url("https://www.kirupa.com/css/grid_movement_obstacles.css?v=20260826-1");

:root {
  --preview-cell: color-mix(in srgb, var(--demo-primary) 14%, var(--demo-surface));
  --preview-line: color-mix(in srgb, var(--demo-primary) 48%, var(--demo-surface));
  --trail-cell: color-mix(in srgb, var(--demo-primary) 34%, var(--demo-surface));
  --trail-text: color-mix(in srgb, var(--demo-primary-darker) 55%, var(--demo-text));
  --goal-ring: var(--demo-primary);
  --unreachable-cell: color-mix(in srgb, var(--demo-text) 18%, var(--demo-surface));
}

.grid {
  position: relative;
}

/* Every cell is a button now, so the browser defaults need clearing out. */
.cell {
  padding: 0;
  border-top: 0;
  border-left: 0;
  color: var(--trail-text);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  appearance: none;
}

.cell:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--demo-primary) 60%, transparent);
  outline-offset: -3px;
}

.cell.obstacle {
  cursor: not-allowed;
}

.cell.trail {
  background: var(--trail-cell);
}

.cell.trail::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--trail-text);
  font-size: clamp(0.62rem, 2.1vw, 0.85rem);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  content: attr(data-step);
}

/* A preview wins wherever it crosses an older trail, so the two
   highlight colors never blend into one another. */
.cell.preview {
  background: var(--preview-cell);
  box-shadow: inset 0 0 0 1px var(--preview-line);
}

.cell.preview::after {
  content: none;
}

.cell.preview-goal {
  box-shadow: inset 0 0 0 3px var(--goal-ring);
}

.cell.preview-blocked {
  background: var(--unreachable-cell);
  box-shadow: inset 0 0 0 3px var(--unreachable-cell);
}

/* Zorb floats above the cells so he can glide between them. */
.zorb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: calc(100% / 10);
  height: calc(100% / 10);
  transition: transform 160ms linear;
  pointer-events: none;
}

.zorb::after {
  position: absolute;
  inset: 14%;
  background: url("https://www.kirupa.com/icon/zorb.svg") center / contain no-repeat;
  content: "";
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 12px;
  padding: 0;
  gap: 8px 18px;
  list-style: none;
  font-size: 0.85rem;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 7px;
}

.swatch {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.swatch.preview {
  border-color: var(--preview-line);
  background: var(--preview-cell);
}

.swatch.trail {
  background: var(--trail-cell);
}

.swatch.rock {
  background: var(--obstacle-cell);
}

@media (prefers-reduced-motion: reduce) {
  .zorb {
    transition: none;
  }
}