/* css/packs/i.css | Source: MonarqueXD_v95L_GUILDORIGINS.html lignes 57964-58164 (id="mx-fx-pack-i-styles") */
/* ============================================================ */
/*  PACK I — Titre auto-fit + Fumée dangereuse + Pluie         */
/* ============================================================ */

/* === HIDE combattants définitivement === */
.mx-fighters-layer { display: none !important; }
.mx-fighter { display: none !important; }
.mx-ground-fog { display: none !important; }

/* === TITRE encore plus petit + contraint === */
#lx-login-title {
  font-size: clamp(26px, 4.5vw, 56px) !important;
  letter-spacing: 0.025em !important;
  margin: 16px 0 4px !important;
  line-height: 1 !important;
  max-width: 95% !important;
  width: auto !important;
  white-space: nowrap;
  overflow: visible;
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  /* transform-origin pour scale auto-fit */
  transform-origin: center center;
}
#lx-login-title em {
  text-shadow:
    0 1px 0 #6a3a00, 0 2px 0 #5e3300, 0 3px 0 #532c00,
    0 4px 0 #482600, 0 5px 4px rgba(0, 0, 0, .85),
    0 0 12px rgba(255, 100, 30, .55),
    0 0 24px rgba(180, 20, 30, .45),
    0 0 40px rgba(255, 0, 30, .3),
    1px 1px 0 #4a0000, -1px 1px 0 #4a0000 !important;
}
.mx-crown-wrapper svg {
  width: clamp(50px, 10vw, 90px) !important;
}
.mx-crown-wrapper { margin-bottom: -4px !important; }

@media (max-width: 600px) {
  #lx-login-title {
    font-size: clamp(24px, 7vw, 46px) !important;
  }
  .mx-crown-wrapper svg { width: clamp(44px, 14vw, 80px) !important; }
}

/* ============================================================ */
/*  FUMÉE DANGEREUSE — montant du bas, rouge sombre             */
/* ============================================================ */
.mx-smoke-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.mx-smoke {
  position: absolute;
  bottom: -20%;
  left: var(--sl, 50%);
  width: var(--sw, 280px);
  height: var(--sw, 280px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    rgba(140, 0, 30, .42) 0%,
    rgba(80, 0, 30, .32) 30%,
    rgba(40, 0, 20, .18) 55%,
    transparent 75%);
  filter: blur(28px);
  opacity: 0;
  animation: mx-smoke-rise var(--sd, 14s) ease-in-out var(--sdy, 0s) infinite;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.mx-smoke.dark {
  background: radial-gradient(circle at 50% 60%,
    rgba(20, 5, 30, .55) 0%,
    rgba(10, 0, 15, .35) 35%,
    transparent 70%);
}
.mx-smoke.cyan {
  background: radial-gradient(circle at 50% 60%,
    rgba(80, 140, 255, .25) 0%,
    rgba(40, 80, 200, .15) 40%,
    transparent 70%);
}
@keyframes mx-smoke-rise {
  0%   { transform: translateY(0) translateX(0) scale(.7); opacity: 0; }
  15%  { opacity: .9; }
  50%  { transform: translateY(-50vh) translateX(var(--sdrift, 4vw)) scale(1.1); opacity: .8; }
  85%  { opacity: .5; }
  100% { transform: translateY(-110vh) translateX(var(--sdrift, 4vw)) scale(1.4); opacity: 0; }
}

/* Strate de fumée dense au sol qui ondule */
.mx-smoke-floor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35vh;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 20% 100%, rgba(140, 0, 30, .35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 80% 100%, rgba(60, 0, 60, .3) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(30, 0, 20, .55) 0%, transparent 80%),
    linear-gradient(180deg, transparent 0%, rgba(10, 0, 15, .6) 100%);
  filter: blur(12px);
  animation: mx-smoke-floor-drift 18s ease-in-out infinite;
}
@keyframes mx-smoke-floor-drift {
  0%, 100% { transform: translateX(0) scaleY(1); opacity: .9; }
  50%      { transform: translateX(-3%) scaleY(1.1); opacity: 1; }
}

/* Lueurs rouges qui pulsent en arrière-plan */
.mx-glow-pulse {
  position: fixed;
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 30, 60, .25) 0%, transparent 60%);
  filter: blur(30px);
  animation: mx-glow-throb var(--gd, 6s) ease-in-out var(--gdy, 0s) infinite;
}
.mx-glow-pulse.left  { top: 50%; left: -10vw; transform: translateY(-50%); }
.mx-glow-pulse.right { top: 30%; right: -10vw; transform: translateY(-50%);
                       background: radial-gradient(circle, rgba(60, 80, 255, .2) 0%, transparent 60%); }
.mx-glow-pulse.top   { top: -15vw; left: 50%; transform: translateX(-50%);
                       background: radial-gradient(circle, rgba(180, 0, 60, .3) 0%, transparent 60%); }
@keyframes mx-glow-throb {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* ============================================================ */
/*  PLUIE FINE en accent                                        */
/* ============================================================ */
.mx-rain-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: .55;
}
.mx-rain-drop {
  position: absolute;
  top: -10%;
  width: 1px;
  height: var(--rh, 80px);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180, 200, 255, .35) 30%,
    rgba(255, 80, 100, .55) 100%);
  animation: mx-rain-fall var(--rd, 0.8s) linear var(--rdy, 0s) infinite;
  transform: rotate(8deg);
  will-change: transform;
}
@keyframes mx-rain-fall {
  0%   { transform: translateY(0) rotate(8deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(8deg); opacity: 0; }
}

/* Splash / éclat au sol */
.mx-rain-splash {
  position: fixed;
  bottom: 5vh;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 100, 130, .6);
  filter: blur(1px);
  animation: mx-splash 0.6s ease-out infinite;
}
@keyframes mx-splash {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(8); opacity: 0; }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .mx-smoke, .mx-smoke-floor, .mx-glow-pulse,
  .mx-rain-drop, .mx-rain-splash {
    animation: none !important;
  }
  .mx-smoke, .mx-rain-drop, .mx-rain-splash { display: none; }
  .mx-smoke-floor { opacity: .5; }
}