/* Illustrated Balloon world. Scoped to this game; no shared gameplay geometry changes. */
#balloon-field{border:5px solid #fff8df;border-radius:32px;background:#75c8f0;box-shadow:0 5px 0 #85a6be,0 12px 28px #52759825}
#balloon-field:before{content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;background:url('balloon-art/meadow.webp') center bottom/cover no-repeat;transition:filter .8s;}
#balloon-field[data-weather=cloudy]:before{filter:saturate(.74) brightness(.99)}
#balloon-field[data-weather=rainy]:before{filter:saturate(.7) brightness(.91)}
#balloon-field[data-weather=snowy]:before{background-image:url('balloon-art/winter.webp')}
#balloon-field:after{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 12% 0,#fff9cc55,transparent 55%);}
#balloon-field[data-weather=cloudy]:after{background:linear-gradient(#ccd9ef66,transparent 65%)}
#balloon-field[data-weather=rainy]:after{background:linear-gradient(#b0c7dd88,#d7edf31a 55%,#f0fbff35)}
#balloon-field[data-weather=snowy]:after{background:radial-gradient(ellipse at 20% 0,#fff0fb55,transparent 70%)}
#balloon-field .sky-hills{display:none}
#balloon-field .sky-cloud{width:210px;height:105px;border-radius:0;background:radial-gradient(ellipse at 30% 63%,#fff9 0 27%,transparent 29%),radial-gradient(ellipse at 50% 42%,#fffd 0 30%,transparent 32%),radial-gradient(ellipse at 76% 60%,#fff9 0 26%,transparent 28%);box-shadow:none;filter:blur(2px);opacity:.55;animation:world-cloud 32s ease-in-out infinite alternate;}
#balloon-field .cloud-a{top:5%;left:-5%}#balloon-field .cloud-b{top:22%;right:-3%;animation-duration:41s;animation-direction:alternate-reverse}
#balloon-field .weather-sun{display:none}
#balloon-field .weather-cloud{width:80%;height:32%;top:-12%;left:5%;border-radius:50%;background:radial-gradient(ellipse,#f1f7ffa8,transparent 70%);box-shadow:none;filter:blur(9px)}
#balloon-field .weather-rainbow{top:4%;left:5%;right:5%;height:72%;opacity:.62;filter:blur(3px);transform:rotate(-5deg)}
#balloon-field[data-weather=rainy] .balloon-weather>i{width:2px;height:21px;background:linear-gradient(transparent,#eaf9ffb0);box-shadow:1px 0 #a0cbe83b;rotate:12deg}
#balloon-field[data-weather=snowy] .balloon-weather>i{width:var(--flake,6px);height:var(--flake,6px);box-shadow:0 0 6px #fff;opacity:.9}
#balloon-field .balloon-weather>i:nth-child(3n){--flake:4px;opacity:.55}
#balloon-field .pop-balloon:not(.bonus-bubble):before{inset:0 0 12px;border-radius:0;background:var(--balloon-art) center/100% 100% no-repeat;box-shadow:none;filter:drop-shadow(2px 5px 3px #2d64852b)}
#balloon-field [data-color=red]{--balloon-art:url('balloon-art/red.svg')}
#balloon-field [data-color=blue]{--balloon-art:url('balloon-art/blue.svg')}
#balloon-field [data-color=yellow]{--balloon-art:url('balloon-art/yellow.svg')}
#balloon-field [data-color=green]{--balloon-art:url('balloon-art/green.svg')}
#balloon-field [data-color=orange]{--balloon-art:url('balloon-art/orange.svg')}
#balloon-field [data-color=purple]{--balloon-art:url('balloon-art/purple.svg')}
#balloon-field [data-color=pink]{--balloon-art:url('balloon-art/pink.svg')}
#balloon-field .pop-balloon .knot{display:none}
#balloon-field .balloon-string{top:calc(100% - 15px);height:72px;color:color-mix(in srgb,var(--balloon) 60%,#584a64);filter:drop-shadow(1px 0 #ffffff80);animation-name:world-string;transform-origin:50% 0}
#balloon-field .balloon-string path{stroke-width:1.8}
#balloon-field .bonus-bubble{border:2px solid #edfcffb0;background:radial-gradient(ellipse at 28% 20%,#fff9 0,transparent 28%),radial-gradient(ellipse at 70% 90%,#b4f4ff55,transparent 50%);box-shadow:inset 2px 2px 4px #fff9,inset -3px -4px 5px #569bca66,0 4px 10px #254b6633;}
#balloon-field .bonus-bubble:before{inset:4px;border:2px solid transparent;border-top:5px solid #ffffffe6;border-left-color:#d1eaffaa;border-bottom-color:#ffcbedbb;background:transparent;box-shadow:inset 0 -4px 6px #fff3;}
#balloon-field .bonus-bubble:after{display:block;content:'';position:absolute;inset:11px;border-radius:50%;border-right:2px solid #fff7;pointer-events:none}
#balloon-field .bonus-bubble.gold{background:radial-gradient(circle at 35% 25%,#fff9,transparent 28%),radial-gradient(circle at 50% 90%,#ffc85744,transparent 65%);border-color:#ffdd83;box-shadow:inset 2px 2px 5px #fff9,inset -3px -4px 8px #edb54488,0 0 12px #fff2b777}
#balloon-field .bonus-bubble.sparkle{background:radial-gradient(circle at 30% 22%,#fffd,transparent 23%),conic-gradient(from 40deg,#ffd0ee44,#abeaff55,#fff3b94d,#cab3ff55,#ffd0ee44);box-shadow:inset 2px 2px 5px #fff,inset -3px -4px 7px #9c83f488,0 0 14px #e1caff88}
#balloon-field .bubble-inside .sticker{width:58px;height:58px;margin:auto;filter:drop-shadow(0 3px 3px #486b7833);pointer-events:none}
#balloon-field .balloon-surprise .sticker{width:90px;height:90px;pointer-events:none}
#balloon-field .balloon-surprise{width:90px;height:90px;filter:drop-shadow(0 3px 1px #fff) drop-shadow(0 8px 8px #24446e33)}
#balloon-field .balloon-surprise:after{content:'';position:absolute;inset:-12px;z-index:-1;background:radial-gradient(circle,#fff4bc99,transparent 65%);}
#balloon-field .target-card{min-width:164px;border:3px solid #fff9dd;border-radius:29px;background:linear-gradient(145deg,#fffef5,#fff3ce);box-shadow:0 4px 0 #c3a967,0 7px 18px #355f7845,inset 0 0 0 3px #ffffff88;padding:7px 20px 8px;}
#balloon-field .target-card>span{color:#8a6c44;font-size:10px;letter-spacing:2px}
#balloon-field .target-card strong{color:#705243;font-size:14px}
#balloon-field .target-card i{width:76px;height:76px;border:0;border-radius:50%;background:radial-gradient(ellipse at 29% 22%,#fff 0 3%,#fff8 8%,transparent 29%),radial-gradient(circle at 34% 28%,transparent 20%,#0003 85%,#fff6 100%),var(--target);box-shadow:inset 2px 2px 3px #fff7,0 3px 5px #876c5940,0 0 0 3px #fff;}
#balloon-screen .balloon-top{margin:2px 4px 9px;align-items:center}
#balloon-screen .balloon-top h1{color:#6552a0;text-shadow:0 2px white;font-size:clamp(25px,3.4vw,37px);letter-spacing:-1px;line-height:1.05}
#balloon-screen .balloon-kicker{color:#78938c;font-size:9px;letter-spacing:2px}
#balloon-screen .balloon-score{background:linear-gradient(#fffdf3,#ffeac0);border:3px solid #fff;border-radius:22px;box-shadow:0 3px #d4b581,0 5px 12px #82665712;min-width:166px;}
#balloon-screen .balloon-score>span{color:#80603b;font-size:24px;font-variant-numeric:tabular-nums}
#balloon-screen .balloon-score .balloon-bonus{font-size:10px;color:#947149}
#balloon-screen .balloon-progress{background:#d0b883;box-shadow:inset 0 2px 2px #6e4f362b;height:12px}
#balloon-screen .balloon-progress i{background:linear-gradient(#a2e26d,#49b782);box-shadow:inset 0 2px #d0ff9c}
#balloon-screen .balloon-message{font-size:13px;color:#668073;margin:7px 0 0}
#balloon-field .balloon-burst .burst-ring{border-width:3px;border-color:#fffad8;box-shadow:0 0 0 5px color-mix(in srgb,var(--burst-color) 35%,transparent);animation:world-ring .48s ease-out both}
#balloon-field .balloon-burst.normal .burst-particle{background:var(--burst-color);width:11px;height:17px;box-shadow:inset 3px 2px #fff9,1px 2px 2px #24466722;animation-duration:.75s;}
#balloon-field .balloon-burst.normal .burst-particle:nth-child(3n){width:7px;height:7px;background:#fff8ca;border-radius:50%}
#balloon-field .balloon-burst.gold .burst-particle{color:#ffce43;text-shadow:0 1px white,0 0 5px #fff4c0}
#balloon-field .balloon-burst.sparkle .burst-particle{filter:drop-shadow(0 0 3px white)}
@keyframes world-cloud{to{translate:60px 10px;opacity:.75}}
@keyframes world-string{0%{transform:rotate(-6deg) skewX(-7deg)}50%{transform:rotate(2deg) skewX(2deg)}100%{transform:rotate(7deg) skewX(8deg)}}
@keyframes world-ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0}}
@media(max-width:760px){#balloon-screen .balloon-top h1{font-size:24px}#balloon-screen .balloon-score{min-width:116px;padding:6px 9px}#balloon-screen .balloon-score>span{font-size:21px}#balloon-field{border-radius:25px;border-width:4px}#balloon-field:before{background-position:52% bottom}#balloon-field .target-card{min-width:138px;padding:6px 14px 7px}#balloon-field .target-card i{width:68px;height:68px}#balloon-field .balloon-string{height:58px}#balloon-field .balloon-surprise,#balloon-field .balloon-surprise .sticker{width:76px;height:76px}}
@media(prefers-reduced-motion:reduce){#balloon-field .sky-cloud,#balloon-field .balloon-string{animation:none}}
/* Sculpted cloud layers drift independently of the painted landscape. */
#balloon-field .sky-cloud{background:url('balloon-art/cloud.svg') center/contain no-repeat;filter:none;opacity:.63}
#balloon-field[data-weather=cloudy]:before,#balloon-field[data-weather=rainy]:before{background-image:url('balloon-art/overcast.webp');filter:none}

/* Very slow landscape motion sits behind independently drifting cloud layers. */
#balloon-field:before{inset:-6px;animation:world-landscape 24s ease-in-out infinite alternate}
#balloon-field:after{animation:world-light 9s ease-in-out infinite alternate}
#balloon-field.paused:before,#balloon-field.paused:after,#balloon-screen[hidden] #balloon-field:before,#balloon-screen[hidden] #balloon-field:after{animation-play-state:paused}
@keyframes world-landscape{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@keyframes world-light{from{opacity:.6}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#balloon-field:before,#balloon-field:after{animation:none}}

/* The path itself waves; keep its knot anchored rather than tilting a rigid curve. */
#balloon-field .balloon-string{animation:none;transform:none}