/* ==========================================================================
   Le pendu — habillage.

   Trois étages : le dessin, le mot, le clavier. Dans cet ordre, parce que le
   pouce est en bas et que le regard est en haut.
   ========================================================================== */
.pd {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: 100%; height: 100%; justify-content: center; padding: 8px;
}

.pd-barre { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.pd-barre b { font-variant-numeric: tabular-nums; font-size: 20px; }
.pd-record { opacity: .6; font-size: 13px; }
.pd-son {
  border: 0; border-radius: 999px; cursor: pointer;
  width: 32px; height: 32px; font-size: 15px;
  background: var(--line, #e1e5ec); color: inherit;
}

/* LE DESSIN. Chaque morceau apparaît à une erreur. Ils sont tous dans la page
   dès le départ, simplement cachés : rien à créer en cours de partie, et la
   transition se fait toute seule. */
.pd-dessin { width: min(46vw, 210px); height: auto; }
.pd-dessin [data-erreur] { opacity: 0; transition: opacity .25s ease; }
.pd-dessin [data-erreur].vu { opacity: 1; }
.pd-trait { stroke: var(--ink-soft, #5B6474); stroke-width: 6; stroke-linecap: round; fill: none; }
.pd-corps { stroke: var(--c-jeu, #C2410C); stroke-width: 7; stroke-linecap: round; fill: none; }

/* LE MOT, EN GRAND. C'est l'objet du jeu : tout le reste peut rétrécir, pas
   lui. `word-break` pour qu'un mot de neuf lettres passe la ligne sur un
   téléphone étroit plutôt que de déborder. */
.pd-mot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: clamp(22px, 7vw, 38px); font-weight: 600; letter-spacing: .04em;
}
/* CHAQUE LETTRE A SON TRAIT, trouvée ou non.

   J'avais fait disparaître le trait sous les lettres découvertes : le mot se
   mettait alors à flotter, et l'on ne voyait plus combien de cases restaient
   ni où elles étaient. Le trait n'est pas une décoration, c'est le PLAN du
   mot — il dit sa longueur d'un coup d'œil, et c'est la première information
   dont on se sert pour deviner.

   La hauteur est fixée : une case vide et une case pleine doivent poser leur
   trait sur la même ligne, sinon le mot ondule à chaque lettre trouvée. */
.pd-mot span {
  min-width: .8em; height: 1.22em; line-height: 1.16em;
  text-align: center;
  border-bottom: 4px solid var(--ink-soft, #5B6474);
  opacity: .55;
  text-transform: uppercase;
}
.pd-mot span.trouvee { opacity: 1; }
.pd-mot.perdu span { color: #c0392b; }

.pd-ratees { min-height: 20px; font-size: 14px; letter-spacing: .12em;
             text-transform: uppercase; color: #c0392b; opacity: .85; }

/* LE CLAVIER EN AZERTY, comme celui qu'ils ont sous les doigts. Un clavier
   alphabétique paraît plus logique et se cherche lettre par lettre : personne
   n'a mémorisé la place du M dans l'alphabet, tout le monde sait où il est sur
   un clavier. */
.pd-clavier { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 480px; }
.pd-rangee { display: flex; justify-content: center; gap: 5px; }
.pd-clavier button {
  flex: 1 1 0; min-width: 0; max-width: 46px;
  aspect-ratio: 1 / 1.15;
  border: 0; border-radius: 9px; cursor: pointer;
  background: var(--surface, #fff);
  box-shadow: 0 2px 0 rgba(31, 51, 70, .14);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: clamp(13px, 3.6vw, 17px); font-weight: 600;
  text-transform: uppercase; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pd-clavier button:active { transform: translateY(1px); box-shadow: none; }
.pd-clavier button.bonne { background: #2fae6a; color: #fff; box-shadow: none; }
.pd-clavier button.ratee { background: var(--line, #e1e5ec); color: var(--ink-soft, #5B6474);
                           box-shadow: none; opacity: .55; }
.pd-clavier button:disabled { cursor: default; }