/* css/packs/mx-fx.css | Source: MonarqueXD_v95L_GUILDORIGINS.html lignes 53592-54205 (id="mx-fx-styles") */
/* ============================================================ */
/*  COMBAT JUICE v1 — FX Module (Pack A)                       */
/* ============================================================ */
@keyframes fx-dmg-float {
  0%   { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  15%  { transform: translate(-50%, -10px) scale(1.25); opacity: 1; }
  60%  { transform: translate(-50%, -55px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -90px) scale(0.85); opacity: 0; }
}
@keyframes fx-dmg-float-crit {
  0%   { transform: translate(-50%, 0) scale(0.4) rotate(-8deg); opacity: 0; }
  10%  { transform: translate(-50%, -8px) scale(1.8) rotate(4deg); opacity: 1; }
  30%  { transform: translate(-50%, -25px) scale(1.5) rotate(-2deg); opacity: 1; }
  70%  { transform: translate(-50%, -70px) scale(1.3) rotate(0); opacity: 1; }
  100% { transform: translate(-50%, -110px) scale(0.9); opacity: 0; }
}
@keyframes fx-shake-x {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 2px); }
  40% { transform: translate(7px, -3px); }
  60% { transform: translate(-5px, 3px); }
  80% { transform: translate(4px, -2px); }
}
@keyframes fx-shake-x-heavy {
  0%,100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(-10px, 4px) rotate(-0.6deg); }
  25% { transform: translate(12px, -5px) rotate(0.8deg); }
  40% { transform: translate(-9px, 6px) rotate(-0.5deg); }
  55% { transform: translate(10px, -4px) rotate(0.6deg); }
  70% { transform: translate(-7px, 3px) rotate(-0.3deg); }
  85% { transform: translate(5px, -2px) rotate(0); }
}
@keyframes fx-flash-out {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes fx-hpbar-hit {
  0%   { filter: brightness(1); }
  20%  { filter: brightness(2.4) saturate(1.6); }
  100% { filter: brightness(1); }
}
@keyframes fx-btn-press {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.fx-dmg-float {
  position: absolute; left: 50%; top: 30%;
  pointer-events: none; z-index: 9999;
  font-family: 'Cinzel','Orbitron',sans-serif;
  font-weight: 900; font-size: 1.9em;
  color: #ffd84a;
  text-shadow: 0 0 6px #000, 0 2px 4px rgba(0,0,0,.9), 0 0 14px rgba(255,180,40,.7);
  animation: fx-dmg-float 1s cubic-bezier(.2,.8,.2,1) forwards;
  white-space: nowrap; user-select: none;
}
.fx-dmg-float.crit {
  font-size: 3.2em; color: #ff3a3a;
  text-shadow: 0 0 8px #000, 0 0 16px #ff0, 0 0 28px #ff3030;
  animation: fx-dmg-float-crit 1.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.fx-dmg-float.heal {
  color: #6bff8a;
  text-shadow: 0 0 6px #000, 0 0 14px rgba(80,255,120,.8);
}
.fx-dmg-float.player {
  color: #ff6b6b;
  text-shadow: 0 0 6px #000, 0 0 14px rgba(255,80,80,.7);
}
.fx-shake     { animation: fx-shake-x 0.32s ease-in-out; }
.fx-shake-hard{ animation: fx-shake-x-heavy 0.55s ease-in-out; }
.fx-flash-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 99998;
  background: #fff; opacity: 0;
  mix-blend-mode: screen;
  animation: fx-flash-out 0.18s ease-out forwards;
}
.fx-flash-overlay.red { background: #ff2a2a; opacity: 0.45; }
.fx-flash-overlay.gold{ background: #ffcc33; opacity: 0.5; }
.fx-hpbar-hit { animation: fx-hpbar-hit 0.45s ease-out; }
.fx-btn-press { animation: fx-btn-press 0.18s ease-out; }
.fx-anchor { position: relative; }

/* ============================================================ */
/*  COMBAT JUICE v2 — FITNESS + PUNITION + NOTIF (Pack A++)    */
/* ============================================================ */
.fx-anchor { contain: layout paint; }

@keyframes fx-count-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); color: #ffd84a; }
  100% { transform: scale(1); }
}
.fx-count-pop { animation: fx-count-pop 0.4s cubic-bezier(.2,.7,.2,1); display: inline-block; }

@keyframes fx-gain-float {
  0%   { transform: translate(-50%, 0) scale(0.7); opacity: 0; }
  20%  { transform: translate(-50%, -8px) scale(1.1); opacity: 1; }
  80%  { transform: translate(-50%, -38px) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -64px) scale(0.9); opacity: 0; }
}
.fx-gain-bubble {
  position: absolute; left: 50%; top: 0;
  pointer-events: none; z-index: 9998;
  font-family: 'Cinzel','Orbitron',sans-serif;
  font-weight: 800; font-size: 1.05em;
  text-shadow: 0 0 6px #000, 0 1px 3px rgba(0,0,0,.9);
  animation: fx-gain-float 0.95s cubic-bezier(.2,.7,.2,1) forwards;
  white-space: nowrap; user-select: none;
  will-change: transform, opacity;
}
.fx-gain-bubble.gold { color: #ffd84a; text-shadow: 0 0 8px #000, 0 0 14px rgba(255,200,40,.8); }
.fx-gain-bubble.gem  { color: #5ad8ff; text-shadow: 0 0 8px #000, 0 0 14px rgba(80,210,255,.8); }
.fx-gain-bubble.xp   { color: #b88cff; text-shadow: 0 0 8px #000, 0 0 14px rgba(180,140,255,.8); }
.fx-gain-bubble.energy { color: #6bff8a; }

@keyframes fx-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.fx-shimmer-bar { position: relative; overflow: hidden; }
.fx-shimmer-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  animation: fx-shimmer 1.6s linear infinite;
  pointer-events: none;
  will-change: transform;
}

@keyframes fx-rep-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4) rotate(-4deg); }
  60%  { transform: scale(1.15) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
.fx-rep-bounce { animation: fx-rep-bounce 0.45s cubic-bezier(.2,.7,.2,1); display: inline-block; }

@keyframes fx-quest-complete {
  0%   { transform: scale(1); box-shadow: 0 0 0 rgba(255,215,0,0); }
  30%  { transform: scale(1.04); box-shadow: 0 0 36px 4px rgba(255,215,0,.85); }
  60%  { transform: scale(1.02); box-shadow: 0 0 22px 2px rgba(120,255,120,.7); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}
.fx-quest-complete { animation: fx-quest-complete 1.1s cubic-bezier(.2,.7,.2,1); }

@keyframes fx-checkmark-pop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(-45deg); opacity: 0; }
  50%  { transform: translate(-50%,-50%) scale(1.4) rotate(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 0; }
}
.fx-checkmark {
  position: absolute; left: 50%; top: 50%;
  font-size: 4em; color: #6bff8a;
  text-shadow: 0 0 24px #6bff8a, 0 0 8px #fff;
  pointer-events: none; z-index: 9997;
  animation: fx-checkmark-pop 0.9s ease-out forwards;
}

/* PUNITION horror */
@keyframes fx-pun-overlay-in {
  0%   { opacity: 0; backdrop-filter: blur(0); }
  100% { opacity: 1; backdrop-filter: blur(3px); }
}
@keyframes fx-pun-strobe {
  0%,100% { background: rgba(80,0,0,.55); }
  50%     { background: rgba(140,0,0,.78); }
}
@keyframes fx-pun-heartbeat {
  0%,100% { transform: scale(1); }
  20%     { transform: scale(1.06); }
  40%     { transform: scale(0.97); }
  60%     { transform: scale(1.03); }
}
@keyframes fx-pun-glitch {
  0%,100% { transform: translate(0,0); text-shadow: 0 0 12px #ff2020, 0 0 24px #800; }
  20% { transform: translate(-3px, 1px); text-shadow: -3px 0 #00f0ff, 3px 0 #ff003c, 0 0 16px #f00; }
  40% { transform: translate(3px, -1px); text-shadow: 3px 0 #00f0ff, -3px 0 #ff003c, 0 0 16px #f00; }
  60% { transform: translate(-2px, -2px); text-shadow: -2px 1px #fff, 2px -1px #f00, 0 0 20px #f30; }
  80% { transform: translate(2px, 2px); text-shadow: 2px 1px #00f0ff, -2px -1px #ff003c, 0 0 18px #f00; }
}
@keyframes fx-pun-text-tremble {
  0%,100% { transform: translate(0,0) rotate(0); }
  25% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  50% { transform: translate(1px, -1px) rotate(0.5deg); }
  75% { transform: translate(-1px, -1px) rotate(-0.3deg); }
}
@keyframes fx-pun-vignette {
  0%,100% { box-shadow: inset 0 0 120px 40px rgba(0,0,0,.85), inset 0 0 240px 80px rgba(120,0,0,.55); }
  50%     { box-shadow: inset 0 0 160px 60px rgba(0,0,0,.95), inset 0 0 280px 100px rgba(180,0,0,.7); }
}
@keyframes fx-pun-tremble {
  0%,100%{ transform: translate(0,0); }
  33% { transform: translate(-2px, 1px); }
  66% { transform: translate(2px, -1px); }
}

.fx-pun-overlay {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(80,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  animation:
    fx-pun-overlay-in 0.25s ease-out,
    fx-pun-strobe 0.6s ease-in-out 2,
    fx-pun-vignette 1.4s ease-in-out infinite;
  contain: layout paint;
}
.fx-pun-card {
  position: relative;
  max-width: 90vw; padding: 28px 22px 22px;
  background: linear-gradient(160deg, #1a0606 0%, #380808 50%, #1a0606 100%);
  border: 2px solid #c00;
  border-radius: 12px;
  box-shadow:
    0 0 60px rgba(255,0,0,.45),
    inset 0 0 30px rgba(0,0,0,.8);
  animation: fx-pun-heartbeat 0.85s ease-in-out infinite;
  text-align: center;
  font-family: 'Cinzel','Orbitron',serif;
  color: #ffd6d6;
}
.fx-pun-title {
  font-size: 2.6em; font-weight: 900; letter-spacing: 4px;
  color: #ff3333;
  margin: 0 0 10px;
  animation: fx-pun-glitch 0.18s steps(1) infinite;
  will-change: transform;
}
.fx-pun-icon {
  font-size: 3.5em; line-height: 1;
  margin-bottom: 8px;
  display: inline-block;
  filter: drop-shadow(0 0 18px rgba(255,0,0,.8));
  animation: fx-pun-tremble 0.15s steps(1) infinite;
}
.fx-pun-msg {
  font-size: 1.05em; line-height: 1.4;
  color: #ffbcbc;
  margin: 8px 0 16px;
  animation: fx-pun-text-tremble 0.4s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(255,0,0,.5);
}
.fx-pun-detail {
  display: inline-block;
  background: rgba(0,0,0,.55);
  border: 1px solid #b00;
  padding: 6px 12px; border-radius: 6px;
  color: #ff8080; font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 1px;
}
.fx-pun-btn {
  background: linear-gradient(180deg, #c00 0%, #600 100%);
  color: #fff; font-weight: 800; letter-spacing: 2px;
  border: 2px solid #ff3030;
  padding: 10px 24px; border-radius: 6px;
  font-family: inherit; font-size: 0.95em;
  cursor: pointer;
  text-shadow: 0 1px 3px #000;
  box-shadow: 0 0 20px rgba(255,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform 0.15s ease;
}
.fx-pun-btn:active { transform: scale(0.94); }

/* TOAST notifications */
@keyframes fx-toast-in {
  0%   { transform: translate(-50%, -120%); opacity: 0; }
  60%  { transform: translate(-50%, 8%); opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes fx-toast-out {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -120%); opacity: 0; }
}
.fx-toast-stack {
  position: fixed; top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  width: min(92vw, 420px);
}
.fx-toast {
  position: relative;
  background: linear-gradient(180deg, rgba(20,20,30,.96) 0%, rgba(10,10,18,.96) 100%);
  border: 1px solid rgba(255,215,0,.55);
  border-radius: 10px;
  padding: 10px 14px 10px 46px;
  color: #fff;
  font-family: 'Cinzel','Orbitron',sans-serif;
  font-weight: 600; font-size: 0.92em;
  box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 12px rgba(255,215,0,.25);
  animation: fx-toast-in 0.45s cubic-bezier(.2,.7,.2,1) forwards;
  pointer-events: auto;
  will-change: transform, opacity;
}
.fx-toast.leaving { animation: fx-toast-out 0.35s ease-in forwards; }
.fx-toast .fx-toast-icon {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.6em;
  filter: drop-shadow(0 0 6px currentColor);
}
.fx-toast.success { border-color: #6bff8a; box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 14px rgba(107,255,138,.35); }
.fx-toast.success .fx-toast-icon { color: #6bff8a; }
.fx-toast.warn    { border-color: #ffb547; box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 14px rgba(255,181,71,.35); }
.fx-toast.warn .fx-toast-icon { color: #ffb547; }
.fx-toast.danger  { border-color: #ff5050; box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 14px rgba(255,80,80,.4); }
.fx-toast.danger .fx-toast-icon { color: #ff5050; }
.fx-toast.info    { border-color: #5ad8ff; box-shadow: 0 6px 22px rgba(0,0,0,.55), 0 0 14px rgba(90,216,255,.35); }
.fx-toast.info .fx-toast-icon { color: #5ad8ff; }

/* BADGES */
@keyframes fx-badge-pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.fx-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: #ff2030;
  color: #fff;
  font-size: 11px; font-weight: 900;
  border-radius: 9px;
  border: 2px solid #1a1a2e;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  animation: fx-badge-pop 0.35s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}

/* ============================================================ */
/*  PACK C — LOGIN GORE + FOND IN-GAME CYBERPUNK               */
/* ============================================================ */
#mx-bg-game {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(120, 30, 60, .35) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(50, 20, 90, .35) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 0, 30, .55) 0%, #06030a 75%);
  overflow: hidden;
  contain: strict;
  will-change: transform;
  display: none;
}
body.mx-in-game #mx-bg-game { display: block; }
body.mx-on-login #mx-bg-game { display: none; }

#mx-bg-game::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(200, 40, 60, .18) 0%, transparent 35%),
    radial-gradient(circle at 70% 70%, rgba(60, 180, 220, .14) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(180, 80, 220, .14) 0%, transparent 40%);
  animation: mx-bg-shift 22s linear infinite;
  filter: blur(40px);
  will-change: transform;
}
#mx-bg-game::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 60, 90, .025) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 80px, rgba(80, 220, 255, .04) 80px 81px);
  background-size: 100% 4px, 81px 100%;
  animation: mx-bg-scan 12s linear infinite;
  mix-blend-mode: screen;
  opacity: .55;
}
@keyframes mx-bg-shift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-3%, 2%) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes mx-bg-scan {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 0 100vh, 100vw 0; }
}

/* LOGIN gore title */
#lx-login-title {
  position: relative;
  text-shadow:
    0 0 12px rgba(255, 30, 30, .55),
    0 2px 0 rgba(120, 0, 0, .8),
    0 6px 22px rgba(180, 0, 0, .45);
  animation: mx-title-tremor 6s ease-in-out infinite;
  z-index: 5;
}
#lx-login-title em {
  position: relative;
  display: inline-block;
  color: #ffe8a8 !important;
  text-shadow:
    0 0 10px rgba(255, 200, 80, .55),
    0 0 28px rgba(180, 30, 30, .55),
    2px 2px 0 #4a0000,
    -2px -1px 0 #4a0000;
  filter: drop-shadow(0 0 6px rgba(255, 60, 60, .35));
}
#lx-login-title em::after {
  content: '';
  position: absolute;
  left: 12%; right: 14%;
  bottom: -2px; height: 3px;
  background: linear-gradient(90deg, transparent 0%, #b00 35%, #ff2030 50%, #b00 65%, transparent 100%);
  filter: blur(.5px);
  animation: mx-title-crack 4s ease-in-out infinite;
  border-radius: 2px;
  opacity: .85;
}
@keyframes mx-title-tremor {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-1px, 1px); }
  50%      { transform: translate(1px, -1px); }
  75%      { transform: translate(-1px, -1px); }
}
@keyframes mx-title-crack {
  0%, 100% { opacity: .85; transform: scaleX(1); }
  50%      { opacity: 1;   transform: scaleX(1.05); }
}

/* Gouttes de sang */
.mx-blood-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}
.mx-blood-drop {
  position: absolute;
  top: -40px;
  width: 6px;
  height: 14px;
  background: linear-gradient(180deg, rgba(180, 0, 0, .1) 0%, #b00010 30%, #ff1424 65%, #6a0007 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  filter: drop-shadow(0 0 4px rgba(255, 0, 30, .55));
  animation: mx-drop-fall var(--mx-drop-dur, 5s) cubic-bezier(.6, .1, .8, .3) var(--mx-drop-delay, 0s) infinite;
  will-change: transform, opacity;
  opacity: 0;
}
.mx-blood-drop::after {
  content: '';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(180, 0, 0, .5) 100%);
  border-radius: 2px;
}
@keyframes mx-drop-fall {
  0%   { transform: translateY(0) scaleY(1); opacity: 0; }
  4%   { opacity: .95; }
  85%  { transform: translateY(80vh) scaleY(1.4); opacity: .95; }
  92%  { transform: translateY(96vh) scaleY(.4); opacity: 1; }
  100% { transform: translateY(98vh) scaleY(.2); opacity: 0; }
}

/* Taches de sang */
.mx-blood-stain {
  position: absolute;
  width: 80px; height: 60px;
  background:
    radial-gradient(ellipse at 30% 35%, #c00018 0%, #8a0010 30%, transparent 70%),
    radial-gradient(ellipse at 70% 60%, #a00014 0%, transparent 60%),
    radial-gradient(ellipse at 50% 80%, #900010 0%, transparent 50%);
  border-radius: 50% 60% 55% 45% / 60% 50% 65% 50%;
  filter: blur(.5px) drop-shadow(0 0 6px rgba(180, 0, 0, .4));
  opacity: 0;
  transform: scale(.3) rotate(var(--mx-stain-rot, 0deg));
  animation: mx-stain-in 4.5s ease-out forwards;
  mix-blend-mode: multiply;
}
.mx-blood-stain::after {
  content: '';
  position: absolute;
  inset: -8px;
  background:
    radial-gradient(circle at 20% 20%, #b00015 0 4px, transparent 5px),
    radial-gradient(circle at 80% 30%, #a00012 0 3px, transparent 4px),
    radial-gradient(circle at 30% 80%, #c00018 0 2px, transparent 3px),
    radial-gradient(circle at 70% 75%, #900010 0 5px, transparent 6px),
    radial-gradient(circle at 50% 110%, #b00015 0 3px, transparent 4px);
  opacity: .8;
}
@keyframes mx-stain-in {
  0%   { opacity: 0; transform: scale(.3) rotate(var(--mx-stain-rot, 0deg)); }
  20%  { opacity: .95; transform: scale(1.05) rotate(var(--mx-stain-rot, 0deg)); }
  35%  { opacity: .85; transform: scale(1) rotate(var(--mx-stain-rot, 0deg)); }
  85%  { opacity: .75; }
  100% { opacity: 0;   transform: scale(1) rotate(var(--mx-stain-rot, 0deg)); }
}

/* Bouton CYBERPUNK */
.mx-cyber-btn {
  position: relative !important;
  background: linear-gradient(180deg, rgba(10, 5, 20, .95) 0%, rgba(20, 10, 35, .95) 100%) !important;
  color: #fff !important;
  font-family: 'Rajdhani', 'Orbitron', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase;
  border: 0 !important;
  padding: 12px 26px !important;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  clip-path: polygon(8% 0, 100% 0, 100% 70%, 92% 100%, 0 100%, 0 30%);
  text-shadow:
    0 0 6px rgba(80, 220, 255, .8),
    0 0 12px rgba(255, 30, 90, .35);
  transition: transform .15s ease;
  box-shadow:
    inset 0 0 0 1px #50dcff,
    inset 0 0 14px rgba(80, 220, 255, .4),
    0 0 14px rgba(255, 30, 90, .35),
    0 0 28px rgba(80, 220, 255, .25);
}
.mx-cyber-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 0%, transparent 35%,
    rgba(80, 220, 255, .3) 50%,
    transparent 65%, transparent 100%);
  transform: translateX(-110%);
  animation: mx-cyber-sweep 3.4s ease-in-out infinite;
  z-index: 0;
}
.mx-cyber-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .35) 2px 3px);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
  opacity: .7;
}
.mx-cyber-btn > span {
  position: relative;
  z-index: 2;
}
@keyframes mx-cyber-sweep {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
.mx-cyber-btn:hover {
  animation: mx-cyber-glitch .35s steps(2) infinite;
  box-shadow:
    inset 0 0 0 1px #ff3060,
    inset 0 0 18px rgba(255, 30, 90, .55),
    0 0 22px rgba(80, 220, 255, .65),
    0 0 36px rgba(255, 30, 90, .45);
}
.mx-cyber-btn:active {
  transform: scale(.96) skewX(-2deg);
  animation: mx-cyber-crash .25s steps(3);
}
@keyframes mx-cyber-glitch {
  0%   { transform: translate(0, 0); text-shadow: 2px 0 #ff003c, -2px 0 #00f0ff, 0 0 12px rgba(80,220,255,.8); }
  25%  { transform: translate(-2px, 1px); text-shadow: -2px 0 #ff003c, 2px 0 #00f0ff, 0 0 16px rgba(255,30,90,.8); }
  50%  { transform: translate(2px, -1px); text-shadow: 2px 1px #ff003c, -2px -1px #00f0ff; }
  75%  { transform: translate(-1px, -1px); text-shadow: -1px 0 #ff003c, 1px 0 #00f0ff, 0 0 18px rgba(255,255,255,.5); }
  100% { transform: translate(0, 0); text-shadow: 2px 0 #ff003c, -2px 0 #00f0ff; }
}
@keyframes mx-cyber-crash {
  0%   { filter: hue-rotate(0) brightness(1); }
  33%  { filter: hue-rotate(80deg) brightness(1.6) invert(.1); }
  66%  { filter: hue-rotate(-60deg) brightness(.6); }
  100% { filter: hue-rotate(0) brightness(1); }
}
.mx-cyber-btn.alt {
  box-shadow:
    inset 0 0 0 1px #ff3060,
    inset 0 0 14px rgba(255, 30, 90, .4),
    0 0 14px rgba(255, 30, 90, .4);
  text-shadow: 0 0 6px rgba(255, 30, 90, .9);
}

/* ============================================================ */
/*  Reduced motion override                                    */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fx-shake, .fx-shake-hard,
  .fx-dmg-float, .fx-dmg-float.crit,
  .fx-flash-overlay, .fx-btn-press, .fx-hpbar-hit,
  .fx-shimmer-bar::after,
  .fx-rep-bounce, .fx-quest-complete, .fx-checkmark,
  .fx-pun-overlay, .fx-pun-card, .fx-pun-title, .fx-pun-msg, .fx-pun-icon,
  .fx-toast, .fx-badge, .fx-count-pop, .fx-gain-bubble,
  #mx-bg-game::before, #mx-bg-game::after,
  #lx-login-title, #lx-login-title em::after,
  .mx-blood-drop, .mx-blood-stain,
  .mx-cyber-btn::before, .mx-cyber-btn:hover, .mx-cyber-btn:active {
    animation: none !important;
  }
  .mx-blood-drop, .mx-blood-stain { display: none; }
  .fx-pun-overlay { background: rgba(60,0,0,.85); }
}