/* Le Mot du jour — habillage.
   Troisième ambiance du portail : ardoise et turquoise, après le violet de
   Blocs et l'ambre de 2048. Interface en DOM et non en canvas : c'est un jeu
   de texte, il doit rester sélectionnable, lisible par un lecteur d'écran et
   redimensionnable. Mobile d'abord. */

.game-mot-du-jour .game-stage{
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(45,190,205,.34), transparent 62%),
    linear-gradient(170deg, #17323C 0%, #122730 52%, #0D1B22 100%);
}
@media(min-width:720px){
  .game-mot-du-jour .game-stage{border-color:rgba(255,255,255,.12);box-shadow:0 18px 50px rgba(13,27,34,.4)}
}

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

/* ---------- bandeau ---------- */
.mj-haut{
  flex:none;display:flex;align-items:center;gap:8px;width:100%;max-width:520px;
}
.mj-info{
  flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;
  font-size:.82rem;color:rgba(234,246,248,.7);font-weight:500;
}
.mj-info b{font-family:'Fredoka','Outfit',sans-serif;font-size:1rem;color:#fff;font-weight:600}
.mj-bouton{
  flex:none;min-height:38px;padding:0 13px;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;color:#fff;
  font-family:'Fredoka','Outfit',sans-serif;font-weight:600;font-size:.88rem;
}
.mj-bouton:hover{background:rgba(255,255,255,.18)}
.mj-bouton:focus-visible{outline:3px solid #5AD7E8;outline-offset:2px}

/* ---------- grille ---------- */
.mj-grille{
  flex:none;display:grid;gap:6px;
  grid-template-rows:repeat(6,1fr);
  margin:auto 0;
}
.mj-ligne{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mj-case{
  width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.12);
  background:transparent;                 /* case vide : creuse, sans matière */
  font-family:'Fredoka','Outfit',sans-serif;
  font-size:1.7rem;font-weight:600;text-transform:uppercase;
  color:#fff;
  transition:transform .12s ease, background-color .2s ease, border-color .2s ease;
}
/* la ligne en cours se repère au premier coup d'œil */
.mj-ligne.active .mj-case{border-color:rgba(255,255,255,.26)}
/* Lettre tapée mais PAS encore validée : liseré turquoise, elle attend Entrée.
   Sélecteur volontairement plus précis que celui de la ligne active, sinon
   c'est le gris de la ligne active qui l'emporte. */
.mj-ligne .mj-case.pleine{
  border-color:#5AD7E8;background:rgba(90,215,232,.12);
  transform:scale(1.04);
}
.mj-case.juste{background:#2FA86E;border-color:#2FA86E}
.mj-case.present{background:#D8A32B;border-color:#D8A32B}
/* lettre validée absente : gris PLEIN, franchement différent d'une case vide,
   sinon on ne voit pas que la ligne a été jouée */
.mj-case.absent{background:#3C4C55;border-color:#3C4C55;color:rgba(234,246,248,.72)}
.mj-ligne.secousse{animation:mj-secousse .4s}
@keyframes mj-secousse{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
.mj-case.retourne{animation:mj-retourne .5s ease forwards}
@keyframes mj-retourne{
  0%{transform:rotateX(0)}
  45%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}
}
.mj-ligne.gagnee .mj-case{animation:mj-saut .5s ease}
@keyframes mj-saut{
  0%,100%{transform:translateY(0)}
  40%{transform:translateY(-14px)}
  70%{transform:translateY(3px)}
}

/* ---------- message ---------- */
.mj-message{
  flex:none;min-height:24px;text-align:center;
  font-size:.9rem;font-weight:600;color:#FFD9A0;
}
.mj-message.conseil{color:#8FE3EE;font-weight:500}
.mj-message:empty{visibility:hidden}

/* ---------- clavier ---------- */
.mj-clavier{flex:none;width:100%;max-width:520px;display:flex;flex-direction:column;gap:6px}
.mj-rangee{display:flex;gap:5px;justify-content:center}
.mj-touche{
  flex:1;min-width:0;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.14);color:#fff;
  font-family:'Fredoka','Outfit',sans-serif;
  font-size:1.02rem;font-weight:600;text-transform:uppercase;
  transition:background-color .15s ease, transform .06s ease;
}
.mj-touche:active{transform:translateY(2px)}
.mj-touche:focus-visible{outline:3px solid #5AD7E8;outline-offset:2px}
.mj-touche.large{flex:1.7;font-size:.8rem}
/* Entrée est l'action principale : elle doit sauter aux yeux */
.mj-touche.valider{background:#17909F;border-color:#22B3C4;color:#fff}
.mj-touche.valider:hover{background:#1AA3B4}
.mj-touche.valider.pret{
  background:#22B3C4;
  box-shadow:0 0 0 3px rgba(90,215,232,.35);
}
.mj-touche.juste{background:#2FA86E;border-color:#2FA86E}
.mj-touche.present{background:#D8A32B;border-color:#D8A32B}
.mj-touche.absent{background:rgba(255,255,255,.055);color:rgba(234,246,248,.4)}

/* ---------- statistiques ---------- */
.mj-stats{display:flex;justify-content:center;gap:18px;margin:2px 0 10px}
.mj-stats div{text-align:center;font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.mj-stats b{display:block;font-family:'Fredoka','Outfit',sans-serif;font-size:1.5rem;color:var(--ink);font-weight:600}
.mj-repart{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.mj-barre{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-soft)}
.mj-barre i{
  display:block;height:22px;border-radius:5px;background:var(--line);
  min-width:26px;text-align:right;padding:0 7px;line-height:22px;
  font-style:normal;font-weight:600;color:var(--ink);font-size:.8rem;
}
.mj-barre.perso i{background:#2FA86E;color:#fff}
.mj-solution{
  text-align:center;font-family:'Fredoka','Outfit',sans-serif;
  font-size:1.5rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin:4px 0 10px;
}

/* ---------- écran large ---------- */
@media(min-width:600px){
  .mj-case{width:66px;height:66px;font-size:2rem}
  .mj-touche{height:58px;font-size:1.1rem}
}
@media(min-width:720px){
  .mj{padding:18px;gap:14px;justify-content:center}
  .mj-grille{gap:8px}
  .mj-ligne{gap:8px}
}

@media (prefers-reduced-motion: reduce){
  .mj-case,.mj-touche{transition:none}
  .mj-case.retourne,.mj-ligne.secousse,.mj-ligne.gagnee .mj-case{animation:none}
}

/* aperçu de l'image de partage, dans l'écran de fin */
.mj-apercu{
  display:block;width:100%;max-width:300px;margin:0 auto 14px;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.mj-apercu:not([src]){display:none}