/* css/packs/g.css | Source: MonarqueXD_v95L_GUILDORIGINS.html lignes 56804-57104 (id="mx-fx-pack-g-styles") */
/* ============================================================ */
/*  PACK G — FIX visibility + Combattants 3D + Glitch++         */
/* ============================================================ */

/* === FORCE les styles login même si mx-on-login pas encore actif === */
/* (sécurité : on cible directement #login-screen quand display != none) */

#login-screen #lx-login-subtitle,
#login-screen .lx-badge {
  display: none !important;
}

#login-screen .lx-card {
  position: relative;
  background:
    linear-gradient(160deg, rgba(20, 12, 30, .82) 0%, rgba(8, 4, 16, .92) 100%) !important;
  border: 1px solid rgba(255, 60, 90, .35) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(80, 220, 255, .2),
    0 0 60px rgba(120, 0, 30, .35),
    0 0 120px rgba(60, 20, 90, .25),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -2px 30px rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(14px) saturate(140%);
  overflow: visible !important;
  z-index: 10;
}
#login-screen .lx-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(135deg, #ff3060, #aa44ff, #50dcff, #ff8c1a, #ff3060);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: mx-aaa-border 7s linear infinite;
  pointer-events: none;
  opacity: .9;
  z-index: -1;
}

#lx-login-title {
  font-family: 'Cinzel', 'UnifrakturCook', serif !important;
  font-weight: 900 !important;
  font-size: clamp(60px, 14vw, 160px) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
  line-height: 0.95 !important;
  color: #ffe0b8 !important;
  background: none !important;
  -webkit-text-fill-color: #ffe0b8 !important;
  margin: 30px 0 8px !important;
  perspective: 1000px;
  transform-style: preserve-3d;
  position: relative;
  text-align: center;
  z-index: 12;
  user-select: none;
  animation: mx-monarque-3d 6s ease-in-out infinite;
  will-change: transform;
}
#lx-login-title em {
  font-style: normal !important;
  display: inline-block !important;
  color: #ffe0b8 !important;
  -webkit-text-fill-color: #ffe0b8 !important;
  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 0 #271400, 0 8px 0 #1c0e00, 0 9px 0 #110800,
    0 10px 8px rgba(0, 0, 0, .9),
    0 0 18px rgba(255, 100, 30, .6),
    0 0 38px rgba(180, 20, 30, .55),
    0 0 70px rgba(255, 0, 30, .35),
    2px 2px 0 #4a0000, -2px 1px 0 #4a0000 !important;
}

#login-screen .lx-input {
  background: rgba(8, 4, 16, .7) !important;
  border: 1px solid rgba(80, 220, 255, .3) !important;
  border-radius: 8px !important;
  color: #ffe0b8 !important;
  padding: 12px 14px !important;
  font-family: 'Rajdhani', 'Orbitron', monospace !important;
  font-size: 14px !important;
  letter-spacing: 1px;
  transition: all .25s ease;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6);
}
#login-screen .lx-input:focus {
  outline: none !important;
  border-color: #50dcff !important;
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, .6),
    0 0 0 1px #50dcff,
    0 0 18px rgba(80, 220, 255, .4) !important;
}
#login-screen .lx-input::placeholder {
  color: rgba(255, 224, 184, .4) !important;
  letter-spacing: 1.2px;
}
#login-screen .lx-label {
  font-family: 'Rajdhani', 'Orbitron', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: #ff80a0 !important;
  text-shadow: 0 0 6px rgba(255, 60, 90, .3);
  margin-bottom: 6px !important;
}

#login-screen .lx-btn-primary {
  position: relative;
  background: linear-gradient(135deg, #ff3060 0%, #aa44ff 50%, #50dcff 100%) !important;
  color: #fff !important;
  font-family: 'Rajdhani', 'Orbitron', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 24px !important;
  clip-path: polygon(6% 0, 100% 0, 100% 75%, 94% 100%, 0 100%, 0 25%);
  text-shadow: 0 0 10px rgba(255, 255, 255, .55), 0 1px 2px #000 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .25),
    0 6px 24px rgba(255, 30, 90, .4),
    0 0 36px rgba(170, 80, 255, .35),
    inset 0 1px 0 rgba(255, 255, 255, .35) !important;
  transition: transform .15s ease, box-shadow .25s ease;
  overflow: hidden;
}
#login-screen .lx-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: mx-btn-shine-aaa 3s ease-in-out infinite;
  pointer-events: none;
}
#login-screen .lx-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .35),
    0 10px 32px rgba(255, 30, 90, .55),
    0 0 50px rgba(170, 80, 255, .5),
    inset 0 1px 0 rgba(255, 255, 255, .4) !important;
}
#login-screen .lx-btn-secondary {
  background: rgba(8, 4, 16, .7) !important;
  color: #80e8ff !important;
  font-family: 'Rajdhani', 'Orbitron', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(80, 220, 255, .45) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  text-shadow: 0 0 8px rgba(80, 220, 255, .55);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 0 14px rgba(80, 220, 255, .2);
  transition: all .2s ease;
}
#login-screen .lx-btn-secondary:hover {
  background: rgba(20, 50, 80, .7) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5), 0 0 24px rgba(80, 220, 255, .55);
}
#login-screen .lx-link {
  color: #ff80a0 !important;
  font-family: 'Rajdhani', 'Orbitron', monospace !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
}

