.pipes-shell {
  --game-accent: var(--g-pipes);
  --board-line: var(--mambo-board-line);
  --cell: var(--mambo-cell);
  --pipe: #c3cad2;
  --water: #2f86de;
  --water-shine: rgb(255 255 255 / 0.45);
  --grid: rgb(0 0 0 / 0.07);
}
:root[data-theme='dark'] .pipes-shell {
  --pipe: #4a525c;
  --water: #3d95ec;
  --water-shine: rgb(255 255 255 / 0.3);
  --grid: rgb(255 255 255 / 0.06);
}
.pipes-shell .shell-stage {
  gap: 16px;
  padding: 0 var(--space-4);
}
.pipes-shell .shell-board-area {
  width: 100%;
}
.pipes-shell .pipes-board-wrap {
  width: min(560px, calc(100vw - 32px), calc(100dvh - 250px));
  margin: 0 auto;
  padding: 0;
  background: transparent;
}
.pipes-shell .pipes-board {
  /* No gaps: neighbouring pipes meet edge to edge, so connected runs read as one line. */
  display: grid;
  overflow: hidden;
  gap: 0;
  padding: 0;
  grid-template-columns: repeat(var(--pipes-columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--pipes-rows), minmax(0, 1fr));
  aspect-ratio: var(--pipes-columns) / var(--pipes-rows);
  border: 1px solid var(--board-line);
  border-radius: 12px;
  /* Grid lines live under the cells, so pipes crossing a cell edge cover them. */
  background-color: var(--cell);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: calc(100% / var(--pipes-columns)) calc(100% / var(--pipes-rows));
  background-position: -0.5px -0.5px;
}
.pipes-shell .pipes-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.pipes-shell .pipes-cell:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--text);
}
.pipes-shell .pipes-cell svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pipes-shell .pipe-outer,
.pipes-shell .pipe-inner {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}
.pipes-shell .pipe-outer {
  stroke: var(--pipe);
  stroke-width: 20;
  transition: stroke 200ms ease-out;
}
.pipes-shell .pipe-joint {
  fill: var(--pipe);
  transition: fill 200ms ease-out;
}
/* Only running water gets the thin highlight, like light on a filled tube. */
.pipes-shell .pipe-inner {
  stroke: transparent;
  stroke-width: 5;
}
.pipes-shell .pipes-cell.powered .pipe-outer {
  stroke: var(--water);
}
.pipes-shell .pipes-cell.powered .pipe-joint {
  fill: var(--water);
}
.pipes-shell .pipes-cell.powered .pipe-inner {
  stroke: var(--water-shine);
}
.pipes-shell .pipe-node {
  fill: var(--cell);
  stroke: var(--pipe);
  stroke-width: 8;
  transition:
    fill 200ms ease-out,
    stroke 200ms ease-out;
}
.pipes-shell .terminal.powered .pipe-node {
  fill: #ffffff;
  stroke: var(--water);
}
.pipes-shell .source .pipe-node {
  fill: var(--water);
  stroke: var(--water);
}
.pipes-shell .source .pipe-node-halo {
  fill: none;
  stroke: var(--water);
  stroke-width: 4;
  opacity: 0.3;
}
.pipes-shell .source .pipe-drop {
  fill: #ffffff;
} /* A quarter turn animates from the previous orientation. */
.pipes-shell .pipes-cell.turned svg {
  animation: pipe-turn 150ms ease-out;
}
.pipes-shell .pipes-cell.turned-back svg {
  animation: pipe-turn-back 150ms ease-out;
}
@keyframes pipe-turn {
  from {
    transform: rotate(-90deg);
  }
}
@keyframes pipe-turn-back {
  from {
    transform: rotate(90deg);
  }
}
.pipes-shell .pipes-cell.hinted {
  background: color-mix(in srgb, var(--hint-target) 22%, var(--cell));
  box-shadow: inset 0 0 0 3px var(--hint-target);
}
/* Hint chain: cells narrowed in the current step, then fainter once the card moves on. */
.pipes-shell .pipes-cell.hint-chain {
  background: color-mix(in srgb, var(--hint-context) 22%, var(--cell));
  box-shadow: inset 0 0 0 3px var(--hint-context);
}
.pipes-shell .pipes-cell.hint-chain-done {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hint-context) 55%, transparent);
}
.pipes-shell .pipes-cell.conflict {
  background: color-mix(in srgb, var(--danger) 16%, var(--cell));
}
.pipes-shell .pipe-conflict-edge {
  position: absolute;
  z-index: 4;
  display: block;
  width: 36%;
  height: 5px;
  border-radius: 3px;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--cell);
  pointer-events: none;
}
.pipes-shell .pipe-conflict-edge.north {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.pipes-shell .pipe-conflict-edge.south {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.pipes-shell .pipe-conflict-edge.east,
.pipes-shell .pipe-conflict-edge.west {
  top: 50%;
  width: 5px;
  height: 36%;
  transform: translateY(-50%);
}
.pipes-shell .pipe-conflict-edge.east {
  right: 0;
}
.pipes-shell .pipe-conflict-edge.west {
  left: 0;
}
/* Wrap-around mode: dots on the outer edge show whether the far side connects. */
.pipes-shell .pipe-wrap-port {
  position: absolute;
  z-index: 2;
  display: block;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--cell);
  pointer-events: none;
}
.pipes-shell .pipe-wrap-port.matched {
  background: var(--pipe);
}
.pipes-shell .pipe-wrap-port.flowing {
  background: var(--water);
}
.pipes-shell .pipe-wrap-port.north {
  top: 0;
  left: 50%;
  transform: translate(-50%, -30%);
}
.pipes-shell .pipe-wrap-port.south {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 30%);
}
.pipes-shell .pipe-wrap-port.east {
  right: 0;
  top: 50%;
  transform: translate(30%, -50%);
}
.pipes-shell .pipe-wrap-port.west {
  left: 0;
  top: 50%;
  transform: translate(-30%, -50%);
}
/* Solved: water pulses across the board in a diagonal wave. */
.pipes-shell .pipes-board.solved .pipes-cell svg {
  animation: pipe-solved 600ms ease-out both;
  animation-delay: calc(var(--i) * 50ms);
}
@keyframes pipe-solved {
  40% {
    transform: scale(1.08);
    filter: brightness(1.3);
  }
}
.pipes-shell .shell-input {
  min-height: 0;
  padding: 0;
}
.pipes-shell .pipes-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.pipes-shell .pipes-count strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pipes-shell .pipes-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--water);
}
.pipes-shell .pipes-shift {
  display: grid;
  grid-template-columns: repeat(5, 48px);
  gap: 4px;
  margin-top: var(--space-2);
  padding: 4px;
  border-radius: 14px;
  background: var(--mambo-segment-bg);
}
.pipes-shell .pipes-shift button {
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: 700 15px var(--font-app);
  cursor: pointer;
}
.pipes-shell .pipes-shift button:active {
  background: var(--segment-on);
}
@media (prefers-reduced-motion: reduce) {
  .pipes-shell .pipes-cell.turned svg,
  .pipes-shell .pipes-cell.turned-back svg,
  .pipes-shell .pipes-board.solved .pipes-cell svg {
    animation: none;
  }
}