/* Grille de mots croisés : commune au solo, au multijoueur et au défi du jour.
   Avant le 01/10/2026, ces règles étaient recopiées dans solo.css, multijoueur.css
   et defi-du-jour.css, avec des tailles de case différentes et des écarts (touches
   du clavier sans fond en solo, avec fond en multi).

   La taille d'une case vient de --case, calculée par js/grille-mc.js selon la place
   disponible : les cases restent CARRÉES. Les tailles fixes (28 px de haut) laissaient
   le tableau écraser la largeur sur mobile : 16 × 28 px en 15×15 sur 320 px. */

.hidden {
  display: none !important;
}

/* La barre de navigation du réseau est fixe en haut : sans cette marge, le
   défilement automatique vers la zone de jeu cachait le chrono sous elle. */
.info-bar,
.zone-jeu-ancre {
  scroll-margin-top: 72px;
}

.info-bar {
  margin: 12px 0 16px;
  /* Bornée à l'écran : sur 320 px, la barre (sans retour à la ligne) dépassait de
     40 px de chaque côté et élargissait toute la page. */
  max-width: 100%;
  box-sizing: border-box;
}

.info-item {
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  padding: 7px 13px;
}

.info-item span {
  color: var(--texte);
  font-weight: 700;
}

/* --- Mise en page ---------------------------------------------------------- */
.game-layout {
  display: flex;
  gap: 24px;
  width: 100%;
  align-items: flex-start;
}

.zone-grille {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}

.grille-container {
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 12px;
  max-width: 100%;
  /* Une grille 15×15 sur un petit écran peut dépasser de quelques cases : on la
     fait glisser au doigt, la case active étant ramenée à l'écran par le JS. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.zone-saisie {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Grille ---------------------------------------------------------------- */
.grille-table {
  --case: 40px;
  border-collapse: collapse;
  user-select: none;
  -webkit-user-select: none;
  margin: 0 auto;
  table-layout: fixed;
}

.grille-table td {
  width: var(--case);
  min-width: var(--case);
  max-width: var(--case);
  height: var(--case);
  padding: 0;
  position: relative;
  border: 1px solid var(--line-forte);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

/* États de case : fonds opaques et non translucides. Sur un fond sombre, deux
   voiles rgba() différents finissent par composer presque la même couleur. */
.grille-table td.noire {
  background: #0a0f11;
  cursor: default;
  border-color: #0a0f11;
}

.grille-table td.lettre {
  background: var(--surface-1);
}

@media (hover: hover) {

  .grille-table td.lettre:hover {
    background: #24343b;
  }
}

/* Le mot en cours de saisie : tout le mot s'éclaircit légèrement. */
.grille-table td.mot-actif {
  background: #1f3b40 !important;
}

/* La case sous le curseur : déclarée après .mot-actif pour gagner la cascade. */
.grille-table td.active {
  background: #2a5a58 !important;
  border-color: var(--color-light);
  box-shadow: inset 0 0 0 2px var(--color-light);
}

/* Vert franc plutôt que teal : un vert translucide se confondrait avec le mot actif. */
.grille-table td.correct {
  background: #14432a !important;
}

.grille-table td.erreur {
  background: #4d1f24 !important;
}

.grille-table td.correct .lettre-case {
  color: #7ee29b;
}

.grille-table td.erreur .lettre-case {
  color: #ff9a9a;
}

.grille-table td.indice .lettre-case {
  color: #e0a33c;
}

.numero-case {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: max(9px, calc(var(--case) * 0.26));
  font-weight: 700;
  color: var(--color-light);
  line-height: 1;
  pointer-events: none;
}

.lettre-case {
  font-size: calc(var(--case) * 0.5);
  font-weight: 700;
  color: var(--texte);
  text-transform: uppercase;
  pointer-events: none;
  line-height: 1;
}

.direction-indicator {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: max(8px, calc(var(--case) * 0.22));
  color: var(--texte-doux);
  pointer-events: none;
  line-height: 1;
}

/* --- Barre de définition active -------------------------------------------- */
/* Écrans tactiles et étroits : la définition du mot en cours reste sous les yeux,
   entre la grille et le clavier, au lieu d'être cherchée dans le panneau. */
.clue-bar {
  display: none;
}

@media (max-width: 900px), (pointer: coarse) {

  .clue-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--color-light) 45%, var(--line-forte));
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--texte);
    min-height: 52px;
  }

  .clue-bar.hidden {
    display: none !important;
  }
}

