.ag-game-pipes .pp-grid{--n:7;--water:var(--cat);width:min(100%,calc(var(--n) * 68px));border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,var(--panel));box-shadow:inset 0 0 0 1px var(--hairline),0 24px 50px -36px #000;touch-action:manipulation;-webkit-user-select:none;user-select:none;border-radius:16px;flex-direction:column;padding:6px;display:flex}.ag-game-pipes .pp-row{grid-template-columns:repeat(var(--n),minmax(0,1fr));display:grid}.ag-game-pipes .pp-cell{aspect-ratio:1;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:6px;min-width:0;padding:0;display:block;position:relative}.ag-game-pipes .pp-cell:before{content:"";background:var(--panel-soft);opacity:.55;border-radius:7px;transition:background-color .2s,opacity .2s;position:absolute;inset:2px}.ag-game-pipes .pp-cell:hover:before{opacity:1;background:color-mix(in srgb,var(--water) 14%,var(--panel-soft))}.ag-game-pipes .pp-cell:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;z-index:2}.ag-game-pipes .pp-spin{transform:rotate(calc(var(--rot,0) * 90deg));transition:transform .2s cubic-bezier(.3,.9,.4,1.15);display:block;position:absolute;inset:0}.ag-game-pipes .pp-svg{width:100%;height:100%;display:block;overflow:visible}.ag-game-pipes .pp-casing line{stroke:color-mix(in srgb,var(--ink) 30%,var(--panel));stroke-width:26px;stroke-linecap:butt}.ag-game-pipes .pp-casing circle{fill:color-mix(in srgb,var(--ink) 30%,var(--panel))}.ag-game-pipes .pp-water line{stroke:var(--bg);stroke-width:12px;stroke-linecap:butt;transition:stroke .25s}.ag-game-pipes .pp-water circle{fill:var(--bg);transition:fill .25s}.ag-game-pipes .pp-outlet{fill:var(--panel);stroke:color-mix(in srgb,var(--ink) 45%,var(--panel));stroke-width:5px}.ag-game-pipes .pp-outlet-dot{fill:color-mix(in srgb,var(--ink) 35%,var(--panel));transition:fill .25s}.ag-game-pipes .pp-source{fill:var(--water);stroke:var(--panel);stroke-width:5px}.ag-game-pipes .pp-drop{fill:#0b0f26}.ag-game-pipes .pp-cell.is-on .pp-casing line,.ag-game-pipes .pp-cell.is-on .pp-casing circle{stroke:color-mix(in srgb,var(--water) 45%,var(--panel));fill:color-mix(in srgb,var(--water) 45%,var(--panel))}.ag-game-pipes .pp-cell.is-on .pp-water line{stroke:var(--water)}.ag-game-pipes .pp-cell.is-on .pp-water circle,.ag-game-pipes .pp-cell.is-on .pp-outlet-dot{fill:var(--water)}.ag-game-pipes .pp-cell.is-on .pp-outlet{stroke:var(--water)}.ag-game-pipes .pp-cell.is-locked:before{opacity:1;background:color-mix(in srgb,var(--ink) 6%,var(--panel-soft));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 22%,transparent)}.ag-game-pipes .pp-lock{background:var(--ink);opacity:0;pointer-events:none;border-radius:3px;width:22%;min-width:9px;height:22%;min-height:9px;transition:opacity .15s,transform .15s;position:absolute;bottom:6%;right:6%;transform:scale(.6)}.ag-game-pipes .pp-lock:before{content:"";border:2px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;height:60%;position:absolute;bottom:72%;left:22%;right:22%}.ag-game-pipes .pp-cell.is-locked .pp-lock{opacity:.8;transform:none}.ag-game-pipes .pp-cell.is-nudge .pp-spin{animation:.3s pp-nudge}.ag-game-pipes .pp-cell.is-hint:before{animation:1.1s 2 pp-hint}.ag-game-pipes .ag-panel.pp-won .pp-cell .pp-water line,.ag-game-pipes .pp-won .pp-water line{animation:.9s pp-flow}:root[data-theme=light] .ag-game-pipes .pp-grid{background:#e9ecf6}:root[data-theme=light] .ag-game-pipes .pp-cell:before{opacity:.9;background:#fff}:root[data-theme=light] .ag-game-pipes .pp-water line{stroke:#fff}:root[data-theme=light] .ag-game-pipes .pp-water circle{fill:#fff}:root[data-theme=light] .ag-game-pipes .pp-casing line,:root[data-theme=light] .ag-game-pipes .pp-casing circle{stroke:#9aa2bf;fill:#9aa2bf}:root[data-theme=light] .ag-game-pipes{--water-l:color-mix(in srgb,var(--cat) 70%,#0d1433)}:root[data-theme=light] .ag-game-pipes .pp-grid{--water:var(--water-l)}:root[data-theme=light] .ag-game-pipes .pp-cell.is-on .pp-casing line,:root[data-theme=light] .ag-game-pipes .pp-cell.is-on .pp-casing circle{stroke:color-mix(in srgb,var(--water) 55%,#fff);fill:color-mix(in srgb,var(--water) 55%,#fff)}:root[data-theme=light] .ag-game-pipes .pp-drop{fill:#fff}:root[data-theme=light] .ag-game-pipes .pp-cell.is-on .pp-water line{stroke:var(--water)}:root[data-theme=light] .ag-game-pipes .pp-cell.is-on .pp-water circle{fill:var(--water)}@keyframes pp-nudge{25%{transform:rotate(calc(var(--rot,0) * 90deg - 8deg))}75%{transform:rotate(calc(var(--rot,0) * 90deg + 8deg))}}@keyframes pp-hint{50%{background:color-mix(in srgb,var(--water) 40%,var(--panel-soft));opacity:1}}@keyframes pp-flow{50%{stroke:#fff}}@media (width<=520px){.ag-game-pipes .pp-grid{border-radius:12px;padding:3px}.ag-game-pipes .pp-cell:before{border-radius:5px;inset:1px}}@media (prefers-reduced-motion:reduce){.ag-game-pipes .pp-spin,.ag-game-pipes .pp-water line,.ag-game-pipes .pp-water circle{transition:none}.ag-game-pipes .pp-cell.is-nudge .pp-spin,.ag-game-pipes .pp-cell.is-hint:before,.ag-game-pipes .pp-won .pp-water line{animation:none}}@media (forced-colors:active){.ag-game-pipes .pp-cell.is-on .pp-water line{stroke:highlight}.ag-game-pipes .pp-water line{stroke:canvas}.ag-game-pipes .pp-casing line{stroke:canvastext}}