/* Zip — board-specific styles (chrome comes from /games/puzzle.css) */
.zip-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  width: min(92vw, 420px);
  aspect-ratio: 1 / 1;
  background: var(--board-bg);
  border: 3px solid var(--border-bright);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 36px rgba(184, 255, 64, 0.12);
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.zip-cell {
  position: relative;
  border: 1px solid var(--board-grid);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.zip-cell.on { background: rgba(184, 255, 64, 0.09); }
.zip-cell.end { background: rgba(184, 255, 64, 0.20); }
.zip-cell.solved-flash { animation: zipFlash 0.5s ease-out; }
@keyframes zipFlash { 0% { background: rgba(184,255,64,0.5); } 100% { } }

.zip-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.zip-svg polyline { fill: none; stroke: var(--acid); stroke-width: 0.36; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }

.zip-num {
  position: absolute; transform: translate(-50%, -50%);
  width: clamp(22px, 6.4vw, 32px); height: clamp(22px, 6.4vw, 32px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800; font-size: clamp(12px, 3.6vw, 17px);
  background: var(--bg-card); border: 2px solid var(--border-bright);
  color: var(--text); z-index: 2; pointer-events: none;
}
.zip-num.start { border-color: var(--acid); color: var(--acid); box-shadow: 0 0 12px rgba(184,255,64,0.45); }
.zip-num.finish { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 12px rgba(244,196,48,0.4); }