.bubble-sound-shell{position:relative;min-height:100svh;overflow:hidden;padding:78px 14px 0;color:#285b78;background:radial-gradient(circle at 18% 8%,#fff9 0 4%,transparent 18%),linear-gradient(180deg,#c9f4ff,#b8e8f4 43%,#b9eadb);isolation:isolate}.bubble-sound-shell:before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 20% 32%,#ffcce555 0 8%,transparent 22%),radial-gradient(circle at 82% 48%,#c7b8ff55 0 10%,transparent 25%)}.ocean-glow{position:absolute;z-index:-2;inset:0;background:repeating-linear-gradient(110deg,transparent 0 90px,#fff3 120px 145px,transparent 175px 250px);animation:water-light 12s linear infinite}.bubble-goal{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(800px,100%);margin:auto;padding:14px 16px 14px 24px;border:5px solid #fff;border-radius:32px;background:#fffdf1eF;box-shadow:0 9px 0 #8fcbd5,0 18px 35px #32677b30}.bubble-goal p{margin:0;color:#6b8da1;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.bubble-goal h1{margin:2px 0;font-size:clamp(22px,4.2vw,36px);line-height:1.05;letter-spacing:-.04em}.bubble-goal h1 strong{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;color:#fff;background:#ff76a8;box-shadow:inset 0 -5px #d94f82}.bubble-goal span{color:#7d7099;font-size:14px;font-weight:800}.bubble-goal button{display:grid;grid-template-columns:auto auto;align-items:center;gap:7px;min-width:110px;min-height:62px;padding:0 16px;cursor:pointer;border:4px solid #fff;border-radius:24px;color:#fff;background:#6f8fe8;box-shadow:0 6px 0 #506ec3}.bubble-goal button:active{translate:0 4px;box-shadow:0 2px #506ec3}.bubble-goal svg{width:27px;height:27px}.bubble-playground{position:relative;width:min(890px,100%);height:clamp(520px,68vh,690px);margin:auto}.number-bubble{--bubble-color:#76d8f0;position:absolute;z-index:3;top:var(--bubble-y);left:var(--bubble-x);display:grid;place-items:center;width:var(--bubble-size);height:var(--bubble-size);cursor:pointer;border:4px solid #ffffffd9;border-radius:50%;color:#fff;background:radial-gradient(circle at 31% 25%,#fff 0 5%,#fff8 6%,transparent 18%),radial-gradient(circle at 62% 70%,transparent 0 45%,#fff5 47%,transparent 55%),color-mix(in srgb,var(--bubble-color) 45%,transparent);box-shadow:inset -14px -17px 25px color-mix(in srgb,var(--bubble-color) 55%,transparent),inset 9px 10px 18px #fff8,0 12px 24px #3b78954d;animation:bubble-float 4.5s var(--bubble-delay) ease-in-out infinite alternate;touch-action:manipulation}.number-bubble i{position:absolute;top:17%;left:20%;width:19%;height:10%;border-radius:50%;background:#fff;rotate:-35deg;opacity:.85}.number-bubble span{font-size:clamp(49px,8vw,72px);font-weight:1000;line-height:1;text-shadow:0 5px 0 #37677d55}.number-bubble:hover{filter:brightness(1.08)}.number-bubble:focus-visible{outline:7px solid #ffdd57;outline-offset:5px}.bubble-color-2{--bubble-color:#ff91bd}.bubble-color-3{--bubble-color:#998bf2}.bubble-color-4{--bubble-color:#62d6ae}.bubble-color-5{--bubble-color:#ffba69}.number-bubble.is-popped{pointer-events:none;animation:bubble-pop .28s ease-out forwards}.sea-floor{z-index:1;right:-20vw;bottom:-70px;left:-20vw;height:175px;padding:25px 22vw 0;align-items:flex-start;justify-content:space-around;border-radius:50% 50% 0 0;background:#8ed2b3;box-shadow:inset 0 12px #b9efd1;font-size:48px}.sea-floor,.seaweed{position:absolute;display:flex}.seaweed{z-index:-1;bottom:25px;align-items:flex-end;gap:8px}.seaweed-left{left:3%}.seaweed-right{right:3%;transform:scaleX(-1)}.seaweed i{width:25px;height:150px;border-radius:100% 0;background:#5bb996;rotate:-10deg}.seaweed i:nth-child(2){height:105px;rotate:15deg;background:#70c3a2}.seaweed i:nth-child(3){height:190px;rotate:6deg}.fish{position:absolute;z-index:-1;font-size:48px;opacity:.7}.fish-one{top:28%;left:3%}.fish-two{top:55%;right:4%;transform:scaleX(-1)}.bubble-celebration{position:fixed;z-index:40;inset:0;display:grid;place-items:center;padding:20px;background:#4c7c997a;backdrop-filter:blur(5px)}.bubble-success-card{position:relative;z-index:2;width:min(480px,94vw);padding:24px 30px 34px;text-align:center;border:7px solid #fff;border-radius:46px;background:#fffbd9;box-shadow:0 12px 0 #76bcca,0 24px 50px #28526955;animation:card-pop .55s cubic-bezier(.2,1.45,.4,1)}.success-bubble-icon{font-size:82px}.bubble-success-card p{margin:0;color:#71929e;font-size:18px;font-weight:800}.bubble-success-card h2{margin:2px 0;color:#5c75d9;font-size:clamp(42px,10vw,62px);letter-spacing:-.06em}.bubble-success-card strong{display:block;margin-bottom:24px;color:#ef6699;font-size:30px}.bubble-success-card button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:68px;cursor:pointer;border:4px solid #fff;border-radius:23px;color:#fff;background:#62c78f;box-shadow:0 7px 0 #3c9d69;font-size:clamp(22px,5vw,29px)}.rising-bubbles{position:absolute;inset:0;overflow:hidden}.rising-bubbles i{--size:calc(18px + (var(--i) % 5) * 13px);position:absolute;bottom:-90px;left:calc((var(--i) * 47) % 100 * 1%);width:var(--size);height:var(--size);border:3px solid #fff;border-radius:50%;background:#a8efff55;box-shadow:inset -5px -5px #78cbe566;animation:rise calc(3s + (var(--i) % 4) * .6s) calc((var(--i) % 7) * -.35s) linear infinite}@keyframes bubble-float{to{transform:translate(8px,-20px) rotate(3deg)}}@keyframes bubble-pop{45%{opacity:1;transform:scale(1.22)}to{opacity:0;transform:scale(.05)}}@keyframes water-light{to{background-position:300px 0}}@keyframes card-pop{0%{opacity:0;transform:scale(.5) rotate(-4deg)}}@keyframes rise{to{transform:translateY(-115vh) translateX(35px);opacity:.2}}@media(max-width:620px){.bubble-sound-shell{padding:72px 7px 0}.bubble-goal{padding:10px 9px 10px 15px;border-width:4px}.bubble-goal h1{font-size:20px}.bubble-goal p,.bubble-goal span{font-size:11px}.bubble-goal button{grid-template-columns:1fr;min-width:53px;min-height:53px;padding:0;border-radius:19px}.bubble-goal button b{display:none}.bubble-playground{height:calc(100svh - 180px);min-height:510px}.number-bubble{width:calc(var(--bubble-size) * .72);height:calc(var(--bubble-size) * .72)}.number-bubble span{font-size:48px}.sea-floor{height:130px;font-size:35px}.fish{font-size:34px;opacity:.45}}@media(max-width:390px){.number-bubble{width:calc(var(--bubble-size) * .63);height:calc(var(--bubble-size) * .63)}.number-bubble span{font-size:41px}}@media(prefers-reduced-motion:reduce){.bubble-success-card,.number-bubble,.ocean-glow,.rising-bubbles i{animation-duration:.01ms;animation-iteration-count:1}}.bubble-sound-shell{background:#49bddc}.bubble-sound-shell>.prek-parallax{z-index:-2}.bubble-sound-shell .fish{width:clamp(78px,11vw,130px);height:clamp(78px,11vw,130px);font-size:0;filter:drop-shadow(0 9px 7px #174e7055)}.bubble-playground{background:linear-gradient(180deg,#c8fbff38,#197eaa25)}.sea-floor{height:150px;background:transparent;box-shadow:none}.sea-floor .prek-art-image{position:absolute;right:-3%;bottom:-25px;left:-3%;width:106%;height:190px}.success-bubble-icon{width:120px;height:120px;margin:auto;font-size:0}.bubble-sound-game{--hot:#56c6df;--deep:#247fa8;--sky:#58cdec;--ink:#285b78}.bubble-sound-game .prek-machine{background:#56c6df;box-shadow:0 10px 0 #247fa8,0 22px 42px #174e7045}.bubble-sound-game .prek-status{box-shadow:0 6px 16px #174e7033}.bubble-stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#29bde3}.bubble-stage>.bubble-ocean-far{position:absolute;z-index:0;inset:0;width:100%;height:100%}.bubble-stage>.bubble-ocean-far>img{object-fit:cover;object-position:center}.bubble-stage>.prek-parallax{z-index:1;opacity:1}.bubble-stage>.prek-parallax .prek-parallax-layer-1{display:none}.bubble-stage>.prek-parallax .prek-parallax-layer-2{opacity:.5}.bubble-stage>.prek-parallax .prek-parallax-layer-3{opacity:.78}.bubble-stage>.prek-parallax .prek-parallax-layer-4{opacity:.88}.bubble-stage .bubble-playground{position:absolute;z-index:5;top:108px;right:clamp(20px,5vw,70px);bottom:38px;left:clamp(20px,5vw,70px);width:auto;height:auto;margin:0;background:transparent}.bubble-stage .number-bubble{box-shadow:inset -14px -17px 25px color-mix(in srgb,var(--bubble-color) 55%,transparent),inset 9px 10px 18px #fff8,0 13px 26px #0b527652,0 0 0 2px #ffffff45;backdrop-filter:blur(1.5px)}.bubble-stage .fish{position:absolute;z-index:3;width:clamp(105px,13vw,158px);height:clamp(88px,11vw,132px);opacity:.9;font-size:0;filter:drop-shadow(0 11px 8px #164e7050)}.bubble-stage .fish-one{top:28%;left:1.5%;animation:bubble-fish-swim 7s ease-in-out infinite alternate}.bubble-stage .fish-two{top:61%;right:1.5%;transform:scaleX(-1);animation:bubble-fish-swim-right 8s ease-in-out -2.4s infinite alternate}.bubble-feedback{position:absolute;z-index:10;bottom:12px;left:50%;min-width:220px;margin:0;padding:7px 18px;border-radius:999px;color:#285b78;background:#fffdf0d8;box-shadow:0 6px 16px #164e7030;text-align:center;font-size:15px;font-weight:1000;backdrop-filter:blur(7px);transform:translateX(-50%)}.bubble-feedback.is-correct{color:#307648;background:#edffdfe8}.bubble-feedback.is-wrong{color:#79576d;background:#fff0f5e8}.bubble-sound-game .success-bubble-icon{width:128px;height:128px;margin:0 auto}@keyframes bubble-fish-swim{to{transform:translate(28px,-11px) rotate(2deg)}}@keyframes bubble-fish-swim-right{to{transform:translate(-28px,-10px) scaleX(-1) rotate(2deg)}}@media (max-width:700px){.bubble-stage .bubble-playground{top:132px;right:7px;bottom:42px;left:7px;min-height:0}.bubble-stage .number-bubble{width:calc(var(--bubble-size) * .7);height:calc(var(--bubble-size) * .7)}.bubble-stage .number-bubble span,.bubble-stage .number-bubble-orb b{font-size:46px}.bubble-stage .fish{width:82px;height:74px;opacity:.7}.bubble-stage .fish-one{top:33%}.bubble-stage .fish-two{top:70%}.bubble-feedback{bottom:8px;padding:6px 14px;font-size:13px}}@media (max-width:390px){.bubble-stage .number-bubble{width:calc(var(--bubble-size) * .61);height:calc(var(--bubble-size) * .61)}.bubble-stage .number-bubble span,.bubble-stage .number-bubble-orb b{font-size:40px}}@media (max-height:720px) and (min-width:701px){.bubble-stage .bubble-playground{top:96px;bottom:34px}.bubble-stage .number-bubble{transform:scale(.86);transform-origin:top left}}@media (prefers-reduced-motion:reduce){.bubble-stage .fish-one,.bubble-stage .fish-two{animation:none}}.bubble-stage .number-bubble{box-sizing:border-box;min-width:0;min-height:0;aspect-ratio:1/1;padding:0;overflow:visible;appearance:none;-webkit-appearance:none;border:0;border-radius:999px;background:transparent;box-shadow:none;backdrop-filter:none}.bubble-stage .number-bubble-orb{position:absolute;inset:0;display:grid;place-items:center;box-sizing:border-box;overflow:hidden;border:4px solid #ffffffd9;border-radius:50%;background:radial-gradient(circle at 30% 24%,#fff 0 4%,#ffffffb8 5%,transparent 14%),radial-gradient(circle at 68% 72%,transparent 0 51%,#ffffff3d 56%,transparent 63%),radial-gradient(circle at 43% 40%,color-mix(in srgb,var(--bubble-color) 48%,transparent),color-mix(in srgb,var(--bubble-color) 76%,transparent));box-shadow:inset -14px -17px 25px color-mix(in srgb,var(--bubble-color) 55%,transparent),inset 9px 10px 18px #fff8,0 13px 26px #0b527652,0 0 0 2px #ffffff45;clip-path:circle(50% at 50% 50%);contain:paint}.bubble-stage .number-bubble-orb i{position:absolute;top:17%;left:20%;width:19%;height:10%;border-radius:50%;background:#fff;rotate:-35deg;opacity:.9}.bubble-stage .number-bubble-orb b{position:relative;z-index:2;color:#fff;font-size:clamp(49px,8vw,72px);font-weight:1000;line-height:1;text-shadow:0 5px 0 #37677d55}.bubble-stage .number-bubble.is-popped{pointer-events:none;animation:none}.bubble-stage .number-bubble.is-popped .number-bubble-orb{animation:bubble-pop-real .42s cubic-bezier(.18,.72,.2,1) forwards}.bubble-burst-canvas{position:absolute;z-index:8;inset:0;width:100%;height:100%;pointer-events:none}@keyframes bubble-pop-real{0%{opacity:1;transform:scale(1)}24%{transform:scale(1.16,.91)}46%{transform:scale(.9,1.17)}68%{opacity:1;filter:brightness(1.45);transform:scale(1.3)}to{opacity:0;filter:brightness(1.7);transform:scale(.04)}}@media (prefers-reduced-motion:reduce){.bubble-stage .number-bubble.is-popped{animation:none}.bubble-stage .number-bubble.is-popped .number-bubble-orb{animation:none;opacity:0}}