/* ==================== CELEBRATION CONTAINER ==================== */
.celebration-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}

/* ==================== CONFETTI PARTICLES ==================== */
.confetti-particle {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  will-change: transform, opacity;
  animation: confetti-burst 3.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Different confetti shapes */
.confetti-particle.confetti-rect {
  width: 12px;
  height: 6px;
  border-radius: 1px;
}

.confetti-particle.confetti-circle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.confetti-particle.confetti-strip {
  width: 4px;
  height: 14px;
  border-radius: 2px;
}

.confetti-particle.confetti-diamond {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Gold/celebration color palette */
.confetti-gold   { background: #f0c040; }
.confetti-gold2  { background: #ffd700; }
.confetti-amber  { background: #ffb300; }
.confetti-orange { background: #ff8f00; }
.confetti-white  { background: rgba(255, 255, 255, 0.9); }
.confetti-yellow { background: #ffe066; }

/* Main confetti burst animation — particles explode from center */
@keyframes confetti-burst {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  15% {
    opacity: 1;
    /* Position set via CSS custom properties */
    transform:
      translate(var(--cx, 0px), var(--cy, 0px))
      rotate(var(--cr, 180deg))
      scale(1.1);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(var(--cx, 0px) * 0.8),
        calc(var(--cy, 0px) + 300px)
      )
      rotate(calc(var(--cr, 180deg) * 3))
      scale(0.4);
  }
}

/* Staggered sparkle for extra pizzazz */
.confetti-particle.sparkle {
  animation: confetti-sparkle 3.5s ease-out forwards;
}

@keyframes confetti-sparkle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0deg);
  }
  8% {
    opacity: 1;
    transform: translate(0, 0) scale(1.5) rotate(90deg);
  }
  15% {
    transform:
      translate(var(--cx, 0px), var(--cy, 0px))
      scale(1) rotate(180deg);
  }
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(var(--cx, 0px) * 0.6),
        calc(var(--cy, 0px) + 250px)
      )
      scale(0.2)
      rotate(720deg);
  }
}

/* ==================== CONFETTI EMOJI BURST ==================== */
.confetti-emoji {
  position: absolute;
  font-size: 1.8em;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: emoji-burst 3s ease-out forwards;
}

@keyframes emoji-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0deg);
  }
  12% {
    opacity: 1;
    transform: translate(0, 0) scale(1.3) rotate(20deg);
  }
  25% {
    transform:
      translate(var(--cx, 0px), var(--cy, 0px))
      scale(1) rotate(var(--cr, 0deg));
  }
  75% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform:
      translate(
        calc(var(--cx, 0px) * 0.5),
        calc(var(--cy, 0px) + 200px)
      )
      scale(0.5)
      rotate(calc(var(--cr, 0deg) * 2));
  }
}

/* ==================== DEFEAT OVERLAY ==================== */
.defeat-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
  animation: defeat-bg 2.5s ease-in-out forwards;
}

@keyframes defeat-bg {
  0% {
    background: transparent;
  }
  15% {
    background: rgba(0, 0, 0, 0.25);
  }
  75% {
    background: rgba(0, 0, 0, 0.2);
  }
  100% {
    background: transparent;
  }
}

/* Floating sad emojis drifting down */
.defeat-emoji {
  position: absolute;
  font-size: 2em;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  animation: defeat-drift 3s ease-in forwards;
}

@keyframes defeat-drift {
  0% {
    opacity: 0;
    transform: translateY(-40px) rotate(0deg) scale(0.5);
  }
  12% {
    opacity: 0.8;
    transform: translateY(0) rotate(5deg) scale(1);
  }
  50% {
    opacity: 0.7;
    transform:
      translateY(calc(var(--dy, 200px) * 0.5))
      rotate(var(--dr, 10deg))
      scale(0.95);
  }
  85% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform:
      translateY(var(--dy, 200px))
      rotate(calc(var(--dr, 10deg) * 2))
      scale(0.7);
  }
}

/* Gentle horizontal sway for defeat emojis */
.defeat-emoji.sway-left {
  animation: defeat-drift-left 3s ease-in forwards;
}

@keyframes defeat-drift-left {
  0% {
    opacity: 0;
    transform: translate(0, -40px) rotate(0deg) scale(0.5);
  }
  12% {
    opacity: 0.8;
    transform: translate(0, 0) rotate(-5deg) scale(1);
  }
  50% {
    opacity: 0.7;
    transform:
      translate(-30px, calc(var(--dy, 200px) * 0.5))
      rotate(calc(var(--dr, -10deg)))
      scale(0.95);
  }
  85% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform:
      translate(-50px, var(--dy, 200px))
      rotate(calc(var(--dr, -10deg) * 2))
      scale(0.7);
  }
}

.defeat-emoji.sway-right {
  animation: defeat-drift-right 3s ease-in forwards;
}

@keyframes defeat-drift-right {
  0% {
    opacity: 0;
    transform: translate(0, -40px) rotate(0deg) scale(0.5);
  }
  12% {
    opacity: 0.8;
    transform: translate(0, 0) rotate(5deg) scale(1);
  }
  50% {
    opacity: 0.7;
    transform:
      translate(30px, calc(var(--dy, 200px) * 0.5))
      rotate(calc(var(--dr, 10deg)))
      scale(0.95);
  }
  85% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform:
      translate(50px, var(--dy, 200px))
      rotate(calc(var(--dr, 10deg) * 2))
      scale(0.7);
  }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 480px) {
  .confetti-particle {
    width: 7px;
    height: 7px;
  }

  .confetti-particle.confetti-rect {
    width: 9px;
    height: 4px;
  }

  .confetti-particle.confetti-strip {
    width: 3px;
    height: 10px;
  }

  .confetti-emoji {
    font-size: 1.4em;
  }

  .defeat-emoji {
    font-size: 1.6em;
  }
}