.games-section{padding:75px 5.4% 95px;background:#fff;text-align:center}
.games-section h2{font-family:'Baloo 2',cursive;font-size:clamp(39px,5vw,58px);line-height:1.05;letter-spacing:-2px;margin:12px 0 29px}
.balloon-card{display:flex;align-items:stretch;width:min(590px,100%);min-height:235px;margin:0 auto;padding:0;border:1px solid #e9edf0;border-radius:27px;overflow:hidden;background:white;color:#24324b;box-shadow:0 12px 30px rgba(40,55,70,.1);text-align:left;cursor:pointer;transition:transform .18s,box-shadow .18s}
.balloon-card:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(40,55,70,.14)}
.balloon-card-art{flex:0 0 45%;position:relative;overflow:hidden;background:linear-gradient(160deg,#c9ecfa,#e8f8f4)}
.card-balloon{position:absolute;width:72px;height:88px;border-radius:50% 50% 46% 46%;box-shadow:inset -8px -10px rgba(0,0,0,.1),0 7px 9px rgba(0,0,0,.08)}
.card-balloon:after{content:'';position:absolute;left:33px;top:86px;width:1px;height:70px;background:#7996aa}
.card-balloon-pink{background:#f591ae;left:9%;top:78px;transform:rotate(-11deg)}
.card-balloon-blue{background:#79c9ec;left:39%;top:25px;transform:rotate(9deg)}
.card-balloon-yellow{background:#ffd366;left:67%;top:92px;transform:rotate(-8deg)}
.card-spark{position:absolute;left:20%;top:20px;color:#fff;font-size:32px}
.balloon-card-copy{display:flex;flex-direction:column;gap:8px;padding:28px 25px 25px}
.game-age{color:#eb865f;font-size:11px;letter-spacing:1.3px;font-weight:900}
.balloon-card-copy strong{font-family:'Baloo 2',cursive;font-size:27px;line-height:1.05}
.balloon-card-copy>span:nth-child(3){color:#687487;font-size:13px;line-height:1.5;font-weight:800}
.play-label{margin-top:auto;padding-top:12px;color:#e58360;font-size:13px;font-weight:900}
.balloon-game{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow:hidden;background:#d9f3ff}
.balloon-game[hidden]{display:none}
.balloon-game-header{flex:0 0 auto;min-height:104px;padding:calc(14px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 15px max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:#fff9ed;box-shadow:0 4px 16px rgba(65,100,120,.12);z-index:5}
.game-back{justify-self:start;min-height:48px;border:0;border-radius:15px;background:#263752;color:white;padding:10px 16px;font:900 15px Nunito,system-ui,sans-serif;cursor:pointer}
.game-back span:first-child{font-size:20px;margin-right:5px}
.balloon-game-heading{text-align:center}
.balloon-game-heading h2{margin:0;font-family:'Baloo 2',cursive;font-size:clamp(22px,4vw,31px);line-height:1.05}
.balloon-game-heading p{margin:4px 0 0;color:#62728b;font-size:14px;font-weight:900}
.header-spark{justify-self:end;color:#f3b95b;font-size:42px;line-height:1}
.sound-toggle{justify-self:end;display:grid;place-items:center;width:52px;height:52px;padding:10px;border:2px solid #d6dfe8;border-radius:16px;background:#fff;color:#344b66;box-shadow:0 4px 0 #e8e4db;cursor:pointer;transition:transform .15s,background .15s}
.sound-toggle:hover{background:#f2f9ff;transform:translateY(2px)}
.sound-toggle svg{width:28px;height:28px;overflow:visible}
.speaker-shape{fill:currentColor}
.sound-waves,.sound-slash{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sound-slash{display:none}
.sound-toggle.muted{background:#fff0ed;color:#ca6d68;border-color:#f0ccc4}
.sound-toggle.muted .sound-waves{display:none}
.sound-toggle.muted .sound-slash{display:block}
.balloon-field{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate;background:linear-gradient(#d8f1ff 0%,#e8f8ff 62%,#f6f9e2 100%);touch-action:manipulation}
.sky-sun,.sky-cloud{position:absolute;top:5%;border:0;background:transparent;cursor:pointer;touch-action:manipulation;z-index:1}
.sky-sun[hidden]{display:none}
.sky-sun{left:8%;width:104px;height:104px;border-radius:50%;background:#ffe179;box-shadow:0 0 0 13px rgba(255,221,105,.23),0 0 0 26px rgba(255,221,105,.13);color:#7a5039;transition:transform .3s}
.sky-sun:hover,.sky-sun.smiling{transform:rotate(12deg) scale(1.08)}
.sun-face{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:26px;font-weight:900;line-height:1}
.sun-mouth{font-size:32px;line-height:.7;transition:transform .2s}
.sky-sun.smiling .sun-mouth{transform:scale(1.5) translateY(4px)}
.sky-cloud{left:4%;width:162px;height:98px;color:#fff;font-size:125px;line-height:.5;text-shadow:0 5px 15px rgba(98,149,185,.17);transition:transform .65s,opacity .65s}
.sky-cloud.moved{transform:translateX(105px) translateY(-35px) scale(.7);opacity:.55}
.sky-cloud:focus-visible,.sky-sun:focus-visible{outline:5px solid #263752;outline-offset:5px}
.field-clouds{position:absolute;left:-5%;right:-5%;bottom:-55px;height:125px;border-radius:50% 50% 0 0;background:#fffefa;opacity:.85;z-index:0;pointer-events:none}
.field-clouds:before,.field-clouds:after{content:'';position:absolute;bottom:42px;width:36%;height:130px;border-radius:50%;background:#fffefa}
.field-clouds:before{left:12%}.field-clouds:after{right:5%;height:105px}
.balloon{position:absolute;bottom:-175px;z-index:2;display:block;width:92px;height:170px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation;transform:translateY(0);will-change:transform}
.balloon.is-rising{animation:balloon-rise var(--duration) linear both}
.balloon-body{position:absolute;left:5px;top:0;width:82px;height:104px;border-radius:50% 50% 47% 47%;background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.8) 0 8%,rgba(255,255,255,.25) 14%,transparent 36%),var(--balloon-color);box-shadow:inset -11px -12px var(--balloon-shadow),0 8px 16px rgba(73,99,120,.13)}
.balloon-knot{position:absolute;top:99px;left:39px;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--balloon-color)}
.balloon-string{position:absolute;left:45px;top:110px;width:2px;height:54px;border-radius:50%;background:#7893a0;transform:rotate(7deg)}
.balloon-rainbow{bottom:-205px;width:124px;height:196px}
.balloon-rainbow .balloon-body{width:112px;height:135px;background:radial-gradient(circle at 28% 20%,rgba(255,255,255,.86),transparent 33%),linear-gradient(135deg,#f18caa 0 20%,#ffcd66 20% 40%,#9bdca7 40% 60%,#81cbee 60% 80%,#bc9ce6 80%);box-shadow:inset -12px -13px rgba(67,72,124,.13),0 8px 16px rgba(73,99,120,.13)}
.balloon-rainbow .balloon-knot{top:131px;left:54px;border-bottom-color:#b99de7}
.balloon-rainbow .balloon-string{top:143px;left:60px}
.balloon-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#5a4660;font-size:18px;line-height:1;transform:rotate(-5deg)}
.face-eyes{animation:face-blink 3.5s infinite}.face-mouth{font-size:35px;line-height:.7}
.balloon-icon{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.14))}
.balloon:focus-visible .balloon-body{outline:5px solid #263752;outline-offset:5px}
.balloon.popped{animation-play-state:paused;pointer-events:none}
.balloon.popped .balloon-body{animation:balloon-pop .19s ease-out forwards}
.balloon.popped .balloon-knot,.balloon.popped .balloon-string{opacity:0}
.balloon-game.paused .balloon{animation-play-state:paused}
.balloon-burst{position:absolute;z-index:4;width:0;height:0;pointer-events:none;color:var(--burst-color)}
.burst-ring{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px;border:5px solid var(--burst-color);border-radius:50%;animation:burst-ring .38s ease-out forwards}
.burst-spark{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--burst-color);animation:burst-spark .62s cubic-bezier(.1,.8,.3,1) forwards}
.burst-spark.star{width:auto;height:auto;margin:-9px;background:none;font-size:18px;line-height:1}
.burst-spark.heart{width:auto;height:auto;margin:-10px;background:none;font-size:20px;line-height:1}
.burst-spark.confetti{width:8px;height:13px;border-radius:2px;background:var(--spark-color)}
.burst-spark.bubble{width:13px;height:13px;border:2px solid var(--burst-color);background:rgba(255,255,255,.45);box-shadow:inset -2px -2px rgba(255,255,255,.5)}
.surprise-toy,.flying-animal{position:absolute;z-index:4;pointer-events:none;font-size:56px;line-height:1;filter:drop-shadow(0 5px 5px rgba(65,81,108,.18))}
.surprise-toy{animation:toy-pop 1.7s ease-out forwards}
.flying-animal{animation:animal-fly 3.3s ease-in-out forwards}
@keyframes toy-pop{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-95%) scale(1.2);opacity:1}65%{transform:translate(-50%,-110%) scale(1)}100%{transform:translate(-50%,-130%) scale(.9);opacity:0}}
@keyframes animal-fly{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translate(var(--fly-x),-280px) rotate(18deg);opacity:0}}
@keyframes face-blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}}
@keyframes balloon-rise{from{transform:translateY(0)}to{transform:translateY(calc(-1 * var(--travel)))}}
@keyframes balloon-pop{50%{transform:scale(1.12);opacity:1}100%{transform:scale(.1);opacity:0}}
@keyframes burst-ring{to{transform:scale(5);opacity:0}}
@keyframes burst-spark{to{transform:translate(var(--dx),var(--dy)) rotate(var(--spin));opacity:0}}
@media(max-width:700px){.games-section{padding:56px 5% 70px}.balloon-card{min-height:200px}.balloon-card-art{flex-basis:43%}.balloon-card-copy{padding:21px 17px}.balloon-card-copy strong{font-size:23px}.card-balloon{width:54px;height:68px}.card-balloon:after{top:67px;left:26px}.card-balloon-pink{left:3%}.card-balloon-blue{left:34%}.card-balloon-yellow{left:65%}.balloon-game-header{grid-template-columns:auto 1fr auto;min-height:90px}.game-back{font-size:13px;padding:8px 11px}.balloon-game-heading h2{font-size:23px}.balloon-game-heading p{font-size:12px}.sound-toggle{width:45px;height:45px;padding:8px}.sound-toggle svg{width:25px;height:25px}}
@media(max-width:420px){.balloon-card{flex-direction:column}.balloon-card-art{flex-basis:auto;height:155px}.balloon-card-copy{min-height:170px}.card-balloon-pink{left:18%;top:60px}.card-balloon-blue{left:42%;top:20px}.card-balloon-yellow{left:66%;top:68px}.balloon-game-header{gap:7px}.game-back span:last-child{display:none}.game-back span:first-child{margin:0}.balloon-game-heading h2{font-size:20px}}
@media(max-width:420px){.sky-cloud{left:1%;transform:scale(.78);transform-origin:top left}.sky-cloud.moved{transform:translateX(90px) translateY(-25px) scale(.58)}.sky-sun{left:6%;width:80px;height:80px}.sun-face{font-size:20px}}
@media(prefers-reduced-motion:reduce){.balloon.is-rising{animation-duration:16s!important}.balloon.popped .balloon-body{animation-duration:.12s}.burst-spark,.burst-ring{animation-duration:.3s}.face-eyes{animation:none}.flying-animal{animation-duration:1.5s}.surprise-toy{animation-duration:1s}}
