*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#253362,transparent 50%),#0c1020;color:#f0f4ff;font-family:system-ui,-apple-system,sans-serif}main{max-width:740px;margin:0 auto;padding:25px 18px}header{display:flex;justify-content:space-between;align-items:center;color:#a4b3d6;font-size:12px;letter-spacing:2px}.logo{font-weight:900;font-size:31px;letter-spacing:7px;color:white;text-decoration:none}.logo span{color:#5bf3c7}.panel{background:#192341;border:1px solid #3a496d;border-radius:22px;padding:27px;margin:26px 0;box-shadow:0 12px 35px #0003}h1{font-size:clamp(29px,6vw,44px);line-height:1.15;margin:8px 0 16px}h2{margin-top:0}p{color:#c4cde2;line-height:1.5}.small{font-size:13px;color:#aebcdc}.eyebrow{color:#5bf3c7;font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:800}.row{display:flex;gap:10px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{background:#0e1730;border-radius:12px;padding:13px}.stat b{display:block;font-size:28px;color:#5bf3c7}.stat span{font-size:12px;color:#b7c4db}label{display:block;margin:14px 0 7px;font-weight:700;font-size:13px}input{background:#0b1530;border:1px solid #526182;border-radius:10px;color:white;font-size:17px;padding:14px;width:100%}button{border:0;background:#5bf3c7;color:#04201e;font-weight:800;border-radius:11px;padding:14px 17px;cursor:pointer;font-size:15px}button.alt{background:#36496c;color:#fff}button:disabled{opacity:.5}.row button{flex:1}button.full{width:100%;margin-top:14px}.code{font-size:35px;letter-spacing:8px;font-weight:900;color:#5bf3c7;margin:16px 0;word-break:break-all}.error{color:#ffb2b9;min-height:18px}.notice{border-left:3px solid #5bf3c7;background:#102d39;padding:12px;border-radius:8px;margin:15px 0}.sides{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.side{border:1px solid #415073;padding:14px;border-radius:10px}.side b{display:block;font-size:28px}.reveal{border:1px solid #455473;border-radius:12px;padding:16px;margin:10px 0;background:#0e1730}.good{color:#5bf3c7}.bad{color:#ffb0b8}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:1px solid #415070;padding:11px 5px;font-size:14px}footer{text-align:center;color:#8496b5;font-size:12px;padding:15px}@media(max-width:460px){.panel{padding:20px}.stats{grid-template-columns:1fr 1fr}.sides{gap:6px}}

