/* Shared by savethefish.games and code4ocean.com (tools/site/build.py
   prepends this to each site's own CSS). No third-party requests. */
@font-face{font-family:"Baloo 2";src:url(/fonts/baloo2.woff2) format("woff2");font-weight:400 800;
font-display:swap;unicode-range:U+0020-024F,U+1E00-1EFF,U+2000-206F,U+20AB,U+20AC}
:root{--sky:#9bdcff;--surf:#29b6ea;--sea:#0b78c8;--deep:#06417e;--abyss:#04203f;--night:#03142a;
--coral:#ff7a45;--coral2:#ff4f7b;--sun:#ffd34d;--kelp:#3ccf9a;--foam:#eaf8ff;
--ink:#0d2236;--muted:#4a6377;--bg:#f3fbff;--card:#fff;--line:#d3e8f6;--glass:rgba(255,255,255,.14);
--radius:22px;--shadow:0 18px 40px -18px rgba(4,40,80,.45);
--font:"Baloo 2",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
@media (prefers-color-scheme:dark){:root{--ink:#e6f3fc;--muted:#9fbbd0;--bg:#051a30;--card:#0b2a47;
--line:#173f63;--foam:#0a2540;--shadow:0 18px 40px -18px rgba(0,0,0,.7)}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 17px/1.6 var(--font);color:var(--ink);background:var(--bg);overflow-x:hidden}
img{max-width:100%}
a{color:var(--sea)}
@media (prefers-color-scheme:dark){a{color:#7fd0ff}}
h1,h2,h3{line-height:1.12;font-weight:800;letter-spacing:-.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
color:var(--coral);margin-bottom:6px}

/* Header: clear over the hero, glass once the page scrolls. */
header.top{position:fixed;inset:0 0 auto;z-index:20;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
header.top.solid,header.top.always{background:rgba(4,32,63,.82);backdrop-filter:blur(14px) saturate(1.4);
-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 8px 24px -16px rgba(0,0,0,.6)}
header.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
header.top a{color:#fff;text-decoration:none;font-weight:700}
header.top .brand{display:flex;align-items:center;gap:10px;font-size:21px;margin-inline-end:auto;
text-shadow:0 2px 8px rgba(0,0,0,.25)}
header.top .brand img{width:38px;height:38px;border-radius:11px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
header.top nav{display:flex;gap:6px;font-size:15px}
header.top nav a{padding:6px 12px;border-radius:999px;transition:background .2s}
header.top nav a:hover{background:var(--glass)}
@media (max-width:720px){header.top nav a.opt{display:none}}

/* Buttons. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 26px;
border-radius:999px;font:800 18px/1.15 var(--font);text-decoration:none;text-align:center;border:0;cursor:pointer;
transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.hot{color:#fff!important;background:linear-gradient(180deg,#ff9a5c,var(--coral) 55%,#f2582c);
box-shadow:0 10px 24px -8px rgba(255,90,40,.75),inset 0 2px 0 rgba(255,255,255,.35)}
.btn.glass{color:#fff!important;background:var(--glass);border:1.5px solid rgba(255,255,255,.45);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.btn img{width:26px;height:26px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;font-weight:700;
background:var(--glass);border:1px solid rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px)}
.pill i{width:9px;height:9px;border-radius:50%;background:var(--kelp);box-shadow:0 0 0 0 rgba(60,207,154,.7);
animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(60,207,154,0)}100%{box-shadow:0 0 0 0 rgba(60,207,154,0)}}

/* Scroll reveal (only when JS runs; without it everything is visible). */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.1s}.js .reveal[data-d="2"]{transition-delay:.2s}
.js .reveal[data-d="3"]{transition-delay:.3s}.js .reveal[data-d="4"]{transition-delay:.4s}

/* A game fish from its rig: tail behind the body, fin in front, both pinned
   at their joints (lib/render/fish_painter.dart _spriteRig). */
.fish{position:relative;width:var(--w,120px);direction:ltr}
.fish .rig{position:relative}
.fish img{position:absolute;display:block;max-width:none;height:auto}
.fish .body{position:relative;width:100%}
.fish .tail{animation:wiggle .9s ease-in-out infinite alternate;animation-delay:var(--t,0s)}
.fish .pect{animation:flap .7s ease-in-out infinite alternate;animation-delay:var(--t,0s)}
@keyframes wiggle{from{transform:rotate(-.22rad)}to{transform:rotate(.22rad)}}
@keyframes flap{from{transform:rotate(-.7rad)}to{transform:rotate(0)}}

/* Swimmers cross their layer; .left ones face and swim the other way. */
.school{position:absolute;inset:0;overflow:hidden;pointer-events:none;direction:ltr}
.swim{position:absolute;left:0;top:var(--y);animation:swim var(--s,26s) linear infinite;animation-delay:var(--d,0s);
will-change:transform}
.swim.left{animation-name:swimL}
.swim .bob{animation:bob 3.2s ease-in-out infinite alternate}
.swim.left .fish{transform:scaleX(-1)}
.swim.far{opacity:.55;filter:saturate(.6) brightness(.95) blur(.6px)}
@keyframes swim{from{transform:translateX(-30vw)}to{transform:translateX(120vw)}}
@keyframes swimL{from{transform:translateX(120vw)}to{transform:translateX(-30vw)}}
@keyframes bob{from{transform:translateY(-10px) rotate(-2deg)}to{transform:translateY(10px) rotate(2deg)}}

/* Rising bubbles. */
.bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bubbles span{position:absolute;bottom:-40px;left:var(--x);width:var(--r);height:var(--r);border-radius:50%;
background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.95) 0 12%,rgba(255,255,255,.25) 24%,
rgba(255,255,255,.08) 60%,rgba(255,255,255,.5) 100%);box-shadow:inset 0 0 6px rgba(255,255,255,.6);
animation:rise var(--s,9s) linear infinite;animation-delay:var(--d,0s);opacity:.85}
@keyframes rise{0%{transform:translate(0,0)}25%{transform:translate(12px,-28vh)}50%{transform:translate(-8px,-56vh)}
75%{transform:translate(10px,-84vh)}100%{transform:translate(0,-115vh);opacity:0}}

/* Sunlight rays under the surface. */
.rays{position:absolute;inset:-10% -20% 20%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
background:repeating-linear-gradient(105deg,transparent 0 60px,rgba(255,255,255,.22) 80px,transparent 140px,
transparent 220px,rgba(255,255,255,.14) 250px,transparent 300px);
-webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%);
filter:blur(6px);animation:sway 9s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes sway{from{transform:skewX(-6deg) translateX(-3%)}to{transform:skewX(6deg) translateX(3%)}}

/* Wave edges between sections. */
.wave{display:block;width:100%;height:clamp(40px,7vw,90px)}
.wave.top{position:absolute;top:-1px;left:0;transform:scaleY(-1);pointer-events:none}
.wave.bottom{position:absolute;bottom:-1px;left:0;pointer-events:none}
.wave.move path{animation:drift 12s linear infinite}
.wave.move path+path{animation-duration:18s;animation-direction:reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Legal pages. */
.page-top{background:linear-gradient(180deg,var(--abyss),var(--deep));height:120px}
article.legal{position:relative;max-width:820px;margin:-48px auto 64px;padding:36px clamp(18px,5vw,56px) 48px;
background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
article.legal h1{font-size:clamp(32px,5vw,46px);margin:0 0 4px}
article.legal h2{font-size:23px;margin-top:34px}
article.legal li{margin:4px 0}
.updated{color:var(--muted);margin-top:0}code{font-size:.9em}
.note{background:var(--foam);border-radius:14px;padding:12px 16px}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}
html{scroll-behavior:auto}.swim{display:none}.js .reveal{opacity:1;transform:none}}
/* savethefish.games */

/* Hero: the shore above the waterline, the sea below, like a level. */
.hero{position:relative;display:flex;flex-direction:column;min-height:max(680px,100svh);color:#fff;
background:var(--sky);overflow:hidden;isolation:isolate}
.hero .sky{position:relative;height:clamp(150px,30vh,300px);flex:none;
background:linear-gradient(180deg,#5fb7f2,#a9e0ff 70%,#d5f1ff)}
.hero .sky img{position:absolute;inset:auto 0 -2px;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.hero .surface{position:absolute;inset:auto 0 -1px;height:60px;overflow:hidden}
.hero .surface svg{position:absolute;bottom:0;left:0;width:200%;height:100%}
.hero .surface path{animation:drift 10s linear infinite}
.hero .surface path.back{animation-duration:16s;animation-direction:reverse;opacity:.55}
.hero .water{position:relative;flex:1;display:flex;flex-direction:column;
background:linear-gradient(180deg,#22aee6 0%,#0d82cc 30%,#075ea8 62%,#06417e 100%)}
.hero .copy{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;padding:26px 16px 150px}
.hero .emblem{width:clamp(120px,22vw,190px);height:auto;filter:drop-shadow(0 18px 30px rgba(2,30,70,.5));
animation:float 4s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-8px) rotate(-3deg)}to{transform:translateY(8px) rotate(3deg)}}
.hero h1{font-size:clamp(46px,9vw,104px);margin:6px 0 4px;letter-spacing:-.02em;
background:linear-gradient(180deg,#fff 30%,#c7f0ff);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 0 rgba(3,48,96,.55)) drop-shadow(0 14px 22px rgba(0,0,0,.3))}
.hero .tag{font-size:clamp(19px,2.6vw,26px);font-weight:600;max-width:680px;margin:0 auto 18px;
text-shadow:0 2px 10px rgba(0,30,70,.45)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:20px}
.hero .reef{position:absolute;z-index:1;inset:auto 0 0;height:170px;pointer-events:none;direction:ltr}
.hero .reef:before{content:"";position:absolute;inset:auto -5% 0;height:70px;border-radius:50% 50% 0 0/100% 100% 0 0;
background:linear-gradient(180deg,#f3d9a4,#d9b97a)}
.hero .reef img{position:absolute;bottom:22px;height:auto}
.scroll-hint{position:absolute;z-index:3;left:50%;bottom:18px;width:28px;height:44px;margin-left:-14px;
border:2.5px solid rgba(255,255,255,.8);border-radius:16px}
.scroll-hint:after{content:"";position:absolute;left:50%;top:8px;width:6px;height:10px;margin-left:-3px;
border-radius:3px;background:#fff;animation:scrollh 1.6s ease-in-out infinite}
@keyframes scrollh{0%{transform:translateY(0);opacity:1}100%{transform:translateY(14px);opacity:0}}

/* Sections. */
section.band{position:relative;padding:clamp(64px,9vw,110px) 0}
section.band h2{font-size:clamp(32px,5vw,54px);margin:0 0 14px}
section.band .lead{font-size:clamp(18px,2vw,21px);color:var(--muted);max-width:720px;margin:0 0 34px}
section.alt{background:var(--foam)}
section.deep{color:#e8f6ff;background:radial-gradient(1200px 600px at 80% -10%,#0b5ea8 0,transparent 60%),
linear-gradient(180deg,var(--deep),var(--abyss))}
section.deep .lead{color:#b5d6ee}
.center{text-align:center}.center .lead{margin-inline:auto}

/* Try it: the playable demo. */
.demo{display:grid;grid-template-columns:1fr minmax(280px,400px);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){.demo{grid-template-columns:1fr}.demo .phone{margin:0 auto}}
.phone{position:relative;width:100%;max-width:400px;padding:12px;border-radius:44px;
background:linear-gradient(145deg,#1d4f80,#0a2a4c);box-shadow:0 40px 80px -30px rgba(3,30,70,.75),
inset 0 0 0 2px rgba(255,255,255,.12)}
.phone .screen{position:relative;border-radius:34px;overflow:hidden;aspect-ratio:9/14;
background:#0a74c0 url(/img/bg/reef_day.webp) center bottom/cover}
.phone canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.phone .msg{position:absolute;inset:auto 14px 14px;padding:12px 16px;border-radius:18px;text-align:center;
font-weight:700;color:#fff;background:rgba(4,32,63,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transform:translateY(calc(100% + 40px));transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.phone .msg.show{transform:none}
.phone .msg.win{background:rgba(18,140,90,.88)}.phone .msg.lose{background:rgba(200,60,40,.88)}
.ink{display:flex;align-items:center;gap:12px;margin:22px 0;max-width:360px}
.ink img{width:40px;height:40px}
.ink .bar{flex:1;height:16px;border-radius:999px;background:var(--line);overflow:hidden;
box-shadow:inset 0 2px 4px rgba(0,0,0,.15)}
.ink .bar span{display:block;height:100%;width:100%;border-radius:inherit;transition:width .1s;
background:linear-gradient(90deg,#46c3ff,#8fe3ff)}
.demo .btn[hidden]{display:none}

/* How to play. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:0;margin:0;list-style:none;counter-reset:s}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.steps li{position:relative;padding:28px 24px 26px;border-radius:var(--radius);background:var(--card);
border:1px solid var(--line);box-shadow:var(--shadow);counter-increment:s}
.steps li:before{content:counter(s);position:absolute;inset-inline-end:18px;top:6px;font-size:84px;font-weight:800;
line-height:1;color:var(--sea);opacity:.12}
.steps img{width:64px;height:64px;margin-bottom:10px;animation:float 3.6s ease-in-out infinite alternate}
.steps li:nth-child(2) img{animation-delay:-1.2s}.steps li:nth-child(3) img{animation-delay:-2.4s}
.steps p{margin:0;font-size:18px}

/* Numbers and features. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:10px 0 34px}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{padding:22px 18px;border-radius:var(--radius);text-align:center;background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.14)}
.stat b{display:block;font-size:clamp(44px,6vw,68px);line-height:1;font-weight:800;
background:linear-gradient(180deg,#fff,#8fe3ff);-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent}
.stat span{display:block;margin-top:6px;color:#b5d6ee;font-weight:600}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:14px;padding:0;margin:0;list-style:none}
.feats li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.feats img{width:42px;height:42px;flex:none}

/* Sea friends marquee. */
.friends{position:relative;overflow:hidden;padding:10px 0 4px;
-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.friends .track{display:flex;gap:18px;width:max-content;animation:marquee 46s linear infinite;direction:ltr}
.friends:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.friend{flex:none;width:190px;margin:0;text-align:center}
.friend .orb{position:relative;display:grid;place-items:center;width:170px;height:170px;margin:0 auto 10px;
border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),rgba(255,255,255,.08) 38%,
rgba(110,210,255,.18) 70%,rgba(255,255,255,.5));box-shadow:inset 0 0 22px rgba(255,255,255,.35),
0 16px 30px -18px rgba(0,0,0,.6);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.friend:hover .orb{transform:scale(1.08) rotate(-4deg)}
.friend .orb .fish{animation:bob 2.8s ease-in-out infinite alternate}
.friend figcaption{font-weight:800;font-size:19px}
@media (prefers-reduced-motion:reduce){.friends{-webkit-mask:none;mask:none;overflow-x:auto}}

/* Places. */
.places{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media (max-width:980px){.places{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
margin:0 -16px;padding-inline:16px}.place{flex:0 0 62%;max-width:240px;scroll-snap-align:center}}
.place{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:9/16;background:#0a5fa8;
box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.place:hover{transform:translateY(-8px) rotate(-1deg)}
.place .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.place .shore{position:absolute;inset:0 0 auto;width:100%;height:34%;object-fit:cover;object-position:50% 100%;
background:linear-gradient(#6cc0f4,#cdeeff)}
.place:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(2,24,52,.8))}
.place figcaption{position:absolute;z-index:1;inset:auto 0 0;padding:14px 16px;color:#fff;font-weight:800;
font-size:19px;line-height:1.15}
.place figcaption small{display:block;font-size:13px;opacity:.75;letter-spacing:.1em}

/* Facts. */
.facts{columns:3 300px;column-gap:18px}
.fact{break-inside:avoid;position:relative;margin:0 0 18px;padding:26px 22px 20px;border-radius:var(--radius);
background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.fact .icon{float:inline-end;width:72px;height:72px;margin:-6px -4px 4px 10px;object-fit:contain;
transform:rotate(-8deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.18));transition:transform .4s}
.fact:hover .icon{transform:rotate(6deg) scale(1.1)}
.fact .icon.grey{filter:grayscale(1) brightness(.85) drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.fact h3{margin:0 0 8px;font-size:22px}
.fact p{margin:0 0 12px}
.fact .tip{clear:both;padding:12px 14px;border-radius:14px;background:var(--foam);border-inline-start:4px solid var(--kelp)}
.fact .src{font-size:14px;color:var(--muted);margin:0}

/* FAQ. */
.faq{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:clamp(24px,5vw,64px);align-items:start}
@media (max-width:820px){.faq{grid-template-columns:1fr}}
.faq .side img{width:150px;height:auto;margin-top:12px;animation:float 4s ease-in-out infinite alternate}
.faq details{margin-bottom:12px;border-radius:18px;background:var(--card);border:1px solid var(--line);
box-shadow:0 8px 20px -16px rgba(4,40,80,.4);transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:14px;padding:18px 22px;font-weight:800;
font-size:19px;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
background:var(--sea);color:#fff;font-size:22px;line-height:1;transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg);background:var(--coral)}
.faq details p{margin:0;padding:0 22px 20px;color:var(--muted)}

/* Last call. */
.finale{position:relative;overflow:hidden;color:#fff;text-align:center;
background:linear-gradient(180deg,#0d82cc,#06417e 70%,var(--abyss))}
.finale .wrap{position:relative;z-index:2;padding:clamp(80px,12vw,140px) 16px}
.finale h2{font-size:clamp(36px,6vw,68px);margin:0 0 18px}

/* Footer. */
footer{position:relative;color:#bcd6ea;background:var(--night);padding:40px 0 34px;font-size:15px}
footer a{color:#fff}
footer .row{display:flex;flex-wrap:wrap;gap:22px 40px;justify-content:space-between;align-items:flex-start}
footer .brand{display:flex;gap:12px;align-items:center;color:#fff;font-weight:800;font-size:20px;text-decoration:none}
footer .brand img{width:44px;height:44px;border-radius:12px}
footer .links{display:flex;flex-wrap:wrap;gap:8px 22px}
footer details{margin-top:24px;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 18px}
footer summary{cursor:pointer;font-weight:700;color:#fff}
footer .langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px 14px;margin-top:12px}
footer .langs a{text-decoration:none;opacity:.85}footer .langs a:hover{opacity:1;text-decoration:underline}
footer .langs a[aria-current]{color:var(--sun);opacity:1}
footer .by{margin:22px 0 0;opacity:.8}
.demo .retry[hidden]{display:inline-flex;visibility:hidden}
.center .lead{margin-left:auto;margin-right:auto}
.faq .side .fish{margin:18px 0 0 48px}