.bubble-wrapper {
  position: relative;
  width: fit-content;
  height: fit-content;
}


.bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  z-index: 1000;
  animation-fill-mode: forwards;
  padding: 3px;
}

.bubble.contained {
  z-index:1000;
  animation: floatInside 2s ease-in-out infinite;
}

@keyframes floatInside {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
}

.bubble.escaping {
  z-index: 3;
  animation: floatAway 2.5s ease-out forwards;
}

@keyframes floatAway {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(calc(-100px + 200px * var(--x)), -150px) scale(1.8);
    opacity: 0;
  }
}

.gear {
  animation: rotate 2s linear infinite;
  font-size: 1.2em;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── Loader phrase — shown below the wrapper during loading ── */
.bubble-phrase {
    font-size:      12px;
    color:          #999;
    margin-top:     6px;
    font-style:     italic;
    user-select:    none;
    pointer-events: none;
    opacity:        0;
    transition:     opacity 0.25s ease;
}