body{background:#080e1b;color:#f0f3f7;font-family:Arial,Helvetica,sans-serif}main{max-width:1180px;padding:32px 36px}header{border-bottom:1px solid #202a3a;padding:0 0 28px;letter-spacing:1px}.logo{font-size:30px;letter-spacing:4px}.nav{display:flex;gap:28px;align-items:center}.nav a{color:#8e9aaf;text-decoration:none;font-size:13px}.nav a:first-child{color:#5bf3c7}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#183931;color:#72e4c3;letter-spacing:0}.panel{background:transparent;border:0;box-shadow:none;padding:26px 0;margin:10px 0}.welcome{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#7f94a7}.season{color:#75d7bb;font-size:10px;letter-spacing:2px;border:1px solid #284038;border-radius:20px;padding:8px 12px}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;min-height:360px}.hero h1{font-size:clamp(40px,5vw,65px);font-weight:600;letter-spacing:-3px;line-height:1.08;margin:26px 0 20px}.hero em{font-style:normal;color:#70ebcb}.hero p{font-size:15px;color:#8794aa;line-height:1.7}.hero button{padding:16px 24px;min-width:180px;background:#70ebcb}.hero button span{float:right;margin-left:30px}.hero-note{display:block;font-size:10px;color:#63738a;margin-top:15px}.mind-art{position:relative;height:310px;overflow:hidden}.orb{position:absolute;top:45px;width:210px;height:210px;border:1px solid #3caa9b;border-radius:50%;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 8px,#4de0c53d 9px 10px);transform:rotate(-28deg) scaleX(.8);box-shadow:inset 0 0 35px #32bba51c}.orb.one{left:40px}.orb.two{left:180px;border-color:#5771dd;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 8px,#536fe54d 9px 10px);transform:rotate(28deg) scaleX(.8)}.orbit{position:absolute;top:25px;left:70px;border:1px solid #25374b;width:300px;height:260px;border-radius:50%;transform:rotate(-30deg)}.signal{position:absolute;left:170px;bottom:22px;font-size:9px;letter-spacing:3px;color:#71969c}.spark{position:absolute;left:235px;top:130px;font-size:46px;color:#bdfff0;text-shadow:0 0 30px #70ebcb}.stats{gap:0;border:1px solid #243040;border-radius:12px;margin:8px 0 40px;background:#0e1625}.stat{background:none;padding:20px 25px;border-radius:0;border-right:1px solid #243040}.stat:last-child{border:0}.stat span{font-size:9px;letter-spacing:1.5px;color:#7e8da2}.stat b{font-size:30px;color:#eaf2f4;margin-top:10px}.stat small{font-size:12px;color:#718399;font-weight:400}.sectionhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.sectionhead h2{font-size:20px;letter-spacing:-.5px;margin:0}.sectionhead>span{color:#627085;font-size:9px;letter-spacing:2px}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mode{text-align:left;background:#101927;color:white;border:1px solid #273244;border-radius:13px;padding:23px;font-weight:400;transition:border-color .2s,transform .2s}.mode:hover{border-color:#65dbbb;transform:translateY(-3px)}.modeicon{display:grid;place-items:center;width:39px;height:39px;border:1px solid #2c514b;background:#13332e;color:#7eeacb;border-radius:10px;font-size:23px;margin-bottom:24px}.modeicon.blue{color:#90a6ff;background:#202844;border-color:#344061}.modeicon.gold{color:#e6bd72;background:#322d25;border-color:#4d4130}.mode b{display:block;font-size:17px}.mode p{font-size:12px;color:#8594a9;margin:9px 0 23px}.link{font-size:11px;color:#c1d0dd}.bottomline{display:flex;align-items:center;gap:12px;margin:22px 0 38px;font-size:12px;color:#728096}.textbtn{padding:0;background:none;color:#7ddbc0;font-size:12px;font-weight:400}.bottomline .textbtn:last-child{margin-left:auto;color:#92a4bb}.how{border-top:1px solid #202c3b;display:flex;justify-content:space-between;padding-top:24px;color:#58ae9e;font-size:11px}.how b{margin-left:13px;font-weight:400;color:#8898ac}footer{font-size:10px;color:#52647b;border-top:1px solid #202c3b;padding:22px}.roundbar{display:flex;justify-content:space-between;color:#7eeacb;font-size:12px;margin-bottom:25px}.sides{margin-bottom:28px}input:focus,button:focus-visible{outline:2px solid #7eeacb;outline-offset:4px}.panel>h1{max-width:800px}.error{background:#351c2b;padding:12px;border-radius:8px}
@media(max-width:700px){main{padding:22px}.nav a{display:none}.hero{grid-template-columns:1fr}.hero h1{letter-spacing:-2px}.mind-art{display:none}.hero{min-height:340px}.modes{grid-template-columns:1fr}.mode{position:relative;padding-left:83px;min-height:135px}.modeicon{position:absolute;left:23px;top:25px}.mode p{margin-bottom:16px}.stats{grid-template-columns:repeat(3,1fr)}.stat{padding:15px 10px}.stat span{font-size:8px;letter-spacing:.6px}.stat b{font-size:26px}.how{gap:10px;font-size:9px}.how b{margin-left:4px}.season{display:none}}

.lightning{margin-top:20px;background:#141b31;border:1px solid #414169;border-radius:14px;padding:24px;display:flex;justify-content:space-between;gap:20px;align-items:center}.lightning h2{margin:10px 0;font-size:24px}.lightning p{font-size:12px;color:#93a2b8;margin-bottom:0}.lightning .eyebrow{color:#b0a5ff}@media(max-width:700px){.lightning{display:block}.lightning .row{margin-top:20px}}
a.mode{text-decoration:none;display:block}.playlink{display:inline-block;background:#70ebcb;color:#061a19;text-decoration:none;border-radius:10px;padding:16px 24px;font-size:15px;font-weight:700}html{scroll-behavior:smooth}.lightning p{max-width:850px;line-height:1.8}
/* Ambient ocean backdrop: decorative only, never blocks links or inputs. */
.ocean-field{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;color:#65e7d1}.ocean-field+main{position:relative;z-index:1}.ocean-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 38%,#075273 0%,transparent 48%),radial-gradient(ellipse at 14% 84%,#063e55 0%,transparent 50%);opacity:.22}.ocean-wave{position:absolute;width:200%;height:13vh;left:-25%;opacity:.18;filter:drop-shadow(0 0 8px #39cbb3);animation:ocean-swell 16s ease-in-out infinite alternate}.wave-1{top:15%;animation-duration:17s}.wave-2{top:38%;opacity:.13;animation-duration:22s;animation-direction:alternate-reverse}.wave-3{top:65%;opacity:.18;animation-duration:20s}.wave-4{top:86%;opacity:.12;animation-duration:25s;animation-direction:alternate-reverse}.ocean-fish{position:absolute;width:86px;left:-110px;opacity:.28;color:#80e9d2;filter:drop-shadow(0 0 10px #2daaa3);animation:fish-cross 37s linear infinite}.fish-body{transform-origin:center;transform:scaleX(-1);animation:fish-bob 2.8s ease-in-out infinite alternate}.fish-1{top:22%;animation-delay:-4s;animation-duration:38s}.fish-2{top:47%;width:68px;color:#70c9ec;animation-delay:-22s;animation-duration:49s}.fish-3{top:74%;width:110px;opacity:.2;animation-delay:-29s;animation-duration:55s}.fish-4{top:33%;width:43px;opacity:.21;animation-delay:-33s;animation-duration:44s}.fish-5{top:88%;width:53px;color:#88ead5;animation-delay:-12s;animation-duration:47s}@keyframes ocean-swell{from{transform:translateX(-6%) translateY(-5px)}to{transform:translateX(6%) translateY(8px)}}@keyframes fish-cross{from{translate:-120px 0}to{translate:calc(100vw + 230px) 0}}@keyframes fish-bob{from{transform:translateY(-6px) rotate(-3deg) scaleX(-1)}to{transform:translateY(7px) rotate(3deg) scaleX(-1)}}@media(max-width:700px){.ocean-wave{width:280%;left:-75%}.ocean-fish{opacity:.21}}@media(prefers-reduced-motion:reduce){.ocean-wave,.ocean-fish,.fish-body{animation:none}.ocean-fish{left:auto;right:5%}.fish-1{right:10%}.fish-2{right:50%}.fish-3{right:20%}.fish-4{right:40%}.fish-5{right:5%}}

/* Clear, consistent game navigation on every screen. */
.nav{flex-wrap:wrap;justify-content:flex-end;gap:12px 22px}.nav a{color:#c3d1df;letter-spacing:0;white-space:nowrap}.nav a:hover,.nav a:focus-visible{color:#70ebcb}.nav a:focus-visible,a:focus-visible{outline:2px solid #7eeacb;outline-offset:4px;border-radius:4px}.game-heading{margin:12px 0 20px;scroll-margin-top:20px}.game-heading h2{font-size:30px;margin:8px 0 0}.game-cards .mode{display:flex;flex-direction:column;min-height:245px}.game-cards .mode p{font-size:14px;line-height:1.6;margin-bottom:14px}.game-meta{font-size:11px;color:#aebfd0;margin-bottom:20px}.game-cards .link{margin-top:auto;color:#81f0d1;font-size:13px;font-weight:700}.quick-join{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:18px 0 36px;padding:18px 22px;border:1px solid #34485a;border-radius:12px;background:#101d2c}.quick-join b,.quick-join span{display:block}.quick-join span{color:#aab9cb;font-size:13px;margin-top:5px}.quick-join a{color:#81f0d1;font-weight:700;text-decoration:none;white-space:nowrap}
@media(max-width:700px){header{align-items:flex-start;gap:14px}.nav{gap:9px 14px}.nav a{display:inline-block;font-size:12px;line-height:1.4}.game-cards .mode{min-height:0}.game-cards .mode p{margin-bottom:10px}.game-meta{margin-bottom:12px}.quick-join{align-items:flex-start;flex-direction:column}.hero{min-height:260px}}

.friend-join{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 0 28px;padding:18px 22px;border:1px solid #34485a;border-radius:12px;background:#101d2c}.friend-join p{margin:5px 0 0;font-size:13px}.friend-join button{white-space:nowrap}@media(max-width:700px){.friend-join{align-items:flex-start;flex-direction:column}}

.logo .logo-connect{font-size:.46em;letter-spacing:2px;color:#c5f8ec;vertical-align:middle;white-space:nowrap}@media(max-width:700px){.logo{font-size:23px;letter-spacing:2px}.logo .logo-connect{font-size:.44em;letter-spacing:1px}}

/* Shrimp and seahorses drift with the existing ocean scene. */
.ocean-creature{position:absolute;pointer-events:none;color:#8ce6cf;opacity:.26;filter:drop-shadow(0 0 9px #36b9ac);animation:creature-float 6s ease-in-out infinite alternate}.ocean-shrimp{width:76px;color:#e6b0a6}.ocean-seahorse{width:43px;color:#a5e9d1}.shrimp-1{top:29%;left:8%;animation-delay:-2s}.shrimp-2{top:69%;right:9%;width:60px;animation-delay:-4s}.shrimp-3{top:90%;left:28%;width:52px;animation-delay:-1s}.seahorse-1{top:11%;right:11%;animation-delay:-3s}.seahorse-2{top:55%;left:5%;width:35px;animation-delay:-5s}.seahorse-3{top:80%;right:28%;width:38px;animation-delay:-1s}@keyframes creature-float{from{transform:translateY(-8px) rotate(-5deg)}to{transform:translateY(10px) rotate(5deg)}}@media(max-width:700px){.ocean-creature{opacity:.2}.shrimp-1{left:2%}.seahorse-1{right:4%}}@media(prefers-reduced-motion:reduce){.ocean-creature{animation:none}}

/* A few fish dart away when the sharks pass through the scene. */
.fish-6{top:12%;width:48px;animation-delay:-11s;animation-duration:46s;color:#87d8f2}.fish-7{top:57%;width:61px;animation-delay:-31s;animation-duration:41s}.fish-8{top:82%;width:40px;animation-delay:-19s;animation-duration:52s;color:#a4e4d3}.fish-9{top:40%;width:55px;animation-delay:-8s;animation-duration:57s}.fish-10{top:6%;width:41px;animation-delay:-27s;animation-duration:48s;color:#83d9e9}.ocean-chase{position:absolute;left:0;width:100%;height:100px;pointer-events:none;overflow:hidden;opacity:.26}.chase-1{top:25%}.chase-2{top:68%;opacity:.21}.chase-track{position:absolute;left:-220px;top:10px;animation:chase-across 38s linear infinite}.chase-2 .chase-track{animation-duration:53s;animation-delay:-23s}.chase-fish{position:absolute;width:50px;left:135px;top:12px;color:#92e7de;transform:scaleX(-1);animation:fish-flee 38s linear infinite}.chase-2 .chase-fish{animation-duration:53s;animation-delay:-23s}.chase-shark{position:absolute;width:135px;left:0;top:0;color:#95c5d3;transform:scaleX(-1);filter:drop-shadow(0 0 9px #429baa)}.shark-swim{transform-origin:center;animation:shark-wiggle 1.3s ease-in-out infinite alternate}@keyframes chase-across{0%,12%{transform:translate(-130px,6px)}20%{transform:translate(20vw,-6px)}24%{transform:translate(27vw,4px)}30%{transform:translate(48vw,-12px)}36%{transform:translate(65vw,8px)}43%{transform:translate(calc(100vw + 300px),-4px)}100%{transform:translate(calc(100vw + 300px),-4px)}}@keyframes fish-flee{0%,12%{translate:0 0}20%{translate:10px -8px}24%{translate:40px 4px}30%{translate:78px -10px}36%,100%{translate:100px 3px}}@keyframes shark-wiggle{from{transform:translateY(-5px) rotate(-4deg) scaleY(.95)}to{transform:translateY(5px) rotate(4deg) scaleY(1.05)}}@media(max-width:700px){.ocean-chase{opacity:.19}}@media(prefers-reduced-motion:reduce){.chase-track,.chase-fish,.shark-swim{animation:none}.chase-track{left:25%}.chase-2 .chase-track{left:55%}}

/* Ocean shared by all game screens, including lobbies, profiles and results. */
.ocean-game~main{position:relative;z-index:1}.ocean-game{opacity:.8}.ocean-game-page #app>.panel{background:#080e1be8;border:1px solid #253647;border-radius:18px;padding:24px}.ocean-whale,.ocean-swordfish{position:absolute;left:-240px;pointer-events:none;color:#89b9d2;opacity:.22;animation:large-ocean-cross 85s linear infinite}.ocean-whale{top:67%;width:190px;animation-delay:-35s}.ocean-swordfish{top:23%;width:125px;color:#8ddedb;animation-duration:43s;animation-delay:-12s}.large-swimmer{transform-origin:center;animation:large-ocean-bob 4s ease-in-out infinite alternate;transform:scaleX(-1)}.ocean-wavelength .ocean-whale{top:17%;animation-delay:-13s;color:#a1c0ef}.ocean-wavelength .ocean-swordfish{top:77%;animation-delay:-28s}.ocean-survival .ocean-whale{top:75%;animation-delay:-48s}.ocean-survival .ocean-swordfish{top:40%;animation-delay:-7s}@keyframes large-ocean-cross{from{translate:-240px 0}to{translate:calc(100vw + 480px) 0}}@keyframes large-ocean-bob{from{transform:scaleX(-1) translateY(-7px) rotate(-3deg)}to{transform:scaleX(-1) translateY(7px) rotate(3deg)}}@media(max-width:700px){.ocean-game{opacity:.65}.ocean-whale{width:140px}.ocean-swordfish{width:95px}.ocean-game-page #app>.panel{padding:18px}}@media(prefers-reduced-motion:reduce){.ocean-whale,.ocean-swordfish,.large-swimmer{animation:none}.ocean-whale{left:7%}.ocean-swordfish{left:70%}}

[hidden]{display:none!important}
/* Keep navigation reachable on narrow screens. */
@media(max-width:700px){header{flex-wrap:wrap;gap:16px}.nav{display:flex;flex-wrap:wrap;gap:8px 14px;width:100%;letter-spacing:.4px}.nav a{display:inline-flex;align-items:center;min-height:44px}.side{min-width:0;overflow-wrap:anywhere}.bottomline{flex-wrap:wrap;gap:12px}.stats-panel .row{align-items:center}.stats-panel select{max-width:100%;background:#102e35;color:#f0f4ff;border:1px solid #526182;border-radius:8px;padding:12px;font-size:16px}}
/* Ocean bubble play controls: instant press feedback, no navigation delay. */
a.playlink,button.bubble-play{position:relative;isolation:isolate;display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:48px;border-radius:999px;border:1px solid #b6ffe9;background:radial-gradient(ellipse at 24% 0%,#d7fff3aa,transparent 48%),linear-gradient(145deg,#9af8d8,#59d9cb);color:#062e31;box-shadow:inset 0 2px 1px #ffffff75,inset 0 -3px 4px #158f9840,0 0 0 5px #71eaca12,0 7px 20px #31d8c51c;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a.playlink::before,button.bubble-play::before{content:'';position:absolute;top:5px;left:18%;width:32%;height:5px;border-radius:50%;background:#fff7;pointer-events:none}
a.playlink:focus-visible,button.bubble-play:focus-visible,a.mode:focus-visible{outline:3px solid #d5fff4;outline-offset:6px}
.mode .link{display:inline-flex;align-items:center;padding:10px 16px;border:1px solid #75dcc66b;border-radius:999px;background:linear-gradient(130deg,#63dcb829,#58bfe019);color:#c9fff0;box-shadow:inset 0 1px 0 #c3fff52b,0 0 0 4px #72e6cc08;transition:transform .16s ease,box-shadow .16s ease}
@media(hover:hover){a.playlink:hover,button.bubble-play:hover{transform:translateY(-3px);box-shadow:inset 0 2px 1px #ffffff90,inset 0 -3px 4px #158f9840,0 0 0 7px #71eaca1a,0 10px 25px #31d8c536}.mode:hover .link{transform:translateY(-2px);box-shadow:inset 0 1px 0 #c3fff54a,0 0 0 6px #72e6cc12}}
a.playlink:active,button.bubble-play:active{transform:scale(.94);box-shadow:inset 0 2px 7px #159fa74a,0 0 0 7px #71eaca20}.mode:active .link{transform:scale(.94)}
.play-bubble-pop{position:fixed;z-index:10001;width:38px;height:38px;margin:-19px 0 0 -19px;border:2px solid #afffeb;border-radius:50%;pointer-events:none;animation:play-bubble-burst .42s ease-out forwards;box-shadow:0 0 12px #72e6cc66}.play-bubble-pop::before,.play-bubble-pop::after{content:'';position:absolute;width:9px;height:9px;border:1px solid #b0f5ff;border-radius:50%;top:-8px;left:4px}.play-bubble-pop::after{width:6px;height:6px;top:24px;left:35px}@keyframes play-bubble-burst{from{opacity:.85;transform:scale(.45) translateY(0)}to{opacity:0;transform:scale(2.6) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){a.playlink,button.bubble-play,.mode .link{transition:none}a.playlink:hover,button.bubble-play:hover,a.playlink:active,button.bubble-play:active,.mode:hover .link,.mode:active .link{transform:none}.play-bubble-pop{display:none;animation:none}}
.mode{border-radius:24px;box-shadow:inset 0 1px 0 #b7fff012,0 0 0 4px #7be7d106}.wave-modes button.mode>b{display:inline-block;border:1px solid #83e6d34d;border-radius:999px;padding:8px 13px;background:linear-gradient(135deg,#71eaca18,#75c7ef12);box-shadow:inset 0 1px 0 #c7fff321;margin-bottom:3px}

/* Visible, continuous ocean movement on every page; nested swimmers retain their own bob. */
@media (prefers-reduced-motion:no-preference){
 .ocean-wave{animation-name:ocean-current;animation-duration:12s;will-change:transform}
 .ocean-wave.wave-1{animation-duration:10s;animation-delay:-3s}
 .ocean-wave.wave-2{animation-duration:14s;animation-delay:-8s}
 .ocean-wave.wave-3{animation-duration:12s;animation-delay:-5s}
 .ocean-wave.wave-4{animation-duration:16s;animation-delay:-11s}
 .ocean-fish{animation-name:ocean-fish-swim;will-change:transform}
 .ocean-fish.fish-1{animation-duration:25s}.ocean-fish.fish-2{animation-duration:31s}
 .ocean-fish.fish-3{animation-duration:36s}.ocean-fish.fish-4{animation-duration:28s}
 .ocean-fish.fish-5{animation-duration:32s}.ocean-fish.fish-6{animation-duration:29s}
 .ocean-fish.fish-7{animation-duration:26s}.ocean-fish.fish-8{animation-duration:34s}
 .ocean-fish.fish-9{animation-duration:37s}.ocean-fish.fish-10{animation-duration:30s}
 .chase-1 .chase-track,.chase-1 .chase-fish{animation-delay:-9s}
 .ocean-whale{animation-name:ocean-large-swim;animation-duration:65s}
 .ocean-swordfish{animation-name:ocean-large-swim;animation-duration:32s}
}
@keyframes ocean-current{from{transform:translate(-10%,-12px)}to{transform:translate(10%,14px)}}
@keyframes ocean-fish-swim{from{transform:translateX(-120px)}to{transform:translateX(calc(100vw + 230px))}}
@keyframes ocean-large-swim{from{transform:translateX(-240px)}to{transform:translateX(calc(100vw + 480px))}}

/* One shared frame loop drives actual positions, independent of CSS motion queries. */
.ocean-live .ocean-wave,.ocean-live .ocean-fish,.ocean-live .ocean-creature,.ocean-live .ocean-whale,.ocean-live .ocean-swordfish,.ocean-live .chase-track,.ocean-live .ocean-dolphin{animation:none!important;translate:none!important;will-change:transform}
.ocean-live .fish-body,.ocean-live .large-swimmer{animation:none!important;transform:scaleX(-1)}
.ocean-live .shark-swim,.ocean-live .chase-fish{animation:none!important}
.ocean-live .ocean-fish{opacity:.4}.ocean-live .ocean-wave{opacity:.28}.ocean-live .ocean-creature{opacity:.38}
.ocean-live .ocean-whale,.ocean-live .ocean-swordfish{opacity:.38}
.ocean-dolphin{position:absolute;left:0;top:27%;width:140px;color:#8dd6e5;opacity:.42;filter:drop-shadow(0 0 8px #44a6c533)}
.ocean-dolphin.dolphin-1{top:80%;width:110px;color:#aedce8}
.ocean-motion-toggle{position:fixed;right:12px;bottom:12px;z-index:1000;min-height:40px;padding:8px 14px;border:1px solid #76d4c677;border-radius:999px;background:#092331ed;color:#aef3e1;font:600 12px system-ui;cursor:pointer;box-shadow:0 3px 15px #0004}
.ocean-motion-toggle:focus-visible{outline:3px solid #a5ffde;outline-offset:3px}
@media(max-width:700px){.ocean-dolphin{width:105px}.ocean-dolphin.dolphin-1{width:85px}.ocean-motion-toggle{bottom:8px;right:8px;font-size:11px}}

.ocean-orca,.ocean-school{position:absolute;left:0;pointer-events:none;animation:none!important;will-change:transform;filter:drop-shadow(0 0 8px #6acbd433)}
.ocean-orca{top:43%;width:195px;opacity:.57}.ocean-orca.orca-1{top:88%;width:145px;opacity:.44}
.ocean-school{top:57%;width:290px;color:#8fe6d8;opacity:.48}
@media(max-width:700px){.ocean-orca{width:145px}.ocean-orca.orca-1{width:115px}.ocean-school{width:220px}}