/* ============================================================
   ФОНЫ L4D-DARKNESS — v7.2 (fixed: base backgrounds + FX + z-index)
   ============================================================ */

/* ✅ УБРАНО убийственное background-image:none */
body.has-custom-bg{ background-color:#07070d; }

/* Мягкое виньетирование поверх фона, фон не трогаем */
body.has-custom-bg::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.35) 100%);
}

/* Второй слой виньетки (глубже) */
body.has-custom-bg::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.28) 78%,rgba(0,0,0,.55) 100%);
}

/* ============================================================
   FX-СЛОЙ
   ============================================================ */
.sky-fx{
  position:fixed;
  inset:0;
  z-index:0;              /* ✅ фон выше контента не лезет */
  pointer-events:none;
  overflow:hidden;
}
.sky-fx::before,
.sky-fx::after{
  content:'';
  position:absolute;
  inset:-10%;
  pointer-events:none;
  will-change:transform,opacity;
  background-repeat:no-repeat;
}

/* Кометы */
.sky-fx .comet{
  position:absolute;
  width:4px;
  height:4px;
  background:#fff;
  border-radius:50%;
  box-shadow:
    0 0 10px 3px rgba(255,255,255,.9),
    0 0 25px 6px rgba(180,200,255,.5);
  opacity:0;
  animation:comet-shoot linear infinite;
  will-change:transform,opacity;
  transform:rotate(var(--angle,30deg));
}
.sky-fx .comet::before{
  content:'';
  position:absolute;
  top:50%;
  right:2px;
  width:160px;
  height:2px;
  transform:translateY(-50%);
  border-radius:2px;
  filter:blur(.4px);
  background:linear-gradient(to left,#fff 0%,rgba(220,230,255,.75) 25%,rgba(180,200,255,.35) 60%,transparent 100%);
}
@keyframes comet-shoot{
  0%   {opacity:0; transform:translate3d(0,0,0) rotate(var(--angle,30deg))}
  6%   {opacity:1}
  82%  {opacity:1}
  100% {opacity:0; transform:translate3d(70vw,70vh,0) rotate(var(--angle,30deg))}
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes twinkle    {0%,100%{opacity:.35}50%{opacity:1}}
@keyframes twinkleAlt {0%,100%{opacity:1}50%{opacity:.3}}
@keyframes rise-up    {from{transform:translateY(0)}to{transform:translateY(-120vh)}}
@keyframes rise-drift {0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
                       20%{opacity:1}100%{transform:translate3d(30px,-120vh,0) scale(1);opacity:0}}
@keyframes fall-down  {from{transform:translateY(-110vh)}to{transform:translateY(110vh)}}
@keyframes fall-diag  {from{transform:translate3d(0,-110vh,0) rotate(0)}
                       to  {transform:translate3d(20vw,110vh,0) rotate(720deg)}}
@keyframes bubble     {0%{transform:translateY(110vh) scale(.5);opacity:0}
                       15%{opacity:.9}100%{transform:translateY(-15vh) scale(1.2);opacity:0}}
@keyframes drift-x    {0%,100%{transform:translateX(-25px)}50%{transform:translateX(25px)}}
@keyframes drift-y    {0%,100%{transform:translateY(-20px)}50%{transform:translateY(20px)}}
@keyframes pulse-glow {0%,100%{filter:brightness(1) saturate(1)}50%{filter:brightness(1.5) saturate(1.4)}}
@keyframes flicker    {0%,100%{opacity:.95}40%{opacity:.65}45%{opacity:1}55%{opacity:.6}70%{opacity:.95}}
@keyframes aurora-wave{0%,100%{transform:translateX(-8%) scaleY(1)}
                       50%    {transform:translateX(8%) scaleY(1.15)}}
@keyframes fire-rise  {0%,100%{background-position:0 100%,50% 100%,100% 100%,0 0}
                       50%    {background-position:20% 60%,50% 55%,80% 65%,0 0}}
@keyframes drift      {0%{background-position:0% 0%,100% 100%,0 0}
                       100%{background-position:100% 100%,0% 0%,0 0}}
@keyframes fall-bg    {0%{background-position:0 0,0 0}100%{background-position:0 100%,0 0}}
@keyframes scroll-bg  {0%{background-position:0 0,0 0,0 0}100%{background-position:40px 40px,40px 40px,0 0}}
@keyframes floaty     {0%,100%{background-position:50% 100%,0 0}50%{background-position:50% 55%,0 0}}
@keyframes glitch     {0%,100%{filter:hue-rotate(0)}50%{filter:hue-rotate(25deg) saturate(1.2)}}

/* ============================================================
   БАЗОВЫЕ ФОНЫ
   ============================================================ */
body.bg-night-sky{
  background:
    radial-gradient(circle at 12% 22%,#fff 1.2px,transparent 2.5px),
    radial-gradient(circle at 32% 55%,#fff 1px,transparent 2px),
    radial-gradient(circle at 68% 18%,#fff 1.4px,transparent 2.8px),
    radial-gradient(circle at 82% 42%,#fff 1px,transparent 2px),
    radial-gradient(circle at 45% 82%,#fff 1.2px,transparent 2.5px),
    radial-gradient(ellipse at 30% 50%,rgba(100,80,220,.35),transparent 55%),
    radial-gradient(ellipse at 75% 40%,rgba(50,120,220,.28),transparent 55%),
    linear-gradient(180deg,#05050f 0%,#0a0a22 45%,#15082a 100%) fixed;
}
body.bg-galaxy{
  background:
    radial-gradient(circle at 12% 18%,#fff 1.4px,transparent 2.8px),
    radial-gradient(circle at 78% 22%,#fff 1.6px,transparent 3.2px),
    radial-gradient(circle at 45% 75%,#fff 1.4px,transparent 2.8px),
    radial-gradient(circle at 92% 62%,#fff 1.2px,transparent 2.5px),
    radial-gradient(ellipse at 25% 40%,rgba(180,80,255,.55),transparent 55%),
    radial-gradient(ellipse at 75% 60%,rgba(80,140,255,.5),transparent 55%),
    radial-gradient(ellipse at 50% 80%,rgba(255,80,200,.3),transparent 60%),
    linear-gradient(135deg,#060012 0%,#150030 50%,#050018 100%) fixed;
  background-size:200% 200%,200% 200%,auto,auto,auto,auto,auto,100% 100%;
  animation:drift 40s ease-in-out infinite alternate;
}
body.bg-sunset{
  background:
    radial-gradient(circle at 50% 95%,rgba(255,220,120,.9),transparent 35%),
    radial-gradient(circle at 50% 90%,rgba(255,120,50,.75),transparent 55%),
    radial-gradient(ellipse at 30% 30%,rgba(255,80,120,.4),transparent 60%),
    radial-gradient(ellipse at 70% 25%,rgba(180,60,200,.4),transparent 60%),
    linear-gradient(180deg,#2a0a3a 0%,#6a1048 30%,#c9345a 60%,#f7931e 85%,#ffd27a 100%) fixed;
}
body.bg-forest{
  background:
    radial-gradient(circle at 18% 70%,rgba(180,255,150,.9) 1.5px,transparent 3px),
    radial-gradient(circle at 42% 82%,rgba(180,255,150,.7) 1.2px,transparent 2.5px),
    radial-gradient(circle at 67% 76%,rgba(180,255,150,.9) 1.5px,transparent 3px),
    radial-gradient(circle at 85% 60%,rgba(180,255,150,.7) 1.2px,transparent 2.5px),
    radial-gradient(ellipse at 50% 0%,rgba(200,255,180,.28),transparent 55%),
    radial-gradient(ellipse at 50% 110%,rgba(60,150,60,.55),transparent 60%),
    linear-gradient(180deg,#030a03 0%,#0a1f0a 40%,#123a15 70%,#050d05 100%) fixed;
}
body.bg-ocean{
  background:
    radial-gradient(circle at 15% 25%,rgba(180,240,255,.7) 1px,transparent 2px),
    radial-gradient(circle at 45% 55%,rgba(180,240,255,.6) 1.2px,transparent 2.5px),
    radial-gradient(circle at 72% 35%,rgba(180,240,255,.7) 1px,transparent 2px),
    radial-gradient(circle at 88% 70%,rgba(180,240,255,.6) 1.2px,transparent 2.5px),
    radial-gradient(ellipse at 50% 0%,rgba(120,220,255,.5),transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(0,60,140,.7),transparent 65%),
    linear-gradient(180deg,#001428 0%,#002d55 45%,#001019 100%) fixed;
}
body.bg-fire{
  background:
    radial-gradient(circle at 50% 110%,rgba(255,220,80,.9),transparent 32%),
    radial-gradient(circle at 30% 110%,rgba(255,120,0,.8),transparent 45%),
    radial-gradient(circle at 70% 110%,rgba(255,60,0,.8),transparent 45%),
    radial-gradient(ellipse at 50% 60%,rgba(200,20,0,.5),transparent 65%),
    linear-gradient(180deg,#120000 0%,#2a0000 40%,#4a0505 75%,#6a0a00 100%) fixed;
  background-size:180% 180%,180% 180%,180% 180%,100% 100%,100% 100%;
  animation:fire-rise 3s ease-in-out infinite;
}
body.bg-neon-city{
  background:
    repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,0,180,.35) 60px 62px,transparent 62px 90px,rgba(0,220,255,.35) 90px 92px,transparent 92px 140px),
    linear-gradient(180deg,transparent 55%,rgba(255,0,150,.35) 100%),
    linear-gradient(180deg,#0a0016 0%,#1a0030 50%,#0a0020 100%) fixed;
}
body.bg-matrix{
  background:
    repeating-linear-gradient(0deg,transparent 0 18px,rgba(0,255,80,.22) 18px 20px),
    linear-gradient(180deg,#000500 0%,#001a00 50%,#000500 100%) fixed;
  background-size:100% 200%,100% 100%;
  animation:fall-bg 5s linear infinite;
}
body.bg-cyber-grid{
  background:
    repeating-linear-gradient(90deg,transparent 0 38px,rgba(0,255,255,.35) 38px 40px),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(0,255,255,.35) 38px 40px),
    linear-gradient(180deg,#000505 0%,#001a1a 50%,#000505 100%) fixed;
  animation:scroll-bg 6s linear infinite;
}
body.bg-aurora{
  background:
    radial-gradient(ellipse 70% 25% at 30% 30%,rgba(0,255,200,.65),transparent 65%),
    radial-gradient(ellipse 60% 20% at 70% 45%,rgba(80,140,255,.6),transparent 65%),
    radial-gradient(ellipse 65% 22% at 50% 15%,rgba(180,80,255,.55),transparent 65%),
    radial-gradient(circle at 15% 20%,#fff 1px,transparent 2px),
    radial-gradient(circle at 80% 15%,#fff 1px,transparent 2px),
    linear-gradient(180deg,#00030f 0%,#001030 50%,#000410 100%) fixed;
}
body.bg-blood-moon{
  background:
    radial-gradient(circle at 72% 28%,#ff5566 2%,rgba(255,30,30,.9) 5%,transparent 8%),
    radial-gradient(circle at 72% 28%,rgba(255,40,40,.55) 6%,transparent 22%),
    radial-gradient(circle at 72% 28%,rgba(255,0,0,.3) 15%,transparent 45%),
    radial-gradient(circle at 20% 25%,rgba(255,200,200,.85) 1px,transparent 2px),
    radial-gradient(circle at 88% 75%,rgba(255,200,200,.75) 1px,transparent 2px),
    linear-gradient(180deg,#0a0000 0%,#220202 45%,#0a0000 100%) fixed;
}
body.bg-anime{
  background:
    radial-gradient(circle at 15% 15%,rgba(255,180,240,.7),transparent 35%),
    radial-gradient(circle at 85% 25%,rgba(180,200,255,.6),transparent 35%),
    radial-gradient(circle at 25% 85%,rgba(255,220,180,.55),transparent 40%),
    radial-gradient(circle at 80% 80%,rgba(200,150,255,.6),transparent 40%),
    linear-gradient(135deg,#1a0a2a 0%,#3a1a5a 50%,#2a0a3a 100%) fixed;
}
body.bg-abstract{
  background:
    radial-gradient(circle at 20% 25%,rgba(255,80,180,.55),transparent 45%),
    radial-gradient(circle at 80% 30%,rgba(80,220,180,.5),transparent 45%),
    radial-gradient(circle at 30% 75%,rgba(120,120,255,.55),transparent 45%),
    radial-gradient(circle at 75% 80%,rgba(255,200,60,.45),transparent 45%),
    linear-gradient(135deg,#06060f,#150825) fixed;
}
body.bg-anim-fire{
  background:
    radial-gradient(circle at 30% 100%,rgba(255,220,80,.85),transparent 45%),
    radial-gradient(circle at 55% 100%,rgba(255,100,0,.85),transparent 55%),
    radial-gradient(circle at 80% 100%,rgba(255,200,60,.8),transparent 45%),
    linear-gradient(180deg,#0a0000 0%,#2a0000 40%,#5a0500 100%) fixed;
  background-size:200% 200%,180% 180%,200% 200%,100% 100%;
  animation:fire-rise 3s ease-in-out infinite;
}
body.bg-anim-galaxy{
  background:
    radial-gradient(ellipse at 30% 40%,rgba(180,90,255,.7),transparent 55%),
    radial-gradient(ellipse at 70% 60%,rgba(90,150,255,.65),transparent 55%),
    radial-gradient(circle at 15% 20%,#fff 1.5px,transparent 3px),
    radial-gradient(circle at 78% 25%,#fff 1.5px,transparent 3px),
    radial-gradient(circle at 40% 75%,#fff 1.4px,transparent 2.8px),
    radial-gradient(circle at 88% 62%,#fff 1.2px,transparent 2.5px),
    linear-gradient(135deg,#060012 0%,#150030 50%,#050018 100%) fixed;
  background-size:200% 200%,200% 200%,auto,auto,auto,auto,100% 100%;
  animation:drift 30s ease-in-out infinite alternate;
}
body.bg-default{background:linear-gradient(145deg,#14141f,#1a1a2a) fixed}

/* ============================================================
   FX ДЛЯ КАЖДОГО ФОНА
   ============================================================ */
body.bg-night-sky .sky-fx::before{
  background:
    radial-gradient(1.2px 1.2px at 8% 15%,#fff,transparent),
    radial-gradient(1px 1px at 22% 42%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 38% 68%,#fff,transparent),
    radial-gradient(1px 1px at 52% 22%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 68% 55%,#fff,transparent),
    radial-gradient(1px 1px at 82% 18%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 92% 78%,#fff,transparent),
    radial-gradient(1px 1px at 15% 88%,#fff,transparent),
    radial-gradient(1.3px 1.3px at 44% 12%,#fff,transparent),
    radial-gradient(1px 1px at 60% 92%,#fff,transparent);
  animation:twinkle 3.5s ease-in-out infinite}
body.bg-night-sky .sky-fx::after{
  background:
    radial-gradient(1.4px 1.4px at 12% 32%,#a8c8ff,transparent),
    radial-gradient(1px 1px at 30% 78%,#a8c8ff,transparent),
    radial-gradient(1.6px 1.6px at 48% 40%,#a8c8ff,transparent),
    radial-gradient(1px 1px at 64% 82%,#a8c8ff,transparent),
    radial-gradient(1.4px 1.4px at 78% 28%,#a8c8ff,transparent),
    radial-gradient(1px 1px at 90% 62%,#a8c8ff,transparent);
  animation:twinkleAlt 5s ease-in-out infinite}

body.bg-galaxy .sky-fx::before{
  background:
    radial-gradient(1.4px 1.4px at 10% 20%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 26% 48%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 44% 14%,#fff,transparent),
    radial-gradient(2px 2px at 62% 62%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 78% 28%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 90% 72%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 16% 78%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 56% 90%,#fff,transparent);
  animation:twinkle 3s ease-in-out infinite, drift-y 14s ease-in-out infinite}
body.bg-galaxy .sky-fx::after{
  background:
    radial-gradient(1.6px 1.6px at 6% 45%,#dcb0ff,transparent),
    radial-gradient(1px 1px at 40% 70%,#dcb0ff,transparent),
    radial-gradient(1.4px 1.4px at 70% 12%,#dcb0ff,transparent),
    radial-gradient(1px 1px at 88% 40%,#dcb0ff,transparent);
  animation:twinkleAlt 4.5s ease-in-out infinite}

body.bg-anim-galaxy .sky-fx::before{
  background:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff,transparent),
    radial-gradient(2px 2px at 30% 55%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 50% 25%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 68% 75%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 84% 35%,#fff,transparent),
    radial-gradient(1.8px 1.8px at 8% 70%,#fff,transparent),
    radial-gradient(1.4px 1.4px at 44% 88%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 92% 60%,#fff,transparent);
  animation:twinkle 2.4s ease-in-out infinite}
body.bg-anim-galaxy .sky-fx::after{
  background:
    radial-gradient(1.4px 1.4px at 22% 40%,#a8c8ff,transparent),
    radial-gradient(1.6px 1.6px at 58% 12%,#a8c8ff,transparent),
    radial-gradient(1.2px 1.2px at 76% 58%,#a8c8ff,transparent),
    radial-gradient(1.4px 1.4px at 5% 88%,#a8c8ff,transparent);
  animation:twinkleAlt 3.5s ease-in-out infinite}

body.bg-sunset .sky-fx::before{
  background:
    radial-gradient(2px 2px at 15% 30%,rgba(255,220,140,.9),transparent),
    radial-gradient(3px 3px at 40% 60%,rgba(255,180,80,.8),transparent),
    radial-gradient(2px 2px at 65% 25%,rgba(255,200,120,.9),transparent),
    radial-gradient(3px 3px at 85% 55%,rgba(255,140,80,.8),transparent),
    radial-gradient(2px 2px at 25% 80%,rgba(255,220,140,.8),transparent),
    radial-gradient(3px 3px at 55% 88%,rgba(255,160,90,.8),transparent);
  animation:rise-up 22s linear infinite, drift-x 12s ease-in-out infinite}
body.bg-sunset .sky-fx::after{
  background:
    radial-gradient(1.6px 1.6px at 30% 20%,#ffe6a0,transparent),
    radial-gradient(1.6px 1.6px at 70% 45%,#ffe6a0,transparent),
    radial-gradient(1.6px 1.6px at 10% 70%,#ffe6a0,transparent),
    radial-gradient(1.6px 1.6px at 90% 80%,#ffe6a0,transparent);
  animation:rise-up 30s linear infinite}

body.bg-forest .sky-fx::before{
  background:
    radial-gradient(3px 2px at 12% 15%,rgba(120,200,80,.9),transparent),
    radial-gradient(2px 3px at 32% 40%,rgba(160,220,90,.9),transparent),
    radial-gradient(3px 2px at 55% 70%,rgba(120,200,80,.85),transparent),
    radial-gradient(2px 3px at 78% 25%,rgba(160,220,90,.85),transparent),
    radial-gradient(3px 2px at 90% 60%,rgba(120,200,80,.9),transparent),
    radial-gradient(2px 3px at 22% 85%,rgba(160,220,90,.8),transparent);
  animation:fall-diag 16s linear infinite}
body.bg-forest .sky-fx::after{
  background:
    radial-gradient(2px 2px at 20% 30%,rgba(220,255,140,1),transparent 60%),
    radial-gradient(2px 2px at 50% 60%,rgba(220,255,140,1),transparent 60%),
    radial-gradient(2px 2px at 75% 40%,rgba(220,255,140,1),transparent 60%),
    radial-gradient(2px 2px at 40% 85%,rgba(220,255,140,1),transparent 60%),
    radial-gradient(2px 2px at 88% 75%,rgba(220,255,140,1),transparent 60%);
  filter:blur(.5px);
  animation:twinkleAlt 3s ease-in-out infinite, drift-x 8s ease-in-out infinite}

body.bg-ocean .sky-fx::before{
  background:
    radial-gradient(3px 3px at 15% 100%,rgba(200,240,255,.85),transparent),
    radial-gradient(2px 2px at 35% 100%,rgba(180,230,255,.8),transparent),
    radial-gradient(4px 4px at 55% 100%,rgba(200,240,255,.85),transparent),
    radial-gradient(2px 2px at 72% 100%,rgba(180,230,255,.8),transparent),
    radial-gradient(3px 3px at 88% 100%,rgba(200,240,255,.85),transparent);
  animation:bubble 12s linear infinite}
body.bg-ocean .sky-fx::after{
  background:
    radial-gradient(2px 2px at 25% 40%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 60% 55%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 80% 25%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 45% 80%,rgba(255,255,255,.55),transparent);
  animation:twinkle 4s ease-in-out infinite}

body.bg-fire .sky-fx::before{
  background:
    radial-gradient(3px 3px at 20% 100%,rgba(255,200,80,1),transparent),
    radial-gradient(2px 2px at 35% 100%,rgba(255,140,40,1),transparent),
    radial-gradient(3px 3px at 50% 100%,rgba(255,220,100,1),transparent),
    radial-gradient(2px 2px at 65% 100%,rgba(255,120,30,1),transparent),
    radial-gradient(3px 3px at 80% 100%,rgba(255,200,80,1),transparent),
    radial-gradient(2px 2px at 92% 100%,rgba(255,160,60,1),transparent);
  filter:blur(.4px);
  animation:rise-drift 6s linear infinite}
body.bg-fire .sky-fx::after{
  background:
    radial-gradient(1.6px 1.6px at 15% 100%,rgba(255,255,200,.9),transparent),
    radial-gradient(1.6px 1.6px at 45% 100%,rgba(255,240,160,.9),transparent),
    radial-gradient(1.6px 1.6px at 72% 100%,rgba(255,255,200,.9),transparent);
  animation:rise-drift 4s linear infinite}

body.bg-neon-city .sky-fx::before{
  background:
    linear-gradient(90deg,transparent 8%,rgba(255,0,180,.8) 8.2%,transparent 8.5%),
    linear-gradient(90deg,transparent 32%,rgba(0,220,255,.8) 32.2%,transparent 32.5%),
    linear-gradient(90deg,transparent 55%,rgba(255,0,180,.8) 55.2%,transparent 55.5%),
    linear-gradient(90deg,transparent 78%,rgba(0,220,255,.8) 78.2%,transparent 78.5%);
  animation:flicker 4s ease-in-out infinite, drift-x 6s ease-in-out infinite}
body.bg-neon-city .sky-fx::after{
  background:
    radial-gradient(2px 2px at 20% 30%,#ff00ff,transparent),
    radial-gradient(2px 2px at 50% 70%,#00ffff,transparent),
    radial-gradient(2px 2px at 80% 40%,#ff00ff,transparent);
  animation:pulse-glow 2s ease-in-out infinite}

body.bg-matrix .sky-fx::before{
  background:
    linear-gradient(180deg,transparent 0,rgba(0,255,80,.9) 30%,transparent 100%) 8% 0/2px 140px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,80,.9) 30%,transparent 100%) 22% 0/2px 200px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,80,.9) 30%,transparent 100%) 38% 0/2px 160px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,80,.9) 30%,transparent 100%) 55% 0/2px 240px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,80,.9) 30%,transparent 100%) 72% 0/2px 180px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,80,.9) 30%,transparent 100%) 88% 0/2px 220px no-repeat;
  animation:fall-down 6s linear infinite}
body.bg-matrix .sky-fx::after{
  background:
    radial-gradient(1.6px 1.6px at 15% 30%,#aaffaa,transparent),
    radial-gradient(1.6px 1.6px at 48% 60%,#aaffaa,transparent),
    radial-gradient(1.6px 1.6px at 82% 20%,#aaffaa,transparent);
  animation:twinkle 2s ease-in-out infinite}

body.bg-anime .sky-fx::before{
  background:
    radial-gradient(3px 3px at 12% 20%,#fff,transparent 70%),
    radial-gradient(2px 2px at 30% 55%,#ffd6ff,transparent 70%),
    radial-gradient(4px 4px at 55% 30%,#fff,transparent 70%),
    radial-gradient(2px 2px at 72% 68%,#d6f0ff,transparent 70%),
    radial-gradient(3px 3px at 88% 25%,#ffe6d6,transparent 70%),
    radial-gradient(2px 2px at 40% 88%,#ffd6f0,transparent 70%);
  filter:blur(.6px);
  animation:twinkle 2.5s ease-in-out infinite, drift-x 10s ease-in-out infinite}
body.bg-anime .sky-fx::after{
  background:
    radial-gradient(circle 20px at 20% 30%,rgba(255,180,240,.18),transparent 70%),
    radial-gradient(circle 26px at 65% 40%,rgba(180,200,255,.18),transparent 70%),
    radial-gradient(circle 22px at 40% 75%,rgba(255,220,180,.18),transparent 70%),
    radial-gradient(circle 24px at 85% 70%,rgba(200,150,255,.18),transparent 70%);
  animation:drift-y 12s ease-in-out infinite}

body.bg-abstract .sky-fx::before{
  background:
    radial-gradient(circle 60px at 15% 25%,rgba(255,80,180,.35),transparent 70%),
    radial-gradient(circle 70px at 75% 30%,rgba(80,220,180,.32),transparent 70%),
    radial-gradient(circle 55px at 30% 75%,rgba(120,120,255,.35),transparent 70%),
    radial-gradient(circle 80px at 80% 80%,rgba(255,200,60,.28),transparent 70%);
  filter:blur(6px);
  animation:drift-x 14s ease-in-out infinite, drift-y 18s ease-in-out infinite}
body.bg-abstract .sky-fx::after{
  background:
    radial-gradient(2px 2px at 22% 40%,#fff,transparent),
    radial-gradient(2px 2px at 58% 18%,#fff,transparent),
    radial-gradient(2px 2px at 78% 62%,#fff,transparent),
    radial-gradient(2px 2px at 40% 88%,#fff,transparent);
  animation:twinkle 3s ease-in-out infinite}

body.bg-cyber-grid .sky-fx::before{
  background:
    linear-gradient(180deg,transparent 0,rgba(0,255,255,.9) 40%,transparent 100%) 10% 0/1px 120px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,255,.9) 40%,transparent 100%) 32% 0/1px 180px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,255,.9) 40%,transparent 100%) 55% 0/1px 140px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,255,.9) 40%,transparent 100%) 78% 0/1px 200px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(0,255,255,.9) 40%,transparent 100%) 92% 0/1px 160px no-repeat;
  animation:fall-down 4s linear infinite}
body.bg-cyber-grid .sky-fx::after{
  background:
    radial-gradient(2px 2px at 25% 25%,#aaffff,transparent),
    radial-gradient(2px 2px at 60% 55%,#aaffff,transparent),
    radial-gradient(2px 2px at 85% 35%,#aaffff,transparent);
  animation:flicker 3s ease-in-out infinite}

body.bg-aurora .sky-fx::before{
  background:
    radial-gradient(ellipse 50% 8% at 30% 25%,rgba(0,255,200,.65),transparent 70%),
    radial-gradient(ellipse 45% 7% at 70% 35%,rgba(120,180,255,.6),transparent 70%),
    radial-gradient(ellipse 55% 9% at 50% 15%,rgba(200,120,255,.55),transparent 70%);
  filter:blur(8px);
  animation:aurora-wave 8s ease-in-out infinite, drift-y 10s ease-in-out infinite}
body.bg-aurora .sky-fx::after{
  background:
    radial-gradient(1.6px 1.6px at 12% 30%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 42% 18%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 72% 40%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 88% 22%,#fff,transparent);
  animation:twinkle 3s ease-in-out infinite}

body.bg-blood-moon .sky-fx::before{
  background:
    linear-gradient(180deg,transparent 0,rgba(200,20,30,.9) 40%,transparent 100%) 15% 0/2px 100px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(200,20,30,.9) 40%,transparent 100%) 42% 0/2px 140px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(200,20,30,.9) 40%,transparent 100%) 68% 0/2px 90px no-repeat,
    linear-gradient(180deg,transparent 0,rgba(200,20,30,.9) 40%,transparent 100%) 88% 0/2px 130px no-repeat;
  animation:fall-down 5s linear infinite}
body.bg-blood-moon .sky-fx::after{
  background:
    radial-gradient(1.6px 1.6px at 20% 30%,#ff8888,transparent),
    radial-gradient(1.6px 1.6px at 45% 55%,#ff6666,transparent),
    radial-gradient(1.6px 1.6px at 78% 40%,#ff8888,transparent),
    radial-gradient(1.6px 1.6px at 60% 80%,#ff6666,transparent);
  animation:twinkleAlt 3.5s ease-in-out infinite, pulse-glow 4s ease-in-out infinite}

body.bg-anim-fire .sky-fx::before{
  background:
    radial-gradient(3px 3px at 15% 100%,rgba(255,220,80,1),transparent),
    radial-gradient(2px 2px at 28% 100%,rgba(255,120,0,1),transparent),
    radial-gradient(4px 4px at 42% 100%,rgba(255,240,120,1),transparent),
    radial-gradient(2px 2px at 56% 100%,rgba(255,60,0,1),transparent),
    radial-gradient(3px 3px at 70% 100%,rgba(255,200,80,1),transparent),
    radial-gradient(2px 2px at 82% 100%,rgba(255,140,40,1),transparent),
    radial-gradient(3px 3px at 94% 100%,rgba(255,220,80,1),transparent);
  filter:blur(.5px);
  animation:rise-drift 4s linear infinite}
body.bg-anim-fire .sky-fx::after{
  background:
    radial-gradient(circle 40px at 20% 95%,rgba(120,40,10,.5),transparent 70%),
    radial-gradient(circle 50px at 55% 95%,rgba(140,50,10,.5),transparent 70%),
    radial-gradient(circle 45px at 82% 95%,rgba(120,40,10,.5),transparent 70%);
  filter:blur(10px);
  animation:rise-up 8s linear infinite}

body.bg-default .sky-fx::before{
  background:
    radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.25),transparent),
    radial-gradient(2px 2px at 55% 60%,rgba(255,255,255,.2),transparent),
    radial-gradient(2px 2px at 80% 25%,rgba(255,255,255,.25),transparent),
    radial-gradient(2px 2px at 35% 85%,rgba(255,255,255,.2),transparent);
  animation:twinkle 5s ease-in-out infinite, drift-x 12s ease-in-out infinite}

/* ============================================================
   ПРЕВЬЮ ДЛЯ МАГАЗИНА
   ============================================================ */
.bg-preview.bg-default{background:linear-gradient(145deg,rgba(20,20,31,.92),rgba(26,26,42,.92))}
.bg-preview.bg-night-sky{background:linear-gradient(180deg,#05050f,#0a0a22,#15082a) center/cover}
.bg-preview.bg-galaxy{background:linear-gradient(135deg,#060012,#150030,#050018) center/cover}
.bg-preview.bg-sunset{background:linear-gradient(180deg,#2a0a3a,#6a1048,#c9345a,#f7931e,#ffd27a) center/cover}
.bg-preview.bg-forest{background:linear-gradient(180deg,#030a03,#0a1f0a,#123a15,#050d05) center/cover}
.bg-preview.bg-ocean{background:linear-gradient(180deg,#001428,#002d55,#001019) center/cover}
.bg-preview.bg-fire{background:linear-gradient(180deg,#120000,#2a0000,#4a0505,#6a0a00) center/cover}
.bg-preview.bg-neon-city{background:linear-gradient(180deg,#0a0016,#1a0030,#0a0020) center/cover}
.bg-preview.bg-matrix{background:linear-gradient(180deg,#000500,#001a00,#000500) center/cover}
.bg-preview.bg-cyber-grid{background:linear-gradient(180deg,#000505,#001a1a,#000505) center/cover}
.bg-preview.bg-aurora{background:linear-gradient(180deg,#00030f,#001030,#000410) center/cover}
.bg-preview.bg-blood-moon{background:linear-gradient(180deg,#0a0000,#220202,#0a0000) center/cover}
.bg-preview.bg-anime{background:linear-gradient(135deg,#1a0a2a,#3a1a5a,#2a0a3a) center/cover}
.bg-preview.bg-abstract{background:linear-gradient(135deg,#06060f,#150825) center/cover}
.bg-preview.bg-anim-fire{background:linear-gradient(180deg,#0a0000,#2a0000,#5a0500) center/cover}
.bg-preview.bg-anim-galaxy{background:linear-gradient(135deg,#060012,#150030,#050018) center/cover}

/* ============================================================
   УСИЛЕНИЕ ЭФФЕКТОВ
   ============================================================ */
.sky-fx::before,
.sky-fx::after{
  mix-blend-mode:screen;
  opacity:.9;
}
body[class*="bg-"] .sky-fx .comet{ animation-duration:8s; }

/* ============================================================
   МОБИЛЬНЫЙ / REDUCED-MOTION
   ============================================================ */
@media (max-width:640px){
  .sky-fx .comet{animation-duration:12s!important}
  body.bg-matrix,body.bg-cyber-grid{animation:none}
}
@media (prefers-reduced-motion:reduce){
  .sky-fx{display:none}
  body[class*="bg-"]{animation:none!important}
}

/* ============================================================
   Универсальный слой фона пользователя
   ============================================================ */
.bg-video-layer,
.bg-gif-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: __bgFadeIn 0.9s ease both;
}

.bg-video-layer {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.85;
    filter: brightness(0.9) saturate(1.05);
}

.bg-gif-layer {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: min(100vw, 1200px) auto;
    opacity: 0.9;
}

@keyframes __bgFadeIn { from { opacity: 0; } to { opacity: 0.85; } }

/* Ослабляем затемнение, когда фон активен */
body.has-custom-bg::before {
    background: rgba(7, 7, 13, 0.15) !important;
}
body.has-custom-bg {
    background-image: none !important;
}