html, body {
      line-height: 1;
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow:hidden;
      }

    body {
      font-family: 'Gotham', sans-serif;
      font-size: 1em;
      background-color: black;
      background-size: cover;
      background-image: url('../images/pie/bgen.jpg');
      background-attachment: scroll;
      position: relative;
      background-repeat: no-repeat; 
      max-height: 700px;  
      width: 100%;    
      }

    .spins-left {
      text-align: center;
      margin-top: 20px;
      color: #FFDF00;
      font-size: 13px;
      font-weight: 600;
      z-index: 999;
      top: 250px;
      position: absolute;   
      left: 50%;   
      transform: translate(-50%, -50%);
      background: url('../images/pie/countbar.png') no-repeat center;
      background-size: 150px 40px; /* Adjust to desired width and height */
      padding: 15px 13px; /* Adjust padding to fit the text inside the image */
      width: 100%;
      }  

    .wheel-frame {
      position: absolute;
      top: 453px; /* Center vertically */
      left: 50%; /* Center horizontally */
      transform: translate(-50%, -50%); /* Offset by half of its size to truly center */
      width: 320px; /* Adjust width according to the frame size */
      height: 320px; /* Adjust height according to the frame size */
      pointer-events: none; /* Allow clicks to pass through */
      z-index: 2; /* Ensure it's above the wheel but below the button */
      }


    .wheel-container {
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      left:10%;
      margin-top:240px;
      }

    .wheel {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transform-origin: center;
    }

    .pie-img {
      position: absolute;
      width: 50%;
      height: 100%;
      top: 0;
      left: 50%;
      transform-origin: 0 50%;
      opacity: 1; /* Fully visible */
      transition: opacity 0.2s ease-in-out;
    }

    .center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 80px;
      height: 80px;
      background-color: white;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }

.spin-btn {
  position: absolute;
  top: 95px;
  left: 34%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(145deg, #b30000, #800000, #660000); /* Darker red gradient with 3D effect */
  border: none;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15), /* General shadow */
              inset 0px 2px 5px rgba(255, 255, 255, 0.8), /* Inner highlight */
              inset 0px -2px 5px rgba(0, 0, 0, 0.2); /* Inner shadow for depth */
  text-align: center;
  transition: background 0.2s ease, box-shadow 0.2s ease; /* Transition for background and shadow */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Text shadow for 3D effect */
  transform: translate(-50%, -50%); /* Center the button */
  animation: pulse 0.5s infinite; /* Pulse animation */
}

.spin-btn:active {
background: linear-gradient(145deg, #f6e58d, #f9ca24, #f39c12); /* Lighter gold gradient with 3D effect */
color: #000;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2), /* Slightly less pronounced shadow */
              inset 0px 2px 5px rgba(255, 255, 255, 0.6), /* Reduced inner highlight */
              inset 0px -2px 5px rgba(0, 0, 0, 0.3); /* Darker inner shadow */
  transform: translate(-50%, -50%) scale(0.95); /* Slight shrink effect on press */
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Optional hover effect */
.spin-btn:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2),
              inset 0px 2px 5px rgba(255, 255, 255, 0.9), /* Enhanced inner highlight */
              inset 0px -2px 5px rgba(0, 0, 0, 0.3); /* Enhanced inner shadow */
}


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

    .blink {
      animation: colorBlink 0.5s ease-in-out 5 alternate; /* Blink 5 times */
    }

/*---------------------------------------------------------------------------------------------------------------------*/
    /* Popup GIF */  
#overlay {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100vw;
  height: 830vh;
  background-color: rgba(0, 0, 0, 0.8); 
  z-index: 1888; 
  display: none;    
}

#gifContainer {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1900;
  display: none;
}

#gifContainer img {
  width: 400px; 
  height: auto;
}

#popup {
  position: fixed;
  height: 400px;
  width: 300px;    
  top:82%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  display: none;
  text-align: center;
  padding: 50px; 
  border-radius: 10px; 
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); 
}

#popup p {
  color: #fff; 
  font-size: 13px; 
  margin: 0px 10px;
}

#popup .cta-button {
  display: inline-block;
  padding: 0px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 15px;
  filter: drop-shadow(0 7px 10px rgba(218, 165, 32, 0.9));
  animation: zoomInOut 0.7s infinite;
  transform: translateX(-50%, -50%);
  margin-left: 30px; 
  margin-top: -0.7rem;    
} 

@keyframes zoomInOut {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.13);
  }
}
/*---------------------------------------------------------------------------------------------------------------------*/
    /* Media Queries */
    @media (max-width: 1200px) {
      .wheel-frame {
        width: 360px;
        height: 360px;
        top: 490px;
        left: 50%;
      }
        
      .wheel-container {
        width: 315px;
        height: 315px;
        top: 94px;
        left: 10.5%;
      }
      .spin-btn {
        width: 100px;
        height: 100px;
        top: 105px;
        left: 34%;
      }
    }

    @media (min-width: 768px)  {
    body {
        background-size: 400px;
        max-width: 400px;
        background-position: top;
        left: 50%;
        transform: translateX(-50%); 
    }   

      .spins-left {
        font-size: 13px;
        background-size: 150px 40px;
        top: 275px;
      }
        
      .wheel-frame {
        width: 360px;
        height: 360px;
        top: 490px;
        left: 50%;
      }
        
      .wheel-container {
        width: 315px;
        height: 315px;
        top: 94px;
        left: 10.5%;
      }
      .spin-btn {
        width: 100px;
        height: 100px;
        top: 105px;
        left: 34%;
      }
    }

