:root{ --camX:0; --camY:0; }

/* Keep game stack clean: bg under canvas, overlay on top */
#gameDiv{ position:fixed; inset:0; overflow:hidden; }
#bg{ position:absolute; inset:-12%; z-index:0; pointer-events:none; }
canvas#game{ position:absolute; inset:0; z-index:1; background:transparent !important; }
#overlay{ position:absolute; inset:0; z-index:2; }

/* Layers */
#bg .bg-layer{ position:absolute; inset:0; will-change:transform,opacity; filter:saturate(110%); }

/* Far nebula */
#bg .bg-far{
  background:
    radial-gradient(1200px 800px at 15% 25%, rgba(255,70,20,.12), transparent 60%),
    radial-gradient(1000px 700px at 85% 35%, rgba(150,0,255,.12), transparent 60%),
    linear-gradient(180deg, #060007 0%, #09010d 45%, #050007 100%);
  transform: translate3d(calc(var(--camX)*-0.03px), calc(var(--camY)*-0.02px), 0);
  filter: blur(2px);
  opacity:.85;
}

/* Mid fog swirl (very soft) */
#bg .bg-mid{
  background: conic-gradient(
    from 0deg,
    rgba(255,0,120,.055),
    rgba(255,0,120,0) 12%,
    rgba(140,0,255,.055) 25%,
    rgba(140,0,255,0) 38%,
    rgba(255,140,0,.055) 52%,
    rgba(255,140,0,0) 65%,
    rgba(120,255,220,.055) 78%,
    rgba(120,255,220,0) 90%,
    rgba(255,0,120,.055)
  );
  transform: translate3d(calc(var(--camX)*-0.09px), calc(var(--camY)*-0.06px), 0) rotate(0.0001deg);
  filter: blur(70px);
  mix-blend-mode: screen;
  opacity:.55;
  animation: swirl 45s linear infinite;
}

/* Near ember sparks (subtle) */
#bg .bg-near{
  --dot: radial-gradient(circle, rgba(255,120,30,.9) 0 35%, rgba(255,120,30,0) 60%);
  --dot2: radial-gradient(circle, rgba(255,40,0,.8) 0 30%, rgba(255,40,0,0) 58%);
  background:
    var(--dot) 10% 90% / 6px 6px no-repeat,
    var(--dot2) 22% 95% / 5px 5px no-repeat,
    var(--dot) 35% 100% / 7px 7px no-repeat,
    var(--dot2) 50% 92% / 6px 6px no-repeat,
    var(--dot) 62% 97% / 5px 5px no-repeat,
    var(--dot2) 78% 94% / 6px 6px no-repeat,
    var(--dot) 90% 99% / 7px 7px no-repeat;
  transform: translate3d(calc(var(--camX)*-0.16px), calc(var(--camY)*-0.10px), 0);
  filter: drop-shadow(0 0 6px rgba(255,160,60,.35)) drop-shadow(0 0 10px rgba(255,60,0,.2));
  animation: rise 10s linear infinite;
  opacity:.9;
}

/* Animations */
@keyframes swirl { to { transform: rotate(360deg); } }
@keyframes rise {
  0%   { transform: translateY(0) translate3d(calc(var(--camX)*-0.16px), calc(var(--camY)*-0.10px), 0); opacity:.95; }
  50%  { transform: translateY(-35vh) translate3d(calc(var(--camX)*-0.16px), calc(var(--camY)*-0.10px), 0); opacity:.85; }
  100% { transform: translateY(-70vh) translate3d(calc(var(--camX)*-0.16px), calc(var(--camY)*-0.10px), 0); opacity:.95; }
}