/* Generated by tools/generate_backgrounds.py: painted background classes (WebP over a gradient fallback). */
.bg { position: relative; overflow: hidden; background-color: #0d0f18; }
.bg::before, .bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

.bg-cosmic {
  background:
    url("assets/backgrounds/bg-cosmic.webp") center top / cover no-repeat,
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.85) 1px, transparent 2px),
    radial-gradient(circle at 37% 72%, rgba(255,255,255,0.85) 0.8px, transparent 1.8px),
    radial-gradient(circle at 64% 33%, rgba(255,255,255,0.85) 1.2px, transparent 2.2px),
    radial-gradient(circle at 83% 81%, rgba(255,255,255,0.85) 0.8px, transparent 1.8px),
    radial-gradient(circle at 91% 12%, rgba(255,255,255,0.85) 1px, transparent 2px),
    radial-gradient(circle at 22% 55%, rgba(255,255,255,0.85) 0.7px, transparent 1.7px),
    radial-gradient(circle at 55% 90%, rgba(255,255,255,0.85) 0.9px, transparent 1.9px),
    radial-gradient(circle at 30% 40%, rgba(190,210,255,0.6) 0.7px, transparent 1.7px),
    radial-gradient(circle at 75% 15%, rgba(190,210,255,0.6) 0.6px, transparent 1.6px),
    radial-gradient(circle at 50% 80%, rgba(190,210,255,0.6) 0.8px, transparent 1.8px),
    radial-gradient(ellipse 60% 45% at 25% 30%, rgba(120,60,200,0.35), transparent 70%),
    radial-gradient(ellipse 55% 40% at 78% 65%, rgba(40,150,190,0.28), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,200,90,0.10), transparent 70%),
    linear-gradient(180deg, #120f2a 0%, #0d0f18 100%);
  background-size: cover, 180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px, 180px 180px, 97px 97px, 97px 97px, 97px 97px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
.bg-act0 {
  background: url("assets/backgrounds/bg-act0.webp") center top / cover no-repeat, linear-gradient(180deg, transparent 70%, rgba(107,112,120,0.55) 70%, rgba(78,83,91,0.55) 82%, transparent 82%), radial-gradient(ellipse at 50% 0%, #4f8a5b, #2b4a37 45%, #0d0f18);
}
.bg-act1 {
  background: url("assets/backgrounds/bg-act1.webp") center top / cover no-repeat, linear-gradient(180deg, #1f5a3c 0%, #0f2e22 45%, #0d0f18 100%);
}
.bg-act2 {
  background: url("assets/backgrounds/bg-act2.webp") center top / cover no-repeat, linear-gradient(180deg, #1f4f73 0%, #0b253a 45%, #0d0f18 100%);
}
.bg-act3 {
  background: url("assets/backgrounds/bg-act3.webp") center top / cover no-repeat, linear-gradient(180deg, #6b1a12 0%, #3d0c0c 45%, #0d0f18 100%);
}
.bg-act4 {
  background: url("assets/backgrounds/bg-act4.webp") center top / cover no-repeat, linear-gradient(180deg, #2c3a58 0%, #162032 45%, #0d0f18 100%);
}
.bg-act5 {
  background: url("assets/backgrounds/bg-act5.webp") center top / cover no-repeat, linear-gradient(180deg, #3e1460 0%, #240a38 45%, #0d0f18 100%);
}
.bg-secret {
  background: url("assets/backgrounds/bg-secret.webp") center top / cover no-repeat, linear-gradient(180deg, #7a5a10 0%, #4a3505 40%, #050508 100%);
}
.bg-endless {
  background: url("assets/backgrounds/bg-endless.webp") center top / cover no-repeat, linear-gradient(180deg, #1c2352 0%, #131a3a 45%, #0d0f18 100%);
}
.bg-training {
  background: url("assets/backgrounds/bg-training.webp") center top / cover no-repeat, linear-gradient(180deg, #3b6f78 0%, #26465a 45%, #0d0f18 100%);
}
.bg-akashic {
  background: url("assets/backgrounds/bg-akashic.webp") center top / cover no-repeat, linear-gradient(180deg, #5a3a22 0%, #2e1d18 45%, #0d0f18 100%);
}