/* RESET + FUENTE */
*{box-sizing:border-box;margin:0;padding:0}
body,html{width:100%;height:100%;overflow:hidden;background:#000;font-family:Arial,sans-serif;color:#fff}

/* CANVAS */
canvas{position:absolute;width:100vw;height:100vh;top:0;left:0;z-index:1}

/* MENÚ PRINCIPAL */
#startMenu {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;padding:60px 40px;background:#111;border-radius:12px;z-index:30;
  box-shadow:0 0 30px red;
}
#startMenu h1 {font-size:64px;color:#ff4040;text-shadow:0 0 15px #fff}
.subtitle {margin:10px 0 30px;font-size:20px;opacity:.8}
#startMenu button {
  display:block;width:220px;margin:12px auto;padding:15px 0;font-size:22px;
  border:none;border-radius:8px;cursor:pointer;background:#ff4040;color:#fff;transition:.2s;
}
#startMenu button:hover {background:#ff7373}

/* SELECCIÓN */
#characterSelectScreen {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:90%;max-width:950px;padding:40px;background:#111;border-radius:12px;z-index:30;text-align:center
}
.player-select-box {margin:20px auto}
.player-select-box h3 {margin-bottom:10px;color:#ffd700}
.character-options {
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center
}
.character-option {
  width:90px;height:90px;border:3px solid transparent;border-radius:10px;cursor:pointer;object-fit:cover;transition:.2s
}
.character-option:hover {transform:scale(1.05);border-color:#fff}
.character-option.selected {border-color:#ff4040;box-shadow:0 0 12px #ff4040}
#confirmSelectionButton {
  margin-top:30px;padding:15px 40px;font-size:20px;border:none;border-radius:8px;background:#2ecc71;cursor:pointer
}
#confirmSelectionButton:hover {background:#49d88c}

/* HUD */
#score {
  position:absolute;top:10px;left:10px;z-index:10;font-size:20px;
  background:rgba(0,0,0,.6);padding:8px 14px;border-radius:8px
}
#score span {display:block}
#progressWrapper {
  position:absolute;top:10px;right:10px;width:260px;height:18px;z-index:10;
  border:2px solid #fff;background:rgba(255,255,255,.2);border-radius:4px
}
#progressFill {
  height:100%;width:0;background:#00d900;border-radius:2px
}

/* GAME OVER */
#gameOverScreen {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#111;padding:50px;border-radius:12px;text-align:center;z-index:20;
  box-shadow:0 0 30px lime
}
#gameOverScreen h2 {font-size:40px;margin-bottom:15px;color:#ff4040}
#gameOverScreen p {font-size:22px;margin-bottom:25px}
#restartButton {
  padding:14px 32px;font-size:20px;border:none;border-radius:8px;cursor:pointer;background:#ff4040
}
#restartButton:hover {background:#ff7373}

/* CONTROLES MÓVILES */
#mobileControls {
  position:absolute;bottom:10px;width:100%;display:flex;justify-content:space-between;
  padding:0 20px;z-index:15;
}
.touch-control {
  display:flex;flex-direction:column;gap:10px;
}
.touch-control button {
  font-size:24px;padding:14px;border-radius:10px;border:none;background:#444;color:white;opacity:0.8;
}
.touch-control button:active {background:#ff4040}

/* UTIL */
.hidden {display:none}