/* === COMBATTANTS 3D EN FOND === */
.mx-fighters-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  perspective: 1200px;
}
.mx-fighter {
  position: absolute;
  bottom: 0;
  width: var(--fw, 180px);
  height: var(--fh, 360px);
  opacity: 0;
  filter: drop-shadow(0 0 22px var(--glow, rgba(255, 60, 90, .35))) blur(.4px);
  transform: translateZ(var(--depth, 0)) translateX(0);
  animation:
    mx-fighter-walk var(--walk-dur, 22s) ease-in-out var(--walk-delay, 0s) infinite,
    mx-fighter-fade var(--fade-dur, 22s) ease-in-out var(--walk-delay, 0s) infinite;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
.mx-fighter svg {
  width: 100%;
  height: 100%;
  display: block;
}
@keyframes mx-fighter-walk {
  0%   { transform: translateZ(var(--depth, 0)) translateX(var(--start, -10vw)); }
  100% { transform: translateZ(var(--depth, 0)) translateX(var(--end, 110vw)); }
}
@keyframes mx-fighter-fade {
  0%, 100% { opacity: 0; }
  10%      { opacity: var(--maxop, .55); }
  85%      { opacity: var(--maxop, .55); }
  95%      { opacity: 0; }
}
/* Combat slash : SVG anim de l'arme */
.mx-fighter .weapon {
  transform-origin: 50% 80%;
  animation: mx-weapon-slash var(--slash-dur, 2.5s) ease-in-out infinite;
}
@keyframes mx-weapon-slash {
  0%, 70%, 100% { transform: rotate(0deg); }
  78%           { transform: rotate(-50deg); }
  85%           { transform: rotate(45deg); }
  92%           { transform: rotate(-15deg); }
}
.mx-fighter .body-sway {
  transform-origin: 50% 100%;
  animation: mx-body-sway 2s ease-in-out infinite;
}
@keyframes mx-body-sway {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-3px) rotate(1deg); }
}
.mx-fighter .eye-glow {
  fill: #ff0020;
  filter: drop-shadow(0 0 4px #ff0020);
  animation: mx-fighter-eye 3s steps(1) infinite;
}
@keyframes mx-fighter-eye {
  0%, 92%, 100% { opacity: 1; }
  93%, 96%      { opacity: .15; }
  94%           { opacity: 1; }
}

/* === GLITCH OVERLAY plein écran (périodique) === */
.mx-glitch-overlay {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 0, 60, .04) 2px 3px),
    linear-gradient(180deg, transparent 45%, rgba(80, 220, 255, .06) 50%, transparent 55%);
  background-size: 100% 4px, 100% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  animation: mx-glitch-burst 7s steps(1) infinite;
}
@keyframes mx-glitch-burst {
  0%, 95%, 100% { opacity: 0; transform: translate(0, 0); }
  96%           { opacity: .9; transform: translate(-3px, 1px) skewX(-1deg); }
  97%           { opacity: .7; transform: translate(3px, -1px) skewX(1deg); }
  98%           { opacity: .9; transform: translate(-2px, 2px); }
  99%           { opacity: .5; transform: translate(2px, -2px); }
}

/* RGB shift global sur le contenu login pendant glitch burst */
@keyframes mx-rgb-burst {
  0%, 95%, 100% { filter: none; }
  96%           { filter: drop-shadow(2px 0 0 #ff003c) drop-shadow(-2px 0 0 #00f0ff); }
  98%           { filter: drop-shadow(-2px 0 0 #ff003c) drop-shadow(2px 0 0 #00f0ff); }
}
#login-screen .lx-card,
#login-screen #lx-login-title {
  animation-duration: var(--existing-anim-dur, initial);
}
#login-screen .lx-wrap {
  animation: mx-rgb-burst 7s steps(1) infinite;
}

/* === Mode reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .mx-fighter, .mx-fighter .weapon, .mx-fighter .body-sway, .mx-fighter .eye-glow,
  .mx-glitch-overlay, #login-screen .lx-wrap {
    animation: none !important;
  }
  .mx-fighters-layer { display: none; }
}

/* Mobile : moins de combattants visibles */
@media (max-width: 600px) {
  .mx-fighter { transform: scale(0.7); transform-origin: bottom center; }
}