:root{color-scheme:dark;--navy:#102c75;--ink:#06183d;--navy-light:#205be0;--coral:#ff542e;--coral-light:#ff962b;--coral-shadow:#bd2918;--white:#ffffff;--muted:#c5e5ff;--outline:#061b49;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;color:var(--white);background:#061638}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 22%,#155a9d 0,#092f69 47%,#05132f 100%)}body:before{content:"";position:fixed;inset:0;background:url('assets/ocean.jpg') center/cover;opacity:.055;pointer-events:none}
.layout{position:relative;min-height:100svh;display:grid;place-items:center;padding:20px}.game{position:relative;isolation:isolate;aspect-ratio:3/5;height:min(900px,calc(100svh - 40px));max-width:100%;border:3px solid #061b49;border-radius:25px;overflow:hidden;background:#0a397a;box-shadow:0 8px 0 #030f2d,0 28px 90px #0006,0 0 0 1px #347bef88}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}[hidden]{display:none!important}
button{font:inherit;cursor:pointer;color:var(--white);-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;transition:transform .1s,box-shadow .1s,filter .15s}button:focus-visible{outline:3px solid #fff;outline-offset:5px}button:hover{filter:brightness(1.09)}button:active{transform:translateY(4px);box-shadow:inset 0 2px 0 #ffffff30,0 1px 0 var(--button-base,#06183d)!important}svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.coral,.primary{--button-base:var(--coral-shadow);background:linear-gradient(#ff9b32,#ff542e 70%);color:#091f54;border:3px solid var(--outline);box-shadow:inset 0 3px 0 #ffe38a99,0 5px 0 var(--button-base),0 7px 0 var(--outline)}.navy,.secondary{--button-base:#062675;background:linear-gradient(#2875ed,#124fc4);border:3px solid var(--outline);box-shadow:inset 0 2px 0 #7abaff66,0 5px 0 var(--button-base),0 7px 0 var(--outline);color:var(--white)}
.hud{position:absolute;left:5%;right:5%;top:3.2%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:start;gap:12px;z-index:2;pointer-events:none}.hud>*{pointer-events:auto}.square-button{width:52px;height:50px;border-radius:15px;display:grid;place-items:center}.square-button svg{width:26px;height:26px}.level-button{justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:100px;height:58px;padding:5px 17px 8px;border:3px solid var(--outline);border-radius:17px;background:linear-gradient(#fff,#d7f1ff);color:var(--navy);box-shadow:inset 0 2px 0 #fff,0 5px 0 #4b8de0,0 7px 0 var(--outline)}.level-button small{font-size:9px;font-weight:900;letter-spacing:1.7px;line-height:1}.level-button>span{font-weight:900;font-size:27px;line-height:1.1;text-shadow:0 2px 0 #fff}.rescue-pill{justify-self:end;width:105px;position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:50px;padding:7px 8px 13px;border:3px solid var(--outline);border-radius:15px;background:linear-gradient(#2875ed,#103da3);box-shadow:inset 0 2px 0 #7abaff66,0 5px 0 #062675,0 7px 0 var(--outline)}.rescue-pill svg{color:var(--coral-light);width:20px;height:25px;stroke-width:3}.rescue-pill b{font-size:17px;font-weight:900;white-space:nowrap;letter-spacing:.5px}.rescue-meter{position:absolute;bottom:5px;left:13px;right:13px;height:4px;border-radius:5px;background:#071b50;overflow:hidden}.rescue-meter i{height:100%;width:0;display:block;border-radius:5px;background:var(--coral);transition:width .3s}
.controls{position:absolute;left:5%;right:5%;bottom:1.4%;display:flex;justify-content:space-between;align-items:center;z-index:2}.tool-button{display:flex;align-items:center;justify-content:center;gap:9px;min-width:106px;height:48px;padding:8px 15px;border-radius:15px;font-size:15px;font-weight:800;text-shadow:0 1px 0 #06183d33}.tool-button svg{width:23px;height:23px}.tutorial{position:absolute;top:55%;left:25%;pointer-events:none;color:white;text-shadow:0 2px 4px #001c31}.swipe-mark{font-size:34px;display:block;animation:swipe 2s ease-in-out infinite}@keyframes swipe{0%,100%{transform:translate(-12px,7px);opacity:.3}60%{transform:translate(12px,-7px);opacity:1}}
.toast{position:absolute;left:8%;right:8%;top:25%;padding:12px 14px;border:2px solid var(--outline);border-radius:13px;background:#0a2e75ed;color:#fff;font-size:12px;font-weight:600;text-align:center;box-shadow:0 3px 0 #06183d7a;opacity:0;transition:opacity .2s;pointer-events:none;z-index:3}.toast.visible{opacity:1}
.modal-backdrop{position:absolute;inset:0;background:#04194799;backdrop-filter:blur(5px);z-index:5;display:flex;align-items:center;justify-content:center;padding:7%}.modal{position:relative;width:100%;max-height:100%;overflow:auto;padding:30px 23px 25px;text-align:center;border:3px solid #061b49;border-radius:25px;background:linear-gradient(160deg,#205ada,#102d7d 72%);box-shadow:inset 0 2px 0 #68aaff66,0 8px 0 #061b49,0 12px 40px #020b2d88}.modal:before{content:"";position:absolute;top:0;left:20%;right:20%;height:4px;border-radius:0 0 10px 10px;background:var(--coral)}.overline{font-size:10px;color:var(--coral-light);font-weight:900;letter-spacing:2px;text-transform:uppercase}.modal h2{font-size:32px;font-weight:900;letter-spacing:-1px;line-height:1.08;margin:14px 0 15px;color:var(--white);text-shadow:0 3px 0 #06183d90}.modal p{font-size:13px;line-height:1.7;color:#e0efff;margin:12px 0 23px}.primary,.secondary{width:100%;min-height:51px;padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:11px;border-radius:15px;font-size:16px;font-weight:900;margin-top:13px}.primary svg,.secondary svg{width:24px;height:24px}.primary{color:var(--navy)}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1px}.modal-actions .secondary{font-size:12px;gap:7px;min-width:0;padding:10px 6px}.modal-actions svg{width:20px;height:20px}.sound-button{display:flex;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;box-shadow:none;font-size:12px;color:#d8eeff;font-weight:700;padding:13px;margin:16px auto 0}.sound-button svg{width:19px;height:19px}.result-icon{display:grid;place-items:center;width:78px;height:78px;margin:0 auto 22px;border:4px solid #06183d;border-radius:23px;background:linear-gradient(#ff9b32,#ff542e);box-shadow:inset 0 3px 0 #ffe39b88,0 5px 0 #b62916;color:#091f54;transform:rotate(-5deg)}.result-icon svg{width:46px;height:46px;transform:rotate(5deg)}.result-count{display:inline-flex;align-items:center;gap:9px;background:#092465;border:2px solid #397bed;border-radius:13px;padding:9px 18px;color:#fff;font-size:15px;font-weight:800;margin:0 0 9px}.result-count svg{color:var(--coral-light);width:22px;height:22px}
.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 23px}.level-grid button{height:52px;position:relative;border:2px solid var(--outline);border-radius:12px;background:linear-gradient(#2a76e9,#144dc0);box-shadow:inset 0 2px 0 #89c6ff55,0 4px 0 #061b49;color:#fff;font-size:19px;font-weight:900}.level-grid button.current{background:linear-gradient(#ff9b32,#ff542e);color:#091f54;box-shadow:0 4px 0 #b62916}.level-grid button.completed:after{content:'\2713';font-size:10px;position:absolute;right:5px;bottom:3px;color:var(--coral-light)}.level-grid button.current.completed:after{color:#091f54}
.modal-backdrop[data-result="won"]{align-items:flex-end;padding:7% 7% 14%;background:linear-gradient(0deg,#07162ab3,transparent 85%);backdrop-filter:none}.modal-backdrop[data-result="won"] .modal{padding:25px 22px}.modal-backdrop[data-result="won"] .result-icon{height:52px;width:52px;border-radius:16px;margin-bottom:18px}.modal-backdrop[data-result="won"] .result-icon svg{height:29px;width:29px}.modal-backdrop[data-result="won"] h2{font-size:29px}
.modal-backdrop[data-result="home"]{padding:8%;background:linear-gradient(#05256633,#061b49e0);backdrop-filter:blur(2px)}.modal-backdrop[data-result="home"] .modal{background:none;border:0;box-shadow:none;padding:0 4px;overflow:visible}.modal-backdrop[data-result="home"] .modal:before{display:none}.home-icon{width:115px;height:115px;filter:drop-shadow(0 8px 0 #031c5a66);margin-bottom:15px}.home-title{font-size:47px!important;line-height:.94!important;letter-spacing:-1.5px!important;margin:0 0 22px!important;font-weight:1000!important;text-shadow:0 4px 0 #041842,0 6px 0 #041842!important}.home-title span{display:block;color:var(--coral-light)}.home-rules{margin:0 auto 24px;max-width:255px;display:grid;gap:12px;text-align:left}.home-rule{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:700;line-height:1.45;color:#e2ebf7}.home-rule>svg{color:var(--coral-light);width:25px;height:25px}.home-play{min-height:60px;font-size:22px}.home-level{display:block;color:#d0eaff;font-size:10px;margin:17px 0 14px;letter-spacing:.4px}.game[data-screen="home"] .hud,.game[data-screen="home"] .controls,.game[data-screen="home"] .tutorial,.game[data-screen="home"] .toast{visibility:hidden}.game[data-screen="loading"] .hud,.game[data-screen="loading"] .controls{visibility:hidden}
.pause-logo{border-radius:22px;display:block;width:112px;height:112px;object-fit:contain;margin:0 auto 14px;filter:drop-shadow(0 6px 0 #031b5266)}
.loading{position:absolute;inset:0;z-index:10;background:radial-gradient(ellipse at 50% 30%,#146bec 0%,#103a9c 42%,#061b49 100%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;overflow:hidden;color:#fff}.loading-logo{border-radius:28px;position:relative;z-index:1;width:144px;height:144px;object-fit:contain;filter:drop-shadow(0 9px 0 #03183f80)}.loading-title{position:relative;font-size:35px;line-height:.94;font-weight:1000;letter-spacing:-1px;text-align:center;text-shadow:0 4px 0 #041842}.loading-title span{display:block;color:var(--coral-light)}.loading-meter{position:relative;width:76%;max-width:280px;margin-top:17px}.loading-track{height:29px;padding:4px;border:3px solid #061438;border-radius:18px;background:linear-gradient(#031536,#123c87);box-shadow:0 5px 0 #020e2e,inset 0 2px 3px #0009,0 0 0 2px #367ee680;overflow:hidden}.loading-track i{position:relative;display:block;width:0;height:100%;border-radius:10px;background:linear-gradient(#ffd565 0%,#ff982e 38%,#ff542e 80%);box-shadow:inset 0 2px 0 #fff5a9aa;transition:none;overflow:hidden}.loading-track i:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent 0 17px,#fff5 18px 25px,transparent 26px 42px);animation:loading-flow 1.2s linear infinite}.loading-caption{display:flex;justify-content:space-between;align-items:center;margin:14px 6px 0;font-size:12px;font-weight:800;color:#e5f3ff}.loading-caption b{color:#ffbc48;font-size:13px;font-variant-numeric:tabular-nums}.loading-bubbles{position:absolute;inset:0;pointer-events:none}.loading-bubbles i{position:absolute;bottom:-40px;width:15px;height:15px;border:2px solid #82cfff40;border-radius:50%;background:#3f9eff12;animation:loading-bubbles 7s linear infinite}.loading-bubbles i:nth-child(1){left:15%}.loading-bubbles i:nth-child(2){left:79%;width:24px;height:24px;animation-delay:-3s}.loading-bubbles i:nth-child(3){left:35%;width:9px;height:9px;animation-delay:-5s}.loading-bubbles i:nth-child(4){left:65%;animation-delay:-1s}@keyframes loading-flow{to{transform:translateX(42px)}}@keyframes loading-bubbles{to{transform:translateY(-850px)}}

@media(max-width:540px){.layout{padding:0}.game{height:min(100svh,calc(100vw * 5 / 3));width:min(100vw,calc(100svh * 3 / 5));border:0;border-radius:0;box-shadow:none}.hud{grid-template-columns:1fr 1fr 1fr;gap:8px;top:max(3.2%,env(safe-area-inset-top))}.square-button{width:46px;height:45px;border-radius:13px}.level-button{min-width:90px;height:53px}.rescue-pill{width:96px;height:45px}.rescue-pill b{font-size:16px}.tool-button{min-width:100px;height:44px;font-size:14px}.modal h2{font-size:28px}.home-icon{height:100px;width:100px}.home-title{font-size:42px!important}.home-rules{gap:10px;margin-bottom:17px}.home-play{min-height:55px}.modal{padding:25px 18px}.home-level{margin:14px 0 12px}}
@media(max-height:650px){.home-icon{width:77px;height:77px;margin-bottom:12px}.home-title{font-size:34px!important;margin-bottom:17px!important}.home-rules{gap:7px;margin-bottom:12px}.home-rule{font-size:11px}.home-play{min-height:48px}.modal-actions .secondary{min-height:43px}.sound-button{margin-top:9px;padding:8px}.home-level{margin:12px 0}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.modal-backdrop[data-result="won"] .modal{padding:18px 18px 20px}.modal-backdrop[data-result="won"] .result-icon{width:36px;height:36px;border-radius:11px;border-width:3px;margin-bottom:8px}.modal-backdrop[data-result="won"] .result-icon svg{width:23px;height:23px}.modal-backdrop[data-result="won"] .overline{display:none}.modal-backdrop[data-result="won"] h2{font-size:24px;margin:8px 0 12px;letter-spacing:-.7px}.modal-backdrop[data-result="won"] .result-count{padding:7px 13px;font-size:13px;margin-bottom:2px}.modal-backdrop[data-result="won"] .primary{min-height:45px;font-size:15px;margin-top:12px;padding:9px}.modal-backdrop[data-result="won"] .secondary{min-height:43px;margin-top:12px;padding:8px 5px}

.home-icon,.loading>img{border-radius:23%;object-fit:cover}

.zoom-button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:64px;height:44px;padding:6px 8px;border-radius:14px;font-size:12px;font-weight:900}.zoom-button svg{width:21px;height:21px}.zoom-button>span{display:flex;align-items:center;justify-content:center}.zoom-button:focus-visible{outline-offset:3px}

.modal .zoom-help{font-size:11px;line-height:1.6;margin:0 0 16px;color:#d0eaff}

.level-pages{display:grid;grid-template-columns:44px 1fr 44px;gap:8px;align-items:center;font-size:12px;font-weight:800}.level-pages button{margin:0;padding:0;min-height:40px;font-size:25px;border-radius:12px}.level-pages button:disabled{opacity:.35;cursor:default;filter:none}

.key-status{position:absolute;top:14%;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:10px;background:#071e4fe8;border:2px solid #3178cf;border-radius:11px;padding:4px 10px;white-space:nowrap;font-size:12px;pointer-events:none}.key-status>span{font-size:10px;font-weight:800;color:#fff}.key-status b{font-size:16px;display:flex;align-items:center;gap:4px}.key-status small{font-size:11px;color:#fff}.game[data-screen="home"] .key-status,.game[data-screen="loading"] .key-status{visibility:hidden}

.modal:focus{outline:none}