:root{--deep: #06263c;--deep-2: #0b3d5c;--sea: #1b7fa8;--foam: #bff3ff;--sun: #ffd86b;--coral: #ff7a6b;--mint: #67e8c3;--pearl: #f4f9ff;--ink: #06263c;--ui-pad: 14px;--radius: 18px;--font: ui-rounded, "SF Pro Rounded", "Segoe UI", "Nunito", system-ui, -apple-system, sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#06263c;font-family:var(--font);color:var(--pearl);overscroll-behavior:none;touch-action:none}#app{position:fixed;inset:0;overflow:hidden}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}.icon{width:1em;height:1em;fill:currentColor;display:block}#hud{position:absolute;inset:0;pointer-events:none;user-select:none;z-index:10}.hud-row{position:absolute;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:calc(var(--ui-pad) + var(--safe-t)) calc(var(--ui-pad) + var(--safe-r)) var(--ui-pad) calc(var(--ui-pad) + var(--safe-l))}.hud-top{top:0}.hud-cluster{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.hud-center{flex:1;justify-content:center}.hud-right{justify-content:flex-end}.hearts,.lives,.counter,.air-shell{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#06263c6b;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border:1.5px solid rgba(191,243,255,.22);font-size:clamp(13px,2.6vw,17px);font-weight:800;letter-spacing:.02em;text-shadow:0 2px 4px rgba(0,0,0,.4)}.hearts{gap:4px;font-size:clamp(16px,3.2vw,21px)}.heart{width:1em;height:1em;fill:var(--coral);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));transition:transform .18s cubic-bezier(.34,1.8,.64,1),opacity .25s}.heart.empty{fill:#fff3;transform:scale(.82)}.heart.pop{transform:scale(1.45)}.icon-fish{fill:var(--mint);font-size:1.25em}.icon-star{fill:var(--sun);font-size:1.2em}.icon-pearl{fill:var(--foam);font-size:1.1em}.icon-air{color:var(--foam);font-size:1.15em}.counter.bump,.lives.bump{animation:bump .32s cubic-bezier(.34,1.7,.64,1)}@keyframes bump{50%{transform:scale(1.16)}}.air-shell{min-width:min(46vw,260px);padding:7px 14px 7px 12px}.air-track{flex:1;height:11px;border-radius:999px;background:#00000052;overflow:hidden;box-shadow:inset 0 1px 3px #00000073}.air-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#6fe3ff,#b6f6ff);transition:width .18s linear,background .4s}.air-fill.low{background:linear-gradient(90deg,#ff8a5c,#ffd06b);animation:airPulse .75s ease-in-out infinite}@keyframes airPulse{50%{opacity:.5}}.zone-banner{position:absolute;top:22%;left:0;right:0;text-align:center;font-size:clamp(26px,7vw,58px);font-weight:900;letter-spacing:.02em;color:#fff;text-shadow:0 4px 0 rgba(6,38,60,.5),0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}.zone-banner.show{opacity:1;transform:none}.zone-banner small{display:block;font-size:.36em;font-weight:700;opacity:.85;margin-top:.4em;letter-spacing:.08em;text-transform:uppercase}.compass{position:absolute;left:50%;top:calc(var(--safe-t) + 78px);width:34px;height:34px;margin-left:-17px;opacity:0;transition:opacity .4s}.compass.show{opacity:.9}.compass-arrow{width:100%;height:100%;background:var(--sun);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));clip-path:polygon(50% 0%,100% 100%,50% 78%,0% 100%);transform-origin:50% 50%}.toast{position:absolute;left:50%;bottom:calc(var(--safe-b) + 13%);transform:translate(-50%,12px);padding:11px 20px;border-radius:999px;background:#06263cb8;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border:1.5px solid rgba(191,243,255,.26);font-size:clamp(13px,2.8vw,17px);font-weight:700;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .35s,transform .35s}.toast.show{opacity:1;transform:translate(-50%)}.toast kbd{background:#bff3ffe6;color:var(--ink);border-radius:6px;padding:1px 7px;margin:0 2px;font-family:var(--font);font-weight:900;font-size:.92em}.damage-flash{position:absolute;inset:0;background:radial-gradient(ellipse at center,#ff5a4600 35%,#ff463c8c);opacity:0;transition:opacity .4s ease-out}.damage-flash.hit{opacity:1;transition:opacity .06s}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,#0000 45%,#0214228c);opacity:.75;transition:opacity .6s}.vignette.drowning{background:radial-gradient(ellipse at center,#0000 18%,#020e1eeb 95%);opacity:1}.touch{position:absolute;inset:0;z-index:20;pointer-events:none}.stick{position:absolute;left:calc(var(--safe-l) + 26px);bottom:calc(var(--safe-b) + 26px);width:132px;height:132px;border-radius:50%;background:#06263c4d;border:2px solid rgba(191,243,255,.3);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);pointer-events:auto;touch-action:none}.stick-knob{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8f7ff,#6fc7e8);box-shadow:0 4px 12px #0006;transition:transform .05s linear}.touch-buttons{position:absolute;right:calc(var(--safe-r) + 26px);bottom:calc(var(--safe-b) + 26px);display:flex;flex-direction:column-reverse;gap:16px;pointer-events:auto}.tbtn{width:82px;height:82px;border-radius:50%;border:2px solid rgba(191,243,255,.34);background:#06263c5c;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:var(--foam);display:grid;place-items:center;padding:0;touch-action:none;transition:transform .08s,background .12s}.tbtn svg{width:40%;height:40%;fill:currentColor}.tbtn-dash{width:66px;height:66px;color:var(--sun)}.tbtn:active,.tbtn.pressed{transform:scale(.9);background:#6be3ff59}.screens{position:absolute;inset:0;z-index:30;pointer-events:none}.screen{position:absolute;inset:0;display:none;place-items:center;padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);background:radial-gradient(ellipse at 50% 40%,#0b3d5cb8,#041624f0);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto;overflow-y:auto}.screen.active{display:grid;animation:fadeIn .35s ease-out}@keyframes fadeIn{0%{opacity:0}}.panel{width:min(480px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;margin:auto}.panel-wide{width:min(680px,100%)}.logo{margin:0;font-size:clamp(44px,12vw,88px);font-weight:900;line-height:.94;letter-spacing:-.02em;background:linear-gradient(180deg,#fff 20%,#7fe3ff 65%,#35b0e0);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 rgba(6,38,60,.55)) drop-shadow(0 14px 26px rgba(0,0,0,.4));animation:bobLogo 4.5s ease-in-out infinite}@keyframes bobLogo{50%{transform:translateY(-9px) rotate(-1deg)}}.screen h2{margin:0;font-size:clamp(28px,7vw,44px);font-weight:900;color:#fff;text-shadow:0 4px 0 rgba(6,38,60,.5)}.tagline{margin:0;font-size:clamp(14px,3.4vw,18px);font-weight:600;opacity:.88;line-height:1.5;max-width:34ch}.btn{font-family:var(--font);font-size:clamp(16px,4vw,21px);font-weight:900;letter-spacing:.01em;padding:14px 40px;border-radius:999px;border:none;cursor:pointer;transition:transform .12s cubic-bezier(.34,1.7,.64,1),filter .15s;touch-action:manipulation}.btn-primary{background:linear-gradient(180deg,#ffe08a,#ffb347);color:#5a3200;box-shadow:0 6px #c9762a,0 12px 24px #00000059}.btn-primary:active{transform:translateY(4px);box-shadow:0 2px #c9762a,0 6px 14px #00000059}.btn-ghost{background:#ffffff17;color:var(--foam);border:1.5px solid rgba(191,243,255,.28)}.btn-small{font-size:clamp(12px,3vw,14px);padding:9px 22px;font-weight:700}.btn:hover{filter:brightness(1.07)}.btn:disabled{filter:grayscale(.7) brightness(.75);cursor:not-allowed;box-shadow:none}.controls-hint{margin-top:6px;font-size:clamp(11px,2.8vw,13.5px);font-weight:700;opacity:.78}.ctrl-group{display:flex;flex-wrap:wrap;gap:7px 14px;justify-content:center}.ctrl-touch,body.is-touch .ctrl-desktop{display:none}body.is-touch .ctrl-touch{display:flex}kbd{display:inline-block;background:#bff3ffe6;color:var(--ink);border-radius:6px;padding:2px 7px;margin-right:2px;font-family:var(--font);font-weight:900;font-size:.95em;box-shadow:0 2px #06263c73}.pearl-inline{display:inline-flex;align-items:center;gap:5px;font-weight:900;color:var(--foam);vertical-align:-.15em}.shop-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:11px;width:100%}.shop-item{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:13px 15px;border-radius:var(--radius);background:#ffffff12;border:1.5px solid rgba(191,243,255,.2);text-align:left;cursor:pointer;font-family:var(--font);color:var(--pearl);transition:transform .12s,background .15s,border-color .15s}.shop-item:hover:not(:disabled){background:#6be3ff29;border-color:#bff3ff80;transform:translateY(-2px)}.shop-item:disabled{opacity:.42;cursor:not-allowed}.shop-item .si-name{font-weight:900;font-size:15.5px}.shop-item .si-desc{font-size:12.5px;opacity:.8;font-weight:600;line-height:1.35}.shop-item .si-foot{margin-top:3px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}.si-cost{display:inline-flex;align-items:center;gap:4px;color:var(--sun)}.si-cost .icon{fill:var(--foam);font-size:1.05em}.si-pips{display:flex;gap:3px;margin-left:auto}.si-pip{width:8px;height:8px;border-radius:50%;background:#ffffff38}.si-pip.on{background:var(--mint)}.toggle{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;opacity:.9;cursor:pointer}.toggle input{width:17px;height:17px;accent-color:var(--mint)}.loader{display:flex;gap:9px}.loader span{width:13px;height:13px;border-radius:50%;background:var(--foam);animation:bubbleUp 1.15s ease-in-out infinite}.loader span:nth-child(2){animation-delay:.16s}.loader span:nth-child(3){animation-delay:.32s}@keyframes bubbleUp{0%,to{transform:translateY(0);opacity:.35}50%{transform:translateY(-13px);opacity:1}}@media(max-height:460px){.stick{width:108px;height:108px}.stick-knob{width:48px;height:48px;margin:-24px 0 0 -24px}.tbtn{width:66px;height:66px}.tbtn-dash{width:54px;height:54px}.panel{gap:9px}}@media(prefers-reduced-motion:reduce){.logo,.loader span,.air-fill.low{animation:none}*{transition-duration:.01ms!important}}