* {margin:0;padding:0;box-sizing:border-box}
html,body {width:100%;height:100%;overflow:hidden;background:#000;font-family:'Orbitron',sans-serif}

#bgVideo {
  position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:1;
}

#overlay {
  position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:2;
}

#mainMenu {
  position:fixed;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:white;text-align:center;z-index:10;padding:20px;
}

/* ======================= DESKTOP & LARGE SCREENS ======================= */
#gameTitle {
  font-size: 70px;
  font-weight: 900;
  letter-spacing: 18px;
  color: #0ff;
  text-shadow: 0 0 40px #0ff, 0 0 80px #0ff;
  margin-bottom: 30px;
  line-height: 1;
}

#version {
  font-size: 36px;
  margin-bottom: 100px;
  opacity: 0.9;
  letter-spacing: 8px;
}

button {
  background: rgba(0,255,255,0.1);
  color: #0ff;
  border: 4px solid #0ff;
  padding: 25px 90px;
  margin: 20px 0;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 4px;
  border-radius: 30px;
  cursor: pointer;
  min-width: 380px;
  box-shadow: 0 0 50px #0ff;
}

button:hover, button:active {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 100px #0ff;
}

#credits {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  opacity: 0.8;
  letter-spacing: 3px;
  white-space: nowrap;
}

/* ======================= TABLETS (max 1200px) ======================= */
@media (max-width: 1200px) {
  #gameTitle {font-size: 100px; letter-spacing: 14px;}
  #version   {font-size: 32px;}
  button     {font-size: 40px; padding: 22px 80px; min-width: 340px;}
}

/* ======================= MOBILE PHONES ======================= */
@media (max-width: 768px) {
  #gameTitle {
    font-size: 14vw;
    letter-spacing: 1.5vw;
    text-shadow: 0 0 4vw #0ff, 0 0 8vw #0ff;
    margin-bottom: 3vh;
  }
  #version {
    font-size: 5vw;
    margin-bottom: 8vh;
    letter-spacing: 0.8vw;
  }
  button {
    font-size: 7vw;
    padding: 3.5vh 12vw;
    min-width: 75vw;
    max-width: 90vw;
    border-width: 0.8vw;
    border-radius: 5vw;
    box-shadow: 0 0 8vw #0ff;
  }
  button:hover, button:active {
    background: #0ff;
    color: #000;
    box-shadow: 0 0 16vw #0ff;
  }
  #credits {font-size: 4vw; bottom: 5vh;}
}

/* Extra small phones / very small landscape devices */
@media (max-width: 480px), (max-height: 500px) {
  #gameTitle {font-size: 12vw;}
  button {font-size: 6.5vw; padding: 3vh 10vw;}
}

/* ======================= LANDSCAPE ORIENTATION FIXES ======================= */
@media (orientation: landscape) {
  /* Main title smaller */
  #gameTitle {
    font-size: 6vw;
    letter-spacing: 1.2vw;
    margin-bottom: 2vh;
    text-shadow: 0 0 3vw #0ff, 0 0 6vw #0ff;
  }

  /* Version smaller */
  #version {
    font-size: 2.5vw;
    margin-bottom: 4vh;
    letter-spacing: 0.6vw;
  }

  /* Buttons shrink and align nicely */
  button {
    font-size: 2vw;
    padding: 3vh 5vw;
    min-width: 30vw;
    max-width: 40vw;
    border-width: 0.2vw;
    border-radius: 4vw;
    box-shadow: 0 0 1vw #0ff;
  }

  button:hover, button:active {
    box-shadow: 0 0 12vw #0ff;
  }

  /* Credits smaller and moved up slightly */
  #credits {
    font-size: 3.5vw;
    bottom: 3vh;
  }

  /* Main menu container adjustments */
  #mainMenu {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2vh 5vw;
  }
}

/* Extra-small phones in landscape */
@media (orientation: landscape) and (max-width: 480px) {
  #gameTitle { font-size: 10vw; }
  #version { font-size: 4vw; }
  button { font-size: 5.5vw; padding: 2.5vh 8vw; min-width: 65vw; }
  #credits { font-size: 3vw; bottom: 2vh; }
}