:root{color-scheme:dark;--ink:#eafaff;--muted:#a4cbd5;--deep:#061d31;--teal:#41f1d8;--gold:#ffca79;--line:rgba(146,220,238,.18);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--deep);color:var(--ink)}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #ffce7d;outline-offset:3px}button[disabled]{cursor:not-allowed;opacity:.62}[hidden]{display:none!important}
.app{height:100vh;height:100dvh;min-width:280px;display:flex;flex-direction:column;background:linear-gradient(180deg,#06263b,#071b2d);overflow:hidden}.header{height:75px;min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 clamp(18px,2.8vw,42px);z-index:20;background:linear-gradient(100deg,rgba(3,27,46,.98),rgba(4,43,61,.95));border-bottom:1px solid rgba(104,205,219,.16);box-shadow:0 7px 20px rgba(0,19,37,.22)}
.brand{display:flex;gap:11px;align-items:center;min-width:230px}.brand-glyph{width:47px;height:47px;flex:0 0 47px;border-radius:15px;background:radial-gradient(circle at 30% 25%,#177d98,#06354d);border:1px solid rgba(109,236,239,.4);display:grid;place-items:center;box-shadow:inset 0 2px 5px rgba(255,255,255,.13),0 6px 15px #00172188}.brand-glyph svg{width:36px;height:36px;filter:drop-shadow(0 2px 4px #00354588)}.brand-words{display:flex;flex-direction:column;gap:4px}.brand-words strong{font-size:19px;letter-spacing:.03em;font-weight:900;white-space:nowrap}.brand-words em{font-style:normal;color:var(--teal)}.brand-words span{font-size:10px;color:#9dc5cf;letter-spacing:.06em}
.header-route{display:flex;gap:11px;align-items:center;white-space:nowrap;color:#a9d6dc;font-size:11px;font-weight:850;letter-spacing:.16em;padding:10px 15px;border-radius:999px;background:rgba(2,50,65,.68);border:1px solid rgba(93,205,217,.12)}.route-dot{width:8px;height:8px;border-radius:50%;background:#4df0d5;box-shadow:0 0 0 4px #23bfa92c,0 0 15px #2bedd6}.route-index{font-size:9px;color:#ffdda0;background:rgba(255,205,121,.12);border-radius:999px;padding:6px 8px;letter-spacing:.06em}.header-actions{display:flex;gap:10px}.round-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;color:#c0eaf0;border:1px solid rgba(117,205,222,.2);background:rgba(24,73,91,.5);transition:background .2s,transform .2s}.round-btn:hover{background:rgba(35,108,124,.75);transform:translateY(-1px)}.round-btn svg{width:23px;height:23px}.sound-mute,.play-mark{display:none}.muted .sound-waves{display:none}.muted .sound-mute{display:block}.paused .pause-mark{display:none}.paused .play-mark{display:block}
.game-shell{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate;background:#07425f}#ocean{display:block;width:100%;height:100%;touch-action:none;user-select:none;outline:none}
.game-shell:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(2,27,41,.13),transparent 30%,transparent 65%,rgba(0,26,45,.1)),linear-gradient(180deg,rgba(2,28,48,.16),transparent 22%,transparent 75%,rgba(0,14,24,.2))}
.top-hud{position:absolute;z-index:5;top:20px;left:clamp(12px,2vw,30px);right:clamp(12px,2vw,30px);display:flex;align-items:flex-start;gap:13px;pointer-events:none}.hud-block{border-radius:18px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:linear-gradient(160deg,rgba(4,34,55,.85),rgba(4,30,46,.68));border:1px solid rgba(151,230,233,.28);box-shadow:0 12px 25px rgba(0,31,49,.24),inset 0 1px 0 rgba(255,255,255,.08);color:#f3ffff}.treasure-hud{display:flex;align-items:center;gap:12px;padding:11px 17px 11px 11px;min-width:190px}.hud-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:14px}.pearl-icon{background:radial-gradient(circle at 28% 26%,#fff8e4,#d9aee4 38%,#756ab7 80%,#534b91);color:#fff8d3;font-size:34px;text-shadow:0 2px 7px #5e3877}.hud-lines{display:flex;flex-direction:column;gap:4px}.hud-lines>span{font-size:9px;letter-spacing:.14em;font-weight:850;color:#9dcad4}.hud-lines strong{font-size:27px;font-weight:900;letter-spacing:.02em;line-height:1.15}.hud-lines strong b{color:#ffe2a3}.hud-lines strong small{font-size:16px;font-weight:750;color:#a4d4d9}.oxygen-hud{width:min(340px,32vw);min-width:220px;padding:12px 15px 10px;margin-left:auto;margin-right:auto}.hud-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.oxy-label{display:flex;gap:8px;align-items:center;color:#dcfaff;font-weight:900;font-size:11px;letter-spacing:.11em}.oxy-symbol{background:linear-gradient(140deg,#27d9e9,#069ab4);color:#05334e;border-radius:8px;padding:5px;font-size:10px;letter-spacing:0}.oxy-numeric{font-weight:900;font-size:16px;color:#d4ffff}.bar-track{height:12px;margin-top:10px;border-radius:999px;background:rgba(1,19,37,.7);padding:2px;border:1px solid rgba(100,208,219,.22);overflow:hidden}.bar-fill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#16cfaa,#84ffee);box-shadow:0 0 14px rgba(51,246,211,.55);transition:width .18s linear,background .25s}.oxygen-hud.low .bar-fill{background:linear-gradient(90deg,#ff7b73,#ffd174);box-shadow:0 0 12px rgba(255,118,106,.5)}.oxygen-hud>small{display:block;margin-top:6px;font-size:9px;color:#a9d8d9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.life-hud{padding:12px 17px;min-width:155px;display:flex;align-items:center;justify-content:center;height:75px}.hearts{font-size:22px;letter-spacing:6px;color:#ff8090;filter:drop-shadow(0 0 6px rgba(255,104,133,.25));white-space:nowrap}.hearts .heart-lost{color:#4a7a8c;filter:grayscale(1);opacity:.44}
.objective-card{position:absolute;z-index:4;right:clamp(14px,2vw,31px);top:126px;width:294px;padding:17px 19px 15px;border-radius:20px;border:1px solid rgba(131,232,220,.25);background:linear-gradient(155deg,rgba(4,42,61,.83),rgba(4,28,43,.83));box-shadow:0 13px 33px rgba(0,31,47,.22);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);pointer-events:none}.objective-top{display:flex;justify-content:space-between;align-items:center;gap:9px;font-size:9px;letter-spacing:.09em;font-weight:850;color:#9ce5df}.objective-star{color:#fae0aa;margin-right:5px;font-size:15px}.objective-chip{color:#1bf1ba;background:#154c53;border-radius:999px;padding:5px 7px;font-size:8px;letter-spacing:.02em}.objective-card>strong{display:block;font-size:17px;margin-top:14px;color:#fff6df;font-weight:900}.objective-card p{font-size:11px;color:#b9d9dc;line-height:1.7;margin:7px 0 13px}.mission-progress{height:6px;border-radius:99px;background:#07536a;overflow:hidden}.mission-progress span{height:100%;display:block;width:0%;border-radius:inherit;background:linear-gradient(90deg,#23dcb0,#b9ffd1);box-shadow:0 0 10px #35e5b6}.mission-foot{display:flex;justify-content:space-between;margin-top:12px;color:#b7dce2;font-size:10px;font-weight:750}.mission-foot #score{font-size:17px;color:#ffddaa;font-weight:900}.depth-chip{position:absolute;z-index:3;left:24px;top:125px;display:flex;align-items:center;gap:7px;background:rgba(4,39,54,.62);border:1px solid rgba(139,220,226,.23);backdrop-filter:blur(8px);padding:9px 13px;border-radius:999px;font-size:10px;letter-spacing:.07em;color:#d2f4f3;font-weight:750;pointer-events:none}.depth-dot{width:7px;height:7px;border-radius:50%;background:#42f2d0;box-shadow:0 0 10px #42f2d0}
.toast{position:absolute;z-index:12;left:50%;bottom:120px;transform:translateX(-50%);padding:12px 18px;max-width:min(90vw,470px);border-radius:14px;background:#05354aec;border:1px solid #77f2d2a6;color:#effff8;font-size:13px;font-weight:850;text-align:center;box-shadow:0 16px 35px #041a3090;pointer-events:none;animation:toastIn .2s ease}
.touch-controls{display:none;position:absolute;inset:auto 14px 17px 14px;z-index:10;justify-content:space-between;align-items:flex-end;pointer-events:none}.joystick{width:130px;height:130px;display:grid;place-items:center;position:relative;border-radius:50%;background:radial-gradient(circle at 38% 31%,rgba(188,246,248,.18),rgba(7,66,82,.33) 56%,rgba(2,25,49,.5));border:1px solid rgba(181,245,237,.36);box-shadow:inset 0 0 30px rgba(22,227,209,.1),0 8px 22px rgba(1,23,44,.3);pointer-events:auto;touch-action:none;user-select:none}.joystick:after{content:"";position:absolute;width:75%;height:75%;border:1px dashed rgba(199,255,244,.2);border-radius:50%}.joystick-arrows{position:absolute;inset:0;color:#cdf7ef;font-size:15px;opacity:.45}.joystick-arrows span{position:absolute}.joystick-arrows span:nth-child(1){top:6px;left:calc(50% - 5px)}.joystick-arrows span:nth-child(2){left:9px;top:calc(50% - 10px)}.joystick-arrows span:nth-child(3){right:9px;top:calc(50% - 10px)}.joystick-arrows span:nth-child(4){bottom:6px;left:calc(50% - 5px)}.joystick-knob{z-index:2;width:57px;height:57px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#9dfff0,#36bfc8);border:4px solid rgba(219,255,249,.75);box-shadow:0 5px 18px #0018288a,inset 0 3px 6px #ffffff80;color:#07566f;transform:translate(0,0);will-change:transform}.joystick-knob svg{width:27px;height:27px}.dash-btn{pointer-events:auto;width:94px;height:94px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:2px solid rgba(255,242,194,.68);color:#fff8d9;background:linear-gradient(150deg,rgba(240,147,66,.93),rgba(197,79,74,.9));box-shadow:0 0 0 7px rgba(255,222,176,.13),0 12px 25px rgba(9,21,40,.4),inset 0 5px 12px rgba(255,255,255,.23)}.dash-btn>span{font-size:25px;line-height:1}.dash-btn strong{font-size:12px;letter-spacing:.1em}.dash-btn small{font-size:9px;opacity:.9}
.overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(2,65,91,.15),rgba(0,19,39,.7) 68%),linear-gradient(120deg,rgba(1,26,45,.56),rgba(2,20,39,.62));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow:hidden}.intro-orb{position:absolute;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(24,236,218,.25),transparent 67%);animation:floatOrb 8s ease-in-out infinite alternate}.orb-one{width:500px;height:500px;top:-320px;left:-170px}.orb-two{width:600px;height:600px;bottom:-420px;right:-260px;animation-delay:2s}.overlay-panel{width:min(610px,calc(100% - 34px));max-height:calc(100% - 24px);position:relative;overflow:auto;text-align:center;border-radius:29px;padding:31px clamp(20px,4vw,42px) 24px;background:linear-gradient(157deg,rgba(5,50,68,.93),rgba(4,27,48,.97));border:1px solid rgba(139,241,223,.37);box-shadow:0 30px 80px rgba(0,15,32,.7),inset 0 1px rgba(255,255,255,.15);scrollbar-width:thin;scrollbar-color:#388898 transparent}.overlay-panel:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 50% -10%,rgba(13,215,196,.22),transparent 44%)}.overlay-panel>*{position:relative;z-index:1}.eyebrow{display:flex;align-items:center;justify-content:center;gap:10px;color:#6affd9;letter-spacing:.16em;font-size:10px;font-weight:850}.shimmer-dot{width:7px;height:7px;border-radius:50%;background:#5df4c5;box-shadow:0 0 0 4px #2dedc625,0 0 20px #6affd9}.overlay-art{height:124px;display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto 4px}.big-wave{font-size:105px;filter:drop-shadow(0 12px 18px #001e3cbf);animation:waveBob 3.8s ease-in-out infinite}.turtle{position:absolute;font-size:63px;z-index:2;left:26%;top:11px;transform:rotate(-16deg);filter:drop-shadow(0 12px 9px #002b40a8);animation:turtleFloat 4.3s ease-in-out infinite}.sea-stars{position:absolute;right:24%;top:24px;font-size:25px;color:#ffdda3;text-shadow:0 0 24px #ffd18f}.tiny-fish{position:absolute;right:29%;bottom:8px;font-size:30px;transform:scaleX(-1)}.overlay-panel h1{font-weight:1000;font-size:clamp(36px,5vw,59px);letter-spacing:-.04em;line-height:.98;margin:13px 0 16px;color:#efffff;text-shadow:0 3px 16px #00354f;word-break:keep-all}.overlay-panel h1 em{font-style:normal;color:#5cffe4}.overlay-panel>p{max-width:445px;color:#bfe1e5;font-size:13px;line-height:1.75;margin:0 auto 20px}.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 19px;text-align:left}.howto>div{border:1px solid #2a718188;border-radius:15px;background:rgba(10,78,92,.42);display:flex;align-items:center;gap:10px;min-width:0;padding:10px}.howto b{font-size:21px;color:#9fffe7;flex:0 0 23px;text-align:center}.howto strong{font-size:9px;line-height:1.5;color:#f1fffb;display:block;font-weight:900;white-space:nowrap}.howto small{font-size:9px;color:#acd8dd;display:block;margin-top:3px}.start-btn{width:100%;border:0;background:linear-gradient(100deg,#28e1bd,#77f7ce);border-radius:15px;min-height:58px;padding:0 22px;color:#064b4c;font-size:14px;letter-spacing:.04em;font-weight:1000;display:flex;align-items:center;justify-content:center;gap:14px;box-shadow:0 10px 27px #10e1b736,inset 0 2px 0 rgba(255,255,255,.45);transition:filter .2s,transform .2s}.start-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}.start-arrow{font-size:24px;font-weight:700}.overlay-bottom{margin-top:17px;display:flex;justify-content:center;align-items:center;gap:11px;color:#86b9c7;font-size:10px;font-weight:650}
.bottom-bar{min-height:46px;height:46px;z-index:12;display:flex;align-items:center;justify-content:space-between;gap:13px;padding:0 clamp(15px,2.7vw,41px);background:linear-gradient(100deg,#041c30,#092d3f);border-top:1px solid rgba(139,230,235,.14);color:#a1c6d1;font-size:10px;font-weight:750;letter-spacing:.07em}.footer-hint{display:flex;align-items:center;gap:5px;white-space:nowrap}.hint-dot{width:6px;height:6px;border-radius:50%;background:#44e6ba;margin-right:7px}.footer-hint kbd{font:850 10px inherit;border:1px solid rgba(158,211,221,.35);padding:4px 6px;border-radius:5px;background:#1c4353;color:#dff4f6}.footer-hint i{font-style:normal;color:#538da0;margin:0 6px}.footer-tip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#64d9c8}.footer-record{white-space:nowrap}.footer-record strong{font-size:13px;color:#ffdda3;margin-left:7px}
@keyframes floatOrb{to{transform:translate(38px,28px)}}@keyframes waveBob{50%{transform:translateY(-5px) rotate(-2deg)}}@keyframes turtleFloat{50%{transform:translate(-9px,-8px) rotate(-9deg)}}@keyframes toastIn{from{opacity:0;transform:translate(-50%,7px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:1100px){.header-route{display:none}.objective-card{width:265px}.brand{min-width:0}}
@media(hover:none),(pointer:coarse){.touch-controls{display:flex}.toast{bottom:145px}}
@media(max-width:690px){.header{height:61px;min-height:61px;padding:0 11px}.brand{gap:8px}.brand-glyph{width:37px;height:37px;flex-basis:37px;border-radius:12px}.brand-glyph svg{width:30px;height:30px}.brand-words strong{font-size:14px}.brand-words span{font-size:8px}.header-actions{gap:6px}.round-btn{width:38px;height:38px;border-radius:12px}.top-hud{left:8px;right:8px;top:9px;gap:6px;align-items:stretch}.hud-block{border-radius:13px}.treasure-hud{min-width:0;flex:1;gap:5px;padding:8px 6px}.hud-icon{width:28px;height:29px;border-radius:9px}.pearl-icon{font-size:22px}.hud-lines>span{font-size:7px;letter-spacing:0}.hud-lines strong{font-size:19px}.hud-lines strong small{font-size:11px}.oxygen-hud{width:38%;min-width:0;flex:1.25;margin:0;padding:8px 8px 7px}.oxy-label{font-size:8px;gap:4px;letter-spacing:0}.oxy-symbol{font-size:8px;padding:3px 4px}.oxy-numeric{font-size:11px}.bar-track{margin-top:8px;height:10px}.oxygen-hud>small{font-size:7px;margin-top:5px}.life-hud{min-width:0;flex:.68;height:auto;padding:8px 6px}.life-hud .hud-lines{align-items:center;gap:7px}.hearts{font-size:16px;letter-spacing:1px}.objective-card{top:91px;right:8px;width:177px;padding:9px 10px 10px;border-radius:13px;background:rgba(4,40,54,.66)}.objective-top{font-size:7px;gap:2px}.objective-star{font-size:10px;margin-right:2px}.objective-chip{font-size:6px;padding:4px 5px}.objective-card>strong{font-size:12px;margin-top:6px}.objective-card p{font-size:8px;line-height:1.45;margin:5px 0 8px}.mission-foot{margin-top:7px;font-size:8px}.mission-foot #score{font-size:11px}.depth-chip{top:91px;left:8px;font-size:8px;padding:7px 9px}.touch-controls{left:13px;right:15px;bottom:14px}.joystick{width:116px;height:116px}.joystick-knob{width:50px;height:50px}.dash-btn{width:82px;height:82px}.bottom-bar{height:29px;min-height:29px;padding:0 10px}.footer-hint,.footer-tip{display:none}.footer-record{margin-left:auto;font-size:8px}.footer-record strong{font-size:10px}.overlay-panel{padding:22px 16px 16px;max-height:calc(100% - 18px);border-radius:22px}.overlay-art{height:96px}.big-wave{font-size:78px}.turtle{font-size:48px}.tiny-fish{font-size:22px}.overlay-panel h1{font-size:clamp(29px,9vw,42px);margin:8px 0 11px}.overlay-panel>p{font-size:11px;line-height:1.5;margin-bottom:13px}.howto{gap:6px;margin-bottom:14px}.howto>div{gap:5px;flex-direction:column;align-items:center;text-align:center;padding:7px 3px}.howto b{font-size:19px}.howto strong{font-size:7px}.howto small{font-size:7px}.start-btn{min-height:51px;font-size:12px}.overlay-bottom{font-size:8px;gap:6px;margin-top:11px}}
@media(max-width:390px){.brand-words strong{font-size:12px}.brand-words span{font-size:7px}.hud-lines strong{font-size:16px}.hud-lines>span{font-size:6px}.pearl-icon{font-size:19px}.hud-icon{width:24px;height:24px}.life-hud .hearts{font-size:14px}.objective-card{width:164px}.overlay-panel{padding-top:16px}.overlay-art{height:80px}.big-wave{font-size:67px}.turtle{font-size:41px}}
@media(max-height:690px){.overlay-panel{padding-top:12px;padding-bottom:12px}.overlay-art{height:68px}.big-wave{font-size:59px}.turtle{font-size:36px}.overlay-panel h1{font-size:35px;margin:4px 0 8px}.overlay-panel>p{margin-bottom:9px;font-size:11px}.howto{margin-bottom:9px}.howto>div{padding:6px}.start-btn{min-height:45px}.overlay-bottom{margin-top:8px}.objective-card{top:82px}.depth-chip{top:82px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}