/* ============================================================
   pendu.css — styles propres au Pendu.
   ============================================================ */

.pendu-box { text-align: center; display: flex; flex-direction: column; gap: 14px; min-width: 300px; }
.pendu-lives { font-size: 22px; letter-spacing: 2px; }
.pendu-word {
  font-size: 34px; font-weight: 800; letter-spacing: 6px;
  font-family: ui-monospace, monospace;
}
.pendu-scores { font-size: 14px; }

.pendu-keyboard {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 7px;
  max-width: 420px;
  margin: 6px auto 0;
}
.pendu-key {
  aspect-ratio: 1; border-radius: 8px; font-weight: 700; font-size: 15px;
  border: 1px solid var(--line); background: var(--bg-soft); color: var(--text);
  cursor: pointer;
}
.pendu-key:hover:not([disabled]) { border-color: var(--accent); background: #2a316a; }
.pendu-key[disabled] { opacity: .3; cursor: not-allowed; }

@media (max-width: 420px) {
  .pendu-word { font-size: 26px; letter-spacing: 3px; }
  .pendu-keyboard { gap: 5px; }
  .pendu-key { font-size: 13px; }
}