/* Deadly Fear v22.4.33 — Gameplay Storm Atmosphere
   Visible weather ABOVE the normal game shell, but never captures clicks.
   Rain/leaves are intentionally lighter and slower to keep text readable. */

#dfStormAtmosphere.df-storm-atmosphere {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1500 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: none !important;
  contain: layout paint style !important;
  opacity: 1 !important;
}

#dfStormAtmosphere .df-storm-clouds,
#dfStormAtmosphere .df-storm-vignette,
#dfStormAtmosphere .df-storm-flash,
#dfStormAtmosphere .df-storm-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

/* Dark moving cloud cast. Kept translucent so the game UI stays clear. */
#dfStormAtmosphere .df-storm-clouds {
  inset: -14% !important;
  width: 128% !important;
  height: 128% !important;
  z-index: 0 !important;
  opacity: .22 !important;
  background:
    radial-gradient(ellipse at 12% 10%, rgba(34,55,75,.62) 0 12%, transparent 33%),
    radial-gradient(ellipse at 42% 4%, rgba(19,35,53,.66) 0 17%, transparent 39%),
    radial-gradient(ellipse at 72% 12%, rgba(40,54,71,.56) 0 15%, transparent 37%),
    radial-gradient(ellipse at 98% 6%, rgba(18,31,47,.66) 0 15%, transparent 35%),
    linear-gradient(180deg, rgba(2,7,13,.56) 0%, rgba(4,9,15,.20) 48%, transparent 76%);
  filter: blur(20px);
  transform: translate3d(-2%,0,0) scale(1.04);
  animation: dfStormCloudDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}

/* Canvas contains the actual rain, wind debris/leaves and lightning bolt. */
#dfStormAtmosphere .df-storm-canvas {
  display: block !important;
  z-index: 2 !important;
  opacity: .72 !important;
}

/* Gentle wet/dark cast makes the page feel stormy without obscuring controls. */
#dfStormAtmosphere .df-storm-vignette {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(4,11,18,.18), transparent 26%, transparent 70%, rgba(1,4,8,.18)),
    radial-gradient(ellipse at center, transparent 54%, rgba(0,0,0,.16) 100%);
}

#dfStormAtmosphere .df-storm-flash {
  z-index: 3 !important;
  opacity: 0;
  background:
    radial-gradient(circle at var(--df-lightning-x,70%) -8%, rgba(235,247,255,.78), rgba(120,192,255,.22) 26%, transparent 60%),
    linear-gradient(180deg, rgba(210,236,255,.22), rgba(134,193,255,.04) 42%, transparent 74%);
  mix-blend-mode: screen;
  transition: opacity 70ms linear;
}
#dfStormAtmosphere .df-storm-flash.is-on { opacity: .58 !important; }
#dfStormAtmosphere .df-storm-flash.is-soft { opacity: .20 !important; }

@keyframes dfStormCloudDrift {
  0%   { transform: translate3d(-4%,-1%,0) scale(1.04); }
  50%  { transform: translate3d(1%,1%,0) scale(1.08); }
  100% { transform: translate3d(5%,-1%,0) scale(1.05); }
}

@media (max-width: 700px) {
  #dfStormAtmosphere .df-storm-clouds { opacity: .22 !important; filter: blur(16px); animation-duration: 42s; }
  #dfStormAtmosphere .df-storm-canvas { opacity: .68 !important; }
  #dfStormAtmosphere .df-storm-vignette { opacity: .75 !important; }
}

/* Reduced-motion still gets weather, just less of it. Do not hide the effect entirely. */
@media (prefers-reduced-motion: reduce) {
  #dfStormAtmosphere .df-storm-clouds { animation: none !important; opacity: .18 !important; }
  #dfStormAtmosphere .df-storm-canvas { opacity: .48 !important; }
}