/* ----------------------------------------------------
   GLOBAL — commun mobile + desktop
---------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: #f5f5f5;
  font-family: system-ui, sans-serif;
}

/* Conteneur principal */
.game-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

/* Titres */
h1 {
  margin: 0;
  text-align: center;
}

.subtitle {
  text-align: center;
  color: #666;
}

/* Messages */
.message {
  min-height: 20px;
  text-align: center;
}

.message.success { color: #27ae60; }
.message.fail    { color: #c0392b; }
.message.info    { color: #555; }

/* ----------------------------------------------------
   GRILLE — classes partagées
---------------------------------------------------- */
.rows {
  display: flex;
  flex-direction: column;
}

.row {
  width: 100%;
  display: grid;
}

.letter-cell {
  width: 100%;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: bold;
}

.letter-cell:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52,152,219,0.3);
}

.letter-fixed,
.letter-correct {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.letter-misplaced {
  background: #f1c40f;
  color: black;
  border-color: #f1c40f;
}

/* ----------------------------------------------------
   BOUTONS — apparence commune
---------------------------------------------------- */
button {
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
}

button:disabled {
  background: #bdc3c7;
  cursor: default;
}

.secondary-btn {
  background: #2ecc71;
  color: white;
}

/* ----------------------------------------------------
   CLAVIER — classes partagées
---------------------------------------------------- */
.keyboard {
  display: grid;
}

.key {
  background: #ddd;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  user-select: none;
  cursor: pointer;
}

.key:active {
  background: #bbb;
}

.key-del {
  background: #e67e22;
  color: white;
}

.key-ok {
  background: #3498db;
  color: white;
}

/* ----------------------------------------------------
   ANIMATIONS — communes
---------------------------------------------------- */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52,152,219,0.5); }
  70% { transform: scale(1.08); box-shadow: 0 0 12px 6px rgba(52,152,219,0.35); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52,152,219,0); }
}

#testBtn:focus {
  animation: pulse 0.9s infinite ease-out;
  outline: none;
}