/* Pocket Pipes hydraulic presentation
 * Layered fittings, fixtures, live instrumentation, and causal water motion.
 * Page chrome remains in style.css; palette and timing remain in tokens.css.
 */
.board-shell {
  position: relative;
  width: min(100%, 32rem);
  margin: clamp(0.7rem, 3vw, 1.5rem) auto 0;
  padding: 0.32rem;
  border: 4px solid var(--ink);
  border-radius: 22px;
  color: var(--ink);
  background: var(--water-light);
  box-shadow: 10px 12px 0 var(--pump), 0 1.2rem 2.4rem var(--water-cast);
}

.board-shell::before,
.board-shell::after {
  content: "";
  position: absolute;
  z-index: var(--z-fixture);
  width: 0.65rem;
  height: 0.65rem;
  border: 2px solid var(--pipe-rivet-shadow);
  border-radius: 50%;
  background: var(--pipe-rivet);
  pointer-events: none;
}

.board-shell::before { inset: 0.32rem auto auto 0.32rem; }
.board-shell::after { inset: auto 0.32rem 0.32rem auto; }

.pipes-board {
  position: relative;
  z-index: var(--z-board);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 1px;
  width: 100%;
}

.pipes-board::after {
  content: "";
  position: absolute;
  z-index: var(--z-water-effect);
  inset: 0;
  width: 24%;
  border-radius: var(--radius-card);
  background: var(--water-glass);
  opacity: 0;
  transform: translateX(-120%) skewX(-12deg);
  pointer-events: none;
}

.pipes-board.is-surging::after {
  animation: board-pressure-sweep 760ms var(--ease-in-out) 2;
}

.pipe-tile {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  padding: 0;
  overflow: visible;
  border: 2px solid var(--ink);
  border-radius: 18%;
  color: var(--ink);
  background: var(--tile-color, var(--paper-3));
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 -3px 0 var(--pipe-shadow);
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.pipe-tile:active { transform: translateY(2px) scale(0.97); }
.pipe-tile:disabled { cursor: not-allowed; opacity: 0.55; }
.pipe-tile.tone-0 { --tile-color: var(--color-paper-2); }
.pipe-tile.tone-1 { --tile-color: var(--color-coral-band); }
.pipe-tile.tone-2 { --tile-color: var(--color-cyan-band); }
.pipe-tile.tone-3 { --tile-color: color-mix(in oklch, var(--safe) 56%, var(--paper)); }
.pipe-tile.tone-4 { --tile-color: color-mix(in oklch, var(--lavender) 42%, var(--paper)); }

.pipe-drawing {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pipe-shadow,
.pipe-casing,
.pipe-rim,
.pipe-channel,
.pipe-water-body,
.pipe-water-shine {
  stroke-linecap: round;
}

.pipe-shadow { stroke: var(--pipe-shadow); stroke-width: 30; }
.pipe-casing { stroke: var(--pipe-casing); stroke-width: 28; }
.pipe-rim { stroke: var(--pipe-rim); stroke-width: 21; }
.pipe-channel { stroke: var(--pipe-channel); stroke-width: 16; }
.pipe-water-body {
  opacity: 0;
  stroke: var(--water);
  stroke-width: 11;
}

.pipe-water-shine {
  opacity: 0;
  stroke: var(--water-foam);
  stroke-width: 2.5;
}

.pipe-joint-shadow { fill: var(--pipe-shadow); }
.pipe-joint-casing { fill: var(--pipe-casing); }
.pipe-joint-rim { fill: var(--pipe-rim); }
.pipe-joint-channel { fill: var(--pipe-channel); }
.pipe-water-joint { fill: var(--water); opacity: 0; }
.pipe-water-glint { fill: var(--water-foam); opacity: 0; }
.tile-rivet { fill: var(--pipe-rivet); stroke: var(--pipe-rivet-shadow); stroke-width: 1.4; }

.water-bead {
  fill: var(--water-foam);
  stroke: var(--water-deep);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.pipe-tile.is-wet {
  background: color-mix(in oklch, var(--tile-color) 70%, var(--water-light));
}

.pipe-tile.is-wet .pipe-water-body,
.pipe-tile.is-wet .pipe-water-shine {
  opacity: 1;
}

.pipe-tile.is-wet .pipe-water-joint,
.pipe-tile.is-wet .pipe-water-glint { opacity: 1; }

.pipe-tile.is-wet .water-bead {
  animation: water-bead 920ms linear calc(var(--flow-delay) + var(--bead-lag) + var(--current-phase)) infinite;
}

.pipe-tile.just-filled { --current-phase: 0ms; }
.pipe-tile.just-filled .pipe-water-body,
.pipe-tile.just-filled .pipe-water-shine,
.pipe-tile.just-filled .pipe-water-joint,
.pipe-tile.just-filled .pipe-water-glint {
  animation: water-arrive 360ms var(--ease-out) var(--flow-delay) both;
}

.pipes-board.is-surging .pipe-tile.is-wet .water-bead { animation-duration: 340ms; }

.place-marker {
  position: absolute;
  inset: 4px auto auto 4px;
  z-index: var(--z-fixture);
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--outlet);
  font: 800 0.7rem var(--font-mono);
  pointer-events: none;
}

.is-pump .place-marker {
  color: var(--accent-ink);
  background: var(--pump);
  animation: pressure-pulse 1.25s var(--ease-in-out) infinite;
}

.is-filled-outlet .place-marker {
  color: var(--ink);
  background: var(--outlet-wet);
  box-shadow: inset 0 -5px 0 var(--water);
}

.station-fixture {
  position: absolute;
  z-index: var(--z-fixture);
  inset: auto 5px 5px auto;
  width: clamp(1.35rem, 28%, 2.35rem);
  aspect-ratio: 1;
  pointer-events: none;
}

.pump-fixture {
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pump);
  box-shadow: 0 3px 0 var(--pump-deep);
}

.fixture-gauge {
  position: absolute;
  inset: -22% auto auto -24%;
  width: 58%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--gauge-face);
}

