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

#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.6);z-index:2}

#settingsMenu {
  position:fixed;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  z-index:10;padding:20px;gap:20px;text-align:center;
  overflow-y:auto;
}

/* TITLE */
#settingsMenu h1 {
  font-size:48px;font-weight:900;letter-spacing:8px;
  text-shadow:0 0 30px #0ff;margin:10px 0;
}

/* SECTION TITLES */
#settingsMenu h2 {
  font-size:22px;letter-spacing:5px;opacity:0.9;margin:10px 0 8px;
}

/* DIFFICULTY — HORIZONTAL + EXACT 10px GAP IN LANDSCAPE */
.diff-container {
  display:flex;
  gap:16px;                    /* Default gap (portrait + tablets) */
  flex-wrap:wrap;
  justify-content:center;
  max-width:960px;
  width:100%;
  margin:10px 0;
}

/* Force exactly 10px gap in landscape mode */
@media (orientation: landscape) {
  .diff-container {
    gap:10px !important;
  }
}

/* DIFFICULTY BUTTONS */
.diff {
  all:unset;
  background:rgba(0,255,255,0.12);
  color:#0ff;
  border:3px solid #0ff;
  padding:10px 20px;
  font-size:18px;
  font-weight:900;
  letter-spacing:2.5px;
  border-radius:16px;
  cursor:pointer;
  flex:1;
  min-width:130px;
  max-width:180px;
  text-align:center;
  box-shadow:0 0 30px #0ff;
  transition:all 0.35s;
  user-select:none;
}

.diff:hover, .diff.selected {
  background:#0ff;
  color:#000;
  transform:scale(1.18);
  box-shadow:0 0 70px #0ff;
}

/* MUSIC TOGGLE */
/* MUSIC TOGGLE — RED WHEN OFF */
.toggle {
  width:130px;
  height:65px;
  background:#111;
  border:3px solid #0ff;
  border-radius:50px;
  position:relative;
  cursor:pointer;
  box-shadow:0 0 30px #0ff;
  margin:15px auto;
  transition:all 0.4s;
}

.toggle::after {
  content:'';
  position:absolute;
  width:55px;
  height:55px;
  background:#0ff;
  border-radius:50%;
  top:5px;
  left:5px;
  transition:all 0.3s;
  box-shadow:0 0 25px #0ff;
}

.toggle.on::after {
  left:67px;
}

/* OFF STATE = RED */
.toggle.off {
  border-color:#ff2244;
  background:#300;
  box-shadow:0 0 30px #ff2244;
}

.toggle.off::after {
  background:#ff2244;
  box-shadow:0 0 25px #ff2244;
}

/* Mobile */
@media (max-width:768px) {
  .toggle.off {border-color:#ff2244;box-shadow:0 0 20px #ff2244;}
  .toggle.off::after {background:#ff2244;box-shadow:0 0 20px #ff2244;}
}


/* BACK BUTTON */
#backBtn {
  background:rgba(0,255,255,0.12);color:#0ff;border:3px solid #0ff;
  padding:14px 60px;font-size:22px;font-weight:900;
  letter-spacing:3px;border-radius:20px;cursor:pointer;
  min-width:260px;box-shadow:0 0 40px #0ff;transition:all 0.4s;
}
#backBtn:hover {
  background:#0ff;color:#000;transform:scale(1.18);
  box-shadow:0 0 80px #0ff;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  #settingsMenu h1 {font-size:42px}
  .diff {font-size:17px;padding:9px 18px;min-width:120px}
  #backBtn {font-size:20px;padding:12px 50px}
}

@media (max-width: 768px) {
  #settingsMenu {gap:18px;padding:15px}
  #settingsMenu h1 {font-size:9vw}
  #settingsMenu h2 {font-size:5.5vw}
  .diff {
    font-size:4.8vw;padding:2vh 3vw;min-width:22vw;
    border-width:0.6vw;border-radius:3.5vw;
    box-shadow:0 0 5vw #0ff;
  }
  .diff:hover,.diff.selected {transform:scale(1.12)}
  .toggle {width:90px;height:48px}
  .toggle::after {width:38px;height:38px;top:5px;left:5px}
  .toggle.on::after {left:47px}
  .toggle-label {font-size:4.5vw}
  #backBtn {font-size:6.5vw;padding:2.5vh 8vw;min-width:65vw;border-width:0.7vw}
}

/* Extra tight landscape phones (e.g. iPhone in landscape) */
@media (max-height: 500px) and (orientation: landscape) {
  #settingsMenu {gap:12px;padding:10px}
  #settingsMenu h1 {font-size:36px}
  #settingsMenu h2 {font-size:18px}
  .diff-container {gap:10px !important}
  .diff {font-size:16px;padding:8px 16px}
  .toggle {width:110px;height:55px}
  #backBtn {font-size:18px;padding:10px 40px}
}