/* =============================================================
   GAME: Pipes
   ============================================================= */
.board-pipes {
  --cell: min(calc((100vw - 64px) / var(--n, 7)), 60px);
  --pp-water: #3de0ff; --pp-copper: #c27a45; --pp-copper-hi: #f0b27a; --pp-dark: #1d0f08;
}
.pp-grid {
  display: flex; flex-direction: column; padding: calc(var(--cell) * .14 + 4px); border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(61, 224, 255, .08), transparent 65%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 6px),
    linear-gradient(160deg, #2b1a14, #150b0a 70%);
  box-shadow: 0 0 0 2px var(--pp-water), 0 0 28px rgba(61, 224, 255, .3), inset 0 2px 0 rgba(255, 220, 190, .12), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .45);
  transition: box-shadow .4s ease;
}
.pp-row { display: flex; }
.pp-tile {
  position: relative; width: var(--cell); height: var(--cell); padding: 0; margin: 0; border: 0; cursor: pointer;
  border-radius: 6px; background: transparent; display: grid; place-items: center;
}
/* tile plate with a faint bevel */
.pp-tile::before {
  content: ""; position: absolute; inset: 1.5px; border-radius: 6px; pointer-events: none;
  background: linear-gradient(150deg, #3a2620, #22140f); box-shadow: inset 0 1px 0 rgba(255, 220, 190, .1), inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.pp-tile svg {
  position: relative; width: 100%; height: 100%; overflow: visible;
  transform: rotate(calc(var(--r, 0) * 90deg)); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.pp-tile:hover::before { background: linear-gradient(150deg, #4a3028, #2a1912); }
.pp-tile:focus { outline: none; }
.pp-tile:focus-visible { z-index: 2; box-shadow: 0 0 0 2px var(--focus), 0 0 12px var(--focus); }
.pp-tile:disabled { cursor: default; }

.pp-shadow { fill: none; stroke: rgba(0, 0, 0, .5); stroke-width: 36; }
.pp-body { fill: none; stroke: var(--pp-copper); stroke-width: 29; }
.pp-flange { fill: none; stroke: var(--pp-copper-hi); stroke-width: 7; stroke-linecap: round; }
.pp-chan { fill: none; stroke: var(--pp-dark); stroke-width: 13; }
.pp-water { fill: none; stroke: var(--pp-water); stroke-width: 13; opacity: 0; transition: opacity .25s ease; }
.pp-hub { fill: var(--pp-copper); stroke: var(--pp-copper-hi); stroke-width: 3; }
.pp-hub-in { fill: var(--pp-dark); transition: fill .25s ease; }
.pp-bulb-ring { fill: #2a1b16; stroke: var(--pp-copper-hi); stroke-width: 4; }
.pp-bulb { fill: #3b2a2e; transition: fill .3s ease; }
.pp-bulb-shine { fill: rgba(255, 255, 255, .25); }
.pp-src-ring { fill: #0c2a35; stroke: var(--pp-water); stroke-width: 4; }
.pp-src-core { fill: var(--pp-water); }
.pp-src-drop { fill: #eaffff; }
.pp-is-src svg { filter: drop-shadow(0 0 6px rgba(61, 224, 255, .8)); }

/* pipes reached by the water */
.pp-on .pp-water { opacity: 1; }
.pp-on .pp-hub-in { fill: var(--pp-water); }
.pp-on .pp-bulb { fill: #a8f6ff; }
.pp-on.pp-leaf svg { filter: drop-shadow(0 0 5px rgba(61, 224, 255, .75)); }
.pp-on .pp-body { stroke: #d58a52; }

/* locked tiles: darker plate with a rivet in each corner */
.pp-lock::before {
  background:
    radial-gradient(circle at 12% 12%, #9aa7b8 0 2px, transparent 2.5px), radial-gradient(circle at 88% 12%, #9aa7b8 0 2px, transparent 2.5px),
    radial-gradient(circle at 12% 88%, #9aa7b8 0 2px, transparent 2.5px), radial-gradient(circle at 88% 88%, #9aa7b8 0 2px, transparent 2.5px),
    linear-gradient(150deg, #1d2430, #121820);
  box-shadow: inset 0 0 0 1.5px rgba(154, 167, 184, .45);
}
.pp-lockmode .pp-tile { cursor: cell; }
.pp-shake svg { animation: ppshake .3s ease; }
@keyframes ppshake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }
.pp-hinted::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  box-shadow: 0 0 0 2px #ffd23f, 0 0 16px #ffd23f; animation: pphint 1.2s ease-out forwards;
}
@keyframes pphint { to { opacity: 0; } }
.pp-loading { opacity: .45; }

/* solved: a bright wave runs from the source to every end, then water keeps flowing */
.pp-solved { box-shadow: 0 0 0 2px #aef6ff, 0 0 44px rgba(61, 224, 255, .6), inset 0 2px 0 rgba(255, 220, 190, .12), 0 14px 30px rgba(0, 0, 0, .45); }
.pp-solved .pp-water { stroke-dasharray: 9 7; animation: ppflow .7s linear infinite, ppwave .7s ease-out calc(var(--d) * 70ms) backwards; }
.pp-solved .pp-bulb { animation: ppbulb .6s ease-out calc(var(--d) * 70ms + 120ms) backwards; fill: #eaffff; }
.pp-solved .pp-leaf svg { filter: drop-shadow(0 0 8px rgba(61, 224, 255, .95)); }
@keyframes ppflow { to { stroke-dashoffset: -16; } }
@keyframes ppwave { from { opacity: 0; stroke: #fff; } 40% { opacity: 1; stroke: #fff; } }
@keyframes ppbulb { from { fill: #3b2a2e; } 50% { fill: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .pp-solved .pp-water, .pp-solved .pp-bulb { animation: none; }
  .pp-tile svg { transition: none; }
}

.pp-dot { background: radial-gradient(circle at 35% 30%, #eaffff 0 15%, #3de0ff 45%, #0a5c70); }
.pp-meter { display: inline-block; width: 70px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.pp-meter span { display: block; height: 100%; background: linear-gradient(90deg, #1a9fd0, #3de0ff); border-radius: inherit; transition: width .25s ease; }
.pp-lock-i { display: inline-block; width: 12px; height: 10px; margin: 4px 6px 0 0; border-radius: 2px; background: currentColor; position: relative; }
.pp-lock-i::before { content: ""; position: absolute; left: 2px; top: -6px; width: 8px; height: 7px; border: 2px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.pp-lock-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--glow, #3de0ff); color: #fff; }
.pp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }