/* ----------------------------------------------------
   MOBILE — mise en page principale
---------------------------------------------------- */

/* Conteneur */
.game-container {
  max-width: 560px;
  padding: 12px;
  gap: 12px;
}

/* Titres */
h1 {
  font-size: 6vw;
}

.subtitle {
  font-size: 3.8vw;
}

.message {
  font-size: 4vw;
}

/* ----------------------------------------------------
   GRILLE mobile
---------------------------------------------------- */
.rows {
  gap: 10px;
}

.row {
  gap: 8px;
  /* Nombre de colonnes défini dynamiquement via JS :
     rowDiv.style.setProperty("--cols", wordLength); */
  grid-template-columns: repeat(var(--cols), 1fr);
}

.letter-cell {
  aspect-ratio: 1 / 1.15;
  font-size: 6vw;
}

/* ----------------------------------------------------
   BOUTONS mobile
---------------------------------------------------- */
button {
  width: 100%;
  padding: 3vw;
  font-size: 4.5vw;
}

/* ----------------------------------------------------
   CLAVIER mobile
---------------------------------------------------- */
.keyboard {
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
  padding-bottom: env(safe-area-inset-bottom);
}

.key {
  font-size: 5vw;
  padding: 2.4vw 0;
}