/* Zip: one dark tile, the path drawn in the game colour, white number discs. */
.z-board {
  --n: 6;
  --z-cell: calc(min(600px, 100cqw) / 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: #1c1c1e;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.z-board:focus-visible { outline: none; }
.z-board.z-kbd:focus-visible { outline: 2px solid var(--game); outline-offset: 3px; }
.z-cell {
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .06);
  transition: background-color .2s var(--ease-out);
}
.z-cell.on { background: color-mix(in srgb, var(--game) 20%, #1c1c1e); }
.z-cell.z-in { animation: z-in .45s var(--ease-out); }
@keyframes z-in { from { background: color-mix(in srgb, var(--game) 55%, #1c1c1e); } }

.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: .34;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s;
}
.z-headdot { fill: #fff; stroke: var(--game); stroke-width: .08; }
.z-wall { stroke: #fff; stroke-width: .1; stroke-linecap: round; }

.z-num {
  position: relative; z-index: 2;
  width: 56%; height: 56%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #000;
  font-weight: 650; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(12px, calc(var(--z-cell) * .28), 23px);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.z-num.done { box-shadow: 0 0 0 3px var(--game); }
.z-num.bad { background: var(--danger); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 35%, transparent); }
.z-num.z-pop { animation: z-pop .45s var(--ease-spring); }
@keyframes z-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

.z-board.z-wrong .z-line { stroke: color-mix(in srgb, var(--game) 45%, var(--danger)); }
.z-board.z-wrong { animation: fx-shake .42s cubic-bezier(.36, .07, .19, .97) 1; }
.z-board.z-solved .z-num { box-shadow: 0 0 0 3px var(--game); }

/* Server hints: the suggested stretch (dashed), cells that explain why, and a wrong stretch. */
.z-hintline {
  fill: none; stroke: #fff; stroke-width: .12; stroke-dasharray: .22 .2;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85;
  animation: z-march 1s linear infinite;
}
@keyframes z-march { to { stroke-dashoffset: -.84; } }
.z-cell.z-hint-add { background: color-mix(in srgb, #fff 10%, #1c1c1e); }
.z-cell.z-hint-focus { box-shadow: inset 0 0 0 3px var(--warn); animation: z-hint-pulse 1.1s ease-in-out infinite; }
.z-cell.z-hint-bad { background: color-mix(in srgb, var(--danger) 30%, #1c1c1e); }
@keyframes z-hint-pulse { 50% { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--warn) 40%, transparent); } }