/* A camera pointed into the open sky. All scenery remains behind touch targets. */
#balloon-screen{--sky-ink:#375c83;--sky-rim:#8cbed8}
#balloon-screen .balloon-top{margin-bottom:9px}
#balloon-screen .balloon-top h1{color:#426799;text-shadow:0 2px #fff;letter-spacing:-1px}
#balloon-screen .balloon-kicker{color:#607f9b}
#balloon-screen .balloon-score{background:linear-gradient(145deg,#fffef5,#e5f4fc);border-color:#fff;box-shadow:inset 0 1px #fff,0 3px 0 #9cbdd2,0 7px 14px #3b668a18}
#balloon-screen .balloon-score>span{color:var(--sky-ink)}
#balloon-screen .balloon-progress{background:#c8dce9;box-shadow:inset 0 2px 3px #52769c26}
#balloon-screen .balloon-progress i{background:linear-gradient(#ffe9a1,#f7b84c);box-shadow:inset 0 2px #fff5cf}
.balloon-options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 3px 4px;position:relative;z-index:1}
.balloon-length{display:flex;align-items:center;gap:5px}
.balloon-length>span,.balloon-sky-picker>span{font-size:10px;font-weight:900;letter-spacing:1.3px;color:#526e8c}
.balloon-length>span{margin-right:5px}
#balloon-screen .balloon-length button{min-width:46px;min-height:44px;border:2px solid #fff;border-radius:15px;background:linear-gradient(#fff,#e4f0fa);color:#4f6a8c;font-size:18px;font-weight:900;padding:6px 10px;box-shadow:0 3px #b5cddd,inset 0 1px #fff;transition:background .15s,box-shadow .15s}
#balloon-screen .balloon-length button[aria-pressed=true]{background:linear-gradient(#fff0b4,#ffcf66);color:#74501d;box-shadow:0 3px #d3a24b,inset 0 1px #fff7d5;border-color:#fff9df}
#balloon-screen .balloon-length button:active{translate:0 2px;box-shadow:0 1px #b5cddd}
.balloon-sky-picker{display:flex;align-items:center;gap:8px}
#balloon-sky{min-height:44px;max-width:155px;border:2px solid #fff;border-radius:14px;padding:7px 26px 7px 11px;background:#f4fbff;color:#426389;font-family:inherit;font-weight:800;font-size:13px;box-shadow:0 3px #b5cddd;cursor:pointer}
.balloon-option-note{min-height:16px;font-size:11px;line-height:16px;font-weight:800;color:#647e98;margin:5px 5px 7px;text-align:center}
#balloon-screen :is(.balloon-length button,#balloon-sky):focus-visible{outline:3px solid #664dc6;outline-offset:3px}
#balloon-field{--sky-top:#398dce;--sky-mid:#8dd4f3;--sky-low:#d7f3ff;--wind:1;border:4px solid #f8fcff;border-radius:30px;background:var(--sky-mid);box-shadow:0 5px #8eb8d0,0 15px 28px #3c71972b;touch-action:none}
#balloon-field[data-weather=cloudy]{--sky-top:#6d91ba;--sky-mid:#b9d5e8;--sky-low:#eff6fa}
#balloon-field[data-weather=rainy]{--sky-top:#516e9b;--sky-mid:#91b8cf;--sky-low:#d2e5ef}
#balloon-field[data-weather=snowy]{--sky-top:#7d98be;--sky-mid:#bed9ef;--sky-low:#eef9ff}
#balloon-field[data-weather=rainbow]{--sky-top:#608ed5;--sky-mid:#b0e1f5;--sky-low:#f7f0ed}
#balloon-field[data-weather=windy]{--sky-top:#4d9ac7;--sky-mid:#a1d9ec;--sky-low:#e2f7f7;--wind:2.8}
#balloon-field:before,#balloon-field[data-weather]:before{inset:-8%;background:radial-gradient(ellipse at 85% 3%,#fff6c24d,transparent 39%),radial-gradient(ellipse at 48% 0,#4a7bb42e,transparent 58%),linear-gradient(180deg,var(--sky-top),var(--sky-mid) 52%,var(--sky-low));filter:none;animation:sky-camera 26s ease-in-out infinite alternate}
#balloon-field:after,#balloon-field[data-weather]:after{inset:0;background:radial-gradient(ellipse at 50% 25%,transparent 44%,#ebf9ff38 100%);box-shadow:inset 0 0 65px #234e7830;animation:world-light 10s ease-in-out infinite alternate}
#balloon-field .sky-hills{display:none}
#balloon-field .sky-cloud{width:38%;height:28%;opacity:.82;filter:drop-shadow(0 12px 13px #6e9dbb26);animation:sky-near-cloud 24s ease-in-out infinite alternate}
#balloon-field .cloud-a{left:-14%;top:62%;rotate:12deg}
#balloon-field .cloud-b{right:-12%;top:30%;rotate:-15deg;animation-duration:33s;animation-direction:alternate-reverse}
#balloon-field .balloon-weather{z-index:-2;overflow:visible}
#balloon-field .weather-sun{display:block;right:10%;top:6%;width:76px;height:76px;opacity:1;background:radial-gradient(circle at 65% 28%,#fffef1 0,#fff7b6 35%,#ffd367 72%,#ffc858);box-shadow:inset -3px -4px 6px #eaa45140,0 0 0 12px #fff6c316,0 0 0 26px #fff6c30d,0 0 70px 25px #ffefb35c;animation:sky-sun 9s ease-in-out infinite alternate}
#balloon-field[data-weather=cloudy] .weather-sun{opacity:.25}
#balloon-field:is([data-weather=rainy],[data-weather=snowy]) .weather-sun{opacity:0}
#balloon-field .weather-cloud{left:-5%;top:-10%;width:110%;height:32%;background:url('balloon-art/cloud.svg') center/100% 100% no-repeat;filter:drop-shadow(0 12px 14px #284a7630);opacity:0;animation:world-cloud 30s ease-in-out infinite alternate}
#balloon-field[data-weather=cloudy] .weather-cloud{opacity:.9}
#balloon-field[data-weather=rainy] .weather-cloud{opacity:.85;filter:brightness(.78) saturate(.65) drop-shadow(0 14px 12px #263d7130)}
#balloon-field[data-weather=snowy] .weather-cloud{opacity:.75}
#balloon-field .weather-rainbow{border:0;left:-10%;right:-10%;top:11%;height:65%;border-radius:50%;opacity:.78;filter:blur(1px);transform:rotate(-12deg);background:radial-gradient(ellipse at 50% 100%,transparent 49%,#b799e238 50% 52%,#84a7ed55 53% 55%,#8bd5ee66 56% 58%,#8edcbb77 59% 61%,#fff3a688 62% 64%,#ffd09b88 65% 67%,#f9a2bd88 68% 70%,transparent 71%)}
.sky-depth-cloud{position:absolute;background:url('balloon-art/cloud.svg') center/contain no-repeat;width:28%;height:18%;opacity:.6;animation:sky-depth-drift 38s ease-in-out infinite alternate;transform-origin:center}
.sky-depth-0{left:14%;top:8%;width:17%;height:10%;opacity:.4;animation-duration:43s}
.sky-depth-1{right:24%;top:32%;width:20%;height:12%;opacity:.45;animation-delay:-12s}
.sky-depth-2{left:-12%;top:32%;width:45%;height:29%;animation-delay:-6s}
.sky-depth-3{right:-12%;top:70%;width:52%;height:32%;opacity:.9;animation-delay:-18s}
.sky-depth-4{left:15%;top:91%;width:64%;height:34%;opacity:.75;animation-delay:-25s}
#balloon-field[data-weather=cloudy] .sky-depth-cloud{opacity:.9}
#balloon-field[data-weather=rainy] .sky-depth-cloud{filter:brightness(.88);opacity:.55}
#balloon-field[data-weather=windy] :is(.sky-cloud,.sky-depth-cloud){animation-duration:12s}
#balloon-field .balloon-weather>i{animation-name:sky-precipitation;z-index:1}
#balloon-field[data-weather=rainy] .balloon-weather>i{height:26px;background:linear-gradient(transparent,#ebfaffb0);width:1.5px;rotate:16deg}
#balloon-field[data-weather=snowy] .balloon-weather>i{background:radial-gradient(circle,#fff 40%,#ffffff75 70%,transparent 75%);border-radius:50%;animation-name:sky-snow;box-shadow:0 0 4px #fff9}
#balloon-field[data-weather=snowy] .balloon-weather>i:nth-child(4n){width:10px;height:10px;filter:blur(1px)}
.sky-wind{position:absolute;top:var(--gust-y);left:-30%;width:24%;height:22px;border-top:2px solid #f4ffff85;border-radius:50%;opacity:0;animation:sky-gust 7s ease-in-out infinite;animation-delay:var(--gust-delay)}
.sky-wind:after{content:'';position:absolute;top:8px;left:18%;width:65%;height:16px;border-top:1px solid #fff9;border-radius:50%}
.balloon-weather-name{position:absolute;top:14px;left:16px;z-index:1;font-weight:900;font-size:11px;letter-spacing:.6px;color:#fff;text-shadow:0 1px 4px #285077a6;pointer-events:none}
#balloon-field .pop-balloon{top:auto;bottom:-140px;filter:drop-shadow(-2px 4px 4px #325a7720);animation-timing-function:linear,ease-in-out}
#balloon-field .pop-balloon:not(.bonus-bubble){animation-name:sky-balloon-flight,balloon-sway}
#balloon-field .pop-balloon.target-rescue:not(.bonus-bubble){animation-name:sky-target-flight,balloon-sway}
#balloon-field .pop-balloon.wrong:not(.bonus-bubble){animation-name:sky-balloon-flight,balloon-sway,wrong-wiggle}
#balloon-field .pop-balloon:not(.bonus-bubble):before{filter:drop-shadow(-2px 4px 2px #35577218)}
#balloon-field .pop-balloon:not(.bonus-bubble):after{display:block;content:'';position:absolute;left:auto;right:21%;top:17%;width:7%;height:15%;border-radius:50%;background:linear-gradient(#fff9,#fff0);rotate:-35deg;pointer-events:none;animation:sky-glint 5s ease-in-out infinite;animation-delay:var(--phase)}
#balloon-field[data-weather=windy] .pop-balloon{--sway:23px!important;--wobble:3.3s!important}
#balloon-field[data-weather=windy] .bonus-bubble{animation-name:balloon-flight,sky-windy-bubble}
#balloon-field .bonus-bubble{background:radial-gradient(ellipse at 76% 20%,#fffc,transparent 26%),radial-gradient(ellipse at 20% 86%,#c3a9ff33,transparent 45%);box-shadow:inset -3px 3px 5px #fffb,inset 3px -4px 8px #5b90bd55,0 5px 12px #356b8b22}
#balloon-field .bonus-bubble:before{transform:rotate(35deg)}
#balloon-field .target-card{flex-direction:row;gap:13px;bottom:14px;min-width:0;padding:9px 17px;border:3px solid #fff;border-radius:26px;background:linear-gradient(145deg,#fffffff5,#e4f3ffeb);box-shadow:inset 0 2px #fff,0 4px #87abc2,0 8px 20px #24527e33}
#balloon-field .target-card>span{color:#537394;letter-spacing:1.3px;font-size:11px;max-width:42px;white-space:normal;text-align:center;line-height:1.5}
#balloon-field .target-card strong{flex-direction:row;gap:11px;color:#3f5d7f}
#balloon-field .target-card i{width:55px;height:61px;border-radius:50% 50% 47% 47%;background:radial-gradient(ellipse at 73% 23%,#fff 0 3%,#fff9 8%,transparent 26%),radial-gradient(ellipse at 70% 27%,transparent 30%,#0004 88%,#fff5 100%),var(--target);box-shadow:inset -2px 2px 3px #fff6,0 3px 5px #365a7730;animation:none}
#balloon-field .target-card b{min-width:58px;font-size:14px;letter-spacing:.7px}
#balloon-screen .balloon-message{color:#52728e;font-size:12px}
#home-screen .tile-picture.actual-balloon-cover{background-image:radial-gradient(circle at 83% 18%,#fff8ba 0 6%,transparent 7%),url('balloon-art/cloud.svg'),linear-gradient(#62afe0,#d7f3ff)!important;background-size:auto,110% 70%,auto!important;background-position:center,center bottom,center!important;background-repeat:no-repeat!important}
@keyframes sky-camera{from{transform:scale(1) translateY(0)}to{transform:scale(1.025) translateY(5px)}}
@keyframes sky-balloon-flight{from{transform:translateY(0) scale(1.06) rotate(-3deg)}to{transform:translateY(calc(-1 * var(--travel))) scale(.82) rotate(4deg)}}
@keyframes sky-target-flight{from{transform:translateY(0) scale(1.06) rotate(3deg)}to{transform:translateY(calc(-1 * var(--travel))) scale(.82) rotate(-3deg)}}
@keyframes sky-depth-drift{from{translate:-10px -7px}to{translate:25px 14px}}
@keyframes sky-near-cloud{from{translate:-12px -6px}to{translate:32px 20px}}
@keyframes sky-sun{to{box-shadow:inset -3px -4px 6px #eaa45140,0 0 0 16px #fff6c310,0 0 0 36px #fff6c308,0 0 90px 30px #ffefb350}}
@keyframes sky-precipitation{to{transform:translate(-150px,var(--weather-travel,900px))}}
@keyframes sky-snow{0%{translate:0 0}50%{translate:35px calc(var(--weather-travel,900px) * .5)}100%{translate:-15px var(--weather-travel,900px)}}
@keyframes sky-gust{10%{opacity:0}30%,65%{opacity:.7}85%,100%{translate:150cqw 8px;opacity:0}}
@keyframes sky-glint{0%,100%{opacity:.25}50%{opacity:.8}}
@keyframes sky-windy-bubble{0%,100%{translate:-24px 0;rotate:-7deg}50%{translate:24px 0;rotate:7deg}}
#balloon-field{container-type:inline-size}
#balloon-field.paused:before,#balloon-field.paused:after,#balloon-field.paused *:after{animation-play-state:paused!important}
@media(max-width:760px){
 #balloon-screen .balloon-top h1{font-size:23px}#balloon-screen .balloon-score{min-width:110px}
 .balloon-options{gap:6px}.balloon-length{gap:4px}.balloon-length>span{max-width:34px;line-height:1.3;font-size:8px;letter-spacing:.7px;margin-right:2px}
 #balloon-screen .balloon-length button{min-width:42px;min-height:44px;padding:5px;font-size:17px;border-radius:13px}
 .balloon-sky-picker{gap:4px}.balloon-sky-picker>span{display:none}#balloon-sky{max-width:126px;font-size:12px;padding-left:8px;padding-right:6px}
 .balloon-option-note{font-size:10px;margin:4px 0 6px}
 #balloon-field{height:calc(100dvh - 340px);min-height:345px;border-radius:25px}
 #balloon-field .weather-sun{width:58px;height:58px;right:12%;top:8%}
 #balloon-field .target-card{bottom:12px;padding:7px 12px;gap:9px;border-radius:22px}#balloon-field .target-card i{width:45px;height:50px}#balloon-field .target-card b{font-size:13px;min-width:53px}
 #balloon-field .balloon-weather-name{left:12px;top:12px;font-size:10px}
}
@media(max-height:500px) and (orientation:landscape){#balloon-screen .balloon-top h1{font-size:23px}#balloon-field{height:360px;min-height:360px}.balloon-option-note{margin:2px}}
@media(prefers-reduced-motion:reduce){
 #balloon-field:before,#balloon-field:after,#balloon-field .pop-balloon:after,#balloon-field .sky-cloud,#balloon-field .balloon-weather *{animation:none!important}
 #balloon-field .sky-wind,#balloon-field .balloon-weather>i{display:none}
 #balloon-field .pop-balloon{translate:none!important;rotate:none!important}
 #balloon-field .pop-balloon:not(.bonus-bubble){animation-name:balloon-flight;animation-duration:var(--speed);animation-delay:var(--delay)}
 #balloon-field .pop-balloon.target-rescue:not(.bonus-bubble){animation-name:target-flight}
}
#balloon-field .weather-sun{isolation:isolate;border:2px solid #fff7c9;box-shadow:inset -5px -7px 12px #eaa74455,inset 5px 5px 9px #fffef4,0 0 0 12px #ffe9a423,0 0 55px 20px #ffe5a772,0 0 95px 35px #fff0c530}
#balloon-field .weather-sun:before{content:'';position:absolute;inset:-39px;border-radius:50%;background:repeating-conic-gradient(from 8deg,#fff2ae88 0deg 7deg,transparent 8deg 30deg);mask:radial-gradient(circle,transparent 0 46%,#000 49% 59%,transparent 62%);animation:sky-sun-rays 48s linear infinite;pointer-events:none}
#balloon-field .weather-sun:after{content:'';position:absolute;inset:8% 9% 45% 38%;border-radius:50%;background:radial-gradient(ellipse,#fffef8dd,transparent 70%);filter:blur(3px);pointer-events:none}
#balloon-field .sky-depth-cloud{filter:drop-shadow(0 9px 8px #416f9a29);will-change:translate,transform}
#balloon-field .sky-depth-5{left:54%;top:13%;width:13%;height:8%;opacity:.3;animation-duration:53s;animation-direction:alternate-reverse}
#balloon-field .sky-depth-6{left:27%;top:53%;width:31%;height:18%;opacity:.5;animation-duration:31s;animation-delay:-14s}
#balloon-field .sky-depth-cloud:nth-of-type(even){animation-direction:alternate-reverse}
#balloon-field[data-weather=windy] .sky-depth-cloud{animation-duration:10s;filter:drop-shadow(7px 7px 7px #416f9a29)}
#balloon-field[data-weather=rainbow] .sky-depth-cloud{filter:drop-shadow(0 5px 6px #a6b9db33)}
#balloon-field[data-weather=rainy] .sky-depth-cloud{filter:brightness(.78) saturate(.85) drop-shadow(0 10px 8px #23476c55)}
#balloon-field[data-weather=snowy] .sky-depth-cloud{filter:drop-shadow(0 8px 8px #94c6df77)}
#balloon-field .balloon-weather:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 84% 8%,#fff4bd33,transparent 48%);animation:sky-atmosphere 16s ease-in-out infinite alternate}
#balloon-field[data-weather=cloudy] .balloon-weather:after{background:linear-gradient(115deg,transparent 25%,#ffffff38 48%,transparent 70%)}
#balloon-field[data-weather=rainy] .balloon-weather:after{background:linear-gradient(145deg,#29466a25,transparent 45%,#f1faff22 90%)}
#balloon-field[data-weather=snowy] .balloon-weather:after{background:radial-gradient(ellipse at 50% 70%,#ffffff55,transparent 65%)}
#balloon-field[data-weather=rainbow] .balloon-weather:after{background:radial-gradient(ellipse at 62% 23%,#fff9c388,transparent 50%)}
@keyframes sky-sun-rays{to{transform:rotate(360deg)}}
@keyframes sky-atmosphere{to{opacity:.55;transform:translateX(2%)}}
@media(prefers-reduced-motion:reduce){#balloon-field .weather-sun:before,#balloon-field .balloon-weather:after{animation:none!important}}
.balloon-mode{display:flex;gap:4px;padding:3px;background:#d8eaf5;border:2px solid #fff;border-radius:16px;box-shadow:0 3px #b7cfdd}
#balloon-screen .balloon-mode button{min-height:40px;padding:7px 11px;border-radius:12px;color:#4d6a8a;font-size:13px;font-weight:900}
#balloon-screen .balloon-mode button[aria-pressed=true]{background:linear-gradient(#fff5ce,#ffdb79);box-shadow:0 2px #cba85b;color:#71521e}
#balloon-screen .balloon-mode button:focus-visible{outline:3px solid #664dc6;outline-offset:2px}
#balloon-field .balloon-digit{position:absolute;z-index:3;top:21%;left:10%;width:80%;height:48%;display:grid;place-items:center;color:#fff;font-size:clamp(34px,5vw,56px);font-weight:1000;line-height:1;text-shadow:0 2px 2px #294665aa,0 0 5px #29466577;pointer-events:none}
#balloon-field .target-card .number-target i{display:none}
#balloon-field .target-card .number-target b{display:grid;place-items:center;min-width:50px;min-height:50px;border-radius:16px;background:#fff8d9;color:#4c6394;font-size:35px;line-height:1}
@media(max-width:760px){.balloon-options{flex-wrap:wrap;justify-content:center;gap:5px 9px}#balloon-screen .balloon-mode button{min-height:37px;padding:5px 8px;font-size:12px}#balloon-screen .balloon-length button{min-height:40px}#balloon-sky{min-height:40px}#balloon-field .balloon-digit{font-size:39px}}
#balloon-field .bonus-bubble{backdrop-filter:blur(7px);background:radial-gradient(circle at 28% 21%,#fffdf9e6 0 5%,transparent 22%),radial-gradient(circle at 75% 80%,#bcebf477,transparent 44%),#e8f9ff9c}
#balloon-field .bonus-bubble.gold{background:radial-gradient(circle at 28% 21%,#fffdf9f0 0 5%,transparent 22%),radial-gradient(circle at 75% 80%,#ffe5a277,transparent 45%),#fff3c49c}
#balloon-field .bonus-bubble.sparkle{background:radial-gradient(circle at 28% 21%,#fffdf9f0 0 5%,transparent 22%),conic-gradient(from 40deg,#ffd0ee88,#abeaff99,#fff3b988,#cab3ff99,#ffd0ee88)}
#balloon-field .bonus-bubble:before{inset:13% 15% auto auto;width:17%;height:11%;border:0;border-radius:50%;background:radial-gradient(ellipse,#fffefddd,transparent 75%);box-shadow:none;transform:rotate(-30deg)}
#balloon-field .bonus-bubble:after{display:none}