.balloon-score { position: absolute; z-index: 8; top: 10px; right: 12px; border-radius: 999px; padding: 8px 13px; background: rgba(255,255,255,.94); font-size: 1.05rem; font-weight: 900; box-shadow: 0 4px 0 rgba(51,39,98,.15); }
.balloon-progress { position: absolute; z-index: 8; top: 16px; left: 13px; display: flex; gap: 4px; }
.balloon-progress i { width: 8px; height: 8px; border-radius: 50%; background: rgba(65,46,135,.17); }
.balloon-progress i.done { background: #ffb92f; }
.balloon-sky { position: relative; height: min(76vh, 610px); overflow: hidden; border: 7px solid #fff; border-radius: 34px; background: #55c9ff url("assets/parque-dos-baloes.png") center bottom / cover; box-shadow: 0 10px 28px rgba(48,69,124,.16); touch-action: manipulation; }
.flying-balloon { position: absolute; z-index: 3; left: var(--left); bottom: -150px; width: clamp(72px,18vw,104px); height: clamp(88px,22vw,124px); border: 5px solid rgba(255,255,255,.85); border-radius: 52% 48% 49% 51% / 44% 46% 54% 56%; cursor: pointer; box-shadow: inset -10px -12px 18px rgba(66,28,90,.18), inset 10px 8px 12px rgba(255,255,255,.35), 0 9px 15px rgba(40,46,99,.18); animation: balloon-rise var(--duration) var(--delay,0s) linear both; }
.flying-balloon::before { content: ""; position: absolute; bottom: -10px; left: 50%; width: 16px; height: 16px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.flying-balloon span { position: relative; z-index: 2; display: grid; width: 100%; height: 100%; place-items: center; font-size: clamp(2.15rem,10vw,3.3rem); filter: drop-shadow(0 3px 2px rgba(48,31,80,.15)); }
.flying-balloon i { position: absolute; top: 100%; left: 50%; width: 2px; height: 70px; background: rgba(85,65,105,.45); transform-origin: top; animation: string-sway .8s ease-in-out infinite alternate; }
.balloon-pink { background: #ff75ae; } .balloon-blue { background: #55caff; } .balloon-yellow { background: #ffd659; }
.balloon-purple { background: #a98aff; } .balloon-mint { background: #70dda6; } .balloon-orange { background: #ff9c62; }
.flying-balloon.popped { animation: balloon-pop .38s ease-out both; pointer-events: none; }
.balloon-burst { position: absolute; z-index: 6; font-size: 3.4rem; transform: translate(-50%,-50%); animation: burst-out .48s ease-out both; pointer-events: none; }
.balloon-hint { position: absolute; z-index: 2; top: 42%; left: 50%; font-size: 3rem; animation: balloon-hint 2s ease-in-out 3; pointer-events: none; }
@keyframes balloon-rise { from { transform: translate(0,0) rotate(-4deg); } 45% { transform: translate(var(--sway),-52vh) rotate(5deg); } to { transform: translate(var(--sway),-105vh) rotate(-3deg); } }
@keyframes string-sway { to { transform: rotate(8deg); } }
@keyframes balloon-pop { 45% { transform: scale(1.25); filter: brightness(1.25); } to { transform: scale(.05); opacity: 0; } }
@keyframes burst-out { from { transform: translate(-50%,-50%) scale(.2); } 65% { opacity: 1; } to { transform: translate(-50%,-50%) scale(1.8) rotate(40deg); opacity: 0; } }
@keyframes balloon-hint { 50% { transform: translate(-12px,-24px) scale(1.15); } }