.fixture-gauge::before,
.fixture-gauge::after {
  content: "";
  position: absolute;
  inset: 20% 47%;
  background: var(--gauge-tick);
  transform-origin: 50% 80%;
}

.fixture-gauge::before { transform: rotate(-48deg); }
.fixture-gauge::after { transform: rotate(48deg); }

.fixture-gauge i {
  position: absolute;
  inset: 48% 45% 8%;
  border-radius: var(--radius-pill);
  background: var(--warning);
  transform: rotate(calc(-112deg + (var(--pressure) * 2.24deg)));
  transform-origin: 50% 92%;
  transition: transform var(--dur-long) var(--ease-out);
}

.pump-rotor {
  position: absolute;
  inset: 22%;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
  animation: pump-rotor 1.8s linear infinite;
}

.pump-rotor i {
  position: absolute;
  inset: 43% 8%;
  border-radius: var(--radius-pill);
  background: var(--ink);
}

.pump-rotor i:last-child { transform: rotate(90deg); }

.outlet-fixture {
  width: clamp(1rem, 24%, 1.9rem);
  height: clamp(1.55rem, 36%, 2.7rem);
  aspect-ratio: auto;
}

.outlet-tank {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill) var(--radius-pill) var(--radius-input) var(--radius-input);
  background: var(--gauge-face);
  box-shadow: 0 3px 0 var(--pipe-rivet-shadow);
}

.outlet-tank i {
  position: absolute;
  inset: 20% 2px 2px;
  border-radius: var(--radius-pill) var(--radius-pill) calc(var(--radius-input) - 3px) calc(var(--radius-input) - 3px);
  background: var(--water);
  transform: scaleY(0.08);
  transform-origin: 50% 100%;
  transition: transform var(--dur-long) var(--ease-out);
}

.outlet-fixture.is-filled .outlet-tank i { transform: scaleY(1); }

.outlet-tank b {
  position: absolute;
  inset: auto 23% 18%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--water-foam);
  opacity: 0;
}

.outlet-fixture.is-filled .outlet-tank b {
  animation: tank-bubble 1.35s var(--ease-out) infinite;
}

.pipe-tile.is-hinted {
  outline: 5px dashed var(--blue);
  outline-offset: -7px;
}

.pipe-tile.is-turning .pipe-drawing { animation: pipe-turn 300ms var(--ease-out); }
.pipe-tile.just-filled { animation: fill-pop 360ms var(--ease-out) var(--flow-delay) both; }
.pipe-tile.just-filled::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 30%;
  border: 4px solid var(--water);
  border-radius: 50%;
  pointer-events: none;
  animation: fill-ring 420ms var(--ease-out) var(--flow-delay) both;
}

.pipe-tile.pressure-hit::after {
  content: "";
  position: absolute;
  z-index: var(--z-water-effect);
  inset: 10%;
  border: 4px solid var(--water-foam);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: pressure-hit 440ms var(--ease-out);
}

.pipe-leak {
  --leak-x: 0;
  --leak-y: 0;
  position: absolute;
  z-index: 4;
  width: 0.55rem;
  height: 0.55rem;
  pointer-events: none;
}

.pipe-leak::before,
.pipe-leak::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--water-deep);
  border-radius: 50%;
  background: var(--water-light);
  animation: leak-release 860ms var(--ease-out) infinite;
}

