/* ==========================================================================
   Lockace — Memory (Lot 4.2)

   Complément de `quiz.css`, dont ce jeu reprend la coquille (`.quiz-shell`),
   l'écran d'accueil (`.quiz-intro`) et le panneau de résultat (`.quiz-result`) :
   un joueur ne doit pas avoir l'impression de changer de site en changeant de
   format. Seul le plateau est propre au memory, et c'est tout ce qu'il y a ici.

   Trois contraintes tenues dans ce fichier :

   1. **Le plateau est un rectangle plein, sur toutes les tailles d'écran.**
      Trois colonnes sur mobile, quatre au-delà : douze cartes donnent 3×4 puis
      4×3, sans jamais de rangée bancale. C'est la raison pour laquelle le
      moteur accepte douze paires au plus, et le contenu en propose six.
   2. **Aucune information par la seule couleur** (plan §13). Le cadre rouge
      d'une paire manquée double une phrase qui nomme les deux cartes, et cette
      phrase, elle, reste affichée après que les cartes se sont refermées.
   3. **Les animations ne sont jamais nécessaires.** Sous
      `prefers-reduced-motion`, rien ne bouge : les cartes apparaissent et
      disparaissent, et le jeu se joue exactement pareil.
   ========================================================================== */

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

/* La règle du jeu, dite avant de commencer. Même traitement que la règle du
   chrono sur le quiz éclair : un encadré sobre, pas un avertissement. */
.memory-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;
}

/* Compteurs
   -------------------------------------------------------------------------- */

.memory-scoreboard {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.memory-count {
  color: var(--color-secondary-soft);
  font-weight: 600;
}

/* Chiffres tabulaires : le compteur de coups change à chaque tentative, et sa
   largeur ne doit pas faire respirer la ligne à chaque fois. */
.memory-moves {
  font-variant-numeric: tabular-nums;
}

/* Plateau
   -------------------------------------------------------------------------- */

.memory-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

@media (min-width: 30rem) {
  .memory-board {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}

.memory-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  /* Carré : c'est ce qui donne un plateau lisible d'un coup d'œil, et la seule
     forme qui reste correcte de 320 px à 46 rem. */
  aspect-ratio: 1;
  /* Le carré suffit largement à la cible tactile de 44 px sur mobile ; ce
     plancher protège les très petits écrans, où la colonne se resserre. */
  min-height: var(--tap-target);
  padding: var(--space-2);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

/* Dos de carte : un losange, écho au motif géométrique du logo. Purement
   décoratif, donc en `::before` — il n'entre dans aucun arbre d'accessibilité. */
.memory-card::before {
  content: "";
  width: 38%;
  aspect-ratio: 1;
  border: 2px solid var(--color-border);
  border-radius: 3px;
  transform: rotate(45deg);
}

.memory-card:hover:not(:disabled) {
  border-color: var(--color-secondary);
}

.memory-card:hover:not(:disabled)::before {
  border-color: var(--color-secondary);
}

/* Carte retournée : le dos s'efface, l'intitulé prend la place. */
.memory-card.is-revealed::before,
.memory-card.is-found::before {
  content: none;
}

.memory-card.is-revealed {
  background: var(--color-surface);
  border-color: var(--color-secondary);
}

.memory-card-icon {
  font-size: clamp(1.1rem, 4vw, 1.6rem);
  line-height: 1;
}

/* L'intitulé doit tenir dans une carte de 70 px sur un petit téléphone.
   `hyphens` et la coupure autorisée valent mieux qu'un texte rogné : on préfère
   « Fomalhaut-Ae » sur deux lignes à « Fomalh… ». */
.memory-card-label {
  font-size: clamp(0.62rem, 2.6vw, 0.8rem);
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Paire trouvée : elle reste lisible et sort du parcours clavier (le bouton est
   `disabled`). Le vert du succès, doublé par le commentaire sous le plateau. */
.memory-card.is-found {
  background: rgb(76 175 117 / 0.12);
  border-color: var(--color-success);
  color: var(--color-text);
  cursor: default;
  /* Un bouton désactivé est grisé par défaut dans certains navigateurs : on le
     garde pleinement lisible, puisqu'il porte encore une information. */
  opacity: 1;
}

/* Paire manquée, le temps que les cartes se referment. */
.memory-card.is-wrong {
  border-color: var(--color-error);
  background: rgb(224 91 101 / 0.12);
}

@media (prefers-reduced-motion: no-preference) {
  .memory-card.is-revealed {
    animation: memory-card-reveal 180ms ease-out;
  }

  .memory-card.is-wrong {
    animation: memory-card-wrong 320ms ease;
  }
}

@keyframes memory-card-reveal {
  from {
    opacity: 0.3;
    transform: scale(0.94);
  }
}

/* Battement latéral bref et de faible amplitude : il signale sans surprendre,
   et ne clignote pas (plan §13). */
@keyframes memory-card-wrong {
  25% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
}

/* Commentaire du plateau
   -------------------------------------------------------------------------- */

/* Hauteur réservée dès le départ : sans elle, le plateau remonterait et
   redescendrait à chaque coup, et la carte visée changerait de place sous le
   doigt au pire moment. */
.memory-status {
  min-height: 4rem;
  margin: var(--space-5) 0 0;
  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);
}

.memory-status.is-match {
  border-color: var(--color-success);
}

.memory-status.is-match strong {
  color: var(--color-success);
}

.memory-status.is-mismatch {
  border-color: var(--color-error);
}