/* 明日之书 · 星空夜空背景（与 decrypt 页一致） */
:root {
  --sky-bg-top: #1e2a3e;
  --sky-bg-mid: #141c28;
  --sky-bg-bottom: #0a0e14;
}

body.sky-bg {
  background: linear-gradient(
    180deg,
    var(--sky-bg-top) 0%,
    var(--sky-bg-mid) 45%,
    var(--sky-bg-bottom) 100%
  );
}

.sky-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#starCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cosmos-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0;
  animation: nebulaDrift 28s ease-in-out infinite;
}

.nebula-a {
  width: min(72vw, 520px);
  height: min(52vw, 380px);
  left: -12%;
  bottom: 8%;
  background: radial-gradient(
    ellipse at 40% 50%,
    rgba(107, 92, 168, 0.22) 0%,
    rgba(75, 62, 120, 0.1) 45%,
    transparent 72%
  );
  opacity: 0.75;
  animation-delay: 0s;
}

.nebula-b {
  width: min(58vw, 420px);
  height: min(42vw, 300px);
  right: -8%;
  top: 32%;
  background: radial-gradient(
    ellipse at 55% 45%,
    rgba(61, 120, 158, 0.16) 0%,
    rgba(45, 90, 130, 0.08) 50%,
    transparent 70%
  );
  opacity: 0.65;
  animation-delay: -9s;
}

.nebula-c {
  width: min(44vw, 320px);
  height: min(36vw, 260px);
  left: 28%;
  top: 12%;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(183, 148, 246, 0.12) 0%,
    rgba(120, 90, 180, 0.05) 55%,
    transparent 75%
  );
  opacity: 0.55;
  animation-delay: -16s;
}

.cosmos-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 85% 70% at 50% 45%,
    transparent 35%,
    rgba(5, 8, 14, 0.45) 100%
  );
  opacity: 0.7;
}

.milky-band {
  position: absolute;
  inset: -10% -20%;
  background: linear-gradient(
    125deg,
    transparent 0%,
    rgba(107, 124, 184, 0.06) 38%,
    rgba(155, 176, 216, 0.11) 50%,
    rgba(130, 110, 180, 0.05) 58%,
    transparent 100%
  );
  transform: rotate(-8deg);
  opacity: 0.9;
  animation: milkyShimmer 18s ease-in-out infinite;
}

.milky-band::after {
  content: "";
  position: absolute;
  inset: 15% 20%;
  background: radial-gradient(
    ellipse at 60% 40%,
    rgba(200, 210, 255, 0.04) 0%,
    transparent 65%
  );
  filter: blur(20px);
}

.moon {
  position: absolute;
  top: clamp(1.2rem, 4vw, 2.5rem);
  right: clamp(1rem, 5vw, 3rem);
  width: clamp(72px, 14vw, 108px);
  height: clamp(72px, 14vw, 108px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 38%,
    #fffde7 0%,
    #f5f0d0 35%,
    rgba(255, 253, 231, 0.25) 70%,
    transparent 100%
  );
  box-shadow:
    0 0 40px rgba(255, 253, 231, 0.35),
    0 0 100px rgba(255, 255, 255, 0.12);
  animation: moonGlow 6s ease-in-out infinite;
}

.moon::after {
  content: "";
  position: absolute;
  inset: 12% 18% 28% 8%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 60% 40%,
    rgba(30, 42, 62, 0.12) 0%,
    transparent 70%
  );
}

@keyframes nebulaDrift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(12px, -8px) scale(1.04);
  }
}

@keyframes milkyShimmer {
  0%,
  100% {
    opacity: 0.82;
  }
  50% {
    opacity: 0.95;
  }
}

@keyframes moonGlow {
  0%,
  100% {
    filter: brightness(1);
    transform: scale(1);
  }
  50% {
    filter: brightness(1.08);
    transform: scale(1.02);
  }
}