/* ============================================================
   v100-nav-fluid.css  (claude-navfluid-1)  [2026-07-15]
   ------------------------------------------------------------
   Demande user : « fait que tout soit fluide quand tu passe de
   menu à menu et les pop up énergie ». Transitions douces + RAPIDES.
   - L'ancien `.screen{animation:screenEnterV2 0.5s bouncy}` (main.css:3112)
     était (a) trop long (500ms rebond), (b) appliqué à TOUS les écrans
     même cachés, (c) TUÉ par le mode fluidité → swap abrupt.
   - Ici : fondu GPU 150ms UNIQUEMENT sur l'écran actif, EXEMPTÉ du mode
     fluidité (transform/opacity = GPU, coût nul). Popups = entrée douce.
   ============================================================ */

/* --- [2026-07-27 FIX SUPERPOSITION D'ÉCRANS — bulletproof] Un écran ne peut être VISIBLE que s'il a
   .active. Ce `display:none !important` NEUTRALISE tout `display:block/flex` INLINE résiduel (posé par
   un chemin non-atomique : showScreen laisse un display inline sur l'écran précédent, showDungeonStory
   / v96-fixes n'effaçaient que .active…). Comme TOUS les chemins qui montrent un écran (showScreen,
   forceScreen, showDungeonStory) posent .active en retirant d'abord .active des autres (max 1 actif à
   la fois), il ne peut plus JAMAIS y avoir 2 écrans visibles. login-screen n'est PAS un .screen → non affecté. --- */
.screen:not(.active) { display: none !important; }
/* --- Écrans : fondu rapide sur l'écran ACTIF seulement --- */
.screen.active { animation: mxNavIn 150ms ease-out !important; }
.screen:not(.active) { animation: none !important; }   /* les écrans cachés n'animent plus (l'ancienne règle les animait tous) */
body.mx-fluid .screen.active { animation: mxNavIn 150ms ease-out !important; }   /* survit au mode fluidité */
@keyframes mxNavIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Popups de confirmation (énergie donjon, quitter le combat, etc.) : entrée douce --- */
#mx-dungeon-enter-confirm > div,
#mx-quit-combat-confirm > div,
[id$="-enter-confirm"] > div,
[id$="-quit-confirm"] > div {
  animation: mxPopIn 160ms cubic-bezier(.2,.9,.25,1) !important;
}
body.mx-fluid #mx-dungeon-enter-confirm > div,
body.mx-fluid #mx-quit-combat-confirm > div {
  animation: mxPopIn 160ms cubic-bezier(.2,.9,.25,1) !important;
}
@keyframes mxPopIn {
  from { opacity: 0; transform: scale(.93) translateY(6px); }
  to   { opacity: 1; transform: none; }
}