/* ── Knight ──────────────────────────────────────────────────────────────────
   A knight on a chequered island. Take every pawn in as few moves as the board
   allows.

   The board is one element per island square, in the engine's dense order, so
   the deduce overlay can address a square by index. Gaps in the island are not
   rendered at all: a knight jumps, so a gap is somewhere it may not LAND, never
   something in its way, and drawing it as a wall would say the wrong thing.   */

.knight-play .q-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kn-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--kn-c), var(--kn-cs));
  grid-auto-rows: var(--kn-cs);
  /* tap-only, so panning may stay with the page; `manipulation` still kills
     the double-tap zoom that would otherwise fire on quick successive moves */
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.kn-sq {
  position: relative;
  box-sizing: border-box;
  background: var(--kn-sq);
  grid-column: calc(var(--c) + 1);
  grid-row: calc(var(--r) + 1);
  cursor: pointer;
}
.kn-sq.lt { background: var(--kn-sq-2); }

/* the island's edge, drawn per-square wherever it faces a gap or the outside */
.kn-sq.et { border-top: 1.5px solid var(--kn-frame); }
.kn-sq.er { border-right: 1.5px solid var(--kn-frame); }
.kn-sq.eb { border-bottom: 1.5px solid var(--kn-frame); }
.kn-sq.el { border-left: 1.5px solid var(--kn-frame); }

/* ── the pieces ──────────────────────────────────────────────────────────── */

/* Each piece carries its own contrast: light fill with a dark outline, or dark
   fill with a light one. So neither depends on the square it stands on. */
.kn-piece {
  position: absolute;
  inset: 12%;
  pointer-events: none;
}
.kn-piece svg { width: 100%; height: 100%; display: block; }

.kn-knight .body { fill: var(--kn-light); stroke: var(--kn-dark); stroke-width: 1.1; stroke-linejoin: round; }
.kn-knight .eye  { fill: var(--kn-dark); }
.kn-pawn   .body { fill: var(--kn-dark); stroke: var(--kn-light); stroke-width: 1.1; stroke-linejoin: round; }

/* the knight slides between squares rather than teleporting — an L is a shape,
   and seeing it drawn is what teaches the move */
.kn-knight {
  z-index: var(--z-panel);
  transition: transform var(--duration-3) var(--ease);
}

/* ── where it can go ─────────────────────────────────────────────────────── */

/* The one place the accent earns its keep on this board. A reachable square
   wears a dot; the square under the finger fills. */
.kn-sq.can::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  border-radius: var(--radius-full);
  background: var(--kn-move);
  opacity: 0.55;
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-1) var(--ease), width var(--duration-1) var(--ease), height var(--duration-1) var(--ease);
}
.kn-sq.can:hover::after { opacity: 0.9; width: 34%; height: 34%; }

/* a square already visited on this attempt — faint, so the route reads back */
.kn-sq.seen::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1.5px solid var(--kn-move);
  border-radius: var(--radius-sm);
  opacity: 0.28;
}

/* ── the refusal: a tap on a square the knight cannot reach ──────────────── */

.kn-board.kn-no { animation: kn-no 0.2s var(--ease); }
@keyframes kn-no {
  0%, 100% { transform: translateX(0); }
  40%      { transform: translateX(-3px); }
  70%      { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .kn-board.kn-no { animation: none; }
  .kn-knight { transition: none; }
}

/* ── the level-card / hub thumbnail ──────────────────────────────────────── */

.kn-mini {
  display: grid;
  grid-template-columns: repeat(var(--kn-c), 1fr);
  width: 100%;
  aspect-ratio: 1 / 1;
}
.kn-mini i {
  grid-column: calc(var(--c) + 1);
  grid-row: calc(var(--r) + 1);
  background: var(--kn-sq);
  position: relative;
}
.kn-mini i.lt { background: var(--kn-sq-2); }
.kn-mini i.kt::after, .kn-mini i.pw::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: var(--radius-full);
}
.kn-mini i.kt::after { background: var(--kn-light); }
.kn-mini i.pw::after { background: var(--kn-dark); }