/* --- Basic layout --- */
    html,
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      overflow: hidden;
   
    }

    .container {
   
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      height: 100vh;
      width: 100%;

    }

    .background {
      position: relative;
      overflow: hidden;
      height: 100%;
      width: 100%;
      max-width: 550px; 
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .background .bg {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }

    .content {
      position: absolute;
      top: 16%;
      left: 50%;
      width: 100%;
      max-width: 370px;
      transform: translate(-50%, -50%);
      z-index: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .content .logo {
      width: 100%;
      max-width: 200px;
      margin: 0 auto;
    }

    .content .text {
      width: 100%;
      max-width: 500px;
      margin: 0 auto;
    }

    /* --- Gift group positions (keeps your original HTML structure) --- */
    /* --- Gift group positions (keeps your original HTML structure) --- */
    .boxgif {
      position: absolute;
      top: 55%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 500px;
      gap: 15px;
      z-index: 10;
    }

    /* Columns */
    .pointer,
    .pointer1,
    .pointer2 {
      position: relative;
      width: 30%;
      display: flex;
      flex-direction: column;
      gap: 15px;
      align-items: center;
      justify-content: center;
      top: auto;
      left: auto;
      right: auto;
    }

    /* Common image styles */
    .pointer img,
    .pointer1 img,
    .pointer2 img {
      width: 100%;
      max-width: 90px;
      display: block;
      transform-origin: center center;
      transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      will-change: transform;
      animation: colorfulGlow 4s ease-in-out infinite;
    }

    /* Active border animation during cycling */
    .pointer img.active-border,
    .pointer1 img.active-border,
    .pointer2 img.active-border {
      animation: activeBorderGlow 0.3s ease-in-out !important;
      border: 4px solid rgba(255, 215, 0, 1);
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(255, 215, 0, 1), 
                  0 0 40px rgba(255, 180, 0, 0.8),
                  0 0 60px rgba(255, 140, 0, 0.6);
      filter: brightness(1.4);
      transform: scale(1.1);
      z-index: 100;
      position: relative;
    }

    /* Winner border - bright red/orange glow */
    .pointer img.winner-border,
    .pointer1 img.winner-border,
    .pointer2 img.winner-border {
      animation: winnerBorderGlow 1.5s ease-in-out infinite !important;
      border: 4px solid rgba(255, 60, 60, 1);
      border-radius: 20px;
      box-shadow: 0 0 20px rgba(255, 60, 60, 0.418), 
                  0 10px 50px rgba(255, 50, 50, 0.267),
                  inset 0 0 25px rgba(255, 255, 255, 0.4);
      filter: brightness(1.35);
      transform: scale(1.08);
      z-index: 100;
      position: relative;
      transition: all 0.5s ease-out;
    }

    /* Lose border - subtle purple/gray */
    .pointer img.lose-border,
    .pointer1 img.lose-border,
    .pointer2 img.lose-border {
      border: 4px solid rgba(139, 92, 246, 0.6);
      border-radius: 20px;
      box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
      filter: brightness(0.85) saturate(0.7);
      animation: none !important;
      z-index: 100;
      position: relative;
    }


    /* Start button */
    .btn {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 17%;
      z-index: 20;
      cursor: pointer;
      pointer-events: auto;
    }

    .btn img {
      width: 220px;
      display: block;
      animation: zoomInOut 2s ease-in-out infinite;
      transform-origin: center center;
      transition: transform 0.3s ease;
    }

    .footerimg{
      position: absolute;
      bottom: 2%;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 440px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 0px;
      padding: 0 10px;
      z-index: 3;
    }
    
    .left {
      flex: 0 0 35%;
      max-width: 150px;
      z-index: 1;
    }

    .left img {
      width: 100%;
      display: block;
    }
    
    .middle{
      width: 100%;
      flex: 0 0 45%;
      position: absolute;
      top: 78%;
      left: 50%;
      transform: translate(-50%, -50%);
      max-width: 340px;
      z-index: 10;
    }
    
    .middle img {
      width: 100%;
    }
    
    .right {
      flex: 0 0 45%;
      max-width: 190px;

      z-index: 1;
    }

    .right img {
      width: 100%;
      display: block;
    }

   
    /* Colorful Glow effect animation for gift boxes */
    @keyframes colorfulGlow {
      0% {
        filter: drop-shadow(0 0 10px rgba(255, 217, 0, 0.308)) 
                drop-shadow(0 0 30px rgba(255, 179, 0, 0.274))
                brightness(1.05);
      }
      25% {
        filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.336))
                drop-shadow(0 0 45px rgba(255, 120, 0, 0.5))
                brightness(1.1);
      }
      50% {
        filter: drop-shadow(0 0 20px rgba(255, 217, 0, 0.315)) 
                drop-shadow(0 0 60px rgba(255, 179, 0, 0.288))
                brightness(1.15);
      }
      75% {
        filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.26))  
                drop-shadow(0 0 45px rgba(255, 119, 0, 0.274))
                brightness(1.1);
      }
      100% {
        filter: drop-shadow(0 0 10px rgba(255, 217, 0, 0.192)) 
                drop-shadow(0 0 30px rgba(255, 179, 0, 0.178))
                brightness(1.05);
      }
    }

    /* Active border glow animation during cycling */
    @keyframes activeBorderGlow {
      0% {
        border-color: rgba(255, 215, 0, 0.8);
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 
                    0 0 30px rgba(255, 180, 0, 0.6);
      }
      100% {
        border-color: rgba(255, 215, 0, 1);
        box-shadow: 0 0 20px rgba(255, 215, 0, 1), 
                    0 0 40px rgba(255, 180, 0, 0.8),
                    0 0 60px rgba(255, 140, 0, 0.6);
      }
    }



    /* small accessibility: disabled look for button while running */
    .btn.disabled {
      opacity: 0.6;
      pointer-events: none;
      transform: translateX(-50%) scale(0.98);
    }

    /* responsive scaling (optional) */
    @media (min-width: 900px) {
      .background {
        transform: scale(1.0);
      }
    }


    /* --- Video Modal Popup --- */
    .video-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.95);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: 9999;
    }

    .video-modal.show {
      opacity: 1;
      pointer-events: all;
    }

    .video-content {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #drawVideo {
      width: 100%;
      height: auto;
      max-height: 100vh;
      object-fit: contain;
    }

    /* --- Lose Modal Popup --- */
    .lose-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: 999;
    }

    .lose-modal.show {
      opacity: 1;
      pointer-events: all;
    }

    .lose-content {
      position: relative;
      top: 10%;
      border-radius: 16px;
      text-align: center;
      color: #fff;
      width: 100%;
      height: 50%;
      max-width: 450px;
      transform: scale(0.8);
      transition: transform 0.4s ease;
      animation: popIn 0.5s ease forwards;
      cursor: pointer;
    }

    .lose-modal.show .lose-content {
      transform: scale(1);
    }

    .lose-bg {
      width: 100%;
      margin-bottom: 10px;
    }

    /* --- Winner Modal Popup --- */
    .winner-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
      z-index: 999;
    }

    .winner-modal.show {
      opacity: 1;
      pointer-events: all;
    }

    /* Container for the 3 visual elements: Header Text, Emblem, Button */
    .winner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 500px;
        position: relative;
        animation: popIn 0.5s ease forwards;
    }

    /* Top text image */
    .winner-text {
        width: 100%;
        text-align: center;
        margin-bottom:5%; /* Slight overlap into emblem if needed */
        z-index: 20;
        animation: bounce 2s ease-in-out infinite alternate;
    }
    .winner-text img {
        width: 100%;
        max-width:300px;
        display: block;
        margin: 0 auto;
    }

    /* Middle emblem image */
    .winner-body {
        width: 100%;
        position: relative;
        z-index: 10;
        margin-bottom:5%; /* Slight overlap into button */
    }
    .winner-body img {
        width: 100%;
        max-width: 450px; 
        display: block;
        margin: 0 auto;
    }

    /* Bottom button/claim image */
    .winner-btn {
        width: 100%;
        position: relative;
        z-index: 30;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .winner-btn img {
        width: 100%;
        max-width:300px;
        display: block;
        margin: 0 auto;
        animation: pulse 1.5s infinite;
    }
    .winner-btn:hover {
        transform: scale(1.05);
    }

    @keyframes popIn {
      0% {
        transform: scale(0.6);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

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

    .winner-bg {
        width: 100%;
    }

    .tg {
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      max-width: 350px;
      position: absolute;
      top: 40%;
      z-index: 99;
     
    }

    .tg img {
      width: 80%;
    }


    /* --- Zoom In & Out Animation --- */
    @keyframes zoomInOut {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.08);
      }

      100% {
        transform: scale(1);
      }
    }

    /* Apply the animation to the play and tg images */
    .play img,
    .tg img {
      animation: zoomInOut 2s ease-in-out infinite;
      transform-origin: center center;
      transition: transform 0.3s ease;
    }

    /* Optional hover effect for more interactivity */
    .play img:hover,
    .tg img:hover {
      transform: scale(1.12);
    }


    .close-btn {
      position: absolute;
      top: 8px;
      right: 10px;
      font-size: 1.8rem;
      color: gold;
      background: none;
      border: none;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .close-btn:hover {
      transform: scale(1.2);
      color: #fff;
    }



    /* --- Mobile Responsiveness --- */
    @media (max-width: 440px) {
      .content{
        top: 20%;
      }
      .logo{
        width: 100%;
        max-width: 120px;
      }
      .text{
        width: 100%;
        max-width: 350px;
      }
      .left {
        flex: 0 0 35%;
        max-width: 150px;
        z-index: 1;
      }
  
      .left img {
        width: 100%;
        display: block;
      }
      
      .middle{
        width: 100%;
        flex: 0 0 45%;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 340px;
        z-index: 10;
      }
      
      .middle img {
        width: 100%;
      }
      
      .right {
        flex: 0 0 45%;
        max-width: 190px;
  
        z-index: 1;
      }
  
      .right img {
        width: 100%;
        display: block;
      }



      .btn {
        bottom:15%;
      }

      .btn img {
        width: 250px;
      }

      .play img,
      .tg img {
        width: 60%;
      }

      .avatar .left {
        max-width: 180px;
      }

      .avatar .right {
        max-width: 180px;
      }
    }
    @media (max-width: 428px) {

      .content {
        width: 100%;
        max-width: 280px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
   
      }
      .content .logo {
        width: 100%;
        max-width: 130px;
      }
      .content .text {
        max-width: 380px;
      }

      .footerimg{
        position: absolute;
        bottom: 17%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 440px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0px;
        padding: 0 10px;
        z-index: 3;
      }
      
      .left {
        flex: 0 0 35%;
        max-width: 150px;
        z-index: 1;
      }
  
      .left img {
        width: 100%;
        display: block;
      }
      
      .middle{
        width: 100%;
        flex: 0 0 45%;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 340px;
        z-index: 10;
      }
      
      .middle img {
        width: 100%;
      }
      
      .right {
        flex: 0 0 45%;
        max-width: 190px;
  
        z-index: 1;
      }
  
      .right img {
        width: 100%;
        display: block;
      }




     

      .video-content {
        max-width: 100%;
        padding: 0;
      }

      #drawVideo {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        object-fit: cover;
      }

      .coin{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 110px;
        animation: bounce 1s ease-in-out infinite alternate;
      } 
      .price{
        max-width: 110px;
        top: 77%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 150px;
        animation: bounce 1s ease-in-out infinite alternate;
        z-index: 99;
      }
      .tg {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 300px;
        position: absolute;
        top: 40%;
        z-index: 99;
       
      }
      .play img,
      .tg img {
        width: 80%;
      }

     
    }

    /* Devices ≤ 414px */
    @media (max-width: 414px) {

      .footerimg{
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 440px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0px;
        padding: 0 10px;
        z-index: 3;
      }
      
      .left {
        flex: 0 0 35%;
        max-width: 150px;
        z-index: 1;
      }
  
      .left img {
        width: 100%;
        display: block;
      }
      
      .middle{
        width: 100%;
        flex: 0 0 45%;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 340px;
        z-index: 10;
      }
      
      .middle img {
        width: 100%;
      }
      
      .right {
        flex: 0 0 45%;
        max-width: 190px;
  
        z-index: 1;
      }
  
      .right img {
        width: 100%;
        display: block;
      }


      .play img,
      .tg img {
        width: 60%;
      }

      .avatar .left {
        max-width: 180px;
      }

      .avatar .right {
        max-width: 180px;
      }

      .content {
        text-align: center;
      }

      .content .text {
        max-width: 360px;
      }
    }

    /* Devices ≤ 390px */
    @media (max-width: 390px) {

      .footerimg{
        position: absolute;
        bottom: 18%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0px;
        padding: 0 10px;
        z-index: 3;
      }
      
      .left {
        flex: 0 0 35%;
        max-width: 150px;
        z-index: 1;
      }
  
      .left img {
        width: 100%;
        display: block;
      }
      
      .middle{
        width: 100%;
        flex: 0 0 45%;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 340px;
        z-index: 10;
      }
      
      .middle img {
        width: 100%;
      }
      
      .right {
        flex: 0 0 45%;
        max-width: 190px;
  
        z-index: 1;
      }
  
      .right img {
        width: 100%;
        display: block;
      }


      .price{
        max-width: 110px;
        top: 77%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 110px;
        animation: bounce 1s ease-in-out infinite alternate;
        z-index: 99;
      }
      .tg {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 250px;
        position: absolute;
        top: 40%;
        z-index: 999;
       
      }
  
      .tg img {
        width: 80%;
      }
     
    }

    /* Devices ≤ 360px */
    @media (max-width: 360px) {

       .content {
         position: absolute;
         top: 15%;
         left: 50%;
         width: 100%;
         max-width: 200px;
         transform: translate(-50%, -50%);
         z-index: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
       }
       .content .logo {
         width: 100%;
         max-width:170px;
       }

       .content .text {
         width: 100%;
         max-width:400px;
       }


       .footerimg{
        position: absolute;
        bottom: 18%;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0px;
        padding: 0 10px;
        z-index: 3;
      }
      
      .left {
        flex: 0 0 35%;
        max-width: 150px;
        z-index: 1;
      }
  
      .left img {
        width: 100%;
        display: block;
      }
      
      .middle{
        width: 100%;
        flex: 0 0 45%;
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 340px;
        z-index: 10;
      }
      
      .middle img {
        width: 100%;
      }
      
      .right {
        flex: 0 0 45%;
        max-width: 190px;
  
        z-index: 1;
      }
  
      .right img {
        width: 100%;
        display: block;
      }
      .coin{
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 100px;
        animation: bounce 1s ease-in-out infinite alternate;
      }
      .price{
        max-width: 110px;
        top: 77%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 110px;
        animation: bounce 1s ease-in-out infinite alternate;
        z-index: 99;
      }
      .tg {
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        max-width: 250px;
        position: absolute;
        top: 40%;
        z-index: 999;
       
      }


      .play img,
      .tg img {
        width: 90%;
      }

      .avatar .left {
        max-width: 180px;
      }

      .avatar .right {
        max-width: 180px;
      }
    }