/* Balloon Color Pop presentation only; shared bubbles, rewards and other games retain their rules. */
.balloon-top{align-items:center;gap:12px;margin:3px 4px 10px}.balloon-top h1{margin:3px 0;font-size:clamp(25px,3.5vw,39px);letter-spacing:-1px;color:#6656a5;text-shadow:0 2px #fff}.balloon-kicker{font-size:10px;letter-spacing:2px;color:#718cac}
.balloon-score{min-width:176px;padding:7px 14px;background:#fff9e4;border:3px solid white;border-radius:22px;box-shadow:0 3px #decbaa;text-align:center}.balloon-score>span{font-size:24px;color:#7863a4}.balloon-score .balloon-bonus{font-size:11px;margin:0;color:#857496}.balloon-progress{width:100%;height:13px;padding:2px;margin-top:5px;border:0;background:#e6dfd2;box-shadow:none}.balloon-progress i{background:linear-gradient(90deg,#80d8c3,#ffcd63)}
#balloon-field{background:linear-gradient(#8dd6f9,#d9f3ff 70%,#bbe59e 71%);box-shadow:0 7px #a0c4d7,0 12px 25px #5c8aa71a;touch-action:manipulation}
#balloon-field[data-weather=cloudy]{background:linear-gradient(#b4cde7,#e3edf7 70%,#b5d9ae 71%)}
#balloon-field[data-weather=rainy]{background:linear-gradient(#b4d0df,#d9eaf4 70%,#abd8b5 71%)}
#balloon-field[data-weather=snowy]{background:linear-gradient(#b5dce9,#edfaff 70%,#f2faf8 71%)}
#balloon-field[data-weather=rainbow]{background:linear-gradient(#a5def7,#edf8ef 70%,#bbe69d 71%)}
#balloon-field .sky-hills{background:linear-gradient(#83cf83,#5fb975);box-shadow:300px -25px #a7d988}
#balloon-field[data-weather=snowy] .sky-hills{background:linear-gradient(#fff,#d5e8ee);box-shadow:300px -25px #eff8fc}
#balloon-field .sky-cloud{opacity:.85;animation-duration:23s;pointer-events:none}#balloon-field .cloud-b{animation-duration:31s}
.balloon-weather{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}.weather-sun{position:absolute;right:9%;top:5%;width:85px;height:85px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7b0,#ffda73);box-shadow:0 0 0 13px #fff5b33a,0 0 50px #fff5b377;animation:sunny-breathe 6s ease-in-out infinite alternate}
[data-weather=cloudy] .weather-sun,[data-weather=rainy] .weather-sun,[data-weather=snowy] .weather-sun{opacity:.25}
.weather-cloud{position:absolute;top:10%;left:38%;width:180px;height:55px;border-radius:80px;background:#fff8;box-shadow:30px -25px #fff8,85px -9px #fff8;animation:cloud-drift 27s ease-in-out infinite alternate-reverse;opacity:0}
[data-weather=cloudy] .weather-cloud,[data-weather=rainy] .weather-cloud,[data-weather=snowy] .weather-cloud{opacity:.85}
.weather-rainbow{display:none;position:absolute;left:10%;right:10%;top:9%;height:65%;border:25px solid transparent;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 100%,transparent 54%,#ba98e44f 55% 58%,#8ccce952 59% 62%,#92d6ab55 63% 66%,#fff09b66 67% 70%,#fbbb9955 71% 74%,#f59ab255 75% 78%,transparent 79%);opacity:.8}
[data-weather=rainbow] .weather-rainbow{display:block}
.balloon-weather>i{position:absolute;top:-30px;left:var(--wx);animation:weather-fall var(--wt) linear infinite;animation-delay:var(--wd)}
[data-weather=rainy] .balloon-weather>i{width:2px;height:18px;border-radius:4px;background:#78a4bd55}
[data-weather=snowy] .balloon-weather>i{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 3px #ffffff70;opacity:.65}
#balloon-field .pop-balloon{animation:balloon-flight var(--speed) linear infinite,balloon-sway var(--wobble,4s) ease-in-out infinite;animation-delay:var(--delay),var(--phase,0s);transform-origin:50% 25%;--sway:6px}
#balloon-field .pop-balloon.target-rescue{animation-name:target-flight,balloon-sway}
#balloon-field .pop-balloon.wrong{animation-name:balloon-flight,balloon-sway,wrong-wiggle;animation-duration:var(--speed),var(--wobble,4s),.35s;animation-delay:var(--delay),var(--phase,0s),0s;animation-iteration-count:infinite,infinite,1}
#balloon-field .pop-balloon:not(.bonus-bubble):before{background:radial-gradient(ellipse at 30% 24%,#ffffffa8 0 5%,transparent 17%),var(--balloon);box-shadow:inset -9px -10px #0002,inset 8px 5px #fff3,0 5px 9px #36648222}
#balloon-field .pop-balloon:not(.bonus-bubble):after{display:none}
.balloon-string{position:absolute;width:30px;height:66px;top:calc(100% - 10px);left:calc(50% - 15px);color:#687d968c;overflow:visible;pointer-events:none;transform-origin:50% 0;animation:string-wave var(--wobble,4s) ease-in-out infinite alternate;animation-delay:var(--phase,0s)}
#balloon-field .bonus-bubble{animation-name:balloon-flight,bubble-sway;--sway:11px;border-width:3px}
#balloon-field .bonus-bubble:before{animation:bubble-glint 3.2s ease-in-out infinite alternate}
#balloon-field .bonus-bubble .bubble-inside{animation:bubble-passenger 3s ease-in-out infinite alternate}
#balloon-field .bonus-bubble.gold{box-shadow:inset 0 0 13px #ffdb8699,0 0 0 3px #fff2,0 0 12px #ffe39a66}
#balloon-field .bonus-bubble.sparkle{box-shadow:inset 0 0 14px #fff9,0 0 0 3px #e7d3ff33,0 0 14px #d7c8ff99}
#balloon-field .pop-balloon.popping{translate:none!important;rotate:none!important;animation:balloon-pop .28s ease-out forwards!important;animation-delay:0s!important}
#balloon-field .popping .balloon-string{opacity:0}
#balloon-field .target-card{bottom:12px;min-width:148px;padding:7px 20px 9px;border-radius:27px;border:4px solid #fff;background:#fffef5ed;box-shadow:0 5px #90accb,0 0 0 5px #ffffff4d;gap:3px;pointer-events:none}
#balloon-field .target-card>span{font-size:10px;letter-spacing:2px;color:#776a96}#balloon-field .target-card strong{font-size:14px;color:#655981}
#balloon-field .target-card i{width:76px;height:76px;border:4px solid #fff;box-shadow:inset -7px -7px #0002,inset 7px 6px #fff5,0 2px 0 #b4becb,0 0 0 3px color-mix(in srgb,var(--target) 22%,transparent);animation:target-breathe 2.6s ease-in-out infinite}
#balloon-field .target-card.target-new{animation:target-arrive .38s ease-out}
.balloon-polished .burst-ring{border-width:5px;animation-duration:.5s}.balloon-polished.normal .burst-particle{font-size:0;width:9px;height:14px;border-radius:50% 15% 45% 25%;background:var(--burst-color);box-shadow:inset 2px 2px #fff8;animation:balloon-fragment .65s ease-out both}.balloon-polished.normal .burst-particle:nth-child(even){background:#fff0a6;width:7px;height:10px}
.balloon-polished.gold .burst-ring{box-shadow:0 0 12px #ffe48c}.balloon-polished.sparkle .burst-ring{border-color:#d4eaff;box-shadow:0 0 16px #edcaff}
.balloon-polished .balloon-surprise{font-size:clamp(60px,9vw,84px);filter:drop-shadow(0 3px 0 white) drop-shadow(0 7px 6px #52739b33);animation:balloon-friend 2.7s ease-out both}
#balloon-field.paused *,#balloon-field.paused *:before,#balloon-screen[hidden] *{animation-play-state:paused!important}
#balloon-field.paused .popping,#balloon-field.paused .balloon-burst *{animation-play-state:running!important}
@keyframes balloon-sway{0%,100%{translate:calc(-1 * var(--sway)) 0}50%{translate:var(--sway) 0}}
@keyframes bubble-sway{0%,100%{translate:-9px 0;rotate:-5deg}50%{translate:9px 0;rotate:5deg}}
@keyframes string-wave{from{transform:rotate(-7deg) scaleX(.7)}to{transform:rotate(9deg) scaleX(-.85)}}
@keyframes bubble-glint{to{opacity:.65;transform:rotate(-18deg) scale(.94)}}
@keyframes bubble-passenger{to{transform:translateY(-4px) rotate(7deg)}}
@keyframes sunny-breathe{to{transform:scale(1.05);opacity:.8}}
@keyframes weather-fall{to{transform:translate(35px,720px)}}
@keyframes target-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes target-arrive{0%{transform:translateX(-50%) scale(.9)}65%{transform:translateX(-50%) scale(1.04)}100%{transform:translateX(-50%) scale(1)}}
@keyframes balloon-fragment{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}65%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(.5);opacity:0}}
@keyframes balloon-friend{0%{transform:translate(-50%,-25%) scale(.2);opacity:0}14%{transform:translate(-50%,-105%) rotate(-10deg) scale(1.18);opacity:1}30%{transform:translate(-50%,-75%) rotate(7deg) scale(1)}45%{transform:translate(-50%,-90%) rotate(-4deg)}80%{transform:translate(calc(-50% + var(--fly,20px)),-115%) rotate(9deg);opacity:1}100%{transform:translate(calc(-50% + var(--fly,20px)),-140%) scale(.9);opacity:0}}
@media(max-width:760px){.balloon-top{gap:8px}.balloon-top h1{font-size:25px;line-height:1.04;max-width:220px}.balloon-score{min-width:114px;padding:6px 9px;border-radius:18px}.balloon-score>span{font-size:20px}.balloon-score .balloon-bonus{font-size:9px}.balloon-kicker{font-size:9px;letter-spacing:1px}#balloon-field .target-card{bottom:12px;min-width:132px;padding:6px 13px 8px}#balloon-field .target-card i{width:70px;height:70px}.balloon-weather .weather-sun{width:66px;height:66px}.weather-cloud{scale:.65}}
@media(prefers-reduced-motion:reduce){#balloon-field .pop-balloon{animation:balloon-flight var(--speed) linear infinite;animation-delay:var(--delay);translate:none;rotate:none}#balloon-field .pop-balloon.target-rescue{animation-name:target-flight;top:auto;bottom:-140px;left:var(--x)}#balloon-field .balloon-string,#balloon-field .sky-cloud,#balloon-field .balloon-weather *,#balloon-field .target-card,#balloon-field .target-card i,#balloon-field .bonus-bubble:before,#balloon-field .bubble-inside{animation:none}.balloon-weather>i{display:none}.balloon-polished .balloon-surprise{animation:none;transform:translate(-50%,-70%)} }