/********************************************
     * 1. GLOBAL RESET & BODY STYLES
     ********************************************/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {

      font-family: "Kanit", sans-serif;
     background: #674C31;
background: linear-gradient(180deg, rgba(54, 40, 26, 1) 0%, rgba(56, 37, 28, 1) 50%, rgba(0, 0, 0, 1) 100%);
      color: #fff;
overflow-x:hidden;
    }
    
     body:after{content:'';display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:url(img/bg.webp) no-repeat;background-size:cover;animation: float 3s ease-in-out infinite;pointer-events: none;z-index:0;}
     
     /* Floating animation keyframes */
@keyframes float {
  0%   {background-position:0 0; }
  50%  { background-position:0 -10px;  }
  100% { background-position:0 0;  }
}
   
    @keyframes glitter {
  0% {
    -webkit-transform: scale(1.0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.0);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 1;
  }
}

#app {
margin: auto;
    width: 100%;
    overflow: hidden;
    height: 100vh;
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
  pointer-events:none;

}

img.glitter-star {
  border-radius: 50%;
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: gold;
  animation: glitter 2s linear 0s infinite normal;
}

   /********************************************
     * 2. WRAPPER
     ********************************************/
    .wrapper {
      max-width: 900px;
      margin: 0 auto;
      padding: 20px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      transform-style: preserve-3d;
      position:relative;
      z-index:1;
    }
    
     /********************************************
     * 3. Header
     ********************************************/
      .header{margin-bottom:30px;}
    .header:after{content:'';display:block;background:url(img/logo_light.webp) no-repeat;width:554px;height:697px;position:absolute;top:-350px;left:0;right:0;margin:0 auto;opacity:0.4;pointer-events: none;}
    .header img{position:relative;z-index:1;width:202px;height:auto;}
    
      .header_title {text-align:center;}
      .header_title h1 {
      font-size: 70px;
      font-weight: 600;
      text-transform: uppercase;
      color: #fff;
      text-shadow:
        0 0 15px #c77418,
        0 0 25px #996123,
        0 0 35px #c77418;
    
      animation: flickerNeon 2s infinite alternate;
    }
    .header_title h2 {font-size:35px;font-weight:300;}
    
    @keyframes flickerNeon {
      0%, 100% {
        text-shadow:
          0 0 15px #c77418,
        0 0 25px #996123,
        0 0 35px #c77418;
      }
      50% {
        text-shadow:
          0 0 7px #ea881b,
          0 0 25px #f9be7d,
          0 0 45px #ea881b;
      }
    }


    
    
    /********************************************
     * 4. Jackpot
     ********************************************/
    .jackpot-info{text-align:center;margin-bottom:30px;}
    .jackpot-label{font-size:45px;font-weight:600;color:#FF6200;}
    .jackpot-value{font-size:80px;color:#FFED10;line-height:1;font-weight:600;text-shadow:
        0 0 15px #CEC00C,
         0 0 15px #CEC00C,
        0 0 15px #CEC00C;}
    #jackpot-amount{font-size:80px;color:#FFED10;font-weight:600;letter-spacing:6px;}
    
    
    /********************************************
     * 5. Rnadom Number
     ********************************************/
    .prize-section{display:flex;justify-content: space-between;flex-wrap: wrap;width:100%;align-items: center;text-align:center;background: #000;
background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);}

.prize-section:before{content:'';display:block;width:100%;height:5px;
background: #FF9110;
background: linear-gradient(90deg,rgba(255, 145, 16, 0) 0%, rgba(255, 145, 16, 1) 20%, rgba(255, 245, 227, 1) 40%, rgba(255, 145, 16, 1) 70%, rgba(255, 145, 16, 0) 100%);
}
.prize-section:after{
    content:'';display:block;width:100%;height:5px;
background: #FF9110;
background: linear-gradient(270deg,rgba(255, 145, 16, 0) 0%, rgba(255, 145, 16, 1) 20%, rgba(255, 245, 227, 1) 40%, rgba(255, 145, 16, 1) 70%, rgba(255, 145, 16, 0) 100%);
}


    .prize-box{width:49%;padding:15px 15px;}
     .prize-box h2{font-size:25px;font-weight:400;}
      .prize-box h2 br{display:none;}
    .line_separator{width:1px;height:136px;background:#FF9110;}
    .prize-number{font-size:80px;color:#38FF5E;line-height:1;font-weight:600;text-shadow:
        0 0 15px #2ECD4C,
         0 0 15px #2ECD4C,
        0 0 15px #2ECD4C;
    }
    .prize-number.spin-complete{
    animation: flickerNeon2 2s infinite alternate;
    }
    
     @keyframes flickerNeon2 {
      0%, 100% {
        text-shadow:
        0 0 15px #2ECD4C,
         0 0 15px #2ECD4C,
        0 0 15px #2ECD4C;
      }
      50% {
        text-shadow:
          0 0 25px #1BCB3C,
         0 0 25px #1BCB3C,
        0 0 25px #1BCB3C;
      }
    }
    
     /********************************************
     * 6. Button
     ********************************************/
     .button-container{width:100%;text-align:center;margin-top:30px;}
    #generate-btn{transition:all 0.4s ease-in-out;background: #FFB40B;padding:25px 5px;line-height:1;
background: radial-gradient(circle,rgba(255, 180, 11, 1) 0%, rgba(255, 108, 0, 1) 100%);border:none;font-size:35px;font-weight:600;color:#000;width:50%;display:block;border-radius:50px;margin:0 auto;cursor:pointer;}
#generate-btn:hover{transform:scale(0.95);}

#cta-container{width:100%;text-align:center;margin-top:20px;}
#cta-container .cta-btn{transition:all 0.4s ease-in-out;text-decoration:none;padding:25px 5px;line-height:1;
background: #A0FFB2;
background: radial-gradient(circle,rgba(160, 255, 178, 1) 0%, rgba(56, 255, 94, 1) 100%);border:none;font-size:35px;font-weight:600;color:#000;width:50%;display:block;border-radius:50px;margin:0 auto;cursor:pointer;}
.cta-btn:hover{transform:scale(0.95);}


.mobile-bg{display:none;}

 /********************************************
    Responsive
     ********************************************/
@media only screen and (max-width: 1600px) {
    .header{margin-bottom:10px;}
#jackpot-amount{font-size:70px;}
.prize-number{font-size:70px;}
#generate-btn{font-size:30px;padding:20px 5px;}
#cta-container .cta-btn{font-size:30px;padding:20px 5px;}
}


@media only screen and (max-width: 767px) {
   body:after{display:none;}
     .mobile-bg img{width:100%;margin-top:30px;/*position:absolute;bottom:0;left:0;*/}
     .header_title h1{font-size:40px;}
     .header_title h2{font-size:25px;}
     .jackpot-label{font-size:30px;margin-top:30px;}
     #jackpot-amount{font-size:40px;letter-spacing:2px;}
     .jackpot-value{font-size:40px;}
.prize-number{font-size:40px;}
.prize-box h2{font-size:20px;}
 .prize-box h2 br{display:block;}
.prize-box{padding:10px;}

#generate-btn{width:100%;padding:15px;font-size:25px;}
#cta-container .cta-btn{width:100%;padding:15px;font-size:25px;}
.mobile-bg{display:block;}
}