/* css/packs/h.css | Source: MonarqueXD_v95L_GUILDORIGINS.html lignes 57394-57539 (id="mx-fx-pack-h-styles") */
/* ============================================================ */
/*  PACK H — FIX titre + combattants réalistes v2              */
/* ============================================================ */

/* === FIX taille titre MONARQUE — tient dans la card === */
#lx-login-title {
  font-size: clamp(36px, 7vw, 86px) !important;
  letter-spacing: 0.04em !important;
  margin: 18px 0 6px !important;
  line-height: 1 !important;
  /* contraint au container */
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  word-break: keep-all;
  white-space: nowrap;
}
#lx-login-title em {
  /* Réduit l'épaisseur 3D pour rester proportionné */
  text-shadow:
    0 1px 0 #6a3a00, 0 2px 0 #5e3300, 0 3px 0 #532c00,
    0 4px 0 #482600, 0 5px 0 #3d2000, 0 6px 0 #321a00,
    0 7px 6px rgba(0, 0, 0, .85),
    0 0 14px rgba(255, 100, 30, .55),
    0 0 28px rgba(180, 20, 30, .45),
    0 0 50px rgba(255, 0, 30, .3),
    1.5px 1.5px 0 #4a0000, -1.5px 1px 0 #4a0000 !important;
}

/* La couronne aussi plus petite proportionnée */
.mx-crown-wrapper svg {
  width: clamp(70px, 14vw, 140px) !important;
}
.mx-crown-wrapper {
  margin-bottom: -6px !important;
}

/* Mobile encore plus compact */
@media (max-width: 600px) {
  #lx-login-title {
    font-size: clamp(32px, 9vw, 64px) !important;
    letter-spacing: 0.03em !important;
  }
  .mx-crown-wrapper svg { width: clamp(60px, 18vw, 110px) !important; }
}

/* === COMBATTANTS V2 — plus réalistes === */

/* Cape qui flotte (animation indépendante) */
.mx-fighter .cape-flow {
  transform-origin: 50% 20%;
  animation: mx-cape-flow 3.5s ease-in-out infinite;
}
@keyframes mx-cape-flow {
  0%, 100% { transform: skewX(0deg) rotate(0deg); }
  50%      { transform: skewX(4deg) rotate(2deg); }
}

/* Brume au sol */
.mx-fighter .ground-mist {
  animation: mx-mist-rise 4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes mx-mist-rise {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: .5; }
  50%      { transform: scaleY(1.15) scaleX(1.08); opacity: .7; }
}

/* Étincelles d'épée */
.mx-fighter .spark {
  animation: mx-spark-burst 1.5s ease-out infinite;
}
@keyframes mx-spark-burst {
  0%, 70%, 100% { opacity: 0; transform: scale(0); }
  78%           { opacity: 1; transform: scale(1.3); }
  85%           { opacity: .8; transform: scale(1); }
}

/* Aura magique pour mage */
.mx-fighter .magic-aura {
  animation: mx-magic-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes mx-magic-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%      { opacity: .9; transform: scale(1.2); }
}

/* Trail flèche pour archer */
.mx-fighter .arrow-trail {
  animation: mx-arrow-charge 2.8s ease-in-out infinite;
}
@keyframes mx-arrow-charge {
  0%, 60%, 100% { opacity: 0; transform: scaleX(0); }
  70%           { opacity: 1; transform: scaleX(1); }
  80%           { opacity: .7; transform: scaleX(1.2); }
}

/* Brume globale au bas de l'écran */
.mx-ground-fog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30vh;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 100%, rgba(140, 0, 30, .25) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 100%, rgba(60, 20, 90, .22) 0%, transparent 60%),
    linear-gradient(180deg, transparent 0%, rgba(20, 5, 30, .5) 100%);
  filter: blur(8px);
  animation: mx-fog-drift 14s ease-in-out infinite;
}
@keyframes mx-fog-drift {
  0%, 100% { transform: translateX(0); opacity: .85; }
  50%      { transform: translateX(-3%); opacity: 1; }
}

/* Lueur sous chaque combattant */
.mx-fighter::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 30px;
  background: radial-gradient(ellipse, var(--glow, rgba(255,30,30,.5)) 0%, transparent 70%);
  filter: blur(6px);
  opacity: .6;
}

@media (prefers-reduced-motion: reduce) {
  .mx-fighter .cape-flow,
  .mx-fighter .ground-mist,
  .mx-fighter .spark,
  .mx-fighter .magic-aura,
  .mx-fighter .arrow-trail,
  .mx-ground-fog {
    animation: none !important;
  }
}