/* win-animation.css */
/* Victory Animation Styles */
.victory-animation-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.victory-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5rem;
  font-weight: bold;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.8);
  opacity: 0;
  letter-spacing: 8px;
  font-family: 'Georgia', serif;
}

.victory-text.animate {
  animation: customVictory 4s ease-out forwards;
}

@keyframes customVictory {
  0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.3);
      color: #8b4513;
  }
  15% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.1);
      color: #8b4513;
  }
  35% {
      transform: translate(-50%, -50%) scale(1);
      color: #c0c0c0;
  }
  55% {
      color: #d4af37;
  }
  75% {
      transform: translate(-50%, -50%) scale(1);
      color: #d4af37;
  }
  100% {
      opacity: 0;
      transform: translate(-50%, -50%) translateY(-100px) scale(0.8);
      color: #d4af37;
  }
}

.victory-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #d4af37, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.victory-particle.animate {
  animation: particleFloat 3s ease-out forwards;
}

@keyframes particleFloat {
  0% {
      opacity: 1;
      transform: translateY(0px) scale(1);
  }
  100% {
      opacity: 0;
      transform: translateY(-180px) scale(0);
  }
}

.victory-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, transparent 40%, rgba(0,0,0,0.2) 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 999;
}

.victory-overlay.animate {
  animation: overlayPulse 4s ease-in-out forwards;
}

@keyframes overlayPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}