.balloon-chase{--accent:#c95b5d;--soft:#f9e5df;background:#d9f0ff}
.balloon-stage{position:relative;min-height:0;overflow:hidden;border-radius:24px;background:url('assets/balloon-chase/park-stall-v159.webp') center/cover no-repeat;isolation:isolate}
.balloon-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#72cfff12,transparent 45%,#57311c12)}
.target-sign{position:absolute;left:1.7%;top:5.5%;z-index:9;width:25%;min-height:14%;padding:clamp(8px,1.1vw,18px);display:flex;flex-direction:column;align-items:center;justify-content:center;border:clamp(5px,.55vw,10px) solid #b96d32;border-radius:18px;background:linear-gradient(180deg,#fffdf1,#fff1cc);box-shadow:inset 0 0 0 3px #ffe6a0,0 8px 18px #53301845;color:#173b63;text-align:center;transform:rotate(-.6deg)}
.target-sign:before{content:"";position:absolute;inset:-13px 7% auto;height:14px;border-radius:50%;background:radial-gradient(circle,#ffe67c 0 34%,#bc6b31 38% 55%,transparent 58%) 0 0/28px 14px}
.target-sign small{font:900 clamp(11px,1.35vmin,17px)/1 system-ui;text-transform:uppercase;letter-spacing:.12em;color:#c24f51}
.target-sign strong{max-width:100%;font:900 clamp(22px,3.4vw,56px)/1.02 system-ui;white-space:nowrap;letter-spacing:-.035em;text-shadow:0 2px 0 #fff}
.target-sign .article-het{color:#e23932}
.wind-timer{position:absolute;right:2.2%;top:3%;z-index:10;width:clamp(74px,7.2vw,126px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#ff725f calc(var(--time-left)*1turn),#fff8e7 0);box-shadow:0 7px 18px #244c6d55,0 0 0 4px #fff}
.wind-timer:before{content:"";position:absolute;inset:10%;border-radius:50%;background:#174b78;box-shadow:inset 0 0 14px #061f39}
.wind-timer span{position:absolute;inset:2%;border-radius:50%;box-shadow:inset 0 0 0 3px #173b63}
.wind-timer b{position:relative;color:#fff2ae;font-size:clamp(23px,3vw,48px)}
.balloon-field{position:absolute;inset:0;z-index:5;pointer-events:none;transition:opacity .25s}
.flying-balloon{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:clamp(118px,11.5vw,210px);aspect-ratio:.82;border:0;padding:0;background:transparent;cursor:pointer;pointer-events:auto;transform:translate(-50%,0);filter:drop-shadow(0 9px 8px #19445b55);animation:balloon-rise var(--flight) linear var(--delay) both;will-change:top,transform}
.balloon-chase[data-balloon-phase="listening"] .flying-balloon{animation-play-state:paused}
.flying-balloon.is-frozen{animation:none;transform:translate(-50%,0)}
.flying-balloon:disabled{cursor:default}
.balloon-body{position:absolute;inset:0 0 17%;border-radius:50% 50% 46% 46%/56% 56% 44% 44%;display:grid;place-items:center;background:radial-gradient(ellipse at 27% 17%,#fff 0 3%,#ffffffc9 4% 8%,transparent 9% 18%),radial-gradient(ellipse at 69% 74%,#fff3 0 12%,transparent 32%),linear-gradient(128deg,var(--balloon-light) 3%,var(--balloon) 46%,var(--balloon-dark) 100%);border:clamp(3px,.3vw,5px) solid #fff9;box-shadow:inset -16px -18px 25px #2a123a3b,inset 12px 14px 22px #fff5,0 0 0 2px #39224138;animation:balloon-bob 1.8s ease-in-out infinite alternate;overflow:visible}
.balloon-body:after{content:"";position:absolute;left:13%;top:9%;width:29%;height:54%;border-radius:50%;border-left:clamp(4px,.55vw,10px) solid #fff9;transform:rotate(24deg);filter:blur(.4px);pointer-events:none}
.balloon-medallion{position:relative;width:74%;aspect-ratio:1;border:clamp(4px,.4vw,7px) solid #fffbe5;border-radius:50%;padding:6%;display:grid;place-items:center;overflow:hidden;background:#fff;box-shadow:0 0 0 clamp(2px,.22vw,4px) #f2bd58,0 5px 12px #17344f45,inset 0 4px 10px #18304a20}
.balloon-medallion:after{content:"";position:absolute;inset:3%;border:2px solid #fff9;border-radius:50%;pointer-events:none}
.balloon-medallion img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.balloon-knot{position:absolute;left:50%;bottom:11%;width:16%;aspect-ratio:1;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(135deg,var(--balloon-light),var(--balloon-dark));transform:translateX(-50%);filter:drop-shadow(0 2px 1px #16304455)}
.balloon-string{position:absolute;left:50%;top:88%;width:2px;height:44%;background:linear-gradient(#9b7c57,#f7e5c5);transform-origin:top;transform:rotate(calc(var(--sway)*.08deg));box-shadow:1px 0 #fff8}
.balloon-coral{--balloon:#f16662;--balloon-light:#ffaaa0;--balloon-dark:#a82e3d}.balloon-blue{--balloon:#279bd4;--balloon-light:#8ee5ff;--balloon-dark:#1760a4}.balloon-gold{--balloon:#efb72f;--balloon-light:#ffe985;--balloon-dark:#bd6d10}.balloon-green{--balloon:#4bbb80;--balloon-light:#b1f3bd;--balloon-dark:#207b55}.balloon-purple{--balloon:#9160d7;--balloon-light:#d7b8ff;--balloon-dark:#6135a5}.balloon-pink{--balloon:#e46eb2;--balloon-light:#ffc3e9;--balloon-dark:#a83b82}
.flying-balloon.wrong .balloon-body{animation:balloon-wrong .18s linear 4;border-color:#ffebe4;box-shadow:0 0 0 7px #e43d34,0 0 25px #e43d34}
.flying-balloon.escaping{animation:balloon-escape .78s cubic-bezier(.2,.75,.25,1) forwards}
.flying-balloon.caught{z-index:8;animation:balloon-catch 1.05s cubic-bezier(.28,.76,.38,1) forwards}
.balloon-counter{position:absolute;left:1.5%;top:24%;z-index:8;width:26%;height:39%;pointer-events:none}
.balloon-counter header{position:absolute;left:8%;right:8%;bottom:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:.5em .8em;border:clamp(3px,.3vw,5px) solid #a65e2d;border-radius:10px;background:linear-gradient(180deg,#fff5cf,#f3c47d);box-shadow:inset 0 0 0 2px #ffe8ac,0 5px 10px #4b281c55;color:#173b63;font:900 clamp(11px,1.15vw,18px)/1 system-ui;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-.4deg)}
.balloon-counter header b{padding:.25em .55em;border-radius:999px;background:#174b78;color:#fff2ae;white-space:nowrap}
.earned-balloons{position:absolute;left:0;right:0;top:0;height:82%;display:grid;grid-template-columns:repeat(8,1fr);align-items:end;gap:0;filter:drop-shadow(0 5px 4px #304f6445)}
.stand-balloon{position:relative;width:118%;margin-left:-9%;aspect-ratio:.82;animation:stand-float 3.2s ease-in-out infinite alternate;animation-delay:calc(var(--n,0)*-.17s);transform-origin:50% 100%}
.stand-balloon:nth-child(3n+1){--n:1;transform:translateY(5px) rotate(-3deg)}.stand-balloon:nth-child(3n+2){--n:2;transform:translateY(-5px) rotate(2deg)}.stand-balloon:nth-child(3n){--n:3;transform:translateY(2px) rotate(4deg)}
.stand-balloon .balloon-body{border-width:2px;box-shadow:inset -5px -6px 8px #2a123a3b,inset 4px 5px 7px #fff5}
.stand-balloon .balloon-body:after{border-left-width:3px}
.stand-balloon .balloon-medallion{border-width:2px;padding:5%;box-shadow:0 0 0 1px #f2bd58}
.stand-balloon .balloon-string{top:88%;height:64%;width:1px}
.children-queue{position:absolute;left:48%;right:1%;bottom:1.2%;height:44%;z-index:7;pointer-events:none}
.balloon-child{position:absolute;left:calc(var(--queue-index)*17%);bottom:0;width:clamp(180px,18vw,330px);height:100%;z-index:calc(10 - var(--queue-index));transform:scale(calc(1 - var(--queue-index)*.045));transform-origin:50% 100%;filter:drop-shadow(0 8px 6px #49331d45);will-change:transform,opacity}
.balloon-child.mobility-wide{width:clamp(215px,21vw,385px);margin-left:clamp(-34px,-1.6vw,-16px)}
.balloon-child img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.child-shadow{position:absolute;left:25%;right:25%;bottom:1%;height:6%;z-index:-1;border-radius:50%;background:#2f251c45;filter:blur(4px)}
.balloon-child.receiving{animation:child-cheer .38s ease-in-out 2}
.balloon-child.delivering{z-index:15;animation:child-deliver 2.5s cubic-bezier(.3,.05,.25,1) forwards}
.balloon-child.at-stand{z-index:15;transform:translateX(-20vw)}
.balloon-child.exiting{z-index:15;animation:child-exit-left 1.25s ease-in forwards}
.child-prize{position:absolute;left:8%;top:-36%;width:48%;aspect-ratio:.82;filter:drop-shadow(0 7px 7px #2347);transform-origin:center bottom}
.child-prize .balloon-body{animation:none}
.child-prize .balloon-string{left:50%;top:88%;height:50%;transform:rotate(-24deg);transform-origin:top}
.child-prize.depositing{animation:prize-deposit .56s ease-in forwards}
.handoff-marker{position:absolute;left:51%;bottom:9%;z-index:4;width:clamp(55px,6vw,95px);aspect-ratio:1;border:3px dashed #fff;border-radius:50%;display:grid;place-items:center;background:#215a77a8;color:#fff;box-shadow:0 0 18px #fff8;animation:handoff-pulse 1.2s ease-in-out infinite}
.handoff-marker span{font-size:clamp(25px,3.5vw,52px)}
.balloon-status{position:absolute;left:50%;bottom:1%;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@keyframes balloon-rise{from{transform:translate(-50%,12vh)}to{transform:translate(calc(-50% + var(--sway)),-76vh)}}
@keyframes balloon-bob{from{transform:rotate(-2deg)}to{transform:rotate(2deg) translateY(-5px)}}
@keyframes balloon-wrong{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes balloon-escape{to{top:-45%;transform:translate(calc(-50% + var(--sway)*2),-25vh) rotate(12deg);opacity:.3}}
@keyframes balloon-catch{55%{left:57%;top:31%;transform:translate(-50%,0) scale(.9)}100%{left:55.5%;top:41%;transform:translate(-50%,0) scale(.72);opacity:1}}
@keyframes child-cheer{50%{transform:translateY(-9px) rotate(-2deg)}}
@keyframes child-deliver{0%{transform:translateX(0)}65%{transform:translateX(-18vw) translateY(-3px)}100%{transform:translateX(-20vw)}}
@keyframes child-exit-left{0%{transform:translateX(-20vw)}100%{transform:translateX(-52vw);opacity:0}}
@keyframes prize-deposit{100%{transform:translate(-45%,-32%) scale(.42);opacity:0}}
@keyframes stand-float{to{translate:0 -5px}}
@keyframes handoff-pulse{50%{transform:scale(1.08);box-shadow:0 0 27px #fff}}
@media(max-width:1000px){.target-sign{width:28%}.flying-balloon{width:clamp(102px,12vw,150px)}.balloon-counter{width:28%;height:36%}.children-queue{left:45%;right:1%;height:40%}.balloon-child{width:20vw}.handoff-marker{left:48%}}
@media(orientation:portrait){.target-sign{left:2%;top:3%;width:43%;min-height:10%}.wind-timer{top:2%;right:3%}.flying-balloon{width:20vw}.balloon-counter{left:2%;bottom:2%;width:42%}.children-queue{left:42%;right:1%;height:30%}.balloon-child{left:calc(var(--queue-index)*17%);width:25vw}.handoff-marker{left:43%;bottom:22%}}
@media(prefers-reduced-motion:reduce){.flying-balloon{animation-duration:18s}.balloon-body,.handoff-marker{animation:none}.balloon-child.delivering{animation-duration:1.2s}.balloon-child.exiting{animation-duration:.6s}}
