/* Bubble Pop (js/games/bubble-buddies.js): glossy bubbles rise from Duck's pond; the
   call card at the top shows what to pop and the jar beside it fills as they pop. */

.game-room .stage[data-scene="bubble-buddies"]:has(.pop-scene) {
  height: clamp(340px, calc(100svh - 300px - var(--room-feedback-space, 0px)), 820px);
  min-height: 340px; padding: clamp(8px, 1.2vw, 16px);
}
.game-room .stage[data-scene="bubble-buddies"]:has(.pop-scene) > .stage-inner { height: 100%; }
.pop-scene {
  --bubble: 96px; position: relative; height: 100%; min-height: 300px; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 24px; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: linear-gradient(180deg, #bfe8ff 0%, #d9f1ff 45%, #e9f8ff 80%, #cdeee6 100%);
}
.pop-top { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 0; pointer-events: none; }
.pop-call {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 12px; border-radius: 999px;
  background: #fffdf6; box-shadow: 0 5px 0 #9bc7e6, 0 10px 24px #2a5b8a22; color: #25406b; pointer-events: auto;
}
.pop-call-label { font: 600 clamp(16px, 2.4vh, 22px) Fredoka, system-ui, sans-serif; color: #5d7aa3; }
.pop-call-face { display: inline-flex; align-items: center; gap: 6px; min-height: clamp(44px, 7vh, 64px); }
.pop-call-text { font: 700 clamp(34px, 6vh, 56px)/1 Fredoka, system-ui, sans-serif; letter-spacing: .02em; }
.pop-call-emoji { font-size: clamp(34px, 6vh, 54px); line-height: 1; }
.pop-call-dots .pop-dots { width: clamp(44px, 7vh, 64px); height: clamp(44px, 7vh, 64px); fill: #25406b; }
.pop-scene[data-listening="true"] .pop-call { animation: pop-call 1.1s ease-in-out infinite; }
@keyframes pop-call { 50% { transform: scale(1.06); } }
.pop-meter { position: relative; width: min(38%, 220px); height: 22px; border-radius: 999px; background: #ffffffb0; box-shadow: inset 0 2px 0 #00000012; overflow: hidden; }
.pop-meter-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7fd3ff, #4aa8ff); transition: width .35s cubic-bezier(.3, 1.4, .5, 1); }
.pop-meter-text { position: relative; display: block; text-align: center; font: 600 14px/22px Fredoka, system-ui, sans-serif; color: #25406b; }

.pop-sky { position: relative; min-height: 0; overflow: hidden; }
.pop-bubble {
  position: absolute; left: 0; top: 0; width: var(--bubble); height: var(--bubble); padding: 0; border-radius: 50%;
  border: 3px solid #ffffffcc; cursor: pointer; will-change: transform; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, #ffffffee 0 12%, #ffffff66 13% 24%, transparent 25%),
    radial-gradient(circle at 50% 55%, #d8f0ffcc 0%, #a9dbff99 55%, #7cc4ff88 78%, #b9a5ff99 100%);
  box-shadow: inset -8px -10px 18px #6aa9ff55, inset 6px 8px 14px #ffffff88, 0 8px 18px #2a5b8a22;
  -webkit-tap-highlight-color: transparent;
}
.pop-bubble:nth-child(3n) { background: radial-gradient(circle at 32% 28%, #ffffffee 0 12%, #ffffff66 13% 24%, transparent 25%), radial-gradient(circle at 50% 55%, #ffe3f3cc 0%, #ffc4e499 55%, #ff9fcf88 78%, #a5c8ff99 100%); }
.pop-bubble:nth-child(3n + 1) { background: radial-gradient(circle at 32% 28%, #ffffffee 0 12%, #ffffff66 13% 24%, transparent 25%), radial-gradient(circle at 50% 55%, #e6ffe8cc 0%, #c2f5d299 55%, #8fe0c088 78%, #ffe29a99 100%); }
.pop-shine { position: absolute; top: 14%; left: 20%; width: 26%; height: 16%; border-radius: 50%; background: #fff; opacity: .7; transform: rotate(-30deg); pointer-events: none; }
.pop-face { position: relative; pointer-events: none; color: #25406b; }
.pop-face.numeral, .pop-face.letter { font: 700 calc(var(--bubble) * .5)/1 Fredoka, system-ui, sans-serif; }
.pop-face.letter.small { font-size: calc(var(--bubble) * .56); }
.pop-face.picture { font-size: calc(var(--bubble) * .5); line-height: 1; }
.pop-face.dots .pop-dots { width: calc(var(--bubble) * .62); height: calc(var(--bubble) * .62); fill: #25406b; display: block; }
.pop-bubble.popping { animation: pop-pop .3s ease-out forwards; pointer-events: none; }
@keyframes pop-pop { 0% { scale: 1; opacity: 1; } 60% { scale: 1.35; opacity: .8; } 100% { scale: 1.6; opacity: 0; } }
.pop-bubble.nope { animation: pop-nope .5s; }
@keyframes pop-nope { 20% { rotate: -12deg; scale: .92; } 45% { rotate: 10deg; } 70% { rotate: -6deg; } 100% { rotate: 0; scale: 1; } }
.pop-bubble.wait { animation: pop-wait .4s; }
@keyframes pop-wait { 50% { scale: .9; } }
.pop-bubble.glow { animation: pop-glow 1.2s ease-in-out 3; }
@keyframes pop-glow { 50% { box-shadow: 0 0 0 10px #ffe06699, inset -8px -10px 18px #6aa9ff55; scale: 1.1; } }
.pop-bubble.drift { transition: opacity .8s; opacity: 0; }
.pop-bit { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #9fd8ff; pointer-events: none; animation: pop-bit .55s ease-out forwards; }
.pop-bit:nth-child(2n) { background: #ffd1ec; }
@keyframes pop-bit { to { transform: rotate(var(--a)) translateY(calc(var(--bubble) * -.75)) scale(.3); opacity: 0; } }
.pop-scene[data-listening="true"] .pop-sky { filter: saturate(.85); }

.pop-pond { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; min-height: 34px; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, #7fd0c3 0 55%, transparent 56%), linear-gradient(0deg, #9fe0cf, #9fe0cf00); }
.pop-duck { position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%); font-size: clamp(32px, 6vh, 52px); animation: pop-duck 2.4s ease-in-out infinite; }
@keyframes pop-duck { 50% { transform: translateX(-50%) translateY(-6%) rotate(-4deg); } }
.pop-scene.paused .pop-duck { animation-play-state: paused; }

html.quiet .pop-duck, .pop-scene[data-quiet="true"] .pop-duck { animation: none; }
@media (prefers-reduced-motion: reduce) { .pop-duck, .pop-scene[data-listening="true"] .pop-call { animation: none; } }
@media (max-width: 700px) {
  .pop-top { padding: 8px 8px 0; }
  .pop-meter { width: 34%; height: 18px; }
  .pop-meter-text { font-size: 12px; line-height: 18px; }
}