@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@500;700;800;900&display=swap');
:root{font-family:'Nunito',sans-serif;color:#243964;background:#fcfaff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:4px solid #7256e8;outline-offset:5px}.app{max-width:1160px;margin:auto;padding:25px 42px 20px}header{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;font-size:19px}.brand b{display:block;line-height:1}.brandmark{background:#ffda54;border-radius:15px;padding:12px 9px;font-family:Fredoka,sans-serif;font-weight:600;transform:rotate(-7deg);color:#614017}.quiet,.listen{border:1px solid #e2deed;background:white;border-radius:99px;min-height:48px;padding:10px 20px;font-weight:800;color:#5c527b}main{text-align:center}.eyebrow{margin-top:24px;color:#b22f73;font-size:12px;font-weight:900;letter-spacing:2.2px}h1{font-family:Fredoka,sans-serif;font-size:clamp(34px,4.5vw,55px);font-weight:600;margin:9px 0 8px;line-height:1.15}h1 span{color:#e83989}main>p{margin:0 0 23px;font-size:18px;color:#6e7190}.playground{height:365px;border:2px solid #d2f1f5;border-radius:36px;position:relative;background:linear-gradient(180deg,#e4f8fd 0%,#f0fcff 75%,#ddf7ee 100%);overflow:hidden}.round-label{position:absolute;top:20px;left:24px;background:white;padding:10px 15px;border-radius:14px;font-size:12px;letter-spacing:1.5px;font-weight:900;display:flex;align-items:center;gap:12px}.round-label b{font-size:24px;color:#e83989;line-height:1}.bubble-area{position:absolute;inset:30px 170px 125px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;z-index:2}.bubble{width:106px;height:106px;border-radius:50%;border:3px solid white;background:radial-gradient(circle at 30% 24%,#fff 0%,#ffffffcc 7%,#bceefd 30%,#97dcef 70%,#8ecadf);box-shadow:0 7px 0 #85c8dc40,inset 0 -7px 12px #69bfd130,0 0 0 2px #90d5e340;color:#23587a;font-family:Fredoka,sans-serif;font-size:40px;animation:bob 3s ease-in-out infinite;animation-delay:var(--delay);transition:transform .2s,background .2s;position:relative}.bubble:hover{filter:brightness(1.04)}.bubble.counted{background:#ffd861;color:#735319;animation:pop .4s ease;box-shadow:0 6px 0 #d2b45235;border-color:#fff3ba}.bubble.counted:after{content:'✓';position:absolute;font-family:Nunito,sans-serif;font-size:17px;background:white;border-radius:50%;width:26px;height:26px;right:-1px;bottom:2px}.friends{position:absolute;bottom:-21px;left:50%;transform:translateX(-50%);width:330px;height:174px;overflow:hidden;mix-blend-mode:multiply;pointer-events:none}.friends img{width:100%;height:100%;object-fit:cover;object-position:center;animation:friendBob 4s ease-in-out infinite}.speech{position:absolute;bottom:29px;left:25px;background:#fff;border-radius:20px 20px 2px 20px;padding:15px 19px;font-size:16px;font-weight:900;max-width:230px;transform:rotate(-3deg);z-index:3}.bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:760px;margin:20px auto}.count-display{display:flex;align-items:center;gap:16px;text-align:left}.number{font-family:Fredoka,sans-serif;font-size:50px;font-weight:600;line-height:1;color:#e83989;background:#ffedf6;border-radius:18px;min-width:68px;padding:9px;text-align:center}.count-display strong{display:block;font-size:20px}.count-display div>span{display:block;font-size:14px;color:#73718a;margin-top:3px}.next{background:#f03c8c;color:white;box-shadow:0 5px 0 #c52b6e;border:0;border-radius:18px;padding:17px 24px;font-size:19px;font-weight:900;min-height:60px}.next span{font-size:14px;margin-left:12px}.levels{border-top:1px solid #eee8f1;padding-top:20px;margin-top:24px;display:flex;align-items:center;justify-content:center;gap:23px}.levels>span{font-size:12px;letter-spacing:1.3px;font-weight:900;color:#79718d}.levels>div{display:flex;gap:12px}.level{width:49px;height:49px;border:0;background:#f0edf7;color:#706184;border-radius:16px;font:500 23px Fredoka,sans-serif}.level.active{background:#7359bc;color:#fff;box-shadow:0 4px 0 #564195}.level.completed{background:#dbf2e8;color:#297759}footer{display:flex;justify-content:space-between;gap:15px;margin-top:30px;color:#8b819a;font-size:13px}footer>span{font-size:12px}#confetti{position:absolute;inset:0;pointer-events:none;z-index:4}.confetti{position:absolute;top:-25px;font-size:25px;animation:fall 2.1s ease-in forwards}@keyframes bob{50%{transform:translateY(-9px)}}@keyframes friendBob{50%{transform:translateY(5px) rotate(2deg)}}@keyframes pop{50%{transform:scale(1.2)}}@keyframes fall{to{transform:translateY(430px) rotate(280deg);opacity:0}}[hidden]{display:none!important}@media(max-width:700px){.app{padding:20px 18px}.brand{font-size:15px}.quiet{font-size:14px;padding:9px 13px}.eyebrow{margin-top:30px}h1{font-size:37px}main>p{font-size:16px}.playground{height:400px;border-radius:27px}.round-label{left:16px;top:15px;padding:8px 12px}.bubble-area{inset:72px 15px 145px;gap:12px}.bubble{width:78px;height:78px;font-size:32px}.friends{width:270px;height:145px;bottom:-14px;left:65%}.speech{font-size:13px;padding:12px;bottom:30px;left:12px;max-width:135px}.bottom{gap:10px;flex-wrap:wrap}.count-display{gap:10px}.count-display strong{font-size:18px}.count-display div>span{font-size:12px}.number{font-size:40px;min-width:55px}.next{padding:15px;font-size:16px}.listen{padding:10px 14px;font-size:14px}.levels{flex-direction:column;gap:12px;padding-top:16px;margin-top:19px}footer{text-align:center;justify-content:center;flex-direction:column;gap:5px;margin-top:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.confetti{display:none}}
.friends img{object-fit:contain}.friends{bottom:0;height:170px}.friends img{animation:friendBob 4s ease-in-out infinite}@media(max-width:700px){.friends{bottom:0;height:145px}}
.modes{display:flex;gap:10px;justify-content:center;margin:18px 0 20px;flex-wrap:wrap}.modes button{border:2px solid transparent;background:#f0edf7;color:#544673;border-radius:18px;padding:13px 19px;font-weight:900;min-height:52px;font-size:16px}.modes button[aria-pressed=true]{border-color:#ef4291;background:#ffedf5;color:#ac215f;box-shadow:0 4px 0 #f8d0e3}.adventure{display:flex;justify-content:space-between;align-items:center;padding:0 9px 10px;font-size:14px;font-weight:800;color:#74648d}#stars{display:flex;gap:8px;font-size:27px;line-height:1;color:#d8d1e3}#stars .earned{color:#d99700;text-shadow:0 2px 0 #fff0ad}.friends{pointer-events:auto;background:none;border:none;padding:0;cursor:pointer;border-radius:20px}.friends img{pointer-events:none}.friends:hover{filter:brightness(1.04)}.friends img.react{animation:happy .6s ease-in-out}.friends img.dance{animation:dance .65s ease-in-out 3}.playground[data-mode=feed]{background:linear-gradient(#d8f3ff,#b5edf6)}.playground[data-mode=find]{background:linear-gradient(#f1e7ff,#fff0f8)}.fish{background:#ffffff8a;border-color:white}.fish-icon{display:inline-block;font-size:55px;animation:swim 2.3s ease-in-out infinite}.fish.counted{animation:feed .6s ease-in-out}.number-choice{width:120px;height:130px;border:4px solid white;background:#ffd864;color:#674e18;font:600 64px Fredoka,sans-serif;border-radius:27px;box-shadow:0 8px 0 #dfbe56;transition:transform .2s}.number-choice:nth-child(2){background:#fac4e0;box-shadow:0 8px 0 #d991b7;color:#8c295c}.number-choice:nth-child(3){background:#bcdeff;box-shadow:0 8px 0 #90b8dd;color:#305782}.number-choice.hint{outline:5px solid #ae78e6;animation:hint 1s ease-in-out infinite}.number-choice.correct{background:#b9eacc;box-shadow:0 8px 0 #8bc8a2;color:#245e3a;animation:pop .5s ease}#round-reward{position:absolute;right:25px;bottom:25px;z-index:3;font:600 36px Fredoka,sans-serif;background:#fff5cb;color:#af7200;border:3px solid white;padding:12px 20px;border-radius:22px;transform:rotate(8deg);animation:pop .5s ease}.voice-settings{margin:22px auto 0;max-width:480px;color:#756883;font-size:14px}.voice-settings summary{cursor:pointer;padding:12px}.voice-settings label{display:inline-flex;gap:10px;align-items:center;margin:10px}.voice-settings select{font:inherit;background:white;border:1px solid #ccc0da;border-radius:10px;padding:10px;max-width:210px}.voice-settings p{font-size:13px;line-height:1.5}@keyframes happy{50%{transform:translateY(-16px) rotate(-6deg)}}@keyframes dance{25%{transform:translateY(-10px) rotate(-6deg)}75%{transform:translateY(-10px) rotate(6deg)}}@keyframes swim{50%{transform:translateX(7px) rotate(-8deg)}}@keyframes feed{40%{transform:translate(20px,50px) scale(.6)}100%{transform:none}}@keyframes hint{50%{transform:scale(1.07)}}@media(min-width:701px){.bubble-area{left:130px;right:130px}}@media(max-width:700px){.modes{gap:7px}.modes button{font-size:13px;padding:11px 10px;border-radius:14px}.playground{height:380px}.number-choice{width:85px;height:100px;font-size:50px;border-radius:22px}.bubble-area.find{flex-wrap:nowrap;gap:12px}.fish-icon{font-size:42px}#round-reward{font-size:25px;right:12px;bottom:135px;padding:8px 15px}.eyebrow{margin-top:22px}.adventure{font-size:13px}.bottom{margin-top:16px}}@media(prefers-reduced-motion:reduce){.friends img.react,.friends img.dance,.fish-icon,.fish.counted,.number-choice.hint,.number-choice.correct,#round-reward{animation:none!important}}