/* Mots mêlés — habillage.
   Lie-de-vin et papier ivoire : la grille est une page, pas un écran.

   La grille est une grille de BOUTONS, chacun focalisable et annonçable. Un
   canevas aurait été plus court et muet — et sur quinze fois quinze cases,
   muet veut dire inutilisable au clavier comme au lecteur d'écran. */

.game-mots-meles .game-stage{
  background:
    radial-gradient(ellipse 110% 70% at 50% 0%, rgba(214,156,176,.16), transparent 60%),
    linear-gradient(170deg, #3A2029 0%, #2A161D 55%, #1B0E13 100%);
}
@media(min-width:720px){
  .game-mots-meles .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(20,10,14,.45)}
}

.mm{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;
  padding:6px 6px calc(5px + env(safe-area-inset-bottom));
  gap:5px;color:#F6EAEE;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}

/* ---------- bandeau ---------- */
.mm-haut{display:flex;gap:6px;width:100%;max-width:560px;flex:none}
.mm-stat{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4px;border-radius:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.mm-stat small{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;opacity:.62}
.mm-stat b{font-size:15px;font-variant-numeric:tabular-nums}
.mm-btn-haut{
  flex:none;width:34px;border-radius:9px;font:600 15px/1 inherit;color:inherit;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
}
.mm-btn-haut:hover{background:rgba(255,255,255,.15)}

/* ---------- la grille ----------
   ELLE DOIT RESTER CARRÉE : une grille aplatie se suit mal en diagonale, et la
   diagonale est la moitié du jeu. On la borne donc par la largeur ET par la
   hauteur disponibles. */
.mm-cadre{
  flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.mm-grille{
  display:grid;
  aspect-ratio:1;
  width:min(100%, 62vh, 500px);
  gap:1px;padding:3px;
  background:#6E4452;
  border-radius:7px;
  box-shadow:0 8px 26px rgba(15,8,11,.45);
}

.mm-case{
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;border:0;border-radius:2px;cursor:pointer;
  background:#F4E9DC;
  color:#2B1A20;
  font:700 clamp(8px, calc(26vw / var(--mm-cote, 12)), 20px)/1 inherit;
  position:relative;
}
.mm-case:hover:not(.trouvee){background:#FFF6EA}
.mm-case:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #2B1A20}

/* La première lettre touchée. Un liseré, pas un remplissage : on doit continuer
   à LIRE la lettre pendant qu'on cherche la dernière. */
.mm-case.depart{
  box-shadow:inset 0 0 0 2px #B8365C, 0 0 10px rgba(184,54,92,.5);
  background:#FFF1E0;
}
/* Trouvée : la trace de ce qui est fait. Sans elle on refouille le même coin. */
.mm-case.trouvee{
  background:linear-gradient(160deg,#C7E3C9,#A8D2AC);
  color:#1C3520;
}
.mm-case.rate{animation:mm-rate .3s ease-out}
@keyframes mm-rate{
  0%,100%{background:#F4E9DC}
  30%{background:#F2B3AE}
}

/* ---------- la liste des mots ----------
   Elle est sous la grille et non à côté : sur un téléphone en portrait, une
   colonne de mots à droite rétrécit la grille de moitié. */
.mm-liste{
  margin:0;padding:0;list-style:none;flex:none;
  display:flex;flex-wrap:wrap;gap:3px 5px;justify-content:center;
  width:100%;max-width:560px;
  max-height:4.6em;overflow-y:auto;
}
.mm-mot{
  padding:2px 7px;border-radius:999px;
  font:600 clamp(9.5px,2.3vw,12px)/1.25 inherit;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.12);
  letter-spacing:.02em;
}
/* Barré ET éteint : le trait seul se perd quand la liste est dense. */
.mm-mot.barre{
  text-decoration:line-through;
  opacity:.38;
  background:rgba(168,210,172,.16);border-color:rgba(168,210,172,.3);
}

.mm-aide{
  margin:0;flex:none;text-align:center;
  font-size:11px;color:#EDD9DF;opacity:.6;min-height:1.1em;
}

/* ---------- les réglages, sur l'écran d'ouverture ---------- */
.mm-reglages{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  margin:12px 0 2px;
}
.mm-reglages span{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;
  margin-top:6px;
}
.mm-choix-rang{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.mm-choix{
  padding:5px 11px;border-radius:999px;cursor:pointer;
  font:600 12px/1 inherit;color:inherit;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
}
.mm-choix:hover{background:rgba(255,255,255,.18)}
.mm-choix.actif{background:#D9617F;border-color:#D9617F;color:#2B1016}
/* Douze thèmes : la rangée doit pouvoir respirer sans pousser le bouton Jouer
   hors de l'écran. */
.mm-themes{max-width:420px}
.mm-themes .mm-choix{padding:4px 9px;font-size:11px}

@media(max-height:640px){
  .mm-aide{display:none}
  .mm-grille{width:min(100%, 54vh, 500px)}
  .mm-liste{max-height:3.4em}
}
@media(prefers-reduced-motion:reduce){
  .mm-case.rate{animation:none;background:#F2B3AE}
}