@font-face{font-family:"Poxast";src:url("./Poxast-subset.woff2") format("woff2");font-display:swap}
:root{
  --bg:#171c14;--panel:#b8c78d;--panel2:#9cab72;--panel3:#7f9060;--ink:#182015;--ink2:#344226;--hi:#d8e8a8;--mid:#718153;--shadow:#0b0f09;--water:#e6ffd2;--water2:#bcd98c;--danger:#d9c980;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{min-height:100vh;color:var(--panel);font-family:"Courier New",monospace;background:linear-gradient(rgba(255,255,255,.015) 50%,transparent 50%) 0 0/100% 4px,radial-gradient(circle at 50% 0%,#2a3221 0,#171c14 56%,#0d110b 100%)}
button,a{font:inherit}
button{touch-action:manipulation}
.flow-shell{width:min(100%,1180px);margin:0 auto;padding:18px max(12px,env(safe-area-inset-right)) 34px max(12px,env(safe-area-inset-left))}
.flow-topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:12px;font-size:10px;letter-spacing:1.2px}
.back-link{color:var(--panel);text-decoration:none;justify-self:start}.back-link:hover,.back-link:focus-visible{color:var(--hi)}
.flow-title{text-align:center}.flow-title span{display:block;font-size:9px;color:#c9d99b;margin-bottom:3px}.flow-title h1{margin:0;color:var(--hi);font:900 clamp(21px,3.6vw,32px)/1 "Poxast","Courier New",monospace;text-shadow:3px 3px 0 rgba(52,66,38,.7);letter-spacing:1px}
.flow-help{justify-self:end;text-align:right;opacity:.85}
.machine{background:#3b442f;border:6px solid #11160e;box-shadow:7px 7px 0 #090c07;padding:12px}
.hud{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin-bottom:8px}
.hud-block{background:var(--panel2);color:var(--ink);border:3px solid #20291a;padding:8px 10px;display:flex;justify-content:space-between;align-items:center;gap:10px;min-width:0;text-transform:uppercase}
.hud-block span{font-size:9px;letter-spacing:1px;opacity:.7}.hud-block strong{font-size:13px;letter-spacing:1px;white-space:nowrap}.timer-block strong{font-size:16px}
.status-panel{display:flex;align-items:center;gap:8px;background:#252e20;border:3px solid #11160e;padding:7px 9px;margin-bottom:8px;color:#cbd99d;font-size:10px;letter-spacing:.7px;min-height:36px}
.status-led{width:8px;height:8px;flex:0 0 auto;background:var(--hi);box-shadow:0 0 0 2px #3c482e,0 0 10px rgba(216,232,168,.6)}
.status-panel.warn .status-led{background:var(--danger)}
.board-shell{position:relative;width:min(100%,790px);margin:0 auto;background:var(--panel3);border:5px solid #20291a;box-shadow:inset 0 0 0 4px rgba(24,32,21,.18);padding:clamp(32px,6vw,50px);overflow:visible}
.board-shell::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(24,32,21,.07) 1px,transparent 1px) 0 0/100% 4px,linear-gradient(90deg,rgba(24,32,21,.03) 1px,transparent 1px) 0 0/4px 100%;mix-blend-mode:multiply}
.grid{--size:2;position:relative;z-index:1;width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));grid-template-rows:repeat(var(--size),minmax(0,1fr));border:4px solid var(--ink);background:#879565;box-shadow:6px 6px 0 rgba(24,32,21,.28)}
.cell{position:relative;min-width:0;min-height:0;border:2px solid rgba(24,32,21,.7);background:linear-gradient(145deg,#aeba7b 0 48%,#93a16b 49% 100%);padding:0;overflow:hidden;cursor:pointer}
.cell::before{content:"";position:absolute;inset:5px;border-top:2px solid rgba(216,232,168,.28);border-left:2px solid rgba(216,232,168,.2);border-right:2px solid rgba(24,32,21,.12);border-bottom:2px solid rgba(24,32,21,.18);pointer-events:none}
.cell:hover{filter:brightness(1.04)}
.cell.target{outline:4px dashed var(--hi);outline-offset:-6px;z-index:2;animation:targetPulse 1s steps(2,end) infinite}
.cell.confirm-anchor{box-shadow:inset 0 0 0 4px rgba(216,232,168,.55)}
.cell.locked{filter:saturate(.72) brightness(.92)}
.cell.soft{outline:3px solid rgba(216,232,168,.75);outline-offset:-5px}
.cell.soft::after{content:"2× TAP TO RESET";position:absolute;left:4px;right:4px;bottom:4px;background:rgba(24,32,21,.78);color:var(--hi);font-size:clamp(5px,.8vw,8px);letter-spacing:.5px;padding:2px;text-align:center;pointer-events:none}
@keyframes targetPulse{50%{outline-color:rgba(216,232,168,.35)}}
.pipe-svg{display:block;width:100%;height:100%;overflow:visible;image-rendering:pixelated;pointer-events:none}
.pipe-depth,.pipe-rim,.pipe-glass,.pipe-core,.water-fill,.water-spark{fill:none;stroke-linecap:square;stroke-linejoin:bevel;vector-effect:non-scaling-stroke}
.pipe-depth{stroke:#25301f;stroke-width:31;transform:translate(5px,5px);opacity:.72}
.pipe-rim{stroke:#293521;stroke-width:34}
.pipe-glass{stroke:rgba(216,232,168,.66);stroke-width:27}
.pipe-core{stroke:rgba(122,143,90,.92);stroke-width:15}
.pipe-highlight{fill:none;stroke:rgba(242,255,209,.65);stroke-width:3;stroke-linecap:square;vector-effect:non-scaling-stroke;transform:translate(-4px,-4px)}
.cell.preview .pipe-glass{stroke:rgba(216,232,168,.48)}
.cell.preview .pipe-core{stroke:rgba(122,143,90,.65)}
.water-fill{stroke:var(--water2);stroke-width:12;opacity:.92}
.water-spark{stroke:var(--water);stroke-width:5;stroke-dasharray:9 10;animation:waterRush .42s linear infinite}
@keyframes waterRush{to{stroke-dashoffset:-38}}
.port{position:absolute;z-index:4;width:44px;height:44px;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;transform-origin:center;pointer-events:none}
.port.inlet{pointer-events:auto;cursor:pointer}
.port-label{position:absolute;font-weight:900;font-size:9px;letter-spacing:1px;background:var(--hi);border:2px solid var(--ink);padding:2px 4px;z-index:4;white-space:nowrap}
.port-tube{position:absolute;width:42px;height:24px;background:linear-gradient(#d8e8a8 0 20%,#8d9e67 21% 72%,#66784b 73% 100%);border:4px solid var(--ink);box-shadow:4px 4px 0 rgba(24,32,21,.35)}
.port-tube::after{content:"";position:absolute;right:-7px;top:4px;width:9px;height:8px;background:var(--hi);border:3px solid var(--ink)}
.port-water{position:absolute;width:26px;height:8px;background:var(--water);box-shadow:0 0 0 2px var(--water2);opacity:0;z-index:3}
.port.inlet.running .port-water{opacity:1;animation:portFlow .36s steps(3,end) infinite}
.port.outlet.filled .port-water{opacity:1;animation:portFlow .36s steps(3,end) infinite}
@keyframes portFlow{50%{transform:scaleX(.6)}}
.port.side-N{transform:translate(-50%,-50%) rotate(90deg)}.port.side-E{transform:translate(-50%,-50%) rotate(180deg)}.port.side-S{transform:translate(-50%,-50%) rotate(-90deg)}.port.side-W{transform:translate(-50%,-50%) rotate(0deg)}
.port.side-N .port-label{transform:rotate(-90deg) translateY(-27px)}.port.side-E .port-label{transform:rotate(-180deg) translateY(-27px)}.port.side-S .port-label{transform:rotate(90deg) translateY(-27px)}.port.side-W .port-label{transform:translateY(-27px)}
.leak-marker{position:absolute;z-index:7;width:34px;height:34px;display:none;pointer-events:none;transform:translate(-50%,-50%)}
.leak-marker.active{display:block}
.leak-marker::before{content:"";position:absolute;left:8px;top:12px;width:24px;height:10px;background:var(--water);box-shadow:0 0 0 3px var(--water2);animation:leakJet .24s steps(2,end) infinite}
.leak-marker i{position:absolute;width:7px;height:7px;background:var(--water);opacity:0;animation:leakDrop .75s linear infinite}
.leak-marker i:nth-child(1){left:20px;top:8px;animation-delay:0s}.leak-marker i:nth-child(2){left:27px;top:12px;animation-delay:.12s}.leak-marker i:nth-child(3){left:19px;top:18px;animation-delay:.24s}.leak-marker i:nth-child(4){left:31px;top:21px;animation-delay:.36s}.leak-marker i:nth-child(5){left:24px;top:25px;animation-delay:.48s}.leak-marker i:nth-child(6){left:34px;top:14px;animation-delay:.6s}
@keyframes leakJet{50%{width:30px}}@keyframes leakDrop{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(28px,22px)}}
.board-overlay{position:absolute;inset:0;z-index:9;display:grid;place-items:center;padding:18px;background:rgba(24,32,21,.24)}.board-overlay.hidden{display:none}
.overlay-card{width:min(92%,560px);background:rgba(184,199,141,.96);color:var(--ink);border:4px solid var(--ink2);box-shadow:7px 7px 0 var(--ink);padding:18px;text-align:center}
.overlay-kicker{font-size:9px;letter-spacing:2px;margin-bottom:7px}.overlay-card h2{margin:0 0 10px;font:900 clamp(22px,4vw,32px)/1 "Poxast","Courier New",monospace}.overlay-card p{margin:7px 0;font-size:12px;line-height:1.48;color:var(--ink2)}.tiny-rule{font-size:10px!important}
.pixel-btn{appearance:none;border:4px solid var(--ink2);background:var(--hi);color:var(--ink);box-shadow:4px 4px 0 var(--ink);padding:11px 15px;margin-top:12px;min-width:150px;font:900 12px/1 "Poxast","Courier New",monospace;letter-spacing:1px;cursor:pointer;text-transform:uppercase}.pixel-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.countdown{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(24,32,21,.18);color:var(--ink);font:900 clamp(74px,20vw,170px)/1 "Poxast","Courier New",monospace;text-shadow:7px 7px 0 rgba(113,129,83,.7)}.countdown.hidden{display:none}
.selector-panel{width:min(100%,900px);margin:12px auto 0;background:#252e20;border:4px solid #11160e;padding:10px;color:#cbd99d}
.selector-copy{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}.selector-copy>div{background:var(--panel2);color:var(--ink);border:3px solid #20291a;padding:7px 9px;display:flex;justify-content:space-between;gap:8px}.selector-copy span{font-size:8px;opacity:.7;letter-spacing:1px}.selector-copy strong{font-size:10px;letter-spacing:.7px;text-align:right}
.pipe-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.pipe-card{position:relative;min-width:0;background:#7f9060;border:3px solid #1d2818;padding:3px;aspect-ratio:1;opacity:.5}.pipe-card.selected{opacity:1;outline:3px solid var(--hi);outline-offset:-5px}.pipe-card.next{opacity:.82}.pipe-card .pipe-svg{width:100%;height:100%}.pipe-card .pipe-depth{stroke-width:20}.pipe-card .pipe-rim{stroke-width:22}.pipe-card .pipe-glass{stroke-width:17}.pipe-card .pipe-core{stroke-width:9}.pipe-card .pipe-highlight{stroke-width:2}
.pipe-card b{position:absolute;left:2px;right:2px;bottom:1px;background:rgba(24,32,21,.8);color:var(--hi);font-size:6px;line-height:1.1;text-align:center;padding:1px}
.control-hint{margin-top:8px;text-align:center;font-size:9px;letter-spacing:.8px;line-height:1.4;color:#cbd99d}
@media (min-width:1100px){.board-shell{width:min(69vh,760px)}.selector-panel{width:min(69vh,760px)}}
@media (max-width:760px){
  .flow-shell{padding-top:10px;padding-bottom:24px}.flow-topbar{grid-template-columns:1fr auto;gap:8px}.flow-help{grid-column:1/-1;justify-self:center;text-align:center;font-size:9px}.back-link{font-size:9px}.flow-title h1{font-size:22px}.machine{padding:8px;border-width:5px}.hud{grid-template-columns:1fr 1fr 1fr;gap:5px}.hud-block{padding:6px 7px;display:block;text-align:center}.hud-block span{display:block;margin-bottom:3px}.hud-block strong,.timer-block strong{font-size:11px}.status-panel{font-size:9px;line-height:1.3}.board-shell{padding:clamp(27px,8vw,38px);border-width:4px}.grid{border-width:3px}.cell{border-width:1px}.selector-panel{margin-top:8px;padding:8px}.selector-copy>div{display:block;text-align:center;padding:6px}.selector-copy strong{display:block;text-align:center;margin-top:2px}.pipe-strip{gap:3px}.control-hint{font-size:8px}.port{width:34px;height:34px}.port-tube{width:34px;height:20px;border-width:3px}.port-label{font-size:7px}.overlay-card{padding:14px}.overlay-card p{font-size:11px}}
@media (max-width:420px){
  .flow-shell{padding-left:max(7px,env(safe-area-inset-left));padding-right:max(7px,env(safe-area-inset-right))}.flow-topbar{font-size:8px}.flow-title h1{font-size:18px}.machine{padding:6px}.hud-block span{font-size:7px}.hud-block strong,.timer-block strong{font-size:9px}.status-panel{min-height:32px;padding:5px 6px}.board-shell{padding:25px}.selector-panel{border-width:3px}.selector-copy{grid-template-columns:1fr}.pipe-card b{display:none}.cell.soft::after{display:none}.overlay-card h2{font-size:21px}.pixel-btn{min-width:130px;font-size:10px}}
@media (max-width:340px){.board-shell{padding:21px}.pipe-strip{gap:2px}.flow-help{display:none}.selector-copy{margin-bottom:5px}.control-hint{font-size:7px}}
@media (orientation:landscape) and (max-height:620px){
  .flow-shell{width:min(100%,1050px);padding-top:5px;padding-bottom:8px}.flow-topbar{margin-bottom:5px}.flow-help,.flow-title span{display:none}.flow-title h1{font-size:17px}.machine{padding:5px;border-width:4px}.hud{margin-bottom:4px}.hud-block{padding:4px 6px}.status-panel{margin-bottom:4px;min-height:28px;padding:4px 6px}.board-shell{width:min(58vh,620px);padding:25px}.selector-panel{width:min(58vh,620px);margin-top:5px;padding:5px}.selector-copy{display:none}.control-hint{display:none}.pipe-strip{gap:3px}.overlay-card{max-height:88%;overflow:auto;padding:10px}.overlay-card p{font-size:9px;margin:4px 0}.pixel-btn{margin-top:7px;padding:8px 12px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}