/* Mejoras de "Adivina el jugador del dia" en 2027.
 *
 * Se carga DESPUES de jugadordeldia.css, asi que lo de aqui pisa a lo de alla.
 * Ese fichero minificado no se toca (lo usa igual la copia de 2026) y aqui se
 * quedan solo los arreglos. */

/* ---------- El tablero y el teclado no cabian en movil ----------
 *
 * El tablero tenia 260px fijos y el teclado 420px. Con 390px de pantalla el
 * teclado se salia por la derecha. Ademas las columnas del tablero se fijaban
 * a 50px desde el JavaScript con un estilo en linea, y como lo en linea gana
 * a la hoja de estilos, la regla de movil que las dejaba en 30px nunca llego
 * a aplicarse.
 *
 * Ahora el ancho sale de la pantalla y las casillas se escalan solas
 * manteniendo el cuadrado con aspect-ratio, sin depender de la media query. */
#board {
  width: min(290px, 88vw);
}

.grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}

.cell {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  font-size: clamp(16px, 5.2vw, 24px);
}

#player-name {
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.letter {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  min-width: 22px;
  font-size: clamp(13px, 3.6vw, 24px);
}

#keyboard {
  width: min(420px, 94vw);
  margin-left: auto;
  margin-right: auto;
  gap: 5px;
}

.keyboard-row {
  display: flex;
  gap: 4px;
  justify-content: center;
  width: 100%;
}

/* Cada tecla se estira para repartirse el ancho disponible. Con width:40px
 * fijos y 10 teclas no cabian en una pantalla estrecha. */
.key {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 0;
  font-family: inherit;
  background: #fff;
  cursor: pointer;
}

.key.enter {
  flex: 1.5 1 0;
  width: auto;
  font-size: 13px;
  white-space: nowrap;
}

#key-⌫ {
  flex: 1.5 1 0;
  width: auto;
  font-size: 15px;
}

/* El alto del teclado lo fija la fila, no cada tecla, para que al cambiar el
 * texto de las teclas anchas ENTER y el borrador no bailen. */
.key {
  height: 48px;
}

@media screen and (max-width: 800px) {
  .key { height: 44px; }
  .key.enter, #key-⌫ { font-size: 12px; }
}

/* ---------- Hueco reservado ----------
 *
 * El tablero, el nombre y el teclado los construye el JavaScript en un
 * <div> que arranca vacio. Esa caja nace con cero pixeles de alto, asi que
 * cuando el script mete el contenido, todo lo de debajo baja de golpe.
 * Reservando el alto se evita. */
#board    { min-height: 290px; }
#keyboard { min-height: 170px; }
#player-name { min-height: 50px; }

@media screen and (max-width: 800px) {
  #board    { min-height: 210px; }
  #keyboard { min-height: 155px; }
}

/* ---------- El boton de las instrucciones ----------
 *
 * "Como funciona?" era un <a href="javascript:void(0)">, que no es un
 * enlace a ninguna parte y ademas no se activa con Enter. Ahora es un boton,
 * asi que hay que quitarle el aspecto por defecto. */
.como-funciona {
  margin-bottom: 18px;
}

button.link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  color: #05356F;
  text-decoration: underline;
  cursor: pointer;
}

button.link:hover { color: #000; }

/* ---------- Modal ----------
 *
 * El script ya no cambia display:none a display:flex, ahora usa el atributo
 * hidden. Como el CSS pone display:none en .modal, hace falta la regla
 * contraria: que se muestre cuando NO esta oculto. */
.modal:not([hidden]) {
  display: flex;
}

.modal-content {
  max-width: 520px;
}

button.close-modal {
  background: none;
  border: 0;
  padding: 0 4px;
  font-family: inherit;
  font-size: 24px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

/* Los mensajes que salen al fallar o al ganar se anuncian solos. */
#message {
  min-height: 1.4em;
  margin: 16px 0 0;
  font-weight: 700;
}

/* Los avisos flotantes salian con left:500px fijos, asi que en una pantalla
 * estrecha quedaban fuera de la vista sin poder leerse. */
#toast-container {
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 92vw;
  text-align: center;
}

/* ---------- Foco visible ----------
 *
 * Las teclas y los botones del modal son pulsables con el teclado, asi que
 * tienen que enseñar donde esta el foco. */
.key:focus-visible,
button.link:focus-visible,
button.close-modal:focus-visible,
button.close-button:focus-visible {
  outline: 3px solid #05356F;
  outline-offset: 2px;
}

/* El boton de cerrar del modal va en la esquina: con la sombra del foco hacia
 * dentro se ve mejor que si se sale de la caja. */
button.close-modal:focus-visible {
  outline-offset: -2px;
}