/* css/packs/p.css | Source: MonarqueXD_v95L_GUILDORIGINS.html lignes 59709-59879 (id="mx-fx-pack-p-styles") */
/* ============================================================ */
/*  PACK P — Fond fumée monstrueuse in-game                     */
/* ============================================================ */

/* Renforce le fond in-game existant — opacité plus marquée */
body.mx-in-game #mx-bg-game {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(140, 20, 40, .55) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(60, 10, 80, .50) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 60%, rgba(40, 5, 30, .65) 0%, #050008 75%) !important;
}

/* Couche de fumée monstrueuse */
#mx-game-smoke-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
body.mx-in-game #mx-game-smoke-layer { display: block; }

/* Blobs de fumée rouge/sombre qui montent */
.mx-game-smoke {
  position: absolute;
  bottom: -25%;
  left: var(--gsl, 50%);
  width: var(--gsw, 360px);
  height: var(--gsw, 360px);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    rgba(160, 0, 30, .45) 0%,
    rgba(100, 0, 40, .35) 30%,
    rgba(50, 0, 30, .2) 55%,
    transparent 75%);
  filter: blur(30px);
  opacity: 0;
  animation: mx-game-smoke-rise var(--gsd, 18s) ease-in-out var(--gsdy, 0s) infinite;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.mx-game-smoke.purple {
  background: radial-gradient(circle at 50% 60%,
    rgba(80, 20, 120, .42) 0%,
    rgba(40, 10, 80, .3) 35%,
    transparent 70%);
}
.mx-game-smoke.dark {
  background: radial-gradient(circle at 50% 60%,
    rgba(20, 5, 30, .65) 0%,
    rgba(10, 0, 15, .45) 35%,
    transparent 70%);
}
@keyframes mx-game-smoke-rise {
  0%   { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
  15%  { opacity: .9; }
  50%  { transform: translateY(-60vh) translateX(var(--gsdrift, 5vw)) scale(1.2); opacity: .8; }
  85%  { opacity: .5; }
  100% { transform: translateY(-130vh) translateX(var(--gsdrift, 5vw)) scale(1.5); opacity: 0; }
}

/* Brume épaisse en bas (sol) */
.mx-game-floor-fog {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40vh;
  z-index: 0;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(ellipse 70% 100% at 25% 100%, rgba(180, 0, 30, .35) 0%, transparent 70%),
    radial-gradient(ellipse 70% 100% at 75% 100%, rgba(80, 0, 80, .35) 0%, transparent 70%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(30, 0, 20, .65) 0%, transparent 80%),
    linear-gradient(180deg, transparent 0%, rgba(15, 0, 20, .7) 100%);
  filter: blur(15px);
  animation: mx-game-fog-pulse 14s ease-in-out infinite;
}
body.mx-in-game .mx-game-floor-fog { display: block; }
@keyframes mx-game-fog-pulse {
  0%, 100% { transform: translateX(0) scaleY(1); opacity: .9; }
  50%      { transform: translateX(-2%) scaleY(1.1); opacity: 1; }
}

/* Yeux monstrueux qui apparaissent dans la fumée */
.mx-game-eyes {
  position: fixed;
  width: var(--ew, 60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: mx-eyes-appear var(--ed, 9s) ease-in-out var(--edy, 0s) infinite;
  filter: drop-shadow(0 0 12px rgba(255, 0, 30, .8));
}
body.mx-in-game .mx-game-eyes { /* visible only in-game */ }
.mx-game-eyes svg { width: 100%; height: auto; display: block; }
.mx-game-eyes .eye {
  fill: #ff0020;
  filter: drop-shadow(0 0 6px #ff0020);
}
.mx-game-eyes.cyan .eye {
  fill: #50dcff;
  filter: drop-shadow(0 0 6px #50dcff);
}
@keyframes mx-eyes-appear {
  0%, 100% { opacity: 0; transform: scale(.6); }
  20%      { opacity: .55; transform: scale(1); }
  40%      { opacity: .7; transform: scale(1.05); }
  55%      { opacity: .55; transform: scale(1); }
  70%      { opacity: 0; transform: scale(.8); }
}

/* Lueurs rouges pulsantes en arrière-plan */
.mx-game-pulse {
  position: fixed;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  filter: blur(40px);
  display: none;
  background: radial-gradient(circle, rgba(180, 0, 40, .25) 0%, transparent 60%);
  animation: mx-game-pulse-anim var(--pd, 7s) ease-in-out var(--pdy, 0s) infinite;
}
body.mx-in-game .mx-game-pulse { display: block; }
.mx-game-pulse.left  { top: 35%; left: -15vw; transform: translateY(-50%); }
.mx-game-pulse.right { top: 65%; right: -15vw; background: radial-gradient(circle, rgba(60, 80, 200, .2) 0%, transparent 60%); }
.mx-game-pulse.top   { top: -20vw; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(160, 0, 60, .3) 0%, transparent 60%); }
@keyframes mx-game-pulse-anim {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* Particules cendres / âmes qui montent */
.mx-ash {
  position: fixed;
  bottom: -10px;
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, rgba(255, 80, 80, .9), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: mx-ash-float var(--ad, 12s) linear var(--ady, 0s) infinite;
  display: none;
}
body.mx-in-game .mx-ash { display: block; }
@keyframes mx-ash-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(var(--adrift, 10vw)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-game-smoke, .mx-game-floor-fog, .mx-game-eyes,
  .mx-game-pulse, .mx-ash {
    animation: none !important;
  }
  .mx-game-smoke, .mx-game-eyes, .mx-ash { display: none !important; }
}