/* ============================================================
   v99-fluidity.css — MODE FLUIDITÉ (chargé en DERNIER)
   ------------------------------------------------------------
   But : viser le 60 fps même sur mobile. L'audit a montré que la
   non-fluidité venait d'animations CSS INFINIES animant des
   propriétés coûteuses (box-shadow ×22, background ×22, filter ×12,
   width/top/height… = reflow chaque frame) + backdrop-filter ×49.
   → ~23-37 animations qui repeignent en continu sur l'écran actif.

   `body.mx-fluid` (activé par défaut via v99-fluidity.js, togglable) :
     - rend les animations quasi-instantanées et NON bouclées
       (elles se figent sur leur état final → l'UI reste riche mais
       STATIQUE, plus de repaint continu) ;
     - retire backdrop-filter (re-échantillonnage du fond = très cher).
   Les transitions de feedback (clic, hover) restent intactes.
   Réversible : MX_setFluid(false) ou le bouton dans Réglages.
   ============================================================ */

/* --- [2026-06-25 audit] PRÉ-CHARGEMENT : supprime les animations dès le 1er paint, AVANT que
   v99-fluidity.js (deferred) n'ait posé body.mx-fluid. La classe html.mx-fluid-pending est posée
   par un script inline dans <body> (si mode fluidité ON) et retirée quand body.mx-fluid prend le relais.
   → fini les ~1-2s d'animations infinies pendant le chargement sur mobile. --- */
html.mx-fluid-pending *,
html.mx-fluid-pending *::before,
html.mx-fluid-pending *::after {
  animation-duration: 0.001ms !important;
  animation-delay: -1ms !important;
  animation-iteration-count: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- Coupe le repaint/reflow CONTINU (animations en boucle) --- */
body.mx-fluid *,
body.mx-fluid *::before,
body.mx-fluid *::after {
  animation-duration: 0.001ms !important;
  animation-delay: -1ms !important;
  animation-iteration-count: 1 !important;
}

/* --- Retire backdrop-filter (GPU lourd, surtout mobile) --- */
body.mx-fluid,
body.mx-fluid *,
body.mx-fluid *::before,
body.mx-fluid *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* [2026-07-06 audit fluidité] la modale Récompense Quotidienne (css/packs/e.css) pose
   backdrop-filter:blur(18px) saturate(140%) !important avec une spécificité ID (1,1,0)
   qui BAT la règle générale ci-dessus (0,1,1) → flou GPU plein écran à l'ouverture.
   On la re-neutralise avec une spécificité supérieure (1,1,1). */
body.mx-fluid #daily-reward-modal.mx-2026,
body.mx-fluid #daily-calendar-modal.mx-2026 {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- Scroll instantané (le smooth peut saccader sur longues listes) --- */
body.mx-fluid { scroll-behavior: auto !important; }

/* ============================================================
   TOUJOURS ACTIF — respecte la préférence système "réduire les
   animations" (accessibilité + perf), indépendamment du toggle.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.08s !important;
  }
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   [2026-08-09] ALIGNEMENT ACCUEIL — bloc XP + bouton Train à la
   largeur de la CARTE (#mx-wmap = max-width:900px, centrée).
   Mesuré avant : bloc XP 500 px, bouton Train 440 px, carte 900 px
   → trois largeurs différentes, d'où le décalage visible.
   Portée limitée à #welcome-screen : aucun autre écran touché.
   Retour arrière : supprimer ce bloc.
   ============================================================ */
#welcome-screen > div[style*="max-width:500px"]{
  max-width:900px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
#welcome-screen .defi-luxe-btn{
  max-width:900px !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  display:block !important;
}
/* ============================================================================
   [2026-08-20 — audit GPU] `will-change` ORPHELIN SUR L'ÉCRAN DE CONNEXION
   ----------------------------------------------------------------------------
   MESURÉ dans le navigateur : sur l'écran de connexion, `.lx-wrap` occupe
   375 × 855 px — tout l'écran — et porte `will-change: transform, filter`
   (posé par css/packs/d.css, dans la même déclaration que son animation
   `mx-login-glitch`). Or cette animation est DÉJÀ neutralisée trente lignes
   plus haut : son `animation-duration` calculé vaut 1e-06s.

   `will-change` demande au navigateur de préparer À L'AVANCE une couche de
   composition, et `will-change: filter` un tampon de filtrage — ici pour toute
   la surface de l'écran, en permanence, au bénéfice d'une animation qui ne joue
   plus. C'est de la mémoire graphique réservée pour rien, sur le tout premier
   écran que voit le joueur.

   `will-change` n'a AUCUN effet visuel : le retirer ne peut rien changer à
   l'image. On ne le neutralise pas globalement pour autant — les transitions,
   elles, ne sont pas désactivées par ce fichier, et un `will-change` posé pour
   une transition reste utile. On s'en tient donc aux deux cas mesurés.
   ========================================================================== */
body.mx-fluid #login-screen .lx-wrap,
body.mx-fluid #login-screen .lx-title {
  will-change: auto !important;
}