/**
 * PlayAwale — Composant fenêtre modale
 * -----------------------------------------------------------------------------
 * Panneau centré posé sur un voile sombre, qui interrompt le cours de la page
 * pour annoncer une issue ou demander une confirmation.
 *
 *     <div class="modal" hidden role="dialog" aria-modal="true"
 *          aria-labelledby="…">
 *       <div class="modal__panel">
 *         <h2 class="modal__title" id="…">…</h2>
 *         <p class="modal__text">…</p>
 *         <div class="modal__actions"> … </div>
 *       </div>
 *     </div>
 *
 * L'ouverture et la fermeture se font par l'attribut « hidden », jamais en
 * touchant au style : voir la règle [hidden] de base/reset.css.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

/* =============================================================================
   VOILE
   ============================================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);

  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);

  /* Assombrit la page sans la masquer : le plateau reste visible derrière,
     en retrait, ce qui garde le contexte de la décision. */
  background: rgba(0, 0, 0, 0.55);

  animation: modal-fade var(--duration-fast) ease-out;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* =============================================================================
   PANNEAU
   ============================================================================= */

.modal__panel {
  width: min(92vw, 420px);
  padding: var(--space-xl);
  text-align: center;

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-lg);

  /* Le halo diffus de la fenêtre, et par-dessus le relief commun : elle est
     posée sur le jeu, pas peinte dessus. */
  box-shadow: var(--shadow-glow), var(--shadow-raised);
}

.modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.5vw, 1.8rem);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.modal__text {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}


/* =============================================================================
   ACTIONS
   Empilées verticalement : sur mobile comme sur écran large, les libellés
   traduits peuvent être longs, et une rangée horizontale finirait par se
   tasser ou déborder.
   ============================================================================= */

.modal__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* Dans ce panneau, les boutons occupent toute la largeur : le remplissage
   horizontal généreux du bouton principal y serait démesuré. */
.modal__actions .btn {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
}


/* Le bouton discret d'une fenêtre — « C'est noté », « Annuler » — a rejoint
   components/button.css : il sert aussi hors des fenêtres, sur la page du
   compte, et un modificateur de bouton appartient au bouton. */

/* =============================================================================
   DEUX VARIANTES
   ============================================================================= */

/* Un panneau plus large, pour ce qui ne se coupe pas : une clé de sage tient sur
   une ligne, ou sur deux, jamais sur quatre. */
.modal__panel--wide {
  width: min(94vw, 560px);
}

/* Un avertissement dans une fenêtre : ce n'est pas du texte ordinaire, et il ne
   doit pas se lire comme tel. */
.modal__text--warning {
  font-weight: 700;
  color: var(--color-danger);
}