.z-board {
  --n: 6;
  --z-ink: var(--text);              /* number discs and walls: black in light, light in dark */
  --z-cell: calc(min(600px, 100vw - 32px) / var(--n));
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  background: var(--surface);
  border: 2px solid var(--z-ink);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  touch-action: none;
}
.z-board:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent); }
.z-cell {
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset -1px -1px 0 var(--line);
  transition: background-color .12s;
}
.z-cell.on { background: color-mix(in srgb, var(--game) 20%, var(--surface)); }

.z-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.z-line {
  fill: none; stroke: var(--game); stroke-width: .36;
  stroke-linecap: round; stroke-linejoin: round;
}
.z-headdot { fill: var(--game); }
.z-wall { stroke: var(--z-ink); stroke-width: .11; stroke-linecap: round; }

.z-num {
  position: relative; z-index: 2;
  width: 58%; height: 58%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--z-ink); color: var(--surface);
  font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  font-size: clamp(12px, calc(var(--z-cell) * .3), 24px);
  box-shadow: 0 0 0 2px var(--surface);
  transition: background-color .15s, box-shadow .15s;
}
.z-num.done { box-shadow: 0 0 0 3px var(--game); }
.z-num.bad { background: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent); }

.z-board.z-wrong .z-line { stroke: color-mix(in srgb, var(--game) 55%, var(--danger)); }
.z-board.z-wrong { animation: z-shake .35s ease-in-out 1; }
@keyframes z-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.z-board.z-solved .z-num { box-shadow: 0 0 0 3px var(--game); }

@media (prefers-reduced-motion: reduce) {
  .z-board.z-wrong { animation: none; }
  .z-cell, .z-num { transition: none; }
}