:root {
  --bg: #0d1220;
  --panel: #182035;
  --text: #eef2f8;
  --muted: #94a0b8;
  --border: #2c3650;
  --steel: #5f6e89;
  --flange: #8a97b0;
  --empty: #0a0e18;
  --water: #38bdf8;
  --good: #4ade80;
  --bad: #f87171;
  --hint: #fbbf24;
  --t: 60px;
  --e: 42px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; color: var(--text); overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #16203a 0%, var(--bg) 70%) var(--bg);
  font: 15px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#app { height: 100vh; height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; padding: 8px 10px; gap: 6px; }

.top { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.title { display: flex; align-items: center; gap: 7px; font-weight: 800; font-size: 19px; letter-spacing: 0.2px; }
.logo { width: 16px; height: 20px; fill: var(--water); filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6)); }
.chip { margin-left: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 99px; padding: 4px 11px;
  font-size: 13px; color: #d6dceb; white-space: nowrap; text-transform: capitalize; }

.stats { display: flex; justify-content: center; gap: 8px; }
.pill { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 4px 11px; font-size: 13px;
  color: var(--muted); white-space: nowrap; }
.pill b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 2px; }

.msg { text-align: center; min-height: 20px; font-size: 14px; color: var(--muted); transition: color 0.2s; }
.msg.good { color: var(--good); font-weight: 700; }
.msg.bad { color: var(--bad); }
.msg.hint { color: var(--hint); }

.wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.board { display: grid; gap: 3px; user-select: none; }

.tile { width: var(--t); height: var(--t); padding: 0; border: 0; cursor: pointer; touch-action: manipulation;
  border-radius: calc(var(--t) * 0.14); background: linear-gradient(145deg, #232d46, #182035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); overflow: hidden; }
.tile:focus-visible { outline: 2px solid var(--water); outline-offset: 1px; }
.tile:active { transform: scale(0.95); }
.tile svg { display: block; width: 100%; height: 100%; transition: transform 0.16s ease-out; }
.board.init .tile svg { transition: none; }
.tile.locked { box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.75); cursor: default; }
.tile.sol { box-shadow: inset 0 0 0 2px rgba(74, 222, 128, 0.6); }
.board.done .tile { cursor: default; }
.board.done .tile:active { transform: none; }
.tile.nudge { animation: nudge 0.3s; }
.tile.flow { animation: flow 0.55s ease both; }

svg .o { fill: none; stroke: var(--steel); stroke-width: 36; }
svg .f { fill: var(--flange); }
svg .i { fill: none; stroke: var(--empty); stroke-width: 18; transition: stroke 0.25s 0.08s; }
svg .cap { fill: var(--steel); stroke: var(--flange); stroke-width: 4; }
svg .bolt { fill: var(--flange); }
.tile.wet .i { stroke: var(--water); }
.tile.wet svg { filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.45)); }

.edge svg { display: block; width: 100%; height: 100%; overflow: visible; }
.edge .badge { stroke-width: 4; }
.edge .badge.src { fill: #0d3550; stroke: var(--water); }
.edge.src .i { stroke: var(--water); }
.edge .drop { fill: var(--water); animation: pulse 2.4s ease-in-out infinite; }
.edge .badge.drn { fill: var(--empty); stroke: var(--flange); transition: fill 0.3s, stroke 0.3s; }
.edge .grate { fill: none; stroke: var(--steel); stroke-width: 3.5; stroke-linecap: round; transition: stroke 0.3s; }
.edge.drn.wet .i, .edge.drn.wet .grate { stroke: var(--water); }
.edge.drn.wet .badge.drn { fill: #0d3550; stroke: var(--water); }
.edge.drn.wet svg { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.7)); }

.bar { display: flex; gap: 8px; }
.bar button { flex: 1; height: 38px; border: 0; border-radius: 9px; background: var(--panel); color: var(--text);
  font: 600 14px system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
.bar button:disabled { opacity: 0.4; cursor: default; }

@keyframes flow { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.07); filter: brightness(1.4); } }
@keyframes nudge { 25%, 75% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }