/* ==========================================================================
   Lockace — Auto-déclaration après l'ouverture d'un jeu externe
   Feuille propre aux deux pages qui affichent des cartes de jeu (accueil et
   catalogue), chargée par elles seules — même principe que local-data.css.
   ========================================================================== */

.play-followup {
  margin-block: var(--space-5);
}

/* Rien à annoncer : l'encart ne doit réserver aucune place. La région live
   reste dans le DOM (elle doit préexister pour être annoncée), mais vide elle
   ne pousse pas le contenu. */
.play-followup:empty {
  display: none;
}

.play-followup-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  /* Marge à droite réservée à la croix, pour qu'elle ne chevauche jamais le
     texte — sa cible tactile fait 44 px. */
  padding: var(--space-4) var(--space-7) var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  /* Un filet d'accent, pas un fond coloré : c'est une proposition, pas une
     alerte. Le liseré ne porte aucune information à lui seul. */
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.play-followup-text {
  flex: 1 1 18rem;
}

.play-followup-question {
  margin: 0;
}

.play-followup-note {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.play-followup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Les deux réponses partagent le même bouton : aucune n'est la bonne réponse. */
.play-followup-actions .btn {
  padding-inline: var(--space-4);
}

.play-followup-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.play-followup-close:hover,
.play-followup-close:focus-visible {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.play-followup-thanks {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}

/* Sur mobile, les deux réponses s'empilent sur toute la largeur : côte à côte,
   leurs libellés passeraient à la ligne et doubleraient la hauteur des pastilles. */
@media (max-width: 30rem) {
  .play-followup-actions {
    flex-direction: column;
    width: 100%;
  }

  .play-followup-actions .btn {
    width: 100%;
  }
}

/* L'encart apparaît après le chargement : une apparition douce évite qu'il
   surgisse, sans jamais retarder la lecture. */
@media (prefers-reduced-motion: no-preference) {
  .play-followup-card,
  .play-followup-thanks {
    animation: play-followup-fade var(--transition-fast);
  }
}

@keyframes play-followup-fade {
  from {
    opacity: 0;
  }
}