#popupContent {
  border-radius: 10px;
  animation: dropIn 0.3s ease-out forwards;
}

@keyframes dropIn {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

#winnerContent {
  border-radius: 10px;
  animation: dropIn 0.3s ease-out forwards;
}

@keyframes dropIn {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (max-width: 490px) {
  .scale-mobile-up {
    /* px-3 */
    padding-right: 0.75rem;
    max-width: 200px !important;
  }

  /* New rule for mobile background image */
  .bg-mobile {
    background-image: url("./GREEN/BG.png") !important;
    /* Change to your mobile background image */
    background-size: cover !important;
    /* Ensure it covers the screen */
    background-position: center !important;
    position: fixed;
    /* Center the image */
  }
}

/* CSS keyframes for smooth 360° spin */
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  z-index: 60;
  pointer-events: none;
  animation: confetti-fall 3s linear forwards;
}

/* Glow effect for spinning */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
  }
}

.spinning-glow {
  animation: glow-pulse 1s ease-in-out infinite;
  border-radius: 50%;
}

/* Smooth reload animation */
@keyframes smooth-reload {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(0.8) rotate(180deg);
    opacity: 0.5;
  }

  100% {
    transform: scale(1) rotate(360deg);
    opacity: 1;
  }
}

.reload-animation {
  animation: smooth-reload 1s ease-in-out;
}

/* Reset animation */
@keyframes reset-wheel {
  0% {
    transform: rotate(var(--current-rotation));
    opacity: 0.7;
  }

  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

.reset-animation {
  animation: reset-wheel 0.8s ease-out forwards;
}

/* show/hide helper if you don't use Tailwind */
.pop1.hidden {
  display: none;
}

.pop1:not(.hidden) {
  display: flex;
}

.claim-popup-content {
  background: white;
  /* White background like your screenshot */
  border-radius: 12px;
  /* Rounded corners */
  padding: 36px 10px;
  /* Inner spacing */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  /* Soft shadow */
  max-width: 450px;
  /* Limit width */
  margin: 0 auto;
  /* Center horizontally */
  text-align: center;
  overflow: hidden;
  max-height: 100%;
  /* Center text & button */
}

.claim-popup-content h3 {
  font-family: "Noto Sans Khmer", sans-serif;
  /* Khmer font for clarity */
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  /* Dark readable text */
  margin-bottom: 12px;
}

.claim-popup-content a img {
  display: block;
  margin: 0 auto;
  max-width: 290px;
  /* Telegram button size */
  height: auto;
}

.scale-animation {
  animation: pulse 2s infinite;
}

.wobble-animation {
  animation: wobble 1s ease-in-out;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

@keyframes wobble {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(5deg);
  }

  30% {
    transform: rotate(-5deg);
  }

  45% {
    transform: rotate(4deg);
  }

  60% {
    transform: rotate(-4deg);
  }

  75% {
    transform: rotate(2deg);
  }

  90% {
    transform: rotate(-1deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.swal2-popup.sweetalert-custom-popup {
  background: transparent !important;
  width: auto !important;
  padding: 0 !important;
}

.swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* Wheel specific styles */
#inWheel {
  transform-origin: center center;
  transform: rotate(0deg);
}

/* Spinning state */
#inWheel.spinning {
  transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Final state - lock position */
#inWheel.finished {
  transition: none !important;
}

.sweetalert-custom-container {
  align-items: flex-start !important;
  padding-top: 100px !important;
  padding-top: 100px !important;
  /* make sure to include “px” */
}

.sweetalert-custom-popup {
  margin-top: 10 !important;
  margin-top: 10px !important;
  /* include “px” here too */
}

@keyframes popupPop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}