/* =============================================================
   silhouette.css — Styles exclusifs au Mode Silhouette
   Contient : boîte silhouette, zoom, image silhouette,
   niveaux de flou, mauvaises réponses style silhouette,
   victoire dans la silhouette, animation d'apparition.
   ============================================================= */

/* =====================================================
   1. BOÎTE SILHOUETTE
   Conteneur carré centré affichant l'image en silhouette
   noire, révélée progressivement.
   ===================================================== */

.silhouette-box {
  /* Référent de positionnement du voile de chargement (.silhouette-loader) */
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 600px;
  margin: 40px auto 20px auto;
  /* Fond clair pour faire ressortir la silhouette noire */
  background: #f0f0f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border: 4px solid #333;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease-in-out;
}

/* Fond sombre en dark mode pour garder la silhouette visible */
.darkmode .silhouette-box {
  background: #1f1f2f;
  border-color: #ccc;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.1);
}

/* Wrapper qui gère le zoom sans flash visuel */
.zoom-wrapper {
  /* Zoom par défaut au démarrage (gros plan) */
  transform: scale(1.8);
  transition: transform 0.4s ease;
  display: inline-block;
}

/* Image silhouette : filtre noir, cachée tant que non chargée */
#silhouetteImage {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* Applique la silhouette noire */
  filter: brightness(0);
  margin-bottom: 20px;
  /* Cachée jusqu'au chargement complet */
  visibility: hidden;
  transition:
    filter 0.3s ease,
    visibility 0s;
  /* ⚠️ NE PAS remettre d'`animation` ici (retirée en 2.1).
     `popInSilhouette` animait `transform` et `opacity` — précisément les deux
     propriétés que modeSilhouette.js pilote en style inline. Une animation en
     cours l'emporte sur l'inline dans la cascade : pendant ses 400 ms l'image
     s'affichait à scale(1) au lieu de scale(1.8) (dézoom visible au premier
     chargement, plus jamais ensuite puisque l'animation ne rejoue pas), et
     surtout, en Mode Expert, elle forçait opacity 0 → 1 par-dessus le masquage
     de setFlashVisible(false) : la silhouette était donnée AVANT le premier
     flash. La transition douce est désormais gérée par .silhouette-loader. */
  /* Anti-triche : empêche de glisser l'image hors de .silhouette-box (overflow:
     hidden) pour voir l'aperçu de drag natif du navigateur, qui n'applique pas
     le filtre — révélerait le personnage à deviner. Doublé par draggable="false"
     (HTML) et preventDefault(dragstart) (JS) pour une couverture cross-browser. */
  -webkit-user-drag: none;
  user-select: none;
}

/* =====================================================
   2. (Bloc `.blur-level-*` retiré en 2.1.)
   Il se disait « appliqué par modeSilhouette.js à chaque mauvaise réponse » —
   c'était faux : le mode dézoome (transform), il n'a jamais flouté. Aucune de
   ces 7 classes n'était référencée nulle part. Laissé en place, il aurait
   surtout fait croire à un mécanisme de flou inexistant, et son `filter` serait
   entré en conflit avec le noircissement s'il avait un jour été branché.
   ===================================================== */

/* =====================================================
   3. MAUVAISES RÉPONSES (style silhouette)
   Affichées dans #wrongGuessList sous la zone de jeu.
   Style différent du .wrong-mini global : fond sombre.
   ===================================================== */

.wrong-guess {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto;
  padding: 6px 12px;
  border-radius: 12px;
  /* Fond très sombre pour le thème silhouette */
  background-color: #330000;
  color: white;
  font-weight: bold;
  max-width: 300px;
  animation: shake 0.4s ease-in-out;
}

.wrong-guess img {
  height: 48px;
  border-radius: 8px;
}

/* =====================================================
   4. BOÎTE DE VICTOIRE (contexte silhouette)
   Surcharges spécifiques quand .victory-box est dans
   la .silhouette-box.
   ===================================================== */

/* Cache l'image dans la victory-box (la silhouette suffit) */
.silhouette-box .victory-box img {
  display: none;
}

/* Victory-box réintégrée dans la boîte silhouette */
.silhouette-box .victory-box {
  margin-top: 20px;
  background-color: #e6fbe6;
  border: 3px solid #4caf50;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
  animation: fadeInVictory 0.3s ease-in-out;
}

/* Message de victoire dans la silhouette (vert foncé) */
.silhouette-box .victory-message {
  font-size: 1.4rem;
  font-weight: bold;
  color: #2e7d32;
}

/* Message de victoire générique hors silhouette-box */
.victory-message {
  margin-top: 12px;
  font-size: 1.4rem;
  font-weight: bold;
  color: #66ff66;
  text-align: center;
}

/* =====================================================
   5. ANIMATION D'APPARITION DE LA SILHOUETTE
   ===================================================== */

