/* ==========================================================================
   Lockace — Mots croisés (Lot 4.2)

   Complément de `quiz.css`, comme `memory.css` : la coquille, l'écran
   d'accueil et le panneau de résultat sont communs aux trois moteurs maison ;
   seule la grille est propre à ce jeu.

   La contrainte qui commande tout ce fichier : **une grille de dix colonnes
   doit rester jouable sur un téléphone de 375 px**. Les cases y font environ
   30 px, sous les 44 px que le plan (§13) demande « lorsque possible ». Ce
   n'est pas possible ici — dix cases de 44 px demanderaient 440 px de large —
   et c'est le seul endroit du site où la règle cède. Trois compensations :

   1. les cases dépassent largement les 24 px exigés par le WCAG 2.2 AA
      (critère 2.5.8), et la grille occupe toute la largeur disponible ;
   2. chaque définition de la liste est un bouton pleine largeur, très au-delà
      de 44 px : on peut viser un mot sans jamais viser une case ;
   3. la grille entière se pilote au clavier — flèches, saisie qui avance
      seule, tabulation d'un mot au suivant.
   ========================================================================== */

/* Écran d'accueil
   -------------------------------------------------------------------------- */

.crossword-rule {
  margin-block: var(--space-4);
  margin-inline: auto;
  max-width: 42rem;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
}

/* La grille
   -------------------------------------------------------------------------- */

.crossword-grid {
  display: grid;
  grid-template-columns: repeat(var(--crossword-columns, 10), 1fr);
  gap: 2px;
  margin-inline: auto;
  /* La grille ne s'étire pas indéfiniment : au-delà, les cases deviendraient
     des pavés et l'œil ne tiendrait plus la ligne entière. */
  max-width: 34rem;
}

/* Sur petit écran, la grille déborde de la marge intérieure de la coquille :
   chaque pixel repris élargit dix cases à la fois, et c'est exactement là que
   la case est le plus à l'étroit. */
@media (max-width: 30rem) {
  .crossword-grid {
    margin-inline: calc(var(--space-3) * -1);
  }
}

.crossword-cell {
  position: relative;
  aspect-ratio: 1;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 2px;
}

/* Case noire : pas de bordure propre, elle se fond dans le fond de la page.
   Elle ne porte aucun contenu et sort de l'arbre d'accessibilité. */
.crossword-cell.is-block {
  background: transparent;
  border-color: transparent;
}

.crossword-number {
  position: absolute;
  top: 1px;
  left: 2px;
  z-index: 1;
  color: var(--color-text-muted);
  font-size: clamp(0.5rem, 1.8vw, 0.6rem);
  line-height: 1;
  pointer-events: none;
}

/* Sélecteur volontairement descendant, et non `.crossword-input` seul.
   `components.css` habille tous les champs du site par
   `input[type="text"], input[type="email"], select, textarea` — un sélecteur
   d'attribut, donc de spécificité (0,1,1), qui l'emporte sur une simple classe
   (0,1,0). Une case de grille héritait ainsi de la hauteur minimale de 44 px
   et de la marge intérieure des champs de formulaire : elle débordait de son
   carré et recouvrait la ligne du dessous. Passer par la cellule porte la
   spécificité à (0,2,0) et rend la victoire explicite plutôt que dépendante de
   l'ordre des feuilles. */
.crossword-cell .crossword-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Les 44 px de confort tactile (plan §13) ne peuvent pas s'appliquer ici :
     dix cases de 44 px demanderaient 440 px de large. C'est l'unique champ du
     site qui s'en affranchit ; les compensations sont en tête de ce fichier. */
  min-height: 0;
  padding: 0;
  /* Un peu d'air sous le numéro, pour que la lettre ne vienne pas s'y coller. */
  padding-top: 0.2em;
  background: transparent;
  border: 0;
  border-radius: 2px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(0.8rem, 3.4vw, 1.15rem);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  caret-color: transparent; /* la case active est déjà signalée par sa couleur */
}

.crossword-cell .crossword-input:focus {
  outline: 2px solid var(--color-secondary-soft);
  outline-offset: -2px;
}

/* La lettre déjà présente est sélectionnée à l'arrivée du curseur — c'est ce
   qui permet de la remplacer d'une frappe malgré `maxlength="1"`. Sans cette
   règle, la sélection prend la couleur par défaut du navigateur, souvent un
   orangé vif qu'on lit comme une erreur. */
.crossword-cell .crossword-input::selection {
  background: var(--color-secondary);
  color: #fff;
}

/* Le mot en cours de lecture, puis la case du curseur : deux niveaux, pour
   qu'on voie d'un coup d'œil où l'on écrit et ce qu'on écrit. */
.crossword-input.is-in-word {
  background: rgb(71 134 236 / 0.16);
}

.crossword-input.is-active {
  background: rgb(71 134 236 / 0.34);
}

/* Lettre révélée : dorée comme les récompenses du site, et en lecture seule —
   on ne peut pas effacer l'aide qu'on vient de demander. */
.crossword-input.is-revealed {
  color: var(--color-tertiary-soft);
}

/* Case fausse, après « Vérifier ». Le cadre double le compte annoncé sous la
   grille : l'information n'est jamais portée par la seule couleur (plan §13). */
.crossword-input.is-wrong {
  box-shadow: inset 0 0 0 2px var(--color-error);
}

/* Le panneau : définition en cours, commandes, listes
   -------------------------------------------------------------------------- */

.crossword-panel {
  margin-top: var(--space-5);
}

/* Barre de définition : hauteur réservée, sinon la grille remonterait et
   redescendrait à chaque changement de mot. */
.crossword-current {
  min-height: 3.5rem;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.crossword-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (max-width: 30rem) {
  .crossword-actions .btn {
    flex: 1 1 100%;
  }
}

.crossword-status {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.crossword-status.is-ok {
  border-color: var(--color-success);
}

.crossword-status.is-warn {
  border-color: var(--color-warning);
}

/* Listes de définitions
   -------------------------------------------------------------------------- */

.crossword-clues {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 36rem) {
  .crossword-clues {
    grid-template-columns: 1fr 1fr;
  }
}

.crossword-cluelist h3 {
  margin: 0 0 var(--space-3);
  color: var(--color-secondary-soft);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.crossword-cluelist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Chaque définition est un bouton pleine largeur : c'est la grande cible
   tactile qui compense la petitesse des cases (cf. l'en-tête de ce fichier). */
.crossword-clue {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.crossword-clue:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}

.crossword-clue.is-active {
  background: rgb(71 134 236 / 0.16);
  border-color: var(--color-secondary);
  color: var(--color-text);
}

/* Mot achevé : sa définition s'efface du chemin, sans disparaître — on doit
   pouvoir y revenir pour se relire. Le pictogramme double l'estompage, qui
   serait sinon la seule marque, et une marque purement visuelle. */
.crossword-clue.is-done {
  opacity: 0.6;
}

.crossword-clue.is-done .crossword-clue-number::after {
  content: " ✔";
  color: var(--color-success);
}

.crossword-clue-number {
  flex: 0 0 auto;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}