body, html {
  margin: 0;
  padding: 0;
  overflow: auto;
  height:auto;
  background-image: url(images/game_background.png);
  font-family: sans-serif;
   cursor: url(images/player.png), auto;
}
 
/*body { padding-top: 155px;}*/
 
#banner {
  position: absolute;
  top: 0px;
  width: 100%;
 height:150px; /* Adjust as needed */ 
  background-color: #000; /* Optional background */
  z-index: 0;
}

#banner img {
  width: 100%;
  height: 100%;
 
}
#mainNav {
  position: absolute;
  top: 150px; /* directly under the banner */
  width: 100%;
  background-color: #222;
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 12px 0;
  z-index: 5;
  border-bottom: 3px solid cyan;
}

#mainNav a {
  color: cyan;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}

#mainNav a:hover {
  text-decoration: underline;
}


#flyImage { 
  z-index: 15;
  position: fixed;
  top: 125px;           /* Vertical position on screen */
  left: -120px;         /* Start just off-screen left */
  width: 100px;
  height: 100px;
  animation: shootAcross 2s forwards ease-in-out
    
}

@keyframes shootAcross {
  0% {
    left: -120px;       /* Off-screen to the left */
    opacity: 1;
  }
  80% {
    left: 100vw;        /* All the way to the right */
    opacity: 1;
  }
  100% {
    left: 100vw;
    opacity: 0;         /* Fade out at the end */
    display: none;
  }
}
.fall-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .fall-item {
      position: absolute;
      top: -140px;
      background-size: contain;
      background-repeat: no-repeat;
      animation-name: fall;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      opacity: 0.8;
    }

    @keyframes fall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0.5;
      }
    }
#iframe_1{
     position:absolute;
     top: 120px;
     left: 25%;
     z-index: 5;
     
 }


#gamePlayContainer {
 
 position: relative;
  top: 180px;
  width: 100%;
  height: 800px;
  z-index: 10;
  
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  
}

#gamePlayImage{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   border: 8px solid;
   border-color:black;
  /*border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;*/
   border-radius: 15px;
}


body {
  /*padding-top: 10px; /* Adjust for fixed banner height */
}
/*#refreshGameButton {
  display: none;  initially hidden 
  margin: 20px auto;
  padding: 15px 30px;
  font-size: 20px;
  background-color: crimson;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: block;
  text-align: center;
}
#refreshGameButton:hover {
  background-color: darkred;
}*/

#gameWrapper {
  position: relative; /* not absolute */
  width: fit-content;
  height: fit-content;
  margin: auto;
  z-index: 3;

}
#gameWrapper {
  margin-top: 220px; /* adjust based on banner height */
  border: 8px solid;
  border-color: black;
 /* border-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet) 1;*/
  border-radius: 15px;
  padding: 10px;
  box-sizing: border-box;
}

#gameWrapper::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 1px;
  
  padding: 4px;
  /*background: linear-gradient(135deg, #ff6ec4, #7873f5, #4ADEDE);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;*/
 
}
#gameWrapper {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}


#bgVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

canvas {
  position: relative;
  z-index: 1;
  border: 2px solid white;
  background-color: transparent;
}

#backgroundLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(images/game_background.png);
  background-size: cover;
  background-position: center;
  z-index: -2;
}


#hudControls {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  z-index: 2;
}

#hud {
  position: absolute;
  top: 240px;
  left: 20px;
  z-index: 10;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 22px;
}
#startButton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  animation: fadeInPulse 2s ease forwards;
}
#startButton:hover{
 box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);

}

@keyframes fadeInPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

#startButton.explode {
  transform: scale(2) rotate(720deg);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}




#mobileControls {
  display: none;
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 4;
}

#mobileControls button {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
  color: white;
  font-size: 2em;
  margin: 5px;
  padding: 10px 20px;
  border-radius: 10px;
}

@media only screen and (max-width: 768px) {
  #mobileControls {
    display: block;
  }

#restartButton {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  z-index: 10; /* Must be higher than canvas z-index */
  cursor: pointer;
  display: none;
}
}
@keyframes fadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}