:root{--pipe-bg: rgba(255, 255, 255, .12);--water-color: #38bdf8;--water-color-glow: rgba(56, 189, 248, .4);--tile-bg: rgba(30, 41, 59, .4);--tile-hover-bg: rgba(51, 65, 85, .55);--tile-border: rgba(255, 255, 255, .08);--tile-hover-border: var(--game-accent)}.pipes-layout{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);width:100%;max-width:600px;margin:0 auto;padding:var(--space-4);box-sizing:border-box}.pipes-header{width:100%;text-align:center;display:flex;flex-direction:column;gap:var(--space-2)}.pipes-title{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:900;letter-spacing:-.02em;color:var(--color-text-primary);margin:0}.pipes-hud{display:flex;justify-content:center;align-items:center;gap:var(--space-4);background:#0f172a99;border:1px solid var(--color-border-subtle);border-radius:var(--radius-full);padding:var(--space-2) var(--space-6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);margin-bottom:var(--space-2)}.hud-item{display:flex;flex-direction:column;align-items:center}.hud-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);font-weight:700}.hud-val{font-family:var(--font-display);font-size:var(--text-lg);font-weight:800;color:var(--color-text-primary)}.hud-val.urgent{color:var(--color-status-error);animation:urgent-pulse 1s infinite alternate}@keyframes urgent-pulse{0%{opacity:1}to{opacity:.5}}.difficulty-selector{display:flex;justify-content:center;gap:var(--space-2);margin-bottom:var(--space-4);width:100%}.diff-btn{flex:1;background:#ffffff0d;border:1px solid var(--color-border-subtle);color:var(--color-text-secondary);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);transition:all var(--duration-normal) ease}.diff-btn:hover{background:#ffffff1a;color:var(--color-text-primary);border-color:var(--color-border-default)}.diff-btn.active{background:var(--game-accent-subtle);border-color:var(--game-accent);color:var(--game-accent-hover);box-shadow:0 0 12px var(--game-accent-glow)}.pipes-grid-container{position:relative;width:100%;aspect-ratio:7 / 9;max-width:440px;background:#0f172a8c;border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);padding:var(--space-4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 4px 12px #0009,0 15px 35px #0006;box-sizing:border-box}.pipes-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(9,1fr);gap:6px;width:100%;height:100%}.grid-tap-cell,.grid-pot-cell{display:flex;align-items:center;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none}.tap-svg path{transition:stroke var(--duration-slow) ease,fill var(--duration-slow) ease}.tap-svg .water-stream{stroke-dasharray:6 3;stroke:var(--pipe-bg);stroke-width:0;transition:stroke-width var(--duration-slow) ease,stroke var(--duration-slow) ease}.grid-tap-cell.is-wet .tap-svg .water-stream{stroke:var(--water-color);stroke-width:10px;animation:stream-flow 1s linear infinite}@keyframes stream-flow{to{stroke-dashoffset:-18}}.pot-svg path,.pot-svg rect{transition:stroke var(--duration-slow) ease,fill var(--duration-slow) ease}.pot-svg .water-level{fill:transparent;transition:fill var(--duration-slow) ease}.grid-pot-cell.is-wet .pot-svg .water-level{fill:var(--water-color);animation:fill-pulse 2s infinite ease-in-out}@keyframes fill-pulse{0%,to{opacity:.8}50%{opacity:1}}.pipe-tile{background:var(--tile-bg);border:1px solid var(--tile-border);border-radius:var(--radius-lg);cursor:pointer;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;transition:transform .28s cubic-bezier(.34,1.56,.64,1),background-color var(--duration-fast) ease,border-color var(--duration-fast) ease,box-shadow var(--duration-fast) ease;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;box-shadow:inset 0 1px 2px #ffffff0d}.pipe-tile:hover{background:var(--tile-hover-bg);border-color:var(--tile-hover-border);box-shadow:0 4px 12px #00000040}.pipe-tile:active svg{transform:scale(.88)}.pipe-tile svg{width:100%;height:100%;transition:transform var(--duration-fast) ease}.pipe-tile svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--duration-slow) ease,stroke-width var(--duration-slow) ease}.pipe-tile svg path.pipe-channel{stroke:var(--pipe-bg);stroke-width:20px}.pipe-tile svg path.water-path{stroke:var(--water-color);stroke-width:0px;opacity:0;transition:stroke-width var(--duration-slow) ease,opacity var(--duration-slow) ease}.pipe-tile.is-wet svg path.water-path{stroke-width:12px;opacity:1;animation:water-glow 1.5s infinite alternate ease-in-out}@keyframes water-glow{0%{stroke:var(--water-color);filter:drop-shadow(0 0 2px var(--water-color-glow))}to{stroke:#e0f2fe;filter:drop-shadow(0 0 8px var(--water-color))}}.pipes-grid.is-locked .pipe-tile{pointer-events:none;cursor:default}.pipe-tile.hint-flash{animation:hint-flash-anim 1.2s ease-out}@keyframes hint-flash-anim{0%{background:#84cc16b3;border-color:#fff;box-shadow:0 0 20px #84cc16cc}50%{background:#84cc164d;border-color:#fff;box-shadow:0 0 10px #84cc1666}to{background:var(--tile-bg);border-color:var(--tile-border);box-shadow:none}}.pipes-controls{display:flex;justify-content:center;gap:var(--space-3);width:100%;margin-top:var(--space-2)}.btn-control{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}.burst-particle{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:particle-fly .8s cubic-bezier(.1,.8,.3,1) forwards;z-index:var(--z-overlay)}@keyframes particle-fly{0%{transform:translate(-50%,-50%) scale(1.2);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.2);opacity:0}}.pipes-main{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);box-sizing:border-box}.pipes-lobby{background:#1e293b80;border:1px solid var(--color-border-subtle);border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-6);max-width:440px;width:100%;text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.pipes-lobby__emoji{font-size:var(--text-4xl);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.pipes-lobby__desc{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:1.6;margin-bottom:var(--space-2)}.stats-panel{background:#1e293b4d;border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);padding:var(--space-4);width:100%;margin-top:var(--space-4);box-sizing:border-box}.stats-panel__title{font-family:var(--font-display);font-weight:700;font-size:var(--text-sm);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-3);text-align:left}.stats-row{display:flex;justify-content:space-around;gap:var(--space-2)}.stat-item{display:flex;flex-direction:column;align-items:center}.stat-item__value{font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;color:var(--color-text-primary)}.stat-item__value--accent{color:var(--game-accent-hover)}.stat-item__label{font-size:10px;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.06em;font-weight:600}.stats-empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2);text-align:center}.stats-empty__icon{color:var(--color-text-tertiary);margin-bottom:var(--space-1)}.stats-empty__title{font-weight:700;font-size:var(--text-sm);color:var(--color-text-primary)}.stats-empty__body{font-size:var(--text-xs);color:var(--color-text-secondary);line-height:1.4}.pipe-tile.shortest-path-highlight{border-color:#84cc16!important;box-shadow:0 0 16px #84cc1699!important}.pipe-tile.shortest-path-highlight svg path.water-path{stroke-width:12px!important;opacity:1!important;stroke:#84cc16!important;filter:drop-shadow(0 0 8px rgba(132,204,22,.8))!important}.pipe-tile.flow-animating svg path.water-path{stroke-width:12px;opacity:1;transition:stroke-dashoffset .3s linear,opacity .1s ease}