@media (min-width: 400px) and (max-width: 767px)  {
    body {
        background-size: 400px;
        max-width: 400px;
        background-position: top;
        left: 50%;
        transform: translateX(-50%);
        overflow-y:hidden;
    }   
    
      .spins-left {
        font-size: 13px;
        background-size: 150px 40px;
        top: 275px;
      }
        
      .wheel-frame {
        width: 350px;
        height: 350px;
        top: 490px;
        left: 50%;
      }
        
      .wheel-container {
        width: 310px;
        height: 310px;
        top: 94px;
        left: 11%;
      }
      .spin-btn {
        width: 100px;
        height: 100px;
        top: 105px;
        left: 34%;
      }
    }

@media (min-width: 370px) and (max-width: 399px)  {
    body{
        background-size: 370px;
        max-width: 370px;
        background-position: top;
        left: 50%;
        transform: translateX(-50%);
    }     
    
      .spins-left {
        font-size: 13px;
        background-size: 140px 40px;
        top: 250px;
      }

      .wheel-frame {
        width: 330px;
        height: 330px;
        top: 450px;
        left: 50%;
      }
        
      .wheel-container {
        width: 290px;
        height: 290px;
        top: 63px;
        left: 11%;
      }
      .spin-btn {
        width: 95px;
        height: 95px;
        top: 96px;
        left: 34%;
      }
    }

      
@media (min-width: 361px) and (max-width: 369px)  {
    body{
        background-size: 360px;
        max-width: 360px;
        background-position: top;
        left: 50%;
        transform: translateX(-50%);
    }
    
      .spins-left {
        font-size: 13px;
        background-size: 140px 40px;
        top: 240px;
      }
    
      .wheel-frame {
        width: 310px;
        height: 310px;
        top: 435px;
        left: 50%;
      }
        
      .wheel-container {
        width: 270px;
        height: 270px;
        top: 60px;
        left: 12%;
      }
      .spin-btn {
        width: 90px;
        height: 90px;
        top: 86px;
        left: 33%;
      }
    }
    
    
    
@media (min-width: 345px) and (max-width: 360px)  {
    body{
        background-size: 350px;
        max-width: 350px;
        background-position: top;
        left: 50%;
        transform: translateX(-50%);
    }    

      .spins-left {
        font-size: 12px;
        background-size: 140px 40px;
        top: 240px;
      }
    
      .wheel-frame {
        width: 310px;
        height: 310px;
        top: 435px;
        left: 50%;
      }
        
      .wheel-container {
        width: 270px;
        height: 270px;
        top: 60px;
        left: 11%;
      }
      .spin-btn {
        width: 90px;
        height: 90px;
        top: 86px;
        left: 33%;
      }
    }
      
    
@media (min-width: 320px) and (max-width: 344px)  {
    body{
        background-size: 320px;
        max-width: 320px;
        background-position: top;
        left: 50%;
        transform: translateX(-50%);
    }    
    
      .spins-left {
        font-size: 10px;
        background-size: 120px 35px;
        top: 220px;
      }
    
      .wheel-frame {
        width: 285px;
        height: 285px;
        top: 400px;
        left: 50%;
      }
    
      .wheel-container {
        width: 250px;
        height: 250px;
        top: 36px;
        left: 11%;
      }
      .spin-btn {
        width: 85px;
        height: 85px;
        top: 80px;
        left: 33.5%;
      }
    }

/*---------------------------------------------------------------------------------------------------------------------*/


    @-webkit-keyframes tada {
      0%, 100% {
        -webkit-transform: scale3d(1, 1, 1)
      }
      10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }
      30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg)
      }
      40%, 60%, 80% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg)
      }
    }

    @-moz-keyframes tada {
      0%, 100% {
        -moz-transform: scale3d(1, 1, 1)
      }
      10%, 20% {
        -moz-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }
      30%, 50%, 70%, 90% {
        -moz-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg)
      }
      40%, 60%, 80% {
        -moz-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg)
      }
    }

    @keyframes tada {
      0%, 100% {
        transform: scale3d(1, 1, 1)
      }
      10%, 20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
      }
      30%, 50%, 70%, 90% {
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 3deg)
      }
      40%, 60%, 80% {
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -3deg)
      }
    }

     /* Sound toggle button */
.sound-toggle {
  position: fixed;
  top: 20px; /* Adjust the distance from the top */
  right: 20px; /* Adjust the distance from the right */
  background: none; /* Remove default button background */
  border: none; /* Remove default button border */
  padding: 0; /* Remove padding */
  cursor: pointer; /* Show pointer cursor on hover */
  z-index: 2000; /* Ensure it's above other content */
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1); /* Slightly enlarge the icon */
  }
}

.sound-text {
  display: block; /* Ensure the span is a block element */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  line-height: 1; /* Adjust line height if needed */
  font-size: 11px;
}
      
.sound-icon {
  width: 50px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
  margin-top: -25px; /* Adjust this value to reduce or increase the gap */
  transition: transform 0.2s ease-in-out; /* Smooth transform changes */
}