.pipe-leak::after { animation-delay: 430ms; }
.pipe-leak i {
  position: absolute;
  inset: 18%;
  border: 1px solid var(--water-deep);
  border-radius: 50%;
  background: var(--water-foam);
  opacity: 0;
  animation: leak-spray 960ms var(--ease-out) var(--drop-delay) infinite;
}
.leak-north { top: 1%; left: 50%; --leak-y: -0.72rem; }
.leak-east { top: 50%; right: 1%; --leak-x: 0.72rem; }
.leak-south { bottom: 1%; left: 50%; --leak-y: 0.72rem; }
.leak-west { top: 50%; left: 1%; --leak-x: -0.72rem; }

.pipes-board.is-solved .pipe-tile { border-color: var(--water-deep); }
.pipes-board.is-surging .pipe-tile { cursor: wait; }

.hydraulic-hud {
  --pressure: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: min(100%, 32rem);
  margin: 1.15rem auto 0;
  padding: 0.55rem 0.7rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius-input);
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 4px 0 var(--ink);
}

.pressure-dial {
  display: grid;
  place-items: center;
  width: 3.2rem;
  aspect-ratio: 1;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--water-light);
}

.dial-face {
  position: relative;
  width: 74%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--pipe-rivet-shadow);
  border-radius: 50%;
  background: var(--gauge-face);
}

.dial-face::before {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px dashed var(--gauge-tick);
  border-radius: 50%;
  opacity: 0.5;
}

.dial-face i {
  position: absolute;
  inset: 46% 46% 7%;
  border-radius: var(--radius-pill);
  background: var(--warning);
  transform: rotate(calc(-115deg + (var(--pressure) * 2.3deg)));
  transform-origin: 50% 95%;
  transition: transform var(--dur-long) var(--ease-out);
}

.dial-face b {
  position: absolute;
  inset: 43%;
  border-radius: 50%;
  background: var(--ink);
}

.pressure-readout,
.leak-readout {
  display: grid;
  min-width: 0;
  font-family: var(--font-mono);
}

.pressure-readout > span:first-child,
.leak-readout span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pressure-readout strong,
.leak-readout strong {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}

.pressure-track {
  position: relative;
  height: 0.38rem;
  margin-top: 0.28rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--pipe-channel-shadow);
}

.pressure-track i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--water);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-long) var(--ease-out);
}

.leak-readout {
  min-width: 4.1rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--rule);
  text-align: right;
}

.hydraulic-hud.is-leaking .leak-readout strong { color: var(--warning); }
.hydraulic-hud.is-pressurised {
  border-color: var(--water-deep);
  box-shadow: 0 4px 0 var(--water-deep);
}

