.giant-bubble-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background: rgb(5 8 25 / 30%);
}

.giant-bubble-hint {
  position: absolute;
  top: max(7vh, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  z-index: 2;
  margin: 0;
  color: #f5fbff;
  font-size: clamp(18px, 5vw, 28px);
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 14px rgb(0 0 0 / 45%);
  transition: opacity 160ms ease;
}

.giant-bubble-hint--hidden { opacity: 0; }

.giant-bubble {
  --giant-size: min(74vw, 70vh, 560px);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  width: var(--giant-size);
  height: var(--giant-size);
  padding: 0;
  border: 2px solid rgb(255 255 255 / 58%);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 29% 23%, rgb(255 255 255 / 94%) 0 2%, rgb(255 255 255 / 32%) 4%, transparent 13%),
    radial-gradient(circle at 68% 72%, rgb(94 241 255 / 20%), transparent 31%),
    conic-gradient(from 205deg, rgb(255 104 221 / 22%), rgb(255 255 255 / 3%) 24%, rgb(89 231 255 / 28%) 49%, transparent 68%, rgb(184 119 255 / 26%));
  box-shadow:
    inset 22px 24px 44px rgb(255 255 255 / 13%),
    inset -28px -22px 50px rgb(62 220 255 / 11%),
    0 0 45px rgb(137 230 255 / 20%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  will-change: transform, opacity;
  animation: giant-bubble-grow 1.8s cubic-bezier(.16, .8, .24, 1) both,
    giant-bubble-float 3.4s ease-in-out 1.8s infinite alternate;
}

.giant-bubble::after {
  content: "";
  position: absolute;
  width: 27%;
  height: 11%;
  left: 20%;
  top: 14%;
  border-radius: 50%;
  border-top: clamp(3px, .7vw, 6px) solid rgb(255 255 255 / 77%);
  transform: rotate(-28deg);
}

.giant-bubble:focus-visible { outline: 3px solid #dcfcff; outline-offset: 7px; }
.giant-bubble--popping { animation: giant-bubble-pop 180ms ease-out forwards; pointer-events: none; }

.giant-bubble-burst {
  position: fixed;
  width: 0;
  height: 0;
  pointer-events: none;
}

.giant-bubble-wave {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 3px solid rgb(207 249 255 / 78%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  animation: giant-bubble-wave 720ms ease-out var(--wave-delay) forwards;
}

.giant-bubble-confetti {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 60% 40% 55% 45%;
  background: hsl(var(--burst-hue) 90% 74% / 90%);
  box-shadow: 0 0 10px hsl(var(--burst-hue) 90% 70% / 65%);
  will-change: transform, opacity;
  animation: giant-bubble-confetti 900ms cubic-bezier(.12, .75, .2, 1) var(--burst-delay) forwards;
}

@keyframes giant-bubble-grow {
  from { transform: scale(.18); opacity: 0; }
  65% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes giant-bubble-float {
  from { transform: translate3d(-1.5vw, -1vh, 0) scale(1); }
  to { transform: translate3d(1.5vw, 1vh, 0) scale(1.025); }
}

@keyframes giant-bubble-pop {
  45% { transform: scale(1.08); opacity: 1; }
  to { transform: scale(1.18); opacity: 0; }
}

@keyframes giant-bubble-wave {
  10% { opacity: .85; }
  to { transform: translate(-50%, -50%) scale(18); opacity: 0; }
}

@keyframes giant-bubble-confetti {
  from { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  to { transform: translate3d(var(--burst-x), var(--burst-y), 0) rotate(var(--burst-rotation)); opacity: 0; }
}

@media (max-width: 480px) {
  .giant-bubble { --giant-size: min(82vw, 60vh); }
}

@media (prefers-reduced-motion: reduce) {
  .giant-bubble { animation: none; }
  .giant-bubble--popping { animation: giant-bubble-pop 1ms forwards; }
  .giant-bubble-wave { animation-duration: 300ms; }
  .giant-bubble-confetti { animation-duration: 420ms; }
}