/* Voile de chargement — occupe la boîte tant que la silhouette n'est pas décodée.
   Remplace l'ancien pop-in : il ne touche NI transform NI opacity de l'image
   (cf. le bloc #silhouetteImage), il vit dans son propre élément par-dessus. */
.silhouette-loader {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: inherit;
  border-radius: 14px;
  z-index: 2;
}

.silhouette-box.is-loading .silhouette-loader {
  display: flex;
}

.silhouette-loader::before {
  content: "";
  width: 44px;
  height: 44px;
  border: 4px solid rgba(51, 51, 51, 0.2);
  border-top-color: #333;
  border-radius: 50%;
  animation: silhouetteLoaderSpin 0.9s linear infinite;
}

.darkmode .silhouette-loader::before {
  border-color: rgba(255, 255, 255, 0.2);
  border-top-color: #eee;
}

/* Respecte le réglage système : un spinner qui tourne en boucle est exactement
   le type de mouvement que `prefers-reduced-motion` demande de couper. */
@media (prefers-reduced-motion: reduce) {
  .silhouette-loader::before {
    animation-duration: 3s;
  }
}

@keyframes silhouetteLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* =====================================================
   6. RESPONSIVE — SPÉCIFIQUE SILHOUETTE
   ===================================================== */

/* -----------------------------------------------
   TABLETTE (481px – 768px)
   La boîte silhouette s'adapte à la largeur
   disponible sans dépasser la hauteur de l'écran.
----------------------------------------------- */
@media (max-width: 768px) {
  /* Hauteur adaptative : au lieu de 600px fixe,
     on utilise min() pour ne jamais dépasser
     65% de la largeur de l'écran (garde le ratio carré). */
  .silhouette-box {
    height: min(500px, 65vw);
    max-width: 95%;
    margin: 20px auto 15px auto;
    padding: 15px;
    border-radius: 14px;
  }

  /* Le zoom de départ légèrement réduit sur tablette */
  .zoom-wrapper {
    transform: scale(1.6);
  }
}

/* -----------------------------------------------
   MOBILE (≤ 480px)
   Boîte carrée proportionnelle à la largeur de l'écran.
   Plus compact, avec un zoom de départ réduit
   pour que la silhouette tienne sur l'écran.
----------------------------------------------- */
@media (max-width: 480px) {
  .silhouette-box {
    height: min(340px, 80vw); /* Quasi-carré sur mobile */
    max-width: 92vw;
    padding: 10px;
    margin: 15px auto;
    border-radius: 10px;
    border-width: 3px;
  }

  /* Zoom initial réduit pour rester dans les limites de la boîte */
  .zoom-wrapper {
    transform: scale(1.4);
  }

  /* Mauvaises réponses : texte plus petit */
  .wrong-guess {
    max-width: 90%;
    font-size: 13px;
    padding: 5px 10px;
  }

  .wrong-guess img {
    height: 40px;
  }

  /* ── Correctif zone input ──────────────────────────────────────────────────
     La rangée inline (Replay | Textbar | Submit) a un min-width:240px sur le
     textbar et gap:20px. Sur 360px cela génère un overflow horizontal.
     On neutralise le min-width et on réduit le gap.
  --------------------------------------------------------------------------- */
  .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; /* Peut rétrécir librement, s'étend si possible */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODE EXPERT — bouton FLASH
   ═══════════════════════════════════════════════════════════════════════════
   L'image reste à opacity:0 en permanence (piloté en JS) ; le bouton la révèle
   pour flashDurationMs(). Le bloc n'existe que sur ?expert=1 : `body.expert-mode`
   est posé par setupExpertToggle() (js/gameCore.js).

   ⚠️ Aucune transition sur #silhouetteImage[style*="opacity"] : un fondu
   rallongerait le flash de façon invisible dans le code de jeu et rendrait la
   durée annoncée fausse. */
.flash-block {
  display: none;
}

body.expert-mode .flash-block {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.flash-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(135deg, #d40000, #ff2b2b);
  border: 3px solid #000;
  border-radius: 4px;
  cursor: pointer;
  transform: skewX(-6deg);
  box-shadow: 0 0 14px rgba(255, 0, 0, 0.45);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    filter 0.12s ease;
}

.flash-btn:hover:not(.disabled),
.flash-btn:focus-visible:not(.disabled) {
  transform: skewX(-6deg) scale(1.05);
  box-shadow: 0 0 22px rgba(255, 0, 0, 0.7);
}

.flash-btn:active:not(.disabled) {
  transform: skewX(-6deg) scale(0.97);
}

/* Plus de crédit (ou partie finie) : bouton visible mais inerte — le compteur
   reste lisible, c'est lui qui explique pourquoi il ne se passe rien. */
.flash-btn.disabled {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: 0.55;
}

.flash-counter {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.darkmode .flash-btn {
  border-color: #fff;
}

@media (max-width: 480px) {
  .flash-btn {
    width: min(340px, 90vw);
    justify-content: center;
    font-size: 1rem;
  }
}