/* Jeu « Mot » : écran de jeu (grille, clavier, carte de fin) et exemples des
   règles. Chargé par index.html ; un autre jeu apporte sa propre feuille. */

/* ---------- Écran de jeu : tout tient dans la hauteur, sans défilement ---------- */
.play{height:100%;display:flex;flex-direction:column;gap:8px;align-items:center}
.playhead{flex:0 0 auto;display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:wrap}
.pnum{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.4px;text-transform:uppercase}
/* La taille de la grille est calculée en JS (`fitBoard`) : une case est
   TOUJOURS carrée, quelle que soit la fenêtre. En CSS pur, `height:100%` et
   `max-width` se contredisent dès que l'écran est haut (bureau) et les cases
   s'étirent en hauteur. Le nombre de lignes/colonnes est posé en style inline
   par le module (word_length × max_attempts) ; 6 × 5 n'est qu'un repli. */
.centre{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px}
.boardwrap{display:grid;place-items:center}
.board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px}
.brow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tile{display:grid;place-items:center;font-size:inherit;font-weight:800;
  border:2px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--text);
  text-transform:uppercase;user-select:none;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.tile.filled{border-color:var(--muted)}
/* Case active : on peut choisir n'importe quelle case de la ligne en cours
   (clic ou toucher) pour y écrire, l'ordre gauche-droite n'est pas imposé. */
.tile.cible{cursor:pointer}
.tile.caret{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent-soft)}
.tile.caret:empty::after{content:"";width:2px;height:46%;background:var(--accent);
  border-radius:2px;animation:clign 1.1s steps(2,start) infinite}
@keyframes clign{50%{opacity:0}}
.tile.correct{background:var(--ok);border-color:var(--ok);color:var(--ok-ink)}
.tile.present{background:var(--maybe);border-color:var(--maybe);color:var(--maybe-ink);
  box-shadow:inset 0 0 0 3px var(--maybe-ring)}
.tile.absent{background:var(--tile-absent);border-color:var(--tile-absent);color:var(--tile-absent-ink)}
.tile.reveal{animation:flip .5s ease forwards}
@keyframes flip{0%{transform:rotateX(0)}45%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}
.brow.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.brow.win .tile{animation:hop .5s ease}
.brow.win .tile:nth-child(2){animation-delay:.08s}
.brow.win .tile:nth-child(3){animation-delay:.16s}
.brow.win .tile:nth-child(4){animation-delay:.24s}
.brow.win .tile:nth-child(5){animation-delay:.32s}
@keyframes hop{30%{transform:translateY(-14px)}60%{transform:translateY(4px)}}

.kbd{flex:0 0 auto;width:min(520px,100%);display:flex;flex-direction:column;gap:min(6px,1vh);
  padding-bottom:calc(env(safe-area-inset-bottom) * .3)}
.krow{display:flex;gap:4px;justify-content:center}
.key{flex:1;min-width:0;height:min(56px,7svh);border-radius:6px;background:var(--key);color:var(--key-ink);
  font-size:min(20px,2.7svh);font-weight:700;display:grid;place-items:center;text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}
.key:active{transform:translateY(1px)}
.key.wide{flex:1.5}
/* « Effacer » est en bout de la rangée du HAUT, qui compte déjà 11 touches :
   on l'élargit juste ce qu'il faut pour la viser au pouce sans écraser les
   lettres (1.35 et non 1.5 comme « valider », qui est sur une rangée de 8). */
.key.wide-sm{flex:1.35}
.key-demi{flex:.5}          /* demi-espace en bout de rangée du milieu */
.key svg{width:min(26px,3.5svh);height:min(26px,3.5svh);pointer-events:none}
.key.correct{background:var(--ok);color:var(--ok-ink)}
.key.present{background:var(--maybe);color:var(--maybe-ink);box-shadow:inset 0 0 0 2px var(--maybe-ring)}
.key.absent{background:var(--key-absent);color:var(--key-absent-ink)}

/* Fin de partie : prend la place du clavier, donc toujours visible */
#endzone:empty{display:none}          /* sinon le `gap` de .centre s'applique pour rien */
.endcard{flex:0 0 auto;width:min(420px,92vw);background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:12px 14px;text-align:center;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.endcard h3{font-size:16px;font-weight:800}
.endcard .sol{font-size:24px;font-weight:800;letter-spacing:3px;color:var(--accent);margin:2px 0}
.endcard .sub{font-size:12.5px;color:var(--text-2);margin-bottom:8px}
.endcard .actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}

/* ---------- Exemples des règles (Profil → Comment jouer) ---------- */
.ex{display:inline-grid;grid-auto-flow:column;gap:3px;vertical-align:middle;margin-right:6px}
.ex i{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;font-style:normal;
  font-size:12px;font-weight:800;color:var(--tile-absent-ink);background:var(--tile-absent)}
.ex i.c{background:var(--ok);color:var(--ok-ink)}
.ex i.p{background:var(--maybe);color:var(--maybe-ink);box-shadow:inset 0 0 0 2px var(--maybe-ring)}
.ex i.e{background:var(--surface);color:var(--text);border:2px solid var(--border-strong)}
/* « Vert / Jaune / Gris » ne veut plus rien dire quand tout est rouge : les
   règles portent les deux libellés et le thème choisit lequel s'affiche.
   Fait en CSS et non en JS pour que le texte suive aussi un changement de
   thème depuis le sélecteur, qui ne redessine pas l'écran. */
.si-rouge{display:none}
:root[data-theme="red"] .si-couleur{display:none}
:root[data-theme="red"] .si-rouge{display:inline}