.trybtn{
  width: 70%;
  height: 100%;
  object-fit: contain;
}
.winimg {
  width: 70%;
}
 .winbtn{
  top: 90%;
  width: 70%;
  height: 100%;
  object-fit: contain;
}

.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);
    }
  }

  #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 */
.lose.hidden {
    display: none;
}

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