.desktop-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.scene-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 1.2s ease, transform 1.2s ease;
}

.scene-layer.active {
  opacity: 1;
  visibility: visible;
}

.space-scene {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 230, 170, 0.08), transparent 20%),
    radial-gradient(circle at 15% 30%, rgba(82, 108, 154, 0.16), transparent 26%),
    radial-gradient(circle at 85% 18%, rgba(175, 137, 73, 0.11), transparent 22%),
    linear-gradient(180deg, rgba(2, 4, 8, 0.1), rgba(2, 4, 8, 0.42));
}

.starfield,
.starfield::before,
.starfield::after {
  position: absolute;
  inset: 0;
  content: "";
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(245, 214, 159, 0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(182, 196, 219, 0.85) 0 1px, transparent 1.7px);
  background-size: 220px 220px, 300px 300px, 420px 420px;
  background-position: 0 0, 40px 90px, 120px 180px;
  opacity: 0.55;
  animation: drift-stars 40s linear infinite;
}

.starfield::before {
  opacity: 0.32;
  transform: scale(1.05);
  animation-duration: 65s;
}

.starfield::after {
  opacity: 0.18;
  transform: scale(1.12);
  animation-duration: 88s;
}

.nebula {
  position: absolute;
  border-radius: 999px;
  filter: blur(22px);
  opacity: 0.35;
}

.nebula-a {
  width: 34vw;
  height: 34vw;
  left: -6vw;
  top: 8vh;
  background: radial-gradient(circle, rgba(86, 118, 170, 0.28), transparent 68%);
  animation: pulse-nebula 12s ease-in-out infinite;
}

.nebula-b {
  width: 28vw;
  height: 28vw;
  right: -4vw;
  top: 5vh;
  background: radial-gradient(circle, rgba(180, 142, 76, 0.22), transparent 70%);
  animation: pulse-nebula 16s ease-in-out infinite reverse;
}

.earth-horizon {
  position: absolute;
  left: 50%;
  bottom: -16vh;
  width: 72vw;
  height: 46vh;
  transform: translateX(-50%);
}

.earth-core,
.earth-glow,
.earth-atmosphere {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
}

.earth-core {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 18%, rgba(81, 149, 224, 0.88), transparent 42%),
    linear-gradient(180deg, rgba(6, 25, 44, 0.85), rgba(1, 4, 8, 1));
  box-shadow: 0 -30px 100px rgba(90, 152, 237, 0.18);
}

.earth-atmosphere {
  width: 102%;
  height: 102%;
  box-shadow: 0 -26px 70px rgba(116, 176, 255, 0.34);
  opacity: 0.75;
}

.earth-glow {
  width: 114%;
  height: 110%;
  background: radial-gradient(circle at 50% 0%, rgba(123, 184, 255, 0.38), transparent 62%);
  filter: blur(18px);
  opacity: 0.72;
}

.ogd-mother {
  position: absolute;
  right: 9vw;
  bottom: 18vh;
  width: min(34vw, 440px);
  height: min(48vh, 520px);
}

.mother-halo,
.mother-shield,
.mother-core,
.mother-crown,
.mother-wings {
  position: absolute;
  display: block;
}

.mother-halo {
  inset: 2% 10% 18% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 210, 145, 0.26), rgba(64, 96, 142, 0.08) 56%, transparent 74%);
  filter: blur(16px);
  animation: mother-glow 7s ease-in-out infinite;
}

.mother-core {
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: "Orbitron", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: #fff4da;
  background: radial-gradient(circle, rgba(255,245,220,0.82), rgba(164, 140, 83, 0.22) 55%, rgba(10, 18, 34, 0.96) 100%);
  box-shadow: 0 0 34px rgba(242, 208, 142, 0.34);
}

.mother-crown {
  left: 50%;
  top: 1%;
  width: 150px;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 72%, rgba(243, 214, 155, 0.32), transparent 48%);
  clip-path: polygon(50% 0%, 61% 18%, 73% 7%, 81% 26%, 92% 18%, 86% 42%, 100% 49%, 80% 56%, 72% 88%, 50% 64%, 28% 88%, 20% 56%, 0% 49%, 14% 42%, 8% 18%, 19% 26%, 27% 7%, 39% 18%);
  opacity: 0.9;
}

.mother-shield {
  left: 50%;
  top: 22%;
  width: 56%;
  height: 52%;
  transform: translateX(-50%);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 32%, rgba(255,255,255,0.16), transparent 34%),
    linear-gradient(180deg, rgba(244, 219, 163, 0.26), rgba(68, 105, 161, 0.08) 52%, transparent 100%);
  border: 1px solid rgba(241, 214, 159, 0.22);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.08), 0 0 40px rgba(147, 189, 255, 0.12);
}