.clue-bar-txt {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.clue-bar-len {
  font-size: 0.75rem;
  color: var(--texte-doux);
}

.clue-bar-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--texte);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.clue-bar-nav:active {
  background: color-mix(in srgb, var(--color-light) 30%, var(--surface-1));
}

/* --- Clavier AZERTY à l'écran ---------------------------------------------- */
#clavier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px;
  width: 100%;
}

/* Souris et clavier physique : le clavier à l'écran ne sert à rien. */
@media (hover: hover) and (pointer: fine) {

  #clavier {
    display: none;
  }
}

.clavier-ligne {
  display: flex;
  gap: 5px;
  justify-content: center;
  width: 100%;
}

.touche {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  height: 46px;
  flex: 1 1 0;
  max-width: 44px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--line-forte);
  border-radius: 6px;
  cursor: pointer;
  /* Plus clair que le fond du cadre : les touches doivent se voir comme des
     touches (en --surface-2 sur --surface-2, elles passaient pour du texte). */
  background: #2b3c43;
  color: var(--texte);
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}

.touche:active {
  background: color-mix(in srgb, var(--color-light) 35%, #2b3c43);
}

.touche.large {
  flex: 1.6 1 0;
  max-width: 72px;
  font-size: 1.2rem;
}

/* --- Panneau des définitions ----------------------------------------------- */
.definitions-panel {
  flex: 1;
  min-width: 0;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 16px;
  container-type: inline-size;
}

.defs-colonnes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 20px;
}

/* Horizontales et verticales côte à côte dès que le panneau en a la place. */
@container (min-width: 520px) {

  .defs-colonnes {
    grid-template-columns: 1fr 1fr;
  }
}

.definitions-panel h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texte);
  margin: 4px 0 8px;
}

.def-item {
  font-size: 0.86rem;
  color: var(--texte-doux);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
  line-height: 1.4;
  text-align: left;
}

@media (hover: hover) {

  .def-item:hover {
    background: var(--surface-1);
    color: var(--texte);
  }
}

.def-item.active {
  background: color-mix(in srgb, var(--color-light) 16%, var(--surface-2));
  color: var(--texte);
  box-shadow: inset 3px 0 0 var(--color-light);
}

.def-item.found {
  color: #34d399;
  text-decoration: line-through;
  opacity: 0.7;
}

.def-item.erreur {
  box-shadow: inset 3px 0 0 #d07070;
}

.def-numero {
  font-weight: 700;
  color: var(--color-light);
  margin-right: 4px;
}

.def-longueur {
  font-size: 0.75rem;
  color: var(--texte-faible);
}

/* --- Boutons --------------------------------------------------------------- */
.actions-bar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-warning {
  background: #a3742c;
}

.btn-success {
  background: #3f7a55;
}

.btn-discret {
  background: transparent;
  border: 1px solid var(--line-forte);
  color: var(--texte-doux);
}

.message-jeu {
  text-align: center;
  color: var(--texte-doux);
  font-size: 0.9rem;
  margin: 8px 0 0;
  min-height: 1.3em;
}

.message-jeu:empty {
  min-height: 0;
  margin: 0;
}

.message-jeu.alerte {
  color: #e0a33c;
}

