/* Neuriosity — Rescue Route playfield.
   Shared chrome lives in ../_shared/game-kit.css */

/* The board fills the stage rather than holding a fixed shape: the number of
   columns and rows is chosen to suit a 4:3 frame, so the squares come out
   near enough square anyway, and every one of them stays big enough to hit
   with a thumb. */
.rr-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.rr-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  grid-template-rows: repeat(var(--rows, 3), 1fr);
  gap: calc(var(--gu) * 1.1);
  width: 100%;
  height: 100%;
  transition: opacity 160ms ease;
}

.rr-grid.is-clear { opacity: 0.55; }
.rr-grid.is-fail { opacity: 0.55; }

.rr-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  color: var(--ink-soft, #526b8e);
  background: #fff;
  border: calc(var(--gu) * 0.28) solid rgba(11, 110, 79, 0.16);
  border-radius: calc(var(--gu) * 1.4);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.rr-cell:hover:not(:disabled) { border-color: rgba(11, 110, 79, 0.5); }

.rr-cell:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #0b6e4f;
  outline-offset: calc(var(--gu) * 0.2);
}

/* Rubble. Carries a pattern as well as a fill so it never depends on colour
   alone to read as impassable. */
.rr-cell--block {
  background:
    repeating-linear-gradient(45deg,
      rgba(6, 43, 99, 0.16) 0 calc(var(--gu) * 0.9),
      rgba(6, 43, 99, 0.05) calc(var(--gu) * 0.9) calc(var(--gu) * 1.8));
  border-color: rgba(6, 43, 99, 0.16);
  border-style: solid;
  cursor: default;
}

/* Where the rescuer has already been — a visible record of the route taken,
   which is what makes a wasteful order obvious afterwards. */
.rr-cell--walked {
  background: rgba(11, 110, 79, 0.1);
  border-color: rgba(11, 110, 79, 0.24);
}

.rr-cell--person { color: #0b6e4f; border-color: rgba(11, 110, 79, 0.45); }

.rr-cell--here {
  color: #fff;
  background: #0b6e4f;
  border-color: #0b6e4f;
}

.rr-glyph {
  width: 74%;
  height: 74%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rr-cell--here .rr-glyph { stroke-width: 2.4; }

@media (prefers-reduced-motion: reduce) {
  .rr-cell, .rr-grid { transition: none; }
}