/* ======= Estilos generales ======= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0d0d1a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  overflow: hidden;
}

#contenedor {
  position: relative;
  /* El canvas manda el tamaño */
}

canvas {
  display: block;
  /* `100%` y jamas `100vw`: `vw` mide la pantalla sin contar la ruedita de
     la letra, asi que con la letra al doble el lienzo se quedaba al ancho
     entero mientras la pagina se maquetaba contra la mitad. */
  max-width: 100%;
  height: auto;
  max-height: 100vh;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(80, 160, 255, 0.35);
  touch-action: none; /* para que el dedo no haga scroll */
}

/* ======= Pantallas (inicio y fin) ======= */
.pantalla {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 20, 0.88);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 18px;
  border-radius: 12px;
  color: #fff;
  padding: 24px;
}

.pantalla.oculta {
  display: none;
}

.pantalla h1 {
  font-size: 44px;
  letter-spacing: 4px;
  color: #ffd94d;
  text-shadow: 0 0 18px rgba(255, 217, 77, 0.6);
}

.pantalla h2 {
  font-size: 22px;
  color: #7fd4ff;
}

.pantalla p {
  font-size: 16px;
  line-height: 1.5;
  color: #cfd8ea;
}

.azul { color: #4da6ff; font-weight: bold; }
.roja { color: #ff5c5c; font-weight: bold; }

.estrellas-grandes {
  font-size: 40px !important;
  letter-spacing: 6px;
  text-shadow: 0 0 16px rgba(255, 217, 77, 0.7);
}

/* ======= Selector de niveles ======= */
#selector-niveles {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.nivel-boton {
  width: 52px;
  height: 52px;
  padding: 0;
  font-size: 22px;
  border-radius: 50%;
  color: #10233a;
  background: linear-gradient(180deg, #ffd94d, #e0a90f);
  box-shadow: 0 4px 0 #a67c08;
}

.nivel-boton:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #a67c08;
}

.nivel-boton.bloqueado {
  background: linear-gradient(180deg, #4a5568, #2d3748);
  box-shadow: 0 4px 0 #1a202c;
  cursor: not-allowed;
  font-size: 18px;
}

button {
  font-size: 24px;
  font-weight: bold;
  padding: 14px 44px;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  color: #10233a;
  background: linear-gradient(180deg, #7fe37f, #33b333);
  box-shadow: 0 6px 0 #1d7a1d;
  transition: transform 0.1s;
}

button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #1d7a1d;
}

/* Botón secundario, más pequeño (como el de probar sonido) */
button.secundario {
  font-size: 16px;
  padding: 10px 24px;
  color: #eaf2ff;
  background: linear-gradient(180deg, #3a4a66, #26334a);
  box-shadow: 0 4px 0 #16202f;
}

button.secundario:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #16202f;
}