/* =============================================================
   personae.css — Styles exclusifs au Mode Personae
   Contient : boîte d'affichage du Persona, image du Persona,
   classes de victoire spécifiques (failure-text, success-text).
   ============================================================= */

/* =====================================================
   1. BOÎTE D'AFFICHAGE DU PERSONA
   Cadre rouge sombre présentant l'image du Persona
   à deviner.
   ===================================================== */

.persona-box {
  width: 500px;
  height: 500px;
  /* Bordure rouge vif et fond bleu très sombre — style Velvet Room */
  border: 4px solid #ff4757;
  background-color: #1e1e2f;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
  transition: transform 0.3s ease-in-out;
}

/* Image du Persona affichée dans la boîte */
#personaImage {
  /* width/height plutôt que max-* : avec `max-` seul, un dessin plus petit que
     le cadre s'affichait à sa taille naturelle — Freyr, fourni en 112x98, était
     une vignette perdue au milieu de la boîte alors que les autres la remplissent.
     `object-fit: contain` conserve le ratio, donc les grands dessins rendent
     exactement comme avant (ils étaient déjà contraints par le cadre). */
  width: 90%;
  height: 90%;
  object-fit: contain;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

/* =====================================================
   2. CLASSES DE RÉSULTAT (créées dynamiquement par JS)
   Appliquées sur des divs .victory-message dans
   #victoryText pour différencier victoire et défaite.
   ===================================================== */

/* Texte de défaite — rouge */
.failure-text {
  color: #e53935;
  font-weight: bold;
}

/* Texte de victoire — vert */
.success-text {
  color: #43a047;
  font-weight: bold;
}

/* =====================================================
   3. RESPONSIVE — SPÉCIFIQUE PERSONAE
   ===================================================== */

/* -----------------------------------------------
   TABLETTE (481px – 768px)
   La boîte passe de 500px fixe à une valeur
   min() qui s'adapte à la largeur de l'écran.
----------------------------------------------- */
@media (max-width: 768px) {
  /* min(500px, 88vw) : 500px max, mais pas plus
     que 88% de la largeur du viewport */
  .persona-box {
    width: min(440px, 88vw);
    height: min(440px, 88vw); /* Garde le format carré */
    border-radius: 16px;
    margin: 15px auto;
  }
}

/* -----------------------------------------------
   MOBILE (≤ 480px)
   Boîte carrée qui utilise toute la largeur dispo.
   Le style "Velvet Room" (rouge/fond sombre) est conservé.
----------------------------------------------- */
@media (max-width: 480px) {
  .persona-box {
    width: 90vw; /* 90% de la largeur de l'écran */
    height: 90vw; /* Carré absolu */
    border-radius: 12px;
    border-width: 3px;
    margin: 12px auto;
    box-shadow: 0 0 14px rgba(255, 71, 87, 0.4);
  }

  /* L'image du Persona occupe mieux l'espace */
  #personaImage {
    width: 92%;
    height: 92%;
  }

  /* ── Correctif zone input ──────────────────────────────────────────────────
     Même problème que silhouette : min-width:240px + gap:20px → overflow 360px.
  --------------------------------------------------------------------------- */
  .input-wrapper > div {
    gap: 8px;
    width: min(340px, 95vw);
    box-sizing: border-box;
  }

  #textbar {
    min-width: 0 !important; /* Annule le min-width:240px inline */
    flex: 1 1 120px;
  }
}

/* ═════════════════════════════════════════════════════════════════════════════
   RÉVÉLATION — animation d'invocation (les deux modes)
   ═════════════════════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════════════════════
   MODE EXPERT — la fiche de lore
   Le bouton de bascule et le halo de page vivent dans css/global.css (partagés
   par tous les modes). Ici : le panneau de texte qui remplace l'image.
   ═════════════════════════════════════════════════════════════════════════════ */

/* L'image EST la réponse en Expert : le cadre carré 500×500 « Velvet Room »
   n'encadre plus rien et comprimait la fiche. On le retire en entier — la fiche
   est une sœur dans le HTML, pas une enfant, donc elle reste seule à l'écran. */
body.expert-mode .persona-box {
  display: none;
}

/* Le portrait du personnage révélé s'invoque aussi, dans les deux modes. Pas de
   JS : la victory-box passe de display:none à visible, ce qui (re)déclenche
   l'animation à chaque affichage. */
#victoryBox img {
  animation: personaSummonImg 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #victoryBox img {
    animation: none;
  }
}

/* Invocation de la persona à la révélation. Portée par .persona-box et pas par
   l'image : le halo doit envelopper le cadre, et l'animation démarre seulement
   quand la classe est posée, donc jamais au chargement d'une partie en cours. */
.persona-box.summoning {
  animation: personaSummon 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.persona-box.summoning img {
  animation: personaSummonImg 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes personaSummon {
  0% {
    transform: scale(0.82);
    box-shadow: 0 0 0 rgba(255, 71, 87, 0);
  }
  45% {
    box-shadow: 0 0 46px rgba(255, 71, 87, 0.95);
  }
  70% {
    transform: scale(1.04);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
  }
}

@keyframes personaSummonImg {
  0% {
    opacity: 0;
    filter: blur(14px) brightness(2.4);
  }
  55% {
    opacity: 1;
    filter: blur(3px) brightness(1.5);
  }
  100% {
    opacity: 1;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .persona-box.summoning,
  .persona-box.summoning img {
    animation: none;
  }
}

.expert-lore-box {
  box-sizing: border-box;
  width: min(600px, 92vw);
  margin: 18px auto;
  padding: 20px 24px;
  background: rgba(12, 12, 14, 0.92);
  border: 2px solid #e63946;
  border-radius: 4px;
  box-shadow: 0 0 24px rgba(230, 57, 70, 0.28);
}

.expert-lore-header {
  margin-bottom: 12px;
  font-family: "Courier New", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #e63946;
}

.expert-lore-text {
  margin: 0;
  color: #f2f2f2;
  font-size: 1rem;
  line-height: 1.6;
  text-align: justify;
}

@media (max-width: 480px) {
  .expert-lore-box {
    padding: 16px 18px;
  }

  .expert-lore-text {
    font-size: 0.92rem;
    text-align: left; /* justifié sur écran étroit = rivières de blanc */
  }
}