/* ---------- Starlight Galaxy (parallax stars + comets) ---------- */
:root {
  --sg-bg-a: #040814;  /* deep space */
  --sg-bg-b: #111827;  /* space blue */
  --sg-star: rgba(255,255,255,0.9);
  --sg-glow: #93c5fd;  /* blue glow */
  --sg-text: #e5f0ff;
  --sg-btn: rgba(15, 23, 42, 0.5);
  --sg-btn-hover: rgba(15, 23, 42, 0.65);
  --sg-border: rgba(255,255,255,0.18);
}

body.theme-starlight-galaxy {
  color: var(--sg-text);
  background:
    radial-gradient(1100px 700px at 70% -10%, rgba(147,197,253,0.18), transparent 65%),
    linear-gradient(135deg, var(--sg-bg-a), var(--sg-bg-b));
  overflow-x: hidden;
}

#theme-background { position: fixed; inset:0; z-index:0; pointer-events:none; }

/* Star layers (parallax via different speeds) */
.sg-stars, .sg-stars2, .sg-stars3 {
  position: absolute; inset:0;
  background-repeat: repeat;
  background-size: 600px 600px;
  opacity: .85;
}

.sg-stars     { background-image: radial-gradient(1px 1px at 20px 30px, var(--sg-star), transparent 40%),
                                     radial-gradient(1px 1px at 100px 80px, var(--sg-star), transparent 40%),
                                     radial-gradient(1px 1px at 200px 150px, var(--sg-star), transparent 40%); }
.sg-stars2    { background-image: radial-gradient(1px 1px at 50px 120px, var(--sg-star), transparent 40%),
                                     radial-gradient(1px 1px at 220px 90px, var(--sg-star), transparent 40%),
                                     radial-gradient(1px 1px at 320px 40px, var(--sg-star), transparent 40%); opacity: .65; }
.sg-stars3    { background-image: radial-gradient(1px 1px at 70px 60px, var(--sg-star), transparent 40%),
                                     radial-gradient(1px 1px at 260px 200px, var(--sg-star), transparent 40%),
                                     radial-gradient(1px 1px at 420px 340px, var(--sg-star), transparent 40%); opacity: .45; }

.sg-stars { animation: sg-pan 120s linear infinite; }
.sg-stars2 { animation: sg-pan 200s linear infinite; }
.sg-stars3 { animation: sg-pan 300s linear infinite; }

@keyframes sg-pan {
  from { transform: translateY(0) }
  to   { transform: translateY(-600px) }
}

/* Nebula glow bands */
.sg-nebula, .sg-nebula2 {
  position: absolute; inset:0;
  background:
    radial-gradient(600px 400px at 80% 10%, rgba(147,197,253,0.25), transparent 70%),
    radial-gradient(700px 500px at 10% 80%, rgba(186,230,253,0.15), transparent 75%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: .5;
}
.sg-nebula2 { opacity: .3; transform: scaleX(-1); }

/* Shooting stars (DOM via JS) */
.sg-meteor {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--sg-star);
  box-shadow: 0 0 12px var(--sg-glow), 0 0 20px rgba(147,197,253,0.7);
  transform: translateZ(0);
  opacity: 0;
}
.sg-meteor::after {
  content: ""; position: absolute; left: -120px; top: 0; height: 2px; width: 120px;
  background: linear-gradient(90deg, transparent, rgba(147,197,253,0.9));
  filter: blur(1px);
  border-radius: 2px;
}

/* Text & Buttons */
body.theme-starlight-galaxy .theme-title,
body.theme-starlight-galaxy .theme-description,
body.theme-starlight-galaxy .theme-footer-text {
  color: var(--sg-text);
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
body.theme-starlight-galaxy .theme-button-bg {
  background-color: var(--sg-btn);
  border: 1px solid var(--sg-border);
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.35);
}
body.theme-starlight-galaxy .theme-button-bg:hover {
  background-color: var(--sg-btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.45);
}
body.theme-starlight-galaxy .theme-button-text { color: var(--sg-text); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .sg-stars, .sg-stars2, .sg-stars3, .sg-nebula, .sg-nebula2 { animation: none !important; }
}