*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100%;left:50%;transform:translate(-50%);background:#0b3d5b;color:#fff;padding:8px 16px;border-radius:0 0 8px 8px;z-index:999;font-size:.9rem;text-decoration:none;transition:top .2s}.skip-link:focus{top:0}:focus-visible{outline:2px solid #5ec4ff;outline-offset:3px}:focus:not(:focus-visible){outline:none}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}html,body{height:100%;overflow:hidden;font-family:Comic Sans MS,Chalkboard SE,cursive,sans-serif;background:#0a1628}main{width:100%;height:100%}.svg-filters{position:absolute;width:0;height:0;overflow:hidden}.aquarium{position:relative;width:100%;height:100%;background:linear-gradient(180deg,#1a8fc4,#14729e 20%,#0e5a7e,#0b3d5b 70%,#072a3f);overflow:hidden}.stars{position:absolute;inset:0;z-index:1;pointer-events:none}.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.2}to{opacity:.9}}.particles{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.particle{position:absolute;width:2px;height:2px;background:#ffffff40;border-radius:50%;animation:drift linear forwards}@keyframes drift{0%{transform:translate(0);opacity:0}10%{opacity:.4}90%{opacity:.3}to{transform:translate(60px,-40px);opacity:0}}.water-surface{position:absolute;top:0;left:-10%;width:120%;height:6px;background:repeating-linear-gradient(90deg,#ffffff14,#ffffff05,#ffffff14 80px);animation:shimmer 4s linear infinite;z-index:10}@keyframes shimmer{0%{transform:translate(0)}to{transform:translate(80px)}}.sand{position:absolute;bottom:0;width:100%;height:12%;background:linear-gradient(0deg,#d4a843,#c49a3a 40%,#b08a32);border-radius:60% 60% 0 0/30px 30px 0 0;z-index:5}.sand:before{content:"";position:absolute;top:-6px;left:0;width:100%;height:12px;background:repeating-radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.06) 0px,transparent 8px)}.sand-title{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);text-align:center;padding-left:16px;padding-right:84px;font-family:Comic Sans MS,Chalkboard SE,cursive,sans-serif;font-size:clamp(1rem,4vw,4rem);font-weight:700;letter-spacing:.1em;white-space:nowrap;color:transparent;background:linear-gradient(180deg,#9a7a28,#8b6b20,#7a5c18);background-clip:text;-webkit-background-clip:text;text-shadow:1px 1px 0 rgba(212,168,67,.6),-1px -1px 0 rgba(100,70,15,.3);filter:url(#sand-roughness);user-select:none;pointer-events:none}.seaweed{position:absolute;bottom:8%;width:18px;border-radius:50% 50% 0 0;z-index:6;transform-origin:bottom center;animation:sway 3s ease-in-out infinite alternate}.seaweed:before,.seaweed:after{content:"";position:absolute;width:100%;border-radius:50%}.seaweed-1{left:8%;height:120px;background:linear-gradient(0deg,#1a6b3a,#2ecc71);animation-duration:3.2s}.seaweed-2{left:12%;height:90px;background:linear-gradient(0deg,#1a5c30,#27ae60);animation-duration:2.8s;animation-delay:.5s}.seaweed-3{right:15%;height:110px;background:linear-gradient(0deg,#1a6b3a,#2ecc71);animation-duration:3.5s;animation-delay:1s}.seaweed-4{right:10%;height:80px;background:linear-gradient(0deg,#1a5c30,#27ae60);animation-duration:2.6s;animation-delay:.3s}@keyframes sway{0%{transform:rotate(-6deg)}to{transform:rotate(6deg)}}.rock{position:absolute;bottom:6%;border-radius:50% 50% 45% 45%;z-index:6}.rock-1{left:5%;width:70px;height:40px;background:linear-gradient(135deg,#6b7b8d,#4a5568)}.rock-2{right:8%;width:55px;height:32px;background:linear-gradient(135deg,#7b8a9d,#556270)}.bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ffffff80,#ffffff1a);border:1px solid rgba(255,255,255,.25);animation:rise linear forwards;z-index:4}@keyframes rise{0%{transform:translateY(0) translate(0);opacity:.8}50%{transform:translateY(-45vh) translate(12px);opacity:.5}to{transform:translateY(-95vh) translate(-8px);opacity:0}}.fish{position:absolute;left:0;visibility:hidden;z-index:8;will-change:transform;transition:top 3s ease-in-out,opacity .5s;cursor:pointer}.fish img{display:block;height:75px;width:auto;max-width:150px;object-fit:contain;border-radius:40%;border:3px solid rgba(255,255,255,.25);box-shadow:0 0 12px #64c8ff4d,0 0 24px #64c8ff26;background:radial-gradient(ellipse at center,rgba(100,200,255,.12),transparent 70%)}.fish-mascot img{border:none;border-radius:0;box-shadow:none;background:none}.speech-container{position:absolute;top:50%;transform-origin:left center;display:flex;align-items:center;gap:4px;z-index:20;pointer-events:none;animation:bubble-pop 3s ease-in-out forwards}.speech-dot{flex-shrink:0;border-radius:50%;background:#ffffffd9;box-shadow:0 1px 3px #00000026;animation:dot-pop 3s ease-in-out forwards}@keyframes dot-pop{0%{opacity:0;transform:scale(0)}8%{opacity:1;transform:scale(1)}80%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.5)}}.speech-bubble{width:max-content;max-width:30ch;padding:8px 12px;background:#ffffffe6;color:#0b3d5b;font-family:Comic Sans MS,Chalkboard SE,cursive,sans-serif;font-size:.75rem;font-weight:700;border-radius:12px;box-shadow:0 2px 8px #0003}@keyframes bubble-pop{0%{opacity:0;transform:translateY(-50%) scale(.5)}10%{opacity:1;transform:translateY(-50%) scale(1)}80%{opacity:1;transform:translateY(-50%) scale(1)}to{opacity:0;transform:translateY(-60%) scale(.8)}}@media(max-width:600px){.speech-bubble{font-size:.6rem;padding:4px 8px}.speech-container{gap:3px}.sand-title{letter-spacing:.05em;font-size:clamp(1rem,5vw,2rem);white-space:normal;word-break:break-word;line-height:1.3}}.controls{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:100}.controls-drawer,.controls-drawer-items{display:contents}.phase-toggle,.sound-toggle,.gallery-toggle,.info-toggle,.controls-drawer-toggle{width:48px;height:48px;border:none;background:#fff3;backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:manipulation}.controls-drawer-toggle{display:none;border-radius:50%;transition:background .2s}.controls-drawer-toggle:hover{background:#ffffff59}.controls-drawer-toggle[aria-expanded=true]{background:#5ec4ff66}.phase-toggle:active,.sound-toggle:active,.gallery-toggle:active,.info-toggle:active,.controls-drawer-toggle:active{background:#ffffff73;transform:scale(.95)}@media(max-height:500px)and (orientation:landscape){.controls{flex-direction:row;flex-wrap:wrap;width:104px;justify-content:flex-end;bottom:12px;right:12px}}@media(max-height:500px){.bottom-bar{display:none}}.bottom-bar{position:fixed;bottom:20px;left:20px;display:flex;align-items:center;gap:6px;padding:6px 14px;background:#00000080;backdrop-filter:blur(8px);color:#ffffffe6;font-family:Comic Sans MS,Chalkboard SE,cursive,sans-serif;font-size:.75rem;border-radius:20px;z-index:100}.bottom-sep{opacity:.4}.bottom-legal{color:#fffc;text-decoration:none;transition:color .2s;padding:8px 4px;margin:-8px -4px}.bottom-legal:hover{color:#ffffffe6}.bottom-legal:focus-visible{outline:2px solid #5ec4ff;outline-offset:2px;border-radius:3px}.phase-toggle{border-radius:50%;transition:background .2s,width .2s,border-radius .2s;overflow:hidden;white-space:nowrap}.phase-toggle svg{display:block;flex-shrink:0}.phase-toggle:hover{background:#ffffff59}.phase-toggle[aria-pressed=true]{background:#5ec4ff66}.phase-label{font-family:Comic Sans MS,Chalkboard SE,cursive,sans-serif;font-size:0;font-weight:700;opacity:0;max-width:0;transition:font-size .2s,opacity .2s,max-width .2s}.phase-toggle:hover .phase-label,.phase-toggle:focus .phase-label,.phase-toggle.phase-showing .phase-label{font-size:.7rem;opacity:1;max-width:80px}.phase-toggle:hover,.phase-toggle:focus,.phase-toggle.phase-showing{width:auto;padding:0 14px 0 12px;border-radius:24px;gap:4px}.sound-toggle{border-radius:50%;transition:background .2s,opacity .2s}.sound-toggle svg{display:block}.sound-toggle:hover{background:#ffffff59}.sound-toggle[aria-pressed=true]{background:#5ec4ff66}.sound-toggle[aria-pressed=false]{opacity:.5}.gallery-toggle{border-radius:50%;transition:background .2s}.gallery-toggle svg{display:block}.gallery-toggle:hover{background:#ffffff59}.gallery-panel{position:fixed;inset:0;background:#072a3ff2;backdrop-filter:blur(12px);color:#e0f0ff;padding:max(2rem,env(safe-area-inset-top)) max(2rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(2rem,env(safe-area-inset-left));overflow-y:auto;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}.gallery-panel.visible{opacity:1;pointer-events:auto}.gallery-panel h2{color:#5ec4ff;margin-bottom:1rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;margin-top:1rem}.gallery-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;background:#ffffff0f;border-radius:12px;padding:.8rem;transition:background .2s;min-height:160px}.gallery-card:hover{background:#ffffff1f}.gallery-card img{width:100%;height:100px;object-fit:contain;border-radius:8px;flex-shrink:0}.gallery-name{display:block;margin-top:.5rem;font-family:Comic Sans MS,Chalkboard SE,cursive,sans-serif;font-size:.85rem;color:#7dd6ff;font-weight:700}.gallery-close{position:absolute;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));background:#ffffff1a;border:none;border-radius:50%;color:#e0f0ff;font-size:2rem;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:background .2s;touch-action:manipulation}.gallery-close:hover{background:#fff3}@media(max-width:600px)and (orientation:portrait),(max-height:500px)and (orientation:landscape){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.6rem}.bottom-bar{display:none}.controls{flex-direction:column;width:auto}.controls-drawer{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.controls-drawer-items{display:flex;flex-direction:column;align-items:flex-end;gap:8px;overflow:hidden;max-height:0;transition:max-height .25s ease}.controls-drawer.open .controls-drawer-items{max-height:180px}.controls-drawer-toggle{display:flex}}.info-toggle{border-radius:50%;font-size:1.4rem;font-weight:700;transition:background .2s}.info-toggle:hover{background:#ffffff59}.info-panel{position:fixed;inset:0;background:#072a3ff2;backdrop-filter:blur(12px);color:#e0f0ff;padding:max(2rem,env(safe-area-inset-top)) max(2rem,env(safe-area-inset-right)) max(2rem,env(safe-area-inset-bottom)) max(2rem,env(safe-area-inset-left));overflow-y:auto;z-index:200;opacity:0;pointer-events:none;transition:opacity .3s}.info-panel.visible{opacity:1;pointer-events:auto}.info-panel h1{font-size:2rem;margin-bottom:.5rem;color:#5ec4ff}.info-mascot{display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}.info-mascot-img{width:64px;height:64px;flex-shrink:0}.info-panel h2{margin:0;color:#5ec4ff}.mascot-speech{background:#ffffff14;border-left:3px solid #5ec4ff;border-radius:0 8px 8px 0;padding:.6rem 1rem;margin:.8rem 0;line-height:1.6}.info-panel a{color:#7dd6ff;text-decoration:underline}.help-list{list-style:none;padding-left:0;line-height:2}.help-list li{display:flex;align-items:center;gap:.6rem}.help-icon{width:20px;height:20px;flex-shrink:0;color:#7dd6ff}.help-icon-text{display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:1.5px solid #7dd6ff;border-radius:50%}.legal-note{margin-top:1rem;font-size:.75rem;opacity:.6;line-height:1.5;font-style:italic}.info-panel h3{margin-top:1.2rem;margin-bottom:.4rem;color:#7dd6ff}.info-panel ol{padding-left:1.4rem;line-height:1.8}.info-panel pre{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-size:.85rem;margin-top:.5rem}.info-panel code{color:#7dd6ff}.info-close{position:absolute;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));background:#ffffff1a;border:none;border-radius:50%;color:#e0f0ff;font-size:2rem;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;transition:background .2s;touch-action:manipulation}.info-close:hover{background:#fff3}@media(max-width:600px){.fish img{height:55px;max-width:110px}.seaweed-1{height:80px}.seaweed-2{height:60px}.seaweed-3{height:70px}.seaweed-4{height:50px}.sand{height:15%}.info-panel,.gallery-panel{padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.info-panel h1{font-size:1.5rem}}@media(max-width:1200px){.sand{height:15%}}@media(orientation:landscape){.sand-title{font-size:clamp(.65rem,2vmin,1.2rem)}}@media(max-width:900px)and (orientation:landscape){.fish img{height:65px;max-width:130px}}@media(min-width:601px)and (max-width:1023px){.fish img{height:75px;max-width:150px}}@media(min-width:1024px)and (max-width:1439px){.fish img{height:90px;max-width:180px}}@media(min-width:1440px)and (max-width:1919px){.fish img{height:110px;max-width:220px}}@media(min-width:1920px){.fish img{height:130px;max-width:260px}}