.water-surge {
  position: absolute;
  z-index: var(--z-water-effect);
  top: 0;
  left: 0;
  width: clamp(1.45rem, 7vw, 2.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: drop-shadow(0 0.3rem 0.35rem var(--water-cast));
}

.water-surge i {
  position: absolute;
  border-radius: 50%;
}

.surge-core {
  inset: 8%;
  border: 3px solid var(--water-deep);
  background: var(--water-foam);
  box-shadow: inset 0 -0.4rem 0 var(--water);
}

.surge-core::after {
  content: "";
  position: absolute;
  inset: 18% 24% auto;
  height: 20%;
  border-radius: var(--radius-pill);
  background: var(--water-foam);
}

.surge-ring {
  inset: -34%;
  border: 3px solid var(--water);
  opacity: 0;
}

.water-surge.is-running .surge-ring { animation: surge-ring 420ms var(--ease-out) infinite; }

.surge-tail {
  inset: 31%;
  background: var(--water-light);
  opacity: 0;
}

.water-surge.is-running .surge-tail--one { animation: surge-tail 520ms linear infinite; }
.water-surge.is-running .surge-tail--two { animation: surge-tail 520ms linear 260ms infinite; }

.flow-burst {
  position: absolute;
  z-index: var(--z-burst);
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.flow-burst i {
  --bubble-x: 0;
  --bubble-y: -3rem;
  --bubble-delay: 0ms;
  position: absolute;
  inset: -0.42rem auto auto -0.42rem;
  width: 0.84rem;
  height: 0.84rem;
  border: 2px solid var(--water-deep);
  border-radius: 50%;
  background: var(--water-light);
  opacity: 0;
}

.flow-burst.is-bursting i {
  animation: bubble-burst 560ms var(--ease-out) var(--bubble-delay) both;
}

.flow-burst i:nth-child(1) { --bubble-x: -3.2rem; --bubble-y: -1.1rem; }
.flow-burst i:nth-child(2) { --bubble-x: -2.3rem; --bubble-y: -2.8rem; --bubble-delay: 35ms; }
.flow-burst i:nth-child(3) { --bubble-x: -0.7rem; --bubble-y: -3.7rem; --bubble-delay: 70ms; }
.flow-burst i:nth-child(4) { --bubble-x: 1.2rem; --bubble-y: -3.5rem; --bubble-delay: 20ms; }
.flow-burst i:nth-child(5) { --bubble-x: 2.9rem; --bubble-y: -2.2rem; --bubble-delay: 55ms; }
.flow-burst i:nth-child(6) { --bubble-x: 3.5rem; --bubble-y: -0.4rem; --bubble-delay: 90ms; }
.flow-burst i:nth-child(7) { --bubble-x: 3.1rem; --bubble-y: 1.7rem; --bubble-delay: 15ms; }
.flow-burst i:nth-child(8) { --bubble-x: 1.8rem; --bubble-y: 3.1rem; --bubble-delay: 60ms; }
.flow-burst i:nth-child(9) { --bubble-x: -0.2rem; --bubble-y: 3.6rem; --bubble-delay: 95ms; }
.flow-burst i:nth-child(10) { --bubble-x: -2.2rem; --bubble-y: 2.8rem; --bubble-delay: 30ms; }
.flow-burst i:nth-child(11) { --bubble-x: -3.5rem; --bubble-y: 1.1rem; --bubble-delay: 65ms; }
.flow-burst i:nth-child(12) { --bubble-x: 0.4rem; --bubble-y: -2.6rem; --bubble-delay: 105ms; }

@keyframes map-current-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  12% { opacity: 1; }
  42% { transform: translate(0, -76px); }
  70% { transform: translate(82px, -76px); }
  92% { opacity: 1; transform: translate(82px, -146px); }
  100% { opacity: 0; transform: translate(82px, -146px); }
}

@keyframes map-current-branch {
  0% { opacity: 0; transform: translate(0, 0); }
  16% { opacity: 1; }
  64% { transform: translate(118px, 0); }
  90% { opacity: 1; transform: translate(118px, 52px); }
  100% { opacity: 0; transform: translate(118px, 52px); }
}

@keyframes map-current-roof {
  0% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: 1; }
  66% { transform: translate(72px, 0); }
  90% { opacity: 1; transform: translate(72px, -36px); }
  100% { opacity: 0; transform: translate(72px, -36px); }
}

@keyframes map-valve-turn {
  to { transform: rotate(360deg); }
}

@keyframes water-bead {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bead-x), var(--bead-y)) scale(1); }
}

@keyframes water-arrive {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pressure-pulse {
  0%, 100% { opacity: 0.72; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes pipe-turn {
  from { transform: rotate(-90deg); }
  to { transform: none; }
}

@keyframes fill-pop {
  from { transform: scale(0.96); }
  to { transform: none; }
}

@keyframes fill-ring {
  from { opacity: 0.9; transform: scale(0.2); }
  to { opacity: 0; transform: scale(3.2); }
}

@keyframes leak-release {
  0% { opacity: 0; transform: translate(0, 0) scale(0.45); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--leak-x), var(--leak-y)) scale(1); }
}

@keyframes leak-spray {
  0% { opacity: 0; transform: translate(0, 0) scale(0.35); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--leak-x), var(--leak-y)) scale(0.82); }
}

@keyframes pressure-hit {
  0% { opacity: 0.9; transform: scale(0.28); }
  100% { opacity: 0; transform: scale(1.35); }
}

@keyframes pump-rotor {
  to { transform: rotate(360deg); }
}

@keyframes tank-bubble {
  0% { opacity: 0; transform: translateY(0) scale(0.55); }
  24% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-140%) scale(1); }
}

@keyframes valve-ready {
  0%, 76%, 100% { transform: translateY(0); }
  86% { transform: translateY(-3px); }
}

@keyframes surge-ring {
  from { opacity: 0.85; transform: scale(0.45); }
  to { opacity: 0; transform: scale(1.55); }
}

@keyframes surge-tail {
  0% { opacity: 0.8; transform: translate(-0.2rem, 0.2rem) scale(0.9); }
  100% { opacity: 0; transform: translate(-1.35rem, 0.75rem) scale(0.35); }
}

@keyframes board-pressure-sweep {
  0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); }
  22% { opacity: 0.52; }
  78% { opacity: 0.52; }
  100% { opacity: 0; transform: translateX(430%) skewX(-12deg); }
}

@keyframes bubble-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--bubble-x), var(--bubble-y)) scale(1.25); }
}