/* ==========================================================================
   stellar-bg.css — Fond espace partagé (home, omt, game)
   Usage :  <div class="stellar-bg" aria-hidden="true">
              <div class="sb-glow sb-g1"></div>
              <div class="sb-glow sb-g2"></div>
              <div class="sb-glow sb-g3"></div>
              <div class="sb-stars sb-l1"></div>
              <div class="sb-stars sb-l2"></div>
              <div class="sb-stars sb-l3"></div>
              <div class="sb-stars sb-l4"></div>   <!-- couche colorée -->
              <div class="sb-nebula sb-n1"></div>
              <div class="sb-nebula sb-n2"></div>
              <div class="sb-shooting"></div>      <!-- conteneur étoiles filantes (JS) -->
            </div>
   ========================================================================== */

.stellar-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}

/* ---------- Glows colorées (gros halos flous qui dérivent) ---------- */
.stellar-bg .sb-glow {
  position: absolute; border-radius: 50%;
  filter: blur(140px); will-change: transform;
}
.stellar-bg .sb-g1 { width: 780px; height: 780px; background: #9369F7; opacity: 0.30; top: -10%; left: 5%;  animation: sbGlow1 28s ease-in-out infinite alternate; }
.stellar-bg .sb-g2 { width: 860px; height: 860px; background: #00B9FF; opacity: 0.22; top: 40%; right: -10%; animation: sbGlow2 36s ease-in-out infinite alternate; }
.stellar-bg .sb-g3 { width: 560px; height: 560px; background: #E2255B; opacity: 0.18; bottom: -10%; left: 35%; animation: sbGlow3 42s ease-in-out infinite alternate; }
@keyframes sbGlow1 { from { transform: translate(0,0); } to { transform: translate(120px, 80px); } }
@keyframes sbGlow2 { from { transform: translate(0,0); } to { transform: translate(-160px, -100px); } }
@keyframes sbGlow3 { from { transform: translate(0,0); } to { transform: translate(80px, -140px); } }

/* ---------- Nébuleuses (gros nuages colorés très flous, plus diffus que glow) ---------- */
.stellar-bg .sb-nebula {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0.18;
  mix-blend-mode: screen;
  will-change: transform;
}
.stellar-bg .sb-n1 {
  width: 480px; height: 320px;
  top: 18%; left: 22%;
  background: radial-gradient(ellipse, #FBBC04 0%, #E2255B 50%, transparent 80%);
  animation: sbNebula1 70s ease-in-out infinite alternate;
}
.stellar-bg .sb-n2 {
  width: 540px; height: 360px;
  bottom: 8%; right: 12%;
  background: radial-gradient(ellipse, #00B9FF 0%, #1fb87f 60%, transparent 85%);
  animation: sbNebula2 90s ease-in-out infinite alternate;
}
@keyframes sbNebula1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px, 40px) scale(1.15); } }
@keyframes sbNebula2 { from { transform: translate(0,0) scale(1); } to { transform: translate(80px, -50px) scale(1.1); } }

/* ---------- Étoiles — base commune ---------- */
.stellar-bg .sb-stars {
  position: absolute; inset: -10%;
  pointer-events: none;
}

/* Couche 1 — étoiles blanches denses (40+), tile 800px, dérive 90s */
.stellar-bg .sb-l1 {
  background-image:
    radial-gradient(1.5px 1.5px at 4% 8%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 8% 18%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 12% 38%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 22% 62%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 18% 92%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 28% 12%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 32% 36%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 38% 24%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 42% 46%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 46% 14%, #fff, transparent 65%),
    radial-gradient(2px 2px at 54% 78%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 58% 38%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 62% 6%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 64% 92%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 68% 14%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 72% 28%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 78% 54%, #fff, transparent 65%),
    radial-gradient(2px 2px at 84% 28%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 88% 86%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 91% 72%, #fff, transparent 65%),
    radial-gradient(2px 2px at 14% 82%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 96% 18%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 6% 48%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 26% 82%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 36% 8%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 48% 60%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 56% 22%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 66% 56%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 74% 88%, #fff, transparent 65%),
    radial-gradient(2px 2px at 82% 6%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 92% 42%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 2% 28%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 16% 48%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent 65%),
    radial-gradient(1.8px 1.8px at 44% 84%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 52% 4%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 70% 70%, #fff, transparent 65%),
    radial-gradient(2px 2px at 86% 64%, #fff, transparent 65%),
    radial-gradient(1.5px 1.5px at 98% 56%, #fff, transparent 65%);
  background-size: 800px 800px;
  opacity: 0.95;
  animation: sbDrift1 90s linear infinite, sbTwinkle 6s ease-in-out infinite;
  z-index: 1;
}

/* Couche 2 — étoiles teintées plus grosses (parallax moyen) */
.stellar-bg .sb-l2 {
  background-image:
    radial-gradient(2.2px 2.2px at 15% 35%, rgba(200,220,255,1), transparent 65%),
    radial-gradient(2.5px 2.5px at 28% 12%, rgba(210,230,255,0.95), transparent 65%),
    radial-gradient(2px 2px at 42% 78%, rgba(255,245,210,0.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 50% 70%, rgba(255,245,210,0.9), transparent 65%),
    radial-gradient(2px 2px at 60% 26%, rgba(200,220,255,0.95), transparent 65%),
    radial-gradient(2px 2px at 78% 22%, rgba(210,230,255,1), transparent 65%),
    radial-gradient(2.8px 2.8px at 32% 88%, rgba(255,235,210,0.9), transparent 65%),
    radial-gradient(2.2px 2.2px at 88% 56%, rgba(200,220,255,0.95), transparent 65%),
    radial-gradient(2.2px 2.2px at 8% 70%, rgba(255,235,210,0.95), transparent 65%),
    radial-gradient(2.4px 2.4px at 36% 42%, rgba(220,200,255,0.9), transparent 65%),
    radial-gradient(2.2px 2.2px at 64% 4%, rgba(255,250,220,0.9), transparent 65%),
    radial-gradient(2.6px 2.6px at 92% 80%, rgba(200,220,255,0.95), transparent 65%);
  background-size: 700px 700px;
  opacity: 0.9;
  animation: sbDrift2 130s linear infinite;
  z-index: 2;
}

/* Couche 3 — micro étoiles très lointaines (parallax ultra lent) */
.stellar-bg .sb-l3 {
  background-image:
    radial-gradient(1px 1px at 18% 6%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px at 36% 52%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px at 56% 16%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px at 76% 84%, rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1px 1px at 92% 32%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px at 24% 76%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px at 64% 60%, rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1px 1px at 12% 28%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1px 1px at 48% 94%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1px 1px at 88% 12%, rgba(255,255,255,0.75), transparent 55%);
  background-size: 400px 400px;
  opacity: 0.85;
  animation: sbDrift3 200s linear infinite;
  z-index: 1;
}

/* Couche 4 — étoiles COLORÉES (rouge / jaune / cyan / magenta / vert)
   Donnent l'impression d'un vrai ciel multispectral. Rares, plus brillantes. */
.stellar-bg .sb-l4 {
  background-image:
    radial-gradient(2.5px 2.5px at 8% 22%, rgba(255,120,80,0.95), transparent 60%),    /* orange chaud */
    radial-gradient(2.2px 2.2px at 24% 56%, rgba(80,180,255,0.95), transparent 60%),    /* cyan glacé */
    radial-gradient(2.8px 2.8px at 42% 18%, rgba(255,210,80,1), transparent 60%),       /* doré */
    radial-gradient(2.4px 2.4px at 58% 64%, rgba(220,120,255,0.9), transparent 60%),    /* magenta */
    radial-gradient(2.6px 2.6px at 72% 38%, rgba(80,255,180,0.85), transparent 60%),    /* vert céleste */
    radial-gradient(2.2px 2.2px at 86% 78%, rgba(255,90,140,0.9), transparent 60%),     /* rose vif */
    radial-gradient(2.8px 2.8px at 14% 80%, rgba(255,180,80,0.95), transparent 60%),    /* ambre */
    radial-gradient(2.4px 2.4px at 38% 88%, rgba(120,200,255,0.9), transparent 60%),    /* bleu pâle */
    radial-gradient(2.6px 2.6px at 64% 8%, rgba(255,140,200,0.9), transparent 60%),     /* rose pastel */
    radial-gradient(2.2px 2.2px at 92% 28%, rgba(180,255,120,0.85), transparent 60%);   /* vert anis */
  background-size: 900px 900px;
  opacity: 0.85;
  animation: sbDrift4 160s linear infinite, sbColorTwinkle 8s ease-in-out infinite;
  z-index: 2;
}

/* ---------- Animations dérive parallax (chaque couche à vitesse + direction différentes) ---------- */
@keyframes sbDrift1  { from { transform: translate(0,0); } to { transform: translate(-300px, -300px); } }
@keyframes sbDrift2  { from { transform: translate(0,0); } to { transform: translate(400px, -200px); } }
@keyframes sbDrift3  { from { transform: translate(0,0); } to { transform: translate(-200px, 250px); } }
@keyframes sbDrift4  { from { transform: translate(0,0); } to { transform: translate(280px, 320px); } }

/* Twinkle (souffle d'opacité) */
@keyframes sbTwinkle      { 0%,100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes sbColorTwinkle { 0%,100% { opacity: 0.6;  } 50% { opacity: 0.95; } }

/* ---------- Étoiles filantes — pur trait blanc qui traverse (placées par JS dans .sb-shooting) ---------- */
.stellar-bg .sb-shooting {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
}
.sb-shooting .shooter {
  position: absolute;
  width: 1.5px; height: 1.5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff, 0 0 12px rgba(255,255,255,0.6);
  opacity: 0;
}
/* La traînée : long trait blanc qui s'estompe */
.sb-shooting .shooter::before {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 120px; height: 1px;
  background: linear-gradient(to left,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.9) 8%,
    rgba(255,255,255,0.5) 35%,
    rgba(255,255,255,0.15) 70%,
    rgba(255,255,255,0) 100%);
  transform: translateY(-50%);
  border-radius: 1px;
  filter: blur(0.3px);
}
.sb-shooting .shooter.fire {
  animation: sbShoot 1.05s cubic-bezier(.45,.05,.55,.95) forwards;
}
@keyframes sbShoot {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(var(--angle, 18deg)) scale(0.4); }
  10%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0;   transform: translate(var(--dx, 600px), var(--dy, 220px)) rotate(var(--angle, 18deg)) scale(1); }
}