.tpg-birthday-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 800px at 15% 15%, rgba(255, 77, 109, 0.22), transparent 60%),
    radial-gradient(1100px 700px at 85% 25%, rgba(76, 201, 240, 0.20), transparent 55%),
    radial-gradient(900px 700px at 50% 85%, rgba(6, 214, 160, 0.16), transparent 60%),
    rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(3px);
}

.tpg-birthday-modal {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: clamp(1.25rem, 3vw, 3rem);
  border-radius: 0;
  background: transparent;
  color: var(--bs-body-color, #fff);
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.tpg-birthday-title {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.tpg-birthday-subtitle {
  margin: 0.75rem 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  opacity: 0.9;
}

.tpg-birthday-actions {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.tpg-birthday-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(127, 127, 127, 0.18);
  color: currentColor;
}

.tpg-birthday-close:hover {
  background: rgba(127, 127, 127, 0.28);
}

.tpg-birthday-confetti {
  position: absolute;
  top: -16px;
  width: 10px;
  height: 16px;
  border-radius: 3px;
  opacity: 0.95;
  transform: translateY(-20px) rotate(0deg);
  animation: tpg-birthday-fall 1800ms linear infinite;
  pointer-events: none;
}

.tpg-birthday-confetti.is-slow {
  animation-duration: 2400ms;
}

.tpg-birthday-confetti.is-fast {
  animation-duration: 1400ms;
}

@keyframes tpg-birthday-fall {
  0% {
    transform: translateY(-30px) rotate(0deg);
  }
  100% {
    transform: translateY(calc(100vh + 60px)) rotate(360deg);
  }
}

.tpg-birthday-confetti.tpg-birthday-confetti-pop {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: tpg-birthday-pop var(--tpg-pop-duration, 900ms) ease-out forwards;
  z-index: 10000;
}

@keyframes tpg-birthday-pop {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate(0px, 0px)
      rotate(var(--tpg-pop-rot, 0deg));
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(var(--tpg-pop-x, 0px), var(--tpg-pop-y, 120px))
      rotate(var(--tpg-pop-rot, 360deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tpg-birthday-confetti {
    animation: none;
    display: none;
  }
}