@font-face{font-family:Manrope;src:url(/fonts/manrope.woff2)format("woff2");font-weight:200 800;font-display:swap}@font-face{font-family:Fraunces;src:url(/fonts/fraunces.woff2)format("woff2");font-weight:100 900;font-display:swap}:root{--sky:#2f9fcf;--grass:#3ec9c0;--grass-deep:#1f9aa6;--sun:#ffc93c;--coral:#ff7a59;--ink:#0f3a52;--cream:#fff8e6;--card:#fff8e6f0;--tap:72px;--gap:12px;--radius:28px;--pad:max(16px, env(safe-area-inset-left));color:var(--ink);font-family:Manrope,system-ui,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{overscroll-behavior:none;background:var(--sky);height:100%;margin:0;overflow:hidden}body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:4px solid var(--coral);outline-offset:3px}.btn{min-block-size:var(--tap);min-inline-size:var(--tap);background:var(--cream);text-align:center;border:0;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding-inline:22px;font-size:1.15rem;font-weight:800;text-decoration:none;transition:transform .12s;display:inline-flex;box-shadow:0 5px #0f3a522e,0 8px 18px #0f3a5224}.btn:active{transform:translateY(3px)scale(.98)}.btn.on{background:var(--sun)}.btn.icon{padding:0;font-size:1.8rem}.btn.big{background:var(--sun);min-block-size:84px;padding-inline:36px;font-size:1.5rem}.btn.wide{inline-size:100%}.btn.secondary{background:#fff}.start{place-items:end center;padding:24px;display:grid;position:fixed;inset:0}@media (aspect-ratio<=4/5){.start{place-items:start center}.start-card{padding-block:5vh 0!important}}.start-art{background:#2f9fcf url(/art/key-reef.webp) 50% 30%/cover no-repeat;position:absolute;inset:0}.start-card{justify-items:center;gap:14px;padding-block-end:3vh;display:grid;position:relative}.start-card h1{color:var(--cream);text-shadow:0 3px 0 var(--ink), 0 6px 18px #0f3a5273;text-align:center;margin:0;font-family:Fraunces,serif;font-size:clamp(2.2rem,6vw,3.6rem);font-weight:900}.byline{color:var(--ink);background:var(--card);border-radius:999px;margin:0;padding:4px 14px;font-weight:700}.stage{touch-action:none;background:url(/art/backdrop.webp) 50%/cover no-repeat,linear-gradient(#8fe6f6,#4cb6dc 28%,#2f9fcf 50%,#2790c4 75%,#1f7db3);position:fixed;inset:0}.stage canvas{position:absolute;inset:0}.thumb{background:0 0;position:fixed;inset:0}.thumb canvas{position:absolute;inset:0}html:has(.thumb){background:0 0}html:has(.thumb) body{background:0 0}html:has(.thumb) #root{background:0 0}.bar{gap:var(--gap);padding-inline:max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));pointer-events:none;z-index:10;display:flex;position:absolute;inset-inline:0}.bar>*{pointer-events:auto}.bar.top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;inset-block-start:max(12px, env(safe-area-inset-top))}.bar.bottom{flex-direction:column;align-items:center;inset-block-end:max(12px, env(safe-area-inset-bottom))}.seg{background:var(--card);border-radius:999px;gap:8px;padding:6px;display:flex;box-shadow:0 6px 18px #0f3a5229}.seg .btn{box-shadow:none;background:0 0}.seg .btn.on{background:var(--sun)}.tools{gap:10px;display:flex}.picker{background:var(--card);border-radius:var(--radius);align-items:center;gap:8px;max-inline-size:min(560px,100vw - 24px);padding:8px;display:flex;box-shadow:0 8px 22px #0f3a522e}.strip{scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;inline-size:min(364px,100vw - 190px);padding-block:6px;padding-inline:4px;display:flex;overflow-x:auto}.strip::-webkit-scrollbar{display:none}.arrow{background:#fff;flex:none;min-block-size:64px;min-inline-size:64px;font-size:1.3rem}[dir=rtl] .flip{display:inline-block;transform:scaleX(-1)}.pick{scroll-snap-align:start;background:#fff;border:4px solid #0000;border-radius:22px;flex:none;justify-items:center;gap:2px;min-block-size:128px;inline-size:112px;padding:6px 8px 8px;font-size:1rem;font-weight:800;transition:transform .15s;display:grid}.pick-art{place-items:center;block-size:88px;inline-size:88px;display:grid;position:relative}.pick-art img{object-fit:contain;pointer-events:none;block-size:100%;inline-size:100%;position:absolute;inset:0}.pick-emoji{font-size:3.2rem}.pick.on{border-color:var(--coral);background:#fff3d1;transform:translateY(-4px)}.pick:active{transform:scale(.96)}.hint{text-align:center;pointer-events:none;z-index:5;font-size:3.4rem;animation:1.4s ease-in-out infinite bob;position:absolute;inset-block-start:46%;inset-inline:0}@keyframes bob{50%{transform:translateY(14px)}}.loading{z-index:20;text-align:center;background:#2f9fcfd1;place-content:center;justify-items:center;gap:14px;padding:24px;font-size:1.4rem;font-weight:800;display:grid;position:absolute;inset:0}.loading img{animation:1.2s ease-in-out infinite bob}.facts{z-index:15;background:var(--card);border-radius:var(--radius);inline-size:min(420px,42vw);padding:14px;position:absolute;inset-block-start:100px;inset-inline-end:max(16px, env(safe-area-inset-right));box-shadow:0 10px 30px #0f3a5240}.facts-head{justify-content:space-between;align-items:center;margin-block-end:8px;display:flex}.facts ul{gap:10px;margin:0;padding:0;list-style:none;display:grid}.fact{text-align:start;background:#fff;border:4px solid #0000;border-radius:22px;align-items:center;gap:14px;min-block-size:84px;inline-size:100%;padding:10px 16px;display:flex}.fact.speaking{border-color:var(--coral);background:#fff3d1}.fact-icon{font-size:2.2rem}.fact-text{flex:1;line-height:1.15;display:grid}.fact-text small{opacity:.7;font-weight:700}.fact-text strong{font-family:Fraunces,serif;font-size:1.35rem;font-weight:800}.fact-text em{opacity:.75;font-style:normal;font-weight:700}.fact-speaker{opacity:.6;font-size:1.4rem}.gate{background:conic-gradient(var(--coral) calc(var(--p,0) * 360deg), var(--cream) 0);position:relative}.gate:after{content:"";background:var(--cream);border-radius:999px;position:absolute;inset:6px}.gate span{z-index:1;position:relative}.modal{z-index:50;background:#0f3a528c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal-card{background:var(--cream);border-radius:var(--radius);gap:12px;max-block-size:100%;max-inline-size:520px;padding:24px;display:grid;overflow:auto}.modal-card h2{margin:0;font-family:Fraunces,serif}.modal-card p{margin:0;font-size:1.05rem;line-height:1.45}@media (width<=700px),(aspect-ratio<=4/5){.facts{z-index:16;max-block-size:62dvh;inline-size:auto;inset-block:auto 12px;inset-inline:12px;overflow:auto}.facts .fact{min-block-size:72px}.stage:has(.facts) .bar.bottom{display:none}.pick{min-block-size:118px;min-inline-size:92px}.pick-art{block-size:70px;inline-size:70px}.seg .btn{padding-inline:14px;font-size:1rem}}@media (height<=520px){.bar.top .seg .btn{min-block-size:64px}.pick{min-block-size:108px}.pick-art{block-size:60px;inline-size:60px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.stage>div:first-child{transition:inset .25s;inset:0;block-size:auto!important;inline-size:auto!important;position:absolute!important}@media (width>=701px) and (aspect-ratio>=4/5){.stage:has(.facts)>div:first-child{inset-inline-end:min(440px,44vw)}}@media (width<=700px),(aspect-ratio<=4/5){.stage:has(.facts)>div:first-child{inset-block-end:56dvh}}.puff-bubble{z-index:30;background:var(--card);pointer-events:none;border-radius:26px;align-items:center;gap:10px;max-inline-size:min(360px,60vw);padding:8px 18px 8px 10px;animation:.25s ease-out pop;display:flex;position:fixed;inset-block-start:112px;inset-inline-start:max(16px, env(safe-area-inset-left));box-shadow:0 8px 22px #0f3a5238}.puff-bubble p{margin:0;font-size:1.1rem;font-weight:800;line-height:1.25}@keyframes pop{0%{opacity:0;transform:scale(.85)}}@media (width<=700px){.puff-bubble{max-inline-size:calc(100vw - 32px);inset-block-start:190px}}@media (width>=701px) and (aspect-ratio>=4/5){.stage:has(.facts) .bar.bottom{inset-inline-end:min(440px,44vw)}.stage:has(.facts) .picker{max-inline-size:calc(100vw - min(440px,44vw) - 32px)}.stage:has(.facts) .strip{inline-size:min(364px,100vw - min(440px,44vw) - 190px)}}.facts{max-block-size:calc(100dvh - 124px);overflow:auto}.kid{aspect-ratio:401/640;pointer-events:none;transform-origin:50% 100%;position:relative}.kid-body{transform-origin:50% 100%;animation:3.4s ease-in-out infinite breathe;position:absolute;inset:0}.kid-body img{opacity:0;block-size:100%;inline-size:100%;position:absolute;inset:0}.kid-body img.on{opacity:1}.kid-cheer .kid-body{animation:.5s ease-in-out 3 cheer}.kid-talking .kid-body{animation:.28s ease-in-out infinite talk}@keyframes breathe{50%{transform:scaleY(1.018)}}@keyframes cheer{50%{transform:translateY(-9%)}}@keyframes talk{50%{transform:scale(1.015,.99)}}.kid-small{block-size:clamp(110px,18vh,170px)}.kid-start{z-index:2;filter:drop-shadow(0 6px 10px #0f3a524d);block-size:min(42vh,360px);position:absolute;inset-block-end:0;inset-inline-start:max(12px,4vw)}.kid-corner{z-index:4;block-size:clamp(130px,26vh,250px);position:fixed;inset-block-end:0;inset-inline-start:max(12px,2vw)}.cast{pointer-events:none;align-items:flex-end;gap:4px;display:flex}.puff-small{transform-origin:50% 80%;block-size:56px;inline-size:56px;margin-block-end:6px}.puff-talking{animation:.4s ease-in-out infinite puffy}@keyframes puffy{50%{transform:scale(1.12)}}.bar.bottom .row{grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;inline-size:100%;display:grid}.bar.bottom .row .cast{grid-column:1;justify-self:start}.bar.bottom .row .tell{grid-column:2}.puff-bubble.from-kid{background:#fff3d1}.bubble-kid{object-fit:contain;block-size:64px;inline-size:auto!important}@media (width<=700px),(aspect-ratio<=4/5){.kid-small{block-size:96px}.bar.bottom .row{grid-template-columns:auto 1fr}.bar.bottom .row .tell{grid-column:2;justify-self:end;min-block-size:72px;padding-inline:20px;font-size:1.2rem}.kid-corner{block-size:120px}.kid-start{block-size:30vh}}@media (prefers-reduced-motion:reduce){.kid-body,.puff-talking,.kid-cheer .kid-body,.kid-talking .kid-body{animation:none!important}}@media (width>=700px) and (aspect-ratio>=4/5){.bar.bottom{grid-template-columns:auto minmax(0,auto) auto;justify-content:space-between;align-items:end;column-gap:12px;display:grid}.bar.bottom .row{display:contents}.bar.bottom .cast{grid-area:1/1;justify-self:start}.bar.bottom .picker{grid-area:1/2}.bar.bottom .row .tell{grid-area:1/3;place-self:center end;min-block-size:84px;padding-inline:28px}.stage:has(.facts) .bar.bottom{justify-content:start}.stage:has(.facts) .strip{inline-size:min(364px,100vw - min(440px,44vw) - 350px)}}@media (width>=700px) and (width<=959px) and (aspect-ratio>=4/5){.bar.bottom .row .tell{min-block-size:72px;padding-inline:18px;font-size:1.1rem}.bar.bottom .picker{max-inline-size:calc(100vw - 330px)}.stage .strip{inline-size:min(364px,100vw - 470px)}}@media (width>=700px) and (height<=520px){.bar.bottom .row .tell{min-block-size:64px;padding-inline:18px;font-size:1.1rem}.bar.bottom .picker{max-inline-size:calc(100vw - 340px)}.stage .strip{inline-size:min(364px,100vw - 480px)}.kid-small{block-size:90px}}.game{z-index:25;background:#2f9fcf url(/art/backdrop.webp) 50%/cover no-repeat;grid-template-rows:auto auto minmax(0,1fr);display:grid;position:fixed;inset:0;overflow:hidden}.game .bar.game-top{padding-block:max(12px, env(safe-area-inset-top)) 8px;flex-wrap:nowrap;justify-content:flex-start;align-items:center;position:static}.game-title{background:var(--card);border-radius:999px;margin:0;padding:8px 22px;font-family:Fraunces,serif;font-size:clamp(1.3rem,4vw,2.1rem)}.game-board{min-block-size:0;padding:8px max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom));place-content:center;justify-items:center;gap:16px;display:grid;position:relative}.menu-grid{grid-auto-flow:column;gap:20px}.menu-btn{background:var(--cream);border:0;border-radius:36px;align-content:center;justify-items:center;gap:12px;min-block-size:240px;inline-size:min(280px,40vw);padding:14px;font-size:1.5rem;font-weight:800;display:grid;box-shadow:0 8px #0f3a522e,0 12px 24px #0f3a522e}.menu-btn:active{transform:translateY(4px)}.menu-icon{font-size:3.6rem}@media (width<=700px),(aspect-ratio<=4/5){.menu-grid{grid-auto-flow:row}.menu-btn{grid-auto-flow:column;justify-content:center;min-block-size:140px;inline-size:min(340px,86vw)}.menu-icon{font-size:2.6rem}}.wiggle{animation:.5s ease-in-out wiggle}@keyframes wiggle{20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}.sparkles{pointer-events:none;z-index:8;justify-content:center;align-items:center;gap:16px;font-size:3rem;display:flex;position:absolute;inset:0}.sparkles span{animation:1.4s ease-out forwards rise;animation-delay:calc(var(--i) * 70ms);opacity:0}@keyframes rise{0%{opacity:0;transform:translateY(40px)scale(.4)}30%{opacity:1}to{opacity:0;transform:translateY(-120px)scale(1.2)}}.spark-at{pointer-events:none;z-index:12;place-items:center;font-size:2rem;display:grid;position:absolute;inset:0}.spark-at span{animation:1s ease-out forwards spark;animation-delay:calc(var(--i) * 80ms);opacity:0;--a:calc(var(--i) * 90deg + 20deg);grid-area:1/1}@keyframes spark{0%{opacity:0;transform:scale(.3)}25%{opacity:1}to{transform:rotate(var(--a)) translateY(-56px) scale(1.2);opacity:0}}.done{text-align:center;gap:18px}.done h2{background:var(--card);border-radius:999px;margin:0;padding:8px 28px;font-family:Fraunces,serif;font-size:clamp(1.8rem,6vw,2.4rem)}.done-emoji{font-size:4.5rem}.done-btns{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.done.overlay{z-index:20;background:#0f3a5259;place-content:center;position:absolute;inset:0}.game-cast{pointer-events:none;z-index:3;position:absolute;inset-block-end:0;inset-inline-start:max(8px, env(safe-area-inset-left))}.game-cast .kid-small{block-size:clamp(90px,16vh,150px)}@media (aspect-ratio<=4/5),(width<=600px){.game-cast{display:none}}.game-board.count{grid-template-rows:minmax(0,1fr) auto;place-content:stretch;justify-self:center;justify-items:stretch;inline-size:min(100%,1000px)}.tank{border-radius:var(--radius);border:6px solid var(--cream);background:linear-gradient(#ffffff1f,#0f3a5233),url(/art/backdrop.webp) 50%/cover;grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(4,1fr);min-block-size:0;padding:8px;display:grid;box-shadow:0 10px 28px #0f3a5247}@media (aspect-ratio<=4/5),(width<=600px){.tank{grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(3,1fr)}}.tank-cell{place-items:center;min-block-size:0;min-inline-size:0;display:grid;position:relative}.fish{block-size:min(130px,92%);min-block-size:64px;inline-size:min(130px,92%);min-inline-size:64px;transform:translate(var(--dx), var(--dy));animation:4.5s ease-in-out infinite drift;animation-delay:var(--d);background:0 0;border:0;padding:0;position:relative}.fish img{object-fit:contain;pointer-events:none;block-size:100%;inline-size:100%;transition:filter .2s}.fish.flip img{transform:scaleX(-1)}.fish.lit img{filter:drop-shadow(0 0 10px #ffe27a)drop-shadow(0 0 18px #ffc93c)}.fish.lit{animation:none}.fish.lit img{animation:.5s ease-out hop}@keyframes drift{50%{transform:translate(calc(var(--dx) + 3%), calc(var(--dy) - 4%))}}@keyframes hop{40%{transform:translateY(-14px)scale(1.12)}}.fish-num{background:var(--sun);border:3px solid var(--ink);border-radius:999px;place-items:center;block-size:40px;min-inline-size:40px;padding-inline:8px;font-size:1.5rem;font-weight:800;display:grid;position:absolute;inset-block-end:-2%;inset-inline-end:-2%}.answers{visibility:hidden;justify-content:center;justify-self:center;gap:18px;padding-block-end:4px;display:flex}.answers.show{visibility:visible;animation:.3s ease-out pop}.answer{background:var(--sun);block-size:96px;inline-size:104px;color:var(--ink);border:0;border-radius:30px;font-family:Fraunces,serif;font-size:3.4rem;font-weight:900;box-shadow:0 7px #0f3a5240,0 10px 20px #0f3a5233}.answer:active{transform:translateY(4px)}@media (height<=700px){.answer{block-size:80px;font-size:2.8rem}}.game-board.clean{place-content:stretch;justify-self:center;justify-items:stretch;inline-size:min(100%,1000px)}.reef-panel{border-radius:var(--radius);border:6px solid var(--cream);min-block-size:0;filter:saturate(calc(.55 + var(--clean,0) * .55)) brightness(calc(.82 + var(--clean,0) * .28));background:linear-gradient(#ffffff1a,#0f3a522e),url(/art/backdrop.webp) 50%/cover;grid-template-rows:auto minmax(0,1fr);padding:8px;transition:filter .8s;display:grid;position:relative;box-shadow:0 10px 28px #0f3a5247}.water-murk{border-radius:inherit;opacity:calc((1 - var(--clean,0)) * .3);pointer-events:none;z-index:1;background:#5b7a5a;transition:opacity .8s;position:absolute;inset:0}.reef-panel>:not(.water-murk){z-index:2;position:relative}.boat{justify-self:center;place-items:center;inline-size:clamp(150px,26vw,230px);padding:4px;display:grid;position:relative}.boat svg{block-size:auto;max-block-size:18dvh;inline-size:100%}.boat.bounce{animation:.5s ease-out hop}.reef-grid{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(4,1fr);min-block-size:0;display:grid}@media (aspect-ratio<=4/5),(width<=600px){.reef-grid{grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(3,1fr)}}.reef-cell{place-items:center;min-block-size:0;min-inline-size:0;display:grid;position:relative}.reef-cell img{object-fit:contain;pointer-events:none;block-size:min(120px,90%);min-block-size:64px;inline-size:min(120px,90%);min-inline-size:64px}.reef-cell img.deco{opacity:.95}.friend{opacity:0;transition:none;transform:translate(-180%)scale(.6)}.friend.back{opacity:1;transition:transform 1.2s ease-out,opacity .6s;transform:none}.litter{touch-action:none;cursor:grab;place-items:center;block-size:min(120px,90%);min-block-size:64px;inline-size:min(120px,90%);min-inline-size:64px;transition:transform .2s;display:grid}.litter img{object-fit:contain;filter:drop-shadow(0 4px 4px #0f3a5259);block-size:100%;inline-size:100%}.litter.dragging{cursor:grabbing;transition:none}.litter.lifting{pointer-events:none;transition:transform .65s ease-in,opacity .65s}.shine:after{content:"✨  ✨  ✨";pointer-events:none;z-index:5;letter-spacing:.6em;place-items:center;font-size:4rem;animation:1.6s ease-in-out infinite twinkle;display:grid;position:absolute;inset:0}@keyframes twinkle{50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.sparkles span{opacity:1;animation:none!important}.spark-at{display:none}.friend.back,.litter.lifting{transition:none}}.games-btn{background:var(--sun)}.game .game-top{grid-row:1}.game .game-caption{min-block-size:76px;padding-inline:max(16px, env(safe-area-inset-left));grid-row:2;justify-content:flex-start;align-items:center;display:flex}.game .game-board{grid-row:3}.game .puff-bubble{max-inline-size:min(560px,100%);position:static;inset:auto}@media (width<=700px){.game .game-caption{min-block-size:104px}.game .puff-bubble{max-inline-size:100%}}@media (height<=520px){.game .game-caption{min-block-size:64px}}.tank,.reef-panel,.reef-grid,.answers{min-inline-size:0}.answers{inline-size:100%}.answer{flex:1 1 0;inline-size:auto;min-inline-size:64px;max-inline-size:104px}@media (width<=360px){.game .game-caption{min-block-size:92px}.game .puff-bubble p{font-size:1rem}.tank,.reef-panel{border-width:4px;padding:4px}.answer{block-size:72px;font-size:2.6rem}.game-board{gap:10px;padding-block-start:4px}.boat{inline-size:120px;padding:0}.game-title{padding-inline:14px}}@media (height<=520px){.game{grid-template-rows:auto minmax(0,1fr);grid-template-columns:auto minmax(0,1fr)}.game .game-top{grid-area:1/1;padding-block:6px 4px}.game .game-top .btn{min-block-size:64px}.game .game-title{display:none}.game .game-caption{min-block-size:64px;padding-block:6px 4px;padding-inline:0 max(16px, env(safe-area-inset-right));grid-area:1/2}.game .puff-bubble{max-inline-size:100%;padding:4px 14px 4px 8px}.game .puff-bubble p{font-size:1rem;line-height:1.2}.game .puff-bubble img{block-size:48px;inline-size:auto}.game .game-board{grid-area:2/1/auto/-1;gap:10px;padding-block:2px 6px}.game-cast{display:none}.menu-btn{min-block-size:150px}.menu-icon{font-size:2.6rem}.game-board.count{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto}.tank{border-width:4px;padding:2px}.answers{flex-direction:column;align-self:center;gap:10px;inline-size:auto;padding:0}.answer{border-radius:22px;flex:none;block-size:64px;inline-size:92px;font-size:2.4rem}.reef-panel{border-width:4px;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto;padding:2px}.reef-panel .boat{grid-area:1/2;align-self:start;inline-size:clamp(110px,20vw,160px)}.boat svg{max-block-size:none}.reef-panel .reef-grid{grid-area:1/1}.done.overlay .done-emoji{font-size:2.6rem}}