:root{font-family:Inter,Helvetica Neue,Hiragino Kaku Gothic ProN,Noto Sans JP,system-ui,sans-serif;color:#d5e7fa;background:#020b18;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 20%,#0b2848,transparent 46%),#010817}button{font:inherit}.game-shell{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(100%,460px);height:100dvh;min-height:620px;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 50% 28%,rgba(14,54,94,.9),transparent 45%),radial-gradient(ellipse at 50% 78%,rgba(5,31,59,.75),transparent 52%),linear-gradient(180deg,#041329,#020c1c);box-shadow:0 0 80px #00000080,inset 0 0 100px #00000038}.game-shell.area-deep{background:radial-gradient(ellipse at 50% 28%,rgba(22,43,91,.9),transparent 45%),radial-gradient(ellipse at 50% 78%,rgba(17,18,58,.8),transparent 52%),linear-gradient(180deg,#080e2d,#03051a)}.game-shell.area-midnight{background:radial-gradient(ellipse at 50% 25%,rgba(22,35,83,.82),transparent 43%),radial-gradient(ellipse at 50% 76%,rgba(20,15,55,.82),transparent 50%),linear-gradient(180deg,#080c29,#030419)}.game-shell.area-abyss{background:radial-gradient(ellipse at 50% 30%,rgba(30,25,78,.72),transparent 42%),radial-gradient(ellipse at 50% 80%,rgba(28,8,49,.72),transparent 48%),linear-gradient(180deg,#08071d,#02020d)}.topbar{position:relative;z-index:10;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;padding:max(14px,env(safe-area-inset-top)) 18px 8px}.level-copy{text-align:center;line-height:.9;letter-spacing:.08em}.level-copy span{display:block;color:#819bb9;font-size:12px;font-weight:500;letter-spacing:.28em}.level-copy strong{display:block;margin-top:7px;color:#edf5ff;font-size:42px;font-weight:300;letter-spacing:.16em;text-shadow:0 0 18px rgba(126,187,255,.2)}.meter-row{display:flex;justify-content:center;gap:16px}.score-copy{margin-top:7px;color:#d6ebff;font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.13em}.score-copy b{margin-right:5px;color:#6f8eac;font-size:9px;font-weight:600;letter-spacing:.18em}.score-copy output{display:inline-block;min-width:55px;text-align:left}.score-copy output.score-pop{color:#ffe49a;animation:score-pop .3s ease-out}.lives{display:block;margin-top:5px;color:#ff8098;font-size:13px;line-height:1;letter-spacing:.14em;text-shadow:0 0 8px rgba(255,128,152,.35)}.lives.life-lost{animation:life-lost .45s ease-out}.time-copy{color:#bcd9f4}.time-copy output{min-width:38px}.area-name{margin-top:6px;color:#517492;font-size:8px;font-weight:600;letter-spacing:.26em}.round-button{display:grid;width:44px;height:44px;padding:10px;place-items:center;border:1px solid rgba(150,187,224,.65);border-radius:50%;color:#b3cae2;background:#05132757;box-shadow:inset 0 0 12px #639dd90a,0 0 18px #00000029;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;transition:transform .18s,opacity .18s}.round-button:active{transform:scale(.91)}.round-button svg{width:24px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.round-button.muted{opacity:.42}.board-wrap{position:relative;min-height:0;isolation:isolate}.board{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;touch-action:manipulation;transition:opacity .18s,transform .18s}.board.is-transitioning{opacity:0;transform:scale(.985)}.sun-glow{position:absolute;top:2%;left:12%;width:76%;height:44%;background:radial-gradient(ellipse,rgba(34,89,139,.18),transparent 68%);filter:blur(22px)}.bubbles i{position:absolute;z-index:1;width:16px;aspect-ratio:1;border:1px solid rgba(111,163,208,.42);border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(166,213,255,.2),transparent 35%);box-shadow:inset 0 0 7px #4386c22e;animation:float 6s ease-in-out infinite}.bubbles i:nth-child(1){left:8%;top:15%;width:10px}.bubbles i:nth-child(2){right:10%;top:23%;width:21px;animation-delay:-1.2s}.bubbles i:nth-child(3){left:15%;top:58%;width:22px;animation-delay:-2.6s}.bubbles i:nth-child(4){right:17%;top:69%;width:11px;animation-delay:-.5s}.bubbles i:nth-child(5){left:44%;top:5%;width:7px;animation-delay:-3s}.bubbles i:nth-child(6){right:42%;top:46%;width:8px;animation-delay:-2s}.reef{position:absolute;z-index:0;bottom:-24px;width:42%;height:145px;opacity:.07;filter:blur(.2px)}.reef:before,.reef:after{content:"";position:absolute;bottom:0;border-radius:60% 60% 10% 10%;background:#37648d;transform-origin:bottom}.reef-left{left:-20px}.reef-left:before{left:15px;width:28px;height:110px;transform:rotate(-22deg);box-shadow:38px 15px #0b79ad,80px 40px #056ca0}.reef-left:after{left:30px;width:19px;height:78px;transform:rotate(24deg)}.reef-right{right:-25px;transform:scaleX(-1)}.reef-right:before{left:15px;width:24px;height:94px;transform:rotate(-22deg);box-shadow:42px 12px #0c75aa,82px 43px #0871a5}.reef-right:after{left:34px;width:17px;height:70px;transform:rotate(25deg)}.eel{color:var(--eel-color);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--eel-color) 34%,transparent));cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center}.eel-outline,.eel-shine,.eel-hit{fill:none;stroke-linecap:round;stroke-linejoin:round}.eel-outline{fill:none;stroke-width:4.5px;opacity:.18}.eel-body{fill:#07172c;stroke-width:1.65px;stroke-linejoin:round}.eel-shine{stroke-width:.7px;opacity:.36;transform:translateY(-1.4px)}.eel-hit{stroke:transparent;stroke-width:32px;pointer-events:stroke}.head{stroke-width:1.7px}.eye{fill:#e4f4ff}.eel:focus-visible .eel-outline{stroke:#fff;opacity:.75}.eel.moving,.eel.escaped{pointer-events:none}.eel.tutorial-focus .eel-outline{animation:focus-eel 1s ease-in-out infinite}.eel.ready-next{animation:ready-nudge .7s ease-out}.eel.ready-next .eel-outline{animation:ready-next .85s ease-out}.tutorial-pointer{pointer-events:none;transition:opacity .18s}.tutorial-pointer.hidden{opacity:0}.tutorial-ripple{fill:none;stroke:#ffd66b;stroke-width:1.4px;transform-box:fill-box;transform-origin:center;animation:tutorial-ripple 1.1s ease-out infinite}.tutorial-hand{transform-box:fill-box;transform-origin:12px 0;animation:tutorial-hand-tap 1.1s ease-in-out infinite}.tutorial-hand-shadow{fill:#00000073;transform:translate(1.5px,2px)}.tutorial-hand-line{fill:#10243e;stroke:#e4f1ff;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(165,210,255,.32))}.hint{position:absolute;z-index:7;left:50%;top:12px;display:flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border:1px solid rgba(112,151,191,.55);border-radius:999px;color:#9cb6d2;background:#030e1eb3;box-shadow:0 8px 26px #00000038,inset 0 0 16px #3c6fa30d;font-size:13px;font-weight:700;white-space:nowrap;transform:translate(-50%);transition:opacity .25s,transform .25s;visibility:visible;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hint.hidden{opacity:0;visibility:hidden;transform:translate(-50%,-10px);pointer-events:none}.tap-hand{display:inline-block;color:#ffd66b;font-family:system-ui,sans-serif;font-size:23px;line-height:1;filter:drop-shadow(0 0 5px rgba(255,214,107,.3));animation:point-tap 1s ease-in-out infinite}.clear-card{position:absolute;z-index:12;top:50%;left:50%;display:grid;width:min(82%,320px);padding:25px 24px 20px;border:1px solid rgba(124,163,204,.66);border-radius:28px;text-align:center;background:#041226e6;box-shadow:0 20px 60px #00000080,inset 0 0 30px #477eb50f;opacity:0;visibility:hidden;transform:translate(-50%,-44%) scale(.8);pointer-events:none;transition:opacity .35s,transform .5s cubic-bezier(.18,1.5,.42,1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.clear-card.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.clear-card small{color:#83b7e8;font-size:13px;font-weight:500;letter-spacing:.2em}.clear-card strong{margin:5px 0 18px;color:#e4f2ff;font-size:28px;font-weight:400}.clear-card button{padding:11px 18px;border:1px solid rgba(255,214,107,.72);border-radius:999px;color:#ffe7a2;background:#ffd66b14;box-shadow:0 0 18px #ffd66b14;cursor:pointer}.clear-card button:active{transform:translateY(2px)}.clear-flash{position:absolute;z-index:11;top:49%;left:50%;display:grid;justify-items:center;color:#dff3ff;opacity:0;visibility:hidden;transform:translate(-50%,-45%) scale(.92);pointer-events:none;transition:opacity .14s,transform .25s ease-out,visibility 0s .25s}.clear-flash.visible{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);transition-delay:0s}.clear-flash span{color:#78a6cc;font-size:10px;letter-spacing:.28em}.clear-flash strong{margin-top:5px;font-size:25px;font-weight:300;letter-spacing:.22em;text-shadow:0 0 18px rgba(130,210,255,.45)}.score-float{position:absolute;z-index:20;color:#ffe59b;font-size:13px;font-weight:700;text-shadow:0 0 10px rgba(255,211,92,.5);transform:translate(-50%,-50%);pointer-events:none;animation:score-float .7s ease-out forwards}.progress{position:relative;z-index:8;display:grid;justify-items:center;padding:9px 20px max(15px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(0,4,12,.34))}.progress p{margin:5px 0 0;color:#617f9f;font-size:11px;font-weight:500;letter-spacing:.18em}.pearls{display:flex;gap:7px}.pearls i{width:9px;height:9px;border:1px solid #3e6488;border-radius:50%;background:#051427bd;transition:background .3s,transform .3s}.pearls i.done{background:#9bc8eb;border-color:#d5efff;box-shadow:0 0 8px #87cbfa80;transform:scale(1.12)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes point-tap{0%,to{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-5px) rotate(12deg)}}@keyframes focus-eel{0%,to{opacity:.16;stroke-width:4.5px}50%{opacity:.72;stroke-width:7px}}@keyframes tutorial-ripple{0%{opacity:.8;transform:scale(.65)}75%,to{opacity:0;transform:scale(1.55)}}@keyframes tutorial-hand-tap{0%,to{transform:translateY(8px)}45%,62%{transform:translateY(-2px)}}@keyframes ready-next{0%{opacity:.18;stroke-width:4.5px}35%{opacity:.9;stroke-width:9px}to{opacity:.18;stroke-width:4.5px}}@keyframes ready-nudge{0%,to{transform:translate(0)}42%{transform:translate(var(--nudge-x),var(--nudge-y))}}@keyframes score-pop{0%{transform:scale(1)}45%{transform:scale(1.18)}to{transform:scale(1)}}@keyframes score-float{0%{opacity:0;transform:translate(-50%,-25%) scale(.85)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-160%) scale(1.06)}}@media(max-height:680px){.game-shell{min-height:540px}.topbar{padding-top:8px}.level-copy strong{font-size:31px}.round-button{width:40px;height:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.log-notice{position:absolute;right:8px;bottom:calc(100% + 4px);z-index:40;margin:0;padding:3px 7px;max-width:calc(100% - 16px);border:1px solid rgba(120,176,224,.14);border-radius:5px;background:#041020b8;color:#6c869e;font-size:9px;line-height:1.3;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:log-notice-in .4s ease-out both}.log-notice.leaving{animation:log-notice-out .5s ease-in forwards}@keyframes log-notice-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes log-notice-out{to{opacity:0;transform:translateY(6px)}}@keyframes life-lost{0%{transform:scale(1)}25%{transform:scale(1.28);color:#ffd0da}55%{transform:scale(.94)}to{transform:scale(1)}}
