/* Csővezeték (Pipes / Net). Graphite tubes on a dark board; water in the game colour. */
.pi-frame { container-type: inline-size; }
.pi-board {
  --n: 7;
  --pi-water: color-mix(in srgb, var(--game) 72%, white);
  --pi-water-glow: color-mix(in srgb, var(--game) 60%, transparent);
  --pi-shell: #48484c;
  --pi-dry: #19191b;
  --pi-cell: calc(100cqw / var(--n));
  --pi-line: rgba(255, 255, 255, .045);
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  border-radius: 20px;
  background: #121214;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
  outline: none;
  touch-action: none;
}
.pi-frame .pi-board:focus-visible { outline: none; }

.pi-cell {
  position: relative;
  min-width: 0; min-height: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 .5px var(--pi-line);
  transition: background-color .25s var(--ease-out);
}
@media (hover: hover) {
  .pi-board:not(.locked) .pi-cell:hover { background: rgba(255, 255, 255, .05); }
}
.pi-board.locked .pi-cell { cursor: default; }

/* The pipes spin; the pump badge stays upright. */
.pi-tile {
  position: absolute; inset: 0;
  transition: transform .34s var(--ease-spring);
  pointer-events: none;
}
.pi-svg, .pi-pump { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pi-shell, .pi-water { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pi-shell { stroke: var(--pi-shell); stroke-width: 32; transition: stroke .3s; }
.pi-water { stroke-width: 15; }
.pi-cap { fill: var(--pi-shell); transition: fill .3s; }
.pi-flow {
  stroke: var(--pi-dry); fill: var(--pi-dry);
  transition: stroke .3s ease-out var(--d, 0ms), fill .3s ease-out var(--d, 0ms);
}
.pi-water { fill: none; }
.pi-cell.wet .pi-shell { stroke: color-mix(in srgb, var(--game) 30%, #3a3a3c); }
.pi-cell.wet .pi-cap { fill: color-mix(in srgb, var(--game) 30%, #3a3a3c); }
.pi-cell.wet .pi-flow { stroke: var(--pi-water); fill: var(--pi-water); }
.pi-cell.wet .pi-water { fill: none; }
.pi-cell.wet .pi-tap { filter: drop-shadow(0 0 4px var(--pi-water-glow)); }

/* The pump in the centre */
.pi-pump { pointer-events: none; }
.pi-pump-ring { fill: var(--game); stroke: #000; stroke-width: 4; }
.pi-drop { fill: #fff; }
.pi-drop-shine { fill: none; stroke: var(--game); stroke-width: 3; stroke-linecap: round; }

/* Pinned tiles: a lighter tile with a small pin dot in the corner. */
.pi-cell.pinned { background: rgba(255, 255, 255, .07); }
.pi-cell.pinned::after {
  content: ""; position: absolute; top: 8%; right: 8%;
  width: 12%; aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #121214;
  pointer-events: none;
  animation: pi-pin .35s var(--ease-spring);
}
@keyframes pi-pin { from { transform: scale(0); } }
.pi-cell.nope .pi-tile { animation: pi-nope .36s ease-in-out; }
@keyframes pi-nope { 20%, 60% { translate: -5% 0; } 40%, 80% { translate: 5% 0; } }

/* Long press feedback */
.pi-cell.pressing { background: rgba(255, 255, 255, .06); }
.pi-cell.pressing::before {
  content: ""; position: absolute; inset: 12%; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .5);
  animation: pi-press .45s linear forwards;
}
@keyframes pi-press { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Hint and keyboard focus */
.pi-cell.hint-target { z-index: 1; box-shadow: inset 0 0 0 3px var(--accent); animation: pi-pulse 1.1s ease-in-out infinite; }
@keyframes pi-pulse { 50% { background: var(--accent-soft); } }
.pi-board.kb:focus .pi-cell.focus { z-index: 2; box-shadow: inset 0 0 0 3px #fff; border-radius: 6px; }

/* Solved: the water glows. */
.pi-board.solved .pi-flow { filter: drop-shadow(0 0 calc(var(--pi-cell) * .06) var(--pi-water-glow)); }