* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

body {
  background: linear-gradient(135deg, #09090f, #002233);
  font-family: 'Orbitron', sans-serif;
  color: #aa66ff; /* color lilita oscuro general */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: center;
  overflow: hidden;
  padding: 10px;
}

body, html {
  margin: 0;
  padding: 0;
  overflow: visible; /* para que no se recorte nada */
  height: 100vh;
}

.hidden {
  display: none !important;
}

#startScreen {
  text-align: center;
  padding: 20px;
}

#startScreen h1 {
  font-size: 3rem;
  margin-bottom: 30px;
  color: #aa66ff;
  /* sin neón para que no se confunda */
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.menu-buttons button {
  padding: 12px 25px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  background: #ff33cc; /* rosa neón fuerte */
  border: none;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-buttons button:hover {
  background: #cc0099;
  transform: scale(1.05);
}

#tutorialScreen {
  text-align: center;
  max-width: 90%;
  padding: 20px;
}

#tutorialScreen h2 {
  color: #aa66ff;
  margin-bottom: 20px;
}

.tutorial-content {
  margin-bottom: 20px;
}

#tutorialScreen button {
  margin-top: 20px;
  padding: 10px 20px;
  background: #ff3366;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#gameContainer {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  
  /* Ocupa toda la altura visible menos espacio para el HUD */
  height: calc(100vh - 100px); /* ajusta 100px si es necesario */
  overflow: visible; /* para que no se recorte el glow/degradado */
  box-sizing: border-box;
  padding: 10px 0; /* espacio arriba y abajo */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* o center si quieres centrar vertical */
}

#hud {
  position: relative;  /* para activar z-index sin sacar del flujo */
  z-index: 10;         /* más alto que el degradado y canvas */
  background: #000;    /* fondo negro sólido */
  border-radius: 25px;
  font-size: 0.9rem;
  width: 100%;
  max-width: 800px;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  color: #aa66ff;
  text-shadow: none;
  backdrop-filter: blur(6px);

  /* Borde neón */
  border: 4px solid #ff99cc; /* borde rosita claro */
  box-shadow:
    0 0 10px #ff99cc,
    0 0 20px #ff33cc,
    0 0 30px #ff33cc;
}

#score, #level, #healthText {
  color: #aa66ff; /* lilita oscuro */
  text-shadow: none;
}

#score {
  min-width: 150px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  font-family: 'Orbitron', monospace, sans-serif;
}

#level {
  flex-grow: 1;
  min-width: 150px;
  text-align: center;
}

#healthContainer {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#healthBarContainer {
  width: 150px;
  height: 20px;
  background-color: #222;
  border-radius: 10px;
  overflow: hidden;
}

#healthBar {
  height: 100%;
  background: linear-gradient(90deg, #aa66ff, #ff33cc); /* lila a rosa */
  width: 100%;
  transition: width 0.3s ease;
  box-shadow: none; /* sin neón */
}

/* Barra de salud roja y parpadeante */
#healthBar.red {
  background: linear-gradient(90deg, #ff0000, #cc0000);
  box-shadow:
    0 0 10px #ff0000,
    0 0 20px #cc0000,
    0 0 30px #cc0000;
  animation: blinkRed 1s infinite;
}

/* Parpadeo simple rojo <-> negro para el texto del número de vida */
.blinking-red {
  animation: blinkRedSimple 1s step-start infinite;
  color: #ff0000 !important;
  background-color: transparent;
}

@keyframes blinkRedSimple {
  0%, 100% {
    color: #000000;
  }
  50% {
    color: #ff0000;
  }
}


/* Clase para barra de vida roja (sigue tu estilo original) */
.red {
  background: linear-gradient(90deg, #ff0000, #cc0000) !important;
  box-shadow:
    0 0 10px #ff4444,
    0 0 20px #ff0000,
    0 0 30px #cc0000;
}

/* Para que canvas no se tape con el HUD */
/* Ajusta el canvas para ocupar todo el espacio disponible sin salirse */
canvas, #gameCanvas {
  flex-grow: 1;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border: 4px solid #ff99cc;
  border-radius: 25px;
  box-shadow:
    0 0 10px #ff99cc,
    0 0 20px #ff33cc,
    0 0 30px #ff33cc;
  background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(30,0,50,0.6));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* para Safari */
}


/* Animación de pulsar (agrandar y reducir suavemente) */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 10px #ff0000,
      0 0 20px #cc0000,
      0 0 30px #cc0000;
  }
  50% {
    transform: scale(1.1);
    box-shadow:
      0 0 20px #ff4444,
      0 0 30px #ff0000,
      0 0 40px #ff0000;
  }
}

/* Barra roja con animación de pulso */
#healthBar.red {
  background: linear-gradient(90deg, #ff0000, #cc0000);
  animation: pulse 1s infinite;
  transform-origin: center center;
}

/*Contnedor imagen juego*/
#coverContainer {
  width: 300px;
  height: 300px;
  overflow: hidden;
  margin: 0 auto 30px auto;
  border-radius: 25px; /* igual que el HUD */
  background: #000; /* fondo negro sólido igual que el HUD */
  border: 4px solid #ff99cc; /* borde rosita claro igual que el HUD */
  box-shadow:
    0 0 10px #ff99cc,
    0 0 20px #ff33cc,
    0 0 30px #ff33cc;
  display: flex;
  justify-content: center;
  align-items: center;
}

#coverImage {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* La imagen se escala dentro del cuadro sin deformarse */
  display: block;
}

#contenedorCanvas {
  position: relative;
  height: calc(100vh - 20px); /* resta padding top + bottom */
  padding: 10px 0;
  overflow: hidden;
  box-sizing: border-box;
}

#canvasWrapper {
  flex-grow: 1;         /* que ocupe el espacio restante */
  overflow: hidden;     /* aquí sí recortamos lo que sobresale */
  border-radius: 16px;  /* para que coincida con el canvas */
  padding: 0 10px;      /* opcional, para que no pegue al borde */
  box-sizing: border-box;
}