.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("./FAFA777/Before/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;
  }

  /* Responsive popup styles */
  #pop1 {
    
    backdrop-filter: blur(2px);
  }

  #pop1 img {
    object-fit: contain;
    height: auto;
  }

  @media (max-width: 640px) {
    #pop1 {
      padding: 1rem;
    }
    
    #pop1 img {
      max-width: 100%;
    }
  }

  @media (max-width: 490px) {
    #pop1 {
      padding: 0.75rem;
    }
  }

  /* Desktop button enhancements */
  @media (min-width: 1280px) {
    #btnGetReward {
      transition: transform 0.2s ease;
    }
    
    #btnGetReward:hover {
      transform: scale(1.05);
    }
    
    #btnGetReward:active {
      transform: scale(0.98);
    }
  }