/* Letter Balloons (js/arcade/balloons.js). Every class starts with .lb- */
.lb-wrap { display: grid; grid-template-rows: auto 1fr auto auto; gap: 8px; width: 100%; height: calc(100dvh - 140px); min-height: 520px; }
.lb-hud { display: flex; align-items: center; gap: 12px; width: min(100%, 560px); justify-self: center; }
.lb-goal { flex: 1; height: 16px; border-radius: 999px; background: #F6E3EC; overflow: hidden; }
.lb-goal i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #FF9EC4, var(--rose-d)); transition: width 0.3s; }
.lb-goal.lb-full i { background: linear-gradient(90deg, var(--sun), var(--green)); }
.lb-score { font: 900 22px/1 var(--font-ui); color: var(--rose-d); }
.lb-score::before { content: '🎈 '; font-size: 18px; }
.lb-sky { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(#BFE9FF, #EAF8FF 70%, #F7FFF4); box-shadow: inset 0 0 0 3px #D7EEF9; min-height: 240px; }
.lb-banner { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 900 34px/1 var(--font-ui); color: var(--grape-d); text-shadow: 0 2px 0 #fff; }
.lb-balloon { --c: #FF7BAC; position: absolute; top: 0; left: 50%; width: 64px; height: 76px; display: grid; place-items: center; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75) 0 10%, transparent 26%), var(--c); box-shadow: inset -6px -8px 0 rgba(0, 0, 0, 0.08); will-change: transform; }
.lb-balloon b { font: 900 34px/1 var(--font-ui); color: #fff; text-shadow: 0 2px 2px rgba(46, 42, 71, 0.35); }
.lb-string { position: absolute; top: 100%; left: 50%; width: 2px; height: 34px; background: rgba(46, 42, 71, 0.35); }
.lb-c0 { --c: #FF7BAC; } .lb-c1 { --c: #5EC8F2; } .lb-c2 { --c: #FFB547; } .lb-c3 { --c: #8E7CF0; } .lb-c4 { --c: #5ED18A; } .lb-c5 { --c: #F2706B; }
.lb-balloon.lb-pop { animation: lb-pop 0.4s ease-out forwards; }
.lb-balloon.lb-away { opacity: 0; transition: opacity 0.4s; }
.lb-pts { position: absolute; top: -10px; font: 900 20px/1 var(--font-ui); font-style: normal; color: var(--sun-d); text-shadow: 0 1px 0 #fff; animation: lb-up 0.45s ease-out forwards; }
.lb-msg { min-height: 1.4em; margin: 0; text-align: center; font: 700 17px/1.3 var(--font-ui); color: var(--muted); }
.lb-msg.lb-good { color: var(--green-d); }
.lb-msg.lb-bad { color: var(--danger-d); }
@keyframes lb-pop { 40% { scale: 1.35; opacity: 0.9; } 100% { scale: 1.6; opacity: 0; } }
@keyframes lb-up { to { transform: translateY(-24px); } }
@media (prefers-reduced-motion: reduce) { .lb-balloon.lb-pop { animation: none; opacity: 0; } }