:root{--bg:#0c2433;--panel:#0a1e2df0;--line:#ffffff47;--gold:#ffd23f;--ok:#4cd964;--bad:#ff6b6b;--blue:#4cc9f0;--safe-t:env(safe-area-inset-top);--safe-r:env(safe-area-inset-right);--safe-b:env(safe-area-inset-bottom);--safe-l:env(safe-area-inset-left)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:#fff;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;height:100%;margin:0;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{height:100dvh;position:fixed;inset:0}#c{touch-action:none;outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hidden{display:none!important}button{font:inherit;color:#fff;border:2px solid var(--line);cursor:pointer;touch-action:manipulation;background:#1d5a7a;border-radius:14px;min-height:48px;padding:.7rem 1.1rem}button:hover:not(:disabled){background:#2a7aa3}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button.big{min-height:64px;padding:.8rem 1.6rem;font-size:1.35rem}button.primary{background:#1f8a4c}button.warn{background:#8a3b2b}button.gold{background:#a07a12}button.small{background:#0a1e2db8;min-height:42px;padding:.4rem .8rem;font-size:.95rem}#hud{pointer-events:none;padding:calc(var(--safe-t) + 8px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 8px) calc(var(--safe-l) + 10px);position:absolute;inset:0}#hud>*{pointer-events:auto}#hud-left{left:calc(var(--safe-l) + 10px);top:calc(var(--safe-t) + 8px);background:var(--panel);border:2px solid var(--line);pointer-events:none;border-radius:14px;padding:.4rem .8rem;position:absolute}#timer{font:700 1.7rem/1.1 ui-monospace,Menlo,Consolas,monospace}#solved{font-size:1rem}#penalty{color:var(--gold);min-height:1.1em;font-size:.85rem}#objective{left:calc(var(--safe-l) + 170px);right:calc(var(--safe-r) + 300px);top:calc(var(--safe-t) + 8px);background:var(--panel);border:2px solid var(--line);text-align:center;pointer-events:none;border-radius:14px;max-width:36rem;margin:0 auto;padding:.45rem .9rem;font-size:.95rem;position:absolute}#hud-right{right:calc(var(--safe-r) + 10px);top:calc(var(--safe-t) + 8px);gap:8px;display:flex;position:absolute}#prompt{left:50%;bottom:calc(var(--safe-b) + 22px);background:#a07a12;border-color:#fff;min-height:68px;padding:.8rem 1.6rem;font-size:1.3rem;position:absolute;transform:translate(-50%);box-shadow:0 4px 18px #0006}@media (pointer:coarse){#prompt{left:auto;right:calc(var(--safe-r) + 28px);bottom:calc(var(--safe-b) + 28px);border-radius:50px;min-width:150px;min-height:96px;font-size:1.2rem;transform:none}}#toast{left:50%;top:calc(var(--safe-t) + 120px);border:2px solid var(--line);text-align:center;opacity:0;pointer-events:none;background:#000000c7;border-radius:14px;max-width:min(90vw,34rem);padding:.6rem 1rem;font-size:1.05rem;transition:opacity .3s;position:absolute;transform:translate(-50%)}#toast.show{opacity:1}#toast.bad{border-color:var(--bad)}#toast.ok{border-color:var(--ok)}#joy{touch-action:none;z-index:2;width:48%;height:62%;position:absolute;bottom:0;left:0}#joy-base{width:130px;height:130px;left:calc(var(--safe-l) + 40px);bottom:calc(var(--safe-b) + 36px);background:#ffffff1f;border:3px solid #ffffff73;border-radius:50%;position:absolute}#joy-knob{background:#ffffff80;border-radius:50%;width:58px;height:58px;position:absolute;top:36px;left:36px}.overlay{padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 10px) calc(var(--safe-b) + 10px) calc(var(--safe-l) + 10px);z-index:10;touch-action:pan-y;background:#05121c9e;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:auto}.card{background:var(--panel);border:2px solid var(--line);border-radius:20px;width:100%;max-width:min(94vw,40rem);max-height:100%;padding:1.2rem 1.4rem;overflow:auto}.card h1{color:var(--gold);margin:.1rem 0 .4rem;font-size:2rem}.card h2{color:var(--gold);margin:.1rem 0 .5rem}.card p{margin:.4rem 0}.row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:.8rem;display:flex}.col{flex-direction:column;gap:10px;margin-top:.8rem;display:flex}.muted{opacity:.75;font-size:.9rem}table{border-collapse:collapse;width:100%;margin:.5rem 0}td,th{text-align:left;border-bottom:1px solid var(--line);padding:.3rem .5rem}td.num,th.num{text-align:right;font-family:ui-monospace,Menlo,Consolas,monospace}tr.me td{color:var(--gold);font-weight:700}#loading{background:var(--bg);z-index:30;justify-content:center;align-items:center;font-size:1.3rem;display:flex;position:absolute;inset:0}#rotate{left:50%;bottom:calc(var(--safe-b) + 8px);background:var(--panel);border:2px solid var(--line);z-index:12;text-align:center;border-radius:14px;max-width:90vw;padding:.5rem .9rem;font-size:.95rem;position:absolute;transform:translate(-50%)}@media (orientation:portrait) and (pointer:coarse){#rotate:not(.dismissed){display:block!important}}.pz{width:min(96vw,44rem)}.pz .rules{opacity:.92;font-size:.95rem}.pz .goal{color:var(--gold);margin:.3rem 0;font-weight:700}.pz .foot{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:.8rem;display:flex}.pz .hints{background:#ffffff12;border-radius:12px;min-height:2.2rem;margin-top:.6rem;padding:.5rem .7rem;font-size:.95rem}.pz .hints p{margin:.15rem 0}.pz .status{text-align:center;min-height:1.4rem;margin-top:.4rem;font-weight:700}.pz .status.ok{color:var(--ok)}.pz .status.bad{color:var(--bad)}.beakers{justify-content:center;align-items:flex-end;gap:2rem;margin:.5rem 0;display:flex}.vessel{text-align:center}.vessel svg{margin:0 auto;display:block}.vessel .num{margin:.2rem 0;font:700 1.3rem ui-monospace,Menlo,Consolas,monospace}.vessel .btns{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.vessel .btns button{min-height:50px;padding:.5rem .7rem;font-size:.95rem}.water-rect{transition:y .45s,height .45s}.grid{touch-action:manipulation;--cell:clamp(34px, calc((100dvh - 330px) / var(--rows,6)), 60px);width:calc(var(--cols,6) * var(--cell) + (var(--cols,6) - 1) * 4px);gap:4px;max-width:100%;margin:.5rem auto;display:grid}.cell{aspect-ratio:1;border-radius:8px;justify-content:center;align-items:center;font-weight:800;display:flex}.soko .wall{background:#2b3a46}.soko .floor{background:#9a8a6a}.soko .target{outline-offset:-8px;background:#9a8a6a;outline:4px solid #4cd964}.soko .done{background:#2d7d46}.soko .crate{background:#b8864b;border:4px solid #7a5530}.soko .crate.on{background:#58b368;border-color:#2d7d46}.soko .me{font-size:1.8rem}.dpad{grid-template-rows:repeat(2,64px);grid-template-columns:repeat(3,64px);justify-content:center;gap:6px;margin:.4rem auto;display:grid}.dpad button{padding:0;font-size:1.5rem}.mir{width:calc(var(--cols,7) * var(--cell0) + (var(--cols,7) - 1) * 4px);--cell0:clamp(34px, calc((100dvh - 330px) / var(--rows,7)), 58px);max-width:100%;margin:.5rem auto;position:relative}.mir .grid{--cell:var(--cell0);width:100%;margin:0}.mir .cell{background:#16384e;position:relative}.mir .rock{background:#555;border-radius:20%}.mir .em{background:#8a6a12}.mir .rc{background:#245d3a}.mir .rc.hit{background:#2fbf5f;box-shadow:0 0 18px #4cd964}.mir button.mc{background:#1d5a7a;border-radius:8px;width:100%;height:100%;min-height:0;padding:0}.mir svg.beam{pointer-events:none;position:absolute;inset:0}.mir .mline{background:#dfe9f0;border-radius:3px;width:70%;height:6px}.mir .mline.hit{background:var(--gold)}.sw .cell{background:#6a7b88;border:0;min-height:0;padding:0;font-size:1.4rem}.sw .open{color:#111;cursor:default;background:#d8dfe4}.sw .flag{background:#c47a1a}.sw .boom{background:var(--bad)}.n1{color:#1565c0}.n2{color:#2e7d32}.n3{color:#c62828}.n4{color:#6a1b9a}.n5{color:#8d4b00}.n6{color:#00838f}.n7{color:#333}.n8{color:#777}.modes{justify-content:center;gap:8px;margin:.4rem 0;display:flex}.modes button.on{background:#1f8a4c;border-color:#fff}.big-time{color:var(--gold);font:700 2.4rem ui-monospace,Menlo,Consolas,monospace}.initials{justify-content:center;gap:12px;margin:.6rem 0;display:flex}.initials .L{flex-direction:column;align-items:center;gap:6px;display:flex}.initials .ch{text-align:center;background:#ffffff1f;border-radius:12px;width:3.2rem;padding:.2rem 0;font:700 2.6rem ui-monospace,Menlo,Consolas,monospace}.initials button{width:3.4rem;min-height:44px;padding:0}#screen{z-index:20}#puzzle{z-index:10}.pz .head{align-items:center;gap:10px;display:flex}.pz .head h2{flex:1;margin:0}.pz .head .time{color:#fff;font:700 1.3rem ui-monospace,Menlo,Consolas,monospace}.pz{grid-template-columns:1fr;grid-template-areas:"head""rules""view""ctl""hints""foot";display:grid}.pz .head{flex-wrap:wrap;grid-area:head}.pz .rules{grid-area:rules}.pz .view{grid-area:view}.pz .ctl{grid-area:ctl}.pz .hints{grid-area:hints}.pz .foot{grid-area:foot}.pz .rules p{margin:.2rem 0}#app.in-puzzle #hud,#app.in-puzzle #joy{display:none!important}@media (orientation:landscape) and (max-height:700px){.overlay{padding-top:calc(var(--safe-t) + 4px);padding-bottom:calc(var(--safe-b) + 4px)}.card{border-radius:16px;padding:.6rem .8rem}.card.pz{max-width:min(98vw,66rem)}.pz{grid-template-columns:minmax(180px,28%) minmax(0,1fr) 172px;grid-template-areas:"head view ctl""rules view foot""hints view foot";align-items:start;gap:4px 12px;width:min(98vw,66rem);max-height:calc(100dvh - 12px);overflow:auto}.pz .head h2{font-size:1.25rem}.pz .head .time{font-size:1rem}.pz .head{gap:6px}.pz .view{align-self:center}.pz .rules{font-size:.82rem}.pz .goal{margin:.1rem 0;font-size:.9rem}.pz .hints{min-height:1.6rem;max-height:26vh;margin-top:.1rem;font-size:.82rem;overflow:auto}.pz .ctl{justify-content:center;min-width:0;display:flex}.pz .foot{background:0 0;grid-template-columns:1fr;gap:6px;margin-top:0;padding:0;display:grid;position:static}.pz .foot button{min-height:44px;padding:.3rem .4rem;font-size:.9rem}.grid{--cell:clamp(34px, min(calc((100dvh - 120px) / var(--rows,6)), calc(38vw / var(--cols,6))), 62px)}.mir{--cell0:clamp(34px, min(calc((100dvh - 100px) / var(--rows,7)), calc(38vw / var(--cols,7))), 62px)}.pz .status{min-height:1.2rem;margin-top:.2rem;font-size:.9rem}.dpad{grid-template-rows:repeat(2,46px);grid-template-columns:repeat(3,46px);gap:4px;margin:0}.modes{flex-wrap:wrap;margin:.2rem 0}.modes button{min-height:44px;padding:.3rem .6rem;font-size:.9rem}.beakers{gap:1rem;margin:.2rem 0}.vessel .btns button{min-height:44px;padding:.3rem .5rem;font-size:.9rem}}#hud-right button{padding:.35rem .6rem;font-size:.9rem}@media (max-width:760px){#objective{padding:.3rem .6rem;font-size:.85rem}#hud-left{padding:.3rem .6rem}#timer{font-size:1.4rem}}.pz .foot{background:#0a1e2d}.res{display:block}@media (orientation:landscape) and (max-height:700px){.res{grid-template-columns:1fr 1fr;align-items:start;column-gap:18px;display:grid}.res .head1{grid-column:1/span 2}.res h1{margin:0;font-size:1.5rem}.initials{margin:.2rem 0}.initials .ch{width:2.6rem;font-size:1.8rem}.initials button{min-height:40px}.res .big{min-height:52px;padding:.4rem 1rem;font-size:1.1rem}}.soko{touch-action:none}.sw{touch-action:manipulation}
