@font-face{font-family:Paytone;src:url('assets/PaytoneOne-Regular.ttf')}@font-face{font-family:Mitr;src:url('assets/Mitr-Medium.ttf')}
:root{--sea:#07366a;--deep:#031d44;--cyan:#62dfff;--ink:#10376b;--cream:#fff9df;--gold:#ffdf67;--blue:#1088d0;--mint:#83ed9f;color-scheme:dark;font-family:Mitr,sans-serif;color:#fff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 15%,#105080, var(--deep) 65%);min-height:100dvh;display:grid;place-items:center}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:not(:disabled):active{transform:translateY(2px)}
.game{width:min(100%,500px);height:100dvh;min-height:640px;max-height:1050px;position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:linear-gradient(#07376a44,#061e4c11),url('assets/background.png') center bottom/cover;box-shadow:0 0 100px #0007;border-inline:1px solid #76d7ff25}
.game:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(#07336577,transparent 36%,#071b4555)}.topbar{display:flex;align-items:center;gap:8px;padding:max(14px,env(safe-area-inset-top)) 16px 8px;flex-shrink:0}.level-heading{margin-right:auto;text-align:left}.level-heading>span{font-size:9px;letter-spacing:1.4px;color:#b0e3ff}.level-heading h1{font:25px Paytone,sans-serif;margin:0;line-height:1.25;text-shadow:0 3px #123c70}.round-button{width:40px;height:40px;flex-shrink:0;display:grid;place-content:center;border-radius:13px;background:linear-gradient(#5bc9f4,#238bce);border:2px solid #a5ecff;box-shadow:0 4px #06457a, inset 0 2px #fff4}.small-label{font-size:9px;line-height:1.2;text-align:center}.small-label span{font-size:11px;color:var(--cream)}.grid-icon{width:18px;height:18px;background:repeating-linear-gradient(to right,#fff 0 7px,transparent 7px 11px),repeating-linear-gradient(to bottom,#fff 0 7px,transparent 7px 11px);mask:repeating-linear-gradient(to bottom,#000 0 7px,transparent 7px 11px)}.menu-icon{width:18px;height:16px;border-top:3px solid white;border-bottom:3px solid white;position:relative}.menu-icon:after{content:"";position:absolute;top:4px;left:0;right:0;border-top:3px solid white}
.aquariums{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 18px 8px;flex-shrink:0}.target{aspect-ratio:1/.98;position:relative;display:flex;justify-content:center;align-items:center;background:url('assets/tank.png') center top/100% 87% no-repeat;transition:filter .2s}.target.empty{opacity:.4}.target-preview{position:absolute;top:3%;left:34%;width:32%;height:26%;object-fit:contain;filter:drop-shadow(0 2px 1px #003c72)}.tank-fish{position:absolute;top:33%;width:45%;height:31%;object-fit:contain;filter:drop-shadow(0 2px 2px #12386666)}.target-count{position:absolute;bottom:0;left:15%;right:15%;text-align:center;font-size:13px;line-height:1.6;border-radius:12px;background:#126ab5;border:1px solid #78dcff;color:#fff;text-shadow:0 2px #133565}.target.full-flash{animation:tank-pop .45s ease-out}
.holding-panel{margin:0 20px;flex-shrink:0}.holding{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;border-radius:15px;background:#00173c77;padding:7px 9px;border:1px solid #56b9f63b;box-shadow:inset 0 2px 5px #00163766}.holding-slot{height:37px;background:url('assets/temp-slot.png') center/100% 100% no-repeat;display:grid;place-items:center}.holding-slot img{height:32px;width:45px;object-fit:contain}.progress-row{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:8px;text-shadow:0 2px #00355e}.progress-track{height:10px;flex:1;background:#001a3d99;border-radius:10px;box-shadow:inset 0 1px 2px #0007;border:1px solid #8acfff55;overflow:hidden}#progress-fill{height:100%;width:0;background:linear-gradient(#a5ffb6,#3dcf8b);border-radius:10px;transition:width .4s}.progress-row>span{min-width:49px;text-align:center}#timer.urgent{color:#ffb5a2}
.board-wrap{flex:1;position:relative;min-height:240px;margin-top:3px}.board{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none}.bubble-layer,.fish-hits,canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.bubble{position:absolute;border-radius:50%;background:url('assets/bubble.png') center/100% 100%;will-change:transform}.bubble.frozen{box-shadow:inset 0 0 28px #a8eaffaa;border:2px solid #aeeaff;background-color:#82ceff44}.bubble.locked{box-shadow:inset 0 0 0 7px #8192b288;filter:saturate(.5)}.bubble.obstacle{background-color:#253b6077;box-shadow:inset 0 0 0 5px #8493a255}.bubble-tag{position:absolute;inset:0;display:grid;place-items:center;font:32px Paytone;color:#fff;text-shadow:0 3px 4px #0b315f;z-index:2}.bubble-tag img{width:36%;height:36%;object-fit:contain}.bubble-key{position:absolute;width:27%;height:27%;right:6%;bottom:7%;object-fit:contain}.fish-hit{position:absolute;border:0;padding:0;background:none;border-radius:45%;pointer-events:auto;color:#fff;font:24px Paytone;text-shadow:0 2px 4px #002851;min-height:30px;min-width:32px;touch-action:none}.fish-hit:hover{background:#aff1ff19}.fish-hit.hinted{outline:3px solid var(--gold);box-shadow:0 0 18px #ffdf6788;animation:hint-pulse 1s infinite}.fish-hit.blocked{background:#a4dbff15}.fish-hit:focus-visible{outline-offset:0}.fish-badge{position:absolute;right:-3px;bottom:-2px;font-size:11px;background:#173d72;border-radius:5px;padding:0 3px;border:1px solid #9de3fa}.depth-controls{position:absolute;top:10px;right:12px;display:flex;flex-direction:column;gap:3px;align-items:center;z-index:3}.depth-controls button{background:#063768c9;border:1px solid #83d4ff66;border-radius:10px;font-size:10px;padding:7px 10px}.depth-controls span{font-size:8px;letter-spacing:.4px;color:#afddf6;text-shadow:0 1px #001e42}.tutorial{position:absolute;bottom:6px;left:30px;right:30px;margin:0;text-align:center;font-size:12px;color:#d6f2ff;text-shadow:0 2px 4px #002450;pointer-events:none}.tutorial:empty{display:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#062853cc;gap:16px;z-index:10;font-size:15px}.loading[hidden]{display:none}.loading-orb{width:70px;height:70px;background:url('assets/bubble.png') center/contain;animation:hint-pulse 1.2s infinite}
.tools{display:flex;justify-content:space-evenly;padding:6px 18px 0;flex-shrink:0}.tool{display:flex;flex-direction:column;align-items:center;width:76px;position:relative;background:transparent;border-radius:14px;padding:0 0 3px}.tool img{height:45px;width:53px;object-fit:contain;filter:drop-shadow(0 4px 2px #001b4777)}.tool>span{font-size:12px;margin-top:4px;text-shadow:0 2px #002656}.tool small{font-size:8px;letter-spacing:.7px;color:#b3d9f6}.undo-tool b{font:48px Paytone;line-height:45px;color:#9cdbff;text-shadow:0 3px #164d91}.evidence-button{background:none;color:#9ec5e2;font-size:8px;letter-spacing:.2px;padding:6px 6px max(8px,env(safe-area-inset-bottom));flex-shrink:0}.toast{position:absolute;top:43%;left:7%;right:7%;z-index:25;text-align:center;padding:12px 16px;border:1px solid #a3e4ff88;border-radius:18px;background:#072951eb;font-size:13px;box-shadow:0 5px 30px #00173866;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}.toast.visible{opacity:1;transform:translateY(0)}
dialog{color:var(--ink);color-scheme:light}dialog::backdrop{background:#00102dcc;backdrop-filter:blur(6px)}.panel-dialog{width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 50px);border:3px solid #94e6ff;border-radius:27px;padding:30px 24px 24px;background:linear-gradient(#effaff,#e5f5ff);box-shadow:0 9px 0 #0b4e84,0 30px 100px #00122f99;text-align:center;overflow:auto}.panel-dialog h2{font:27px Paytone;margin:3px 0 14px}.panel-dialog p{font-size:13px;line-height:1.65;margin:10px 0 18px}.panel-dialog h3{font-size:15px;margin:20px 0 8px}.dialog-close{position:absolute;right:11px;top:9px}.dialog-close button{width:30px;height:30px;border-radius:50%;background:#d2ecfa;color:#216599;font:26px sans-serif}.primary-button,.secondary-button{width:100%;border-radius:14px;padding:12px 14px;margin:7px 0;font-size:15px}.primary-button{color:#174e38;background:linear-gradient(#a9f980,#70dc73);border:2px solid #b0fa8e;box-shadow:0 4px #40a861}.secondary-button{color:#175e9b;background:#d0ecff;border:1px solid #acd6f4;box-shadow:0 3px #a4cbe8}.text-button{background:none;color:#226ca0;padding:12px;font-size:12px}.setting{display:flex;text-align:left;align-items:center;gap:14px;border-top:1px solid #bddcec;border-bottom:1px solid #bddcec;padding:16px 0;margin:20px 0}.setting small{display:block;font-size:10px;color:#597c99}.setting input{width:21px;height:21px;accent-color:#218ac3}.jump-form{display:flex;align-items:center;gap:8px;font-size:11px}.jump-form input{min-width:0;width:65px;border:1px solid #a8cce7;border-radius:9px;padding:9px;color:var(--ink);background:white}.jump-form .primary-button{width:auto;flex:1;padding:8px}.page-controls{display:flex;align-items:center;justify-content:space-between;margin:15px 0}.page-controls button{width:38px;height:33px;border-radius:10px;background:#cce8fb;color:#286992}.page-controls span{font-size:13px}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.level-grid button{height:39px;border-radius:10px;background:#d8edff;color:#275f97;position:relative;font-size:13px;border:1px solid #b1d1eb}.level-grid button.current{background:#3d9bd5;color:#fff;border-color:#0775bc}.level-grid button.completed:after{content:'\2713';position:absolute;right:3px;top:0;font-size:9px;color:#229557}.panel-dialog .fine-print{font-size:10px;color:#5c7e9d;text-wrap:pretty}.help-dialog{text-align:left}.help-dialog h2{text-align:center}.result-kicker{font-size:10px;letter-spacing:2px;color:#2c87b5}.result-dialog h2{font-size:35px;color:#1767a0}.result-dialog>img{width:120px;height:95px;object-fit:contain;filter:drop-shadow(0 7px 4px #235a7a33)}.result-stats{display:flex;justify-content:space-evenly;margin-bottom:15px;font-size:11px;color:#587e9c}.result-stats strong{display:block;font:23px Paytone;color:#2577a9}.flying-fish{position:fixed;z-index:30;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 4px #00376c66)}
@keyframes tank-pop{50%{filter:brightness(1.7);transform:scale(1.1)}}@keyframes hint-pulse{50%{filter:brightness(1.3);opacity:.7}}
@media(min-width:650px){body{padding:18px}.game{height:calc(100dvh - 36px);border-radius:30px}.game:after{content:"";position:absolute;inset:0;border:1px solid #71cfff44;border-radius:30px;pointer-events:none}}
@media(max-height:740px){.topbar{padding-top:9px}.aquariums{padding-top:0;padding-bottom:4px;padding-inline:26px}.target{aspect-ratio:1/ .85}.target-count{font-size:11px}.holding-slot{height:29px}.tools .tool img{height:36px}.undo-tool b{font-size:40px;line-height:36px}.tools{padding-top:0}.tool>span{font-size:11px}.tutorial{font-size:10px}.game{min-height:590px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
[hidden]{display:none!important}
.holding-slot{background:none;position:relative;isolation:isolate}
.holding-slot:before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/temp-slot.png') center/100% 100% no-repeat;filter:hue-rotate(215deg) saturate(.7)}
.mechanic-label{position:absolute;transform:translate(-50%,-50%);z-index:2;color:white;font:30px Paytone;text-shadow:0 3px 4px #10447c;pointer-events:none}
.level-grid button.locked{background:#c4d7e6;color:#496b87;opacity:.65;box-shadow:inset 0 1px 3px #123c7022}
.level-grid button.locked:after{content:'LOCKED';position:absolute;bottom:2px;left:0;right:0;font-size:6px;letter-spacing:.4px}
.panel-dialog .jump-error{font-size:11px;line-height:1.5;color:var(--ink);margin:6px 0 0}
.jump-error:empty{display:none}