body {
  margin: 0 ;
  padding:0;
  height: 100vh;     
  background-color: black;
  text-align: center;     
  overflow: hidden;
}

.container {
  position: relative;
  display: inline-block; 
  margin: 0 auto;
}

      .BG {
        max-width: 100%;
        max-height: 100vh;
        width: auto;
        height: auto;
        cursor: pointer;
        display: block;
        object-fit: contain;
      }

      .logo {
        position: absolute;
        top: 5%;
        left: 50%;
        transform: translate(-50%, -50%); 
        max-width: 50%; 
        height: auto;
        pointer-events: none;
      }
.telegram img{
  position: absolute;
  top: 12%; 
  left: 50%;
  width:55%;
  transform: translateX(-50%);
  background-color: transparent; 
  z-index: 2;
  animation: zoomPulse 2s infinite ease-in-out; 
  cursor: pointer;
  
}

.lightning{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        height:80%;           
        width:auto;
        pointer-events:none;
        z-index:1;             
        mix-blend-mode:screen;  
        
      }

.bonus{
  position: absolute;             
  top: 62%;                     
  left: 50%;
  transform: translate(-50%, -50%); 
  display: grid;
  grid-template-columns: 1fr 1fr;  
  align-items: center;             
  justify-items: center;             
  column-gap: min(1vw, 2px);       
  width: min(100%, 850px);          
  z-index: 3;

}

.bonus img{
  width: 100%;
  max-width: 500px;
  height: auto;

}
.bonus .left  { justify-self: start; }  
.bonus .right { justify-self: end;  transform: translateX(1%); padding-bottom: 10px; }  
@media (max-width: 480px) {
  html, body {
    margin: 0;
    padding: 0;
    /* allow the page to grow and scroll */

    height: 100dvh;    /* better on mobile than 100vh */
    overflow-x: hidden;
    overflow-y: hidden;     
    background: black;
    text-align: center;
  }

  .container {
    position: relative;
    width: 100%;
    min-height: 100dvh;    /* fills screen at least, but can grow */
    height: auto;          /* ✅ no hard lock to viewport */
    overflow: hidden;     /* don't clip internal layers */
    margin: 0 auto;
    display: inline-block;
  }

  .BG {
    width: 100%;
    height: auto;          /* ✅ lets page extend and scroll */
    display: block;
    object-fit: contain;   /* or 'cover' if you prefer cropping */
    cursor: pointer;
  }

  /* Optional: keep footer visible at bottom while scrolling */
  .footer {
    position: sticky;      /* was absolute; sticky avoids overlap */
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    z-index: 1;
  }

}

.footer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;         
  object-fit: contain;
  z-index: 1;        
}