#water-bubble-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 400;
  overflow: hidden;
}

.water-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 28% 28%, rgba(165, 48, 64, 0.95), rgba(122, 18, 40, 0.72) 55%, rgba(77, 15, 35, 0.55));
  border: 1px solid rgba(122, 18, 40, 0.7);
  box-shadow:
    inset 0 -3px 8px rgba(77, 15, 35, 0.35),
    0 2px 10px rgba(122, 18, 40, 0.28);
  animation: waterBubbleFloat var(--dur, 1.1s) ease-out forwards;
  transform: translate(-50%, -50%) scale(0.15);
  opacity: 0.9;
  will-change: transform, opacity;
}

.water-bubble.is-gold {
  background: radial-gradient(circle at 28% 28%, rgba(255, 242, 196, 0.98), rgba(212, 175, 55, 0.88) 52%, rgba(184, 134, 11, 0.7));
  border: 1px solid rgba(255, 215, 90, 0.85);
  box-shadow:
    inset 0 -3px 8px rgba(139, 90, 0, 0.32),
    0 2px 12px rgba(212, 175, 55, 0.42);
}

.water-ripple {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(122, 18, 40, 0.65);
  background: radial-gradient(circle, rgba(165, 48, 64, 0.28) 0%, rgba(122, 18, 40, 0.12) 70%, transparent 100%);
  animation: waterRipple 0.85s ease-out forwards;
  transform: translate(-50%, -50%) scale(0.25);
  opacity: 0.75;
  will-change: transform, opacity;
}

.water-ripple.is-gold {
  border: 2px solid rgba(212, 175, 55, 0.85);
  background: radial-gradient(circle, rgba(255, 215, 0, 0.34) 0%, rgba(212, 175, 55, 0.16) 70%, transparent 100%);
}

@keyframes waterBubbleFloat {
  0% {
    transform: translate(-50%, -50%) scale(0.15);
    opacity: 0.9;
  }
  55% {
    opacity: 0.55;
  }
  100% {
    transform: translate(calc(-50% + var(--drift, 0px)), calc(-50% - var(--rise, 70px))) scale(1);
    opacity: 0;
  }
}

@keyframes waterRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0.75;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #water-bubble-layer {
    display: none;
  }
}