:root[data-wallpaper] body { background: transparent; }
:root[data-wallpaper] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

:root[data-wallpaper="stars"] body::before {
  background-color: #070811;
  background-image:
    radial-gradient(60% 45% at 18% 12%, rgba(35, 88, 138, 0.2), transparent 70%),
    radial-gradient(55% 50% at 85% 30%, rgba(20, 30, 68, 0.16), transparent 70%),
    radial-gradient(65% 55% at 60% 100%, rgba(44, 29, 129, 0.16), transparent 70%),
    radial-gradient(1.6px 1.6px at 8% 14%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.4px 1.4px at 17% 42%, rgba(200,220,255,0.85), transparent),
    radial-gradient(1.8px 1.8px at 24% 76%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.3px 1.3px at 31% 26%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 39% 58%, rgba(210,225,255,0.85), transparent),
    radial-gradient(1.7px 1.7px at 46% 88%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.3px 1.3px at 52% 16%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 58% 46%, rgba(220,230,255,0.85), transparent),
    radial-gradient(1.4px 1.4px at 64% 72%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.8px 1.8px at 71% 22%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.3px 1.3px at 77% 54%, rgba(205,220,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 83% 84%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.4px 1.4px at 89% 34%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.7px 1.7px at 94% 66%, rgba(220,230,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 12% 62%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 36% 8%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 68% 92%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 97% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 4% 90%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 14% 30%, rgba(255,255,255,0.82), transparent),
    radial-gradient(1.3px 1.3px at 22% 55%, rgba(220,230,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 28% 90%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 34% 40%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 43% 20%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.3px 1.3px at 49% 68%, rgba(210,225,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 55% 34%, rgba(255,255,255,0.88), transparent),
    radial-gradient(1.2px 1.2px at 61% 60%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 67% 12%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.3px 1.3px at 73% 84%, rgba(220,230,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 80% 40%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.2px 1.2px at 86% 66%, rgba(255,255,255,0.72), transparent),
    radial-gradient(1.5px 1.5px at 91% 84%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.3px 1.3px at 96% 44%, rgba(210,225,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 2% 34%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 20% 8%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.3px 1.3px at 44% 48%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.2px 1.2px at 76% 70%, rgba(255,255,255,0.72), transparent);
  background-repeat: no-repeat;
}

:root[data-wallpaper="aurora"] body::before {
  background-color: #070811;
  background-image:
    radial-gradient(70% 55% at 12% -5%, rgba(70,120,255,0.16), transparent 70%),
    radial-gradient(60% 50% at 100% 105%, rgba(180, 70, 220, 0.199), transparent 70%),
    radial-gradient(50% 45% at 85% 10%, rgba(60,200,190,0.12), transparent 70%);
  background-repeat: no-repeat;
}

:root[data-wallpaper="ember"] body::before {
  background-color: #0c0705;
  background-image:
    radial-gradient(75% 60% at 6% 108%, rgba(255,120,30,0.28), transparent 72%),
    radial-gradient(65% 55% at 100% -8%, rgba(230,40,40,0.24), transparent 72%),
    radial-gradient(50% 45% at 50% 60%, rgba(255,90,20,0.10), transparent 75%);
  background-repeat: no-repeat;
}

:root[data-wallpaper="ocean"] body::before {
  background-color: #04080c;
  background-image:
    radial-gradient(75% 60% at 100% 0%, rgba(40,130,220,0.28), transparent 72%),
    radial-gradient(65% 55% at 0% 100%, rgba(30,190,190,0.24), transparent 72%),
    radial-gradient(50% 45% at 50% 45%, rgba(40,110,200,0.10), transparent 75%);
  background-repeat: no-repeat;
}

:root[data-wallpaper="orchid"] body::before {
  background-color: #0b0610;
  background-image:
    radial-gradient(75% 60% at 8% 0%, rgba(240,80,180,0.24), transparent 72%),
    radial-gradient(70% 60% at 100% 100%, rgba(150,70,240,0.24), transparent 72%),
    radial-gradient(50% 45% at 55% 45%, rgba(200,70,210,0.12), transparent 75%);
  background-repeat: no-repeat;
}