/* --- Fenêtre de fin -------------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.modal-overlay.visible {
  display: flex;
}

.modal {
  background: var(--surface-1);
  border: 1px solid var(--line-forte);
  border-radius: 8px;
  padding: 32px 28px;
  max-width: 440px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  text-align: center;
}

.modal h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  font-family: var(--font-display);
  color: #34d399;
}

.modal p {
  font-size: 0.95rem;
  color: var(--texte-doux);
  margin-bottom: 8px;
}

.modal .score-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--texte);
}

.modal .rang-msg {
  color: #e0a33c;
  font-weight: 700;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}

.modal-actions .btn {
  width: 100%;
  text-align: center;
}

.lien-classement-fin {
  display: inline-block;
  margin-top: 10px;
  color: var(--color-light);
  font-weight: 600;
  text-decoration: none;
}

.cta-auth-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 10px 0 4px;
}

/* Bouton d'inscription lisible (en teal sombre sur fond sombre, il semblait
   désactivé). */
.cta-auth-btns .auth-inscription {
  background: var(--color-btn1);
  color: #fff;
}

/* Confettis */
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  z-index: 1001;
  pointer-events: none;
}

/* --- Responsive ------------------------------------------------------------ */

/* Tablette portrait et mobile : grille, saisie, puis définitions en dessous.
   À 820 px, le panneau à côté de la grille débordait du cadre. */
@media (max-width: 900px) {

  .game-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .zone-grille {
    width: 100%;
  }

  .definitions-panel {
    max-height: none;
  }
}

@media (max-width: 480px) {

  .grille-container {
    padding: 4px;
    border-radius: 6px;
  }

  .info-bar {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .info-bar::-webkit-scrollbar {
    display: none;
  }

  .info-bar {
    gap: 6px;
    margin: 8px 0 10px;
  }

  .info-item {
    padding: 5px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .touche {
    height: 44px;
    font-size: 0.95rem;
  }

  .clavier-ligne {
    gap: 4px;
  }
}

/* Écran tactile étroit : la définition et le clavier restent collés en bas de
   l'écran. Sur un petit téléphone (320 × 568), une grille 15×15, la définition et
   le clavier ne tiennent pas ensemble : la grille défile, la saisie reste là. */
@media (max-width: 900px) and (pointer: coarse) and (orientation: portrait) {

  .zone-saisie {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--surface-1);
    padding: 0 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.35);
    border-radius: 8px 8px 0 0;
  }

  /* Boutons de la zone collée : compacts, pour laisser la place à la grille. */
  .zone-saisie .actions-bar {
    margin-top: 6px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .zone-saisie .actions-bar .btn {
    flex: 1 1 0;
    padding: 9px 10px;
    font-size: 0.85rem;
  }
}

/* Téléphone en paysage : la grille à gauche, la définition et le clavier à droite.
   Empilés, ils ne tenaient jamais ensemble dans 375 px de haut. */
@media (orientation: landscape) and (max-height: 520px) {

  .zone-grille {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
  }

  .zone-saisie {
    flex: 1;
    min-width: 0;
  }

  .clue-bar {
    margin-top: 0;
  }

  .touche {
    height: 38px;
  }
}

/* --- Bulle de retour sous la définition (indice, vérification) --------------
   Visible là où l'on regarde : sur mobile, la zone de saisie est collée en bas. */
.bulle-grille {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0 10px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-light) 18%, var(--surface-2));
  color: var(--texte);
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  transition: opacity 0.2s, max-height 0.2s, margin 0.2s, padding 0.2s;
}

.bulle-grille.visible {
  max-height: 80px;
  opacity: 1;
  margin-top: 6px;
  padding: 6px 10px;
}

.bulle-grille.alerte {
  background: color-mix(in srgb, #e0a33c 22%, var(--surface-2));
}

/* La lettre que l'indice vient de révéler s'éclaire un instant. */
/* Par une ombre intérieure : les fonds du mot actif sont en !important, qui l'emporte
   sur une animation de background. */
@keyframes flash-indice {
  0% { box-shadow: inset 0 0 0 60px rgba(224, 163, 60, 0.6); }
  100% { box-shadow: inset 0 0 0 0 rgba(224, 163, 60, 0); }
}

.grille-table td.flash-indice {
  animation: flash-indice 1.2s ease-out;
}

/* Indice indisponible (niveau extrême) : grisé, mais il répond au clic par un message. */
.btn.indisponible {
  opacity: 0.5;
}