.mother-wings {
  top: 20%;
  width: 44%;
  height: 52%;
  background: linear-gradient(180deg, rgba(246, 225, 177, 0.24), rgba(76, 103, 153, 0.06));
  filter: blur(0.2px);
  opacity: 0.84;
}

.wing-left {
  left: 0;
  clip-path: polygon(100% 0%, 65% 12%, 42% 24%, 19% 38%, 0% 54%, 12% 70%, 26% 86%, 54% 100%, 100% 78%);
}

.wing-right {
  right: 0;
  clip-path: polygon(0% 0%, 35% 12%, 58% 24%, 81% 38%, 100% 54%, 88% 70%, 74% 86%, 46% 100%, 0% 78%);
}

.space-fleet {
  position: absolute;
  top: 18vh;
  width: 22vw;
  min-width: 220px;
  height: 24vh;
}

.fleet-left { left: 4vw; }
.fleet-right { right: 4vw; transform: scaleX(-1); }

.ship {
  position: absolute;
  display: block;
  width: 96px;
  height: 28px;
  border-radius: 24px 6px 18px 18px;
  background: linear-gradient(90deg, rgba(239, 243, 255, 0.14), rgba(154, 174, 205, 0.9), rgba(41, 52, 73, 0.9));
  box-shadow: 0 0 18px rgba(116, 171, 255, 0.18);
}

.ship::before,
.ship::after {
  content: "";
  position: absolute;
  display: block;
}

.ship::before {
  left: 68%;
  top: -8px;
  width: 32px;
  height: 14px;
  border-radius: 30px 30px 8px 8px;
  background: rgba(231, 240, 255, 0.78);
}

.ship::after {
  left: -28px;
  top: 10px;
  width: 26px;
  height: 6px;
  background: linear-gradient(90deg, rgba(255, 207, 117, 0.86), transparent);
}

.ship-a { top: 0; left: 0; animation: ship-hover 10s ease-in-out infinite; }
.ship-b { top: 28%; left: 26%; animation: ship-hover 13s ease-in-out infinite reverse; }
.ship-c { top: 58%; left: 12%; animation: ship-hover 9s ease-in-out infinite; }
.ship-d { top: 5%; left: 8%; animation: ship-hover 11s ease-in-out infinite reverse; }
.ship-e { top: 35%; left: 34%; animation: ship-hover 14s ease-in-out infinite; }
.ship-f { top: 64%; left: 18%; animation: ship-hover 12s ease-in-out infinite reverse; }

.battle-beams .beam {
  position: absolute;
  display: block;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 222, 158, 0.84), transparent);
  filter: blur(0.1px);
  opacity: 0;
}

.beam-a { left: 20vw; top: 24vh; width: 26vw; animation: beam-fire 6s linear infinite; }
.beam-b { right: 18vw; top: 30vh; width: 22vw; animation: beam-fire 7.4s linear infinite 1.1s; transform: rotate(4deg); }
.beam-c { left: 28vw; top: 36vh; width: 18vw; animation: beam-fire 8.2s linear infinite 2s; transform: rotate(-6deg); }

.scene-hud {
  position: absolute;
  left: 5vw;
  bottom: calc(var(--taskbar-h) + 28px);
  width: min(36vw, 560px);
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(5, 9, 16, 0.44);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

.scene-kicker {
  margin: 0 0 10px;
  font-family: "Orbitron", sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 220, 173, 0.92);
}

.scene-hud h2,
.scene-hud p,
.tournament-hud h2,
.tournament-hud p {
  margin: 0;
}

.scene-hud h2 {
  margin-bottom: 12px;
  font-size: clamp(1.3rem, 2vw, 2rem);
}

.scene-hud p + p {
  margin-top: 8px;
}

.scene-countdown {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.08em;
}

@keyframes drift-stars {
  from { transform: translateY(0); }
  to { transform: translateY(-60px); }
}

@keyframes mother-glow {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

@keyframes pulse-nebula {
  0%, 100% { transform: scale(1); opacity: 0.28; }
  50% { transform: scale(1.1); opacity: 0.4; }
}

@keyframes ship-hover {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(14px, -10px, 0); }
}

@keyframes beam-fire {
  0%, 72%, 100% { opacity: 0; transform: scaleX(0.65); }
  8%, 14% { opacity: 0.8; transform: scaleX(1); }
  20% { opacity: 0.12; }
}

@media (max-width: 1180px) {
  .scene-hud {
    width: min(52vw, 540px);
  }
  .ogd-mother {
    right: 5vw;
    width: min(40vw, 360px);
  }
}

@media (max-width: 900px) {
  .desktop-scene {
    position: absolute;
    min-height: 100%;
  }
  .scene-hud {
    left: 16px;
    right: 16px;
    width: auto;
    bottom: calc(var(--taskbar-h) + 18px);
  }
  .ogd-mother,
  .space-fleet {
    opacity: 0.58;
  }
  .earth-horizon {
    width: 120vw;
  }
}