* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #020008;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Space Mono', monospace;
}

canvas#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.nebula-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 50% at 15% 65%, rgba(140, 20, 220, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 55% 55% at 85% 25%, rgba(20, 80, 200, 0.5) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 50% 85%, rgba(0, 160, 160, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 70% 70%, rgba(200, 40, 100, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 35% 35% at 30% 20%, rgba(60, 20, 180, 0.4) 0%, transparent 60%);
  animation: nebulaPulse 7s ease-in-out infinite alternate;
}

@keyframes nebulaPulse {
  0% {
    opacity: 0.75;
    filter: brightness(1);
  }
  100% {
    opacity: 1;
    filter: brightness(1.25);
  }
}

.center {
  position: relative;
  z-index: 10;
  text-align: center;
  user-select: none;
}

.title {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 4rem);
  letter-spacing: 0.12em;
  padding: 0 8vw;
  line-height: 1;
  background: linear-gradient(
    90deg,
    #bf80ff,
    #7eb8ff,
    #80ffe8,
    #ff80d4,
    #bf80ff,
    #7eb8ff,
    #80ffe8
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(180, 100, 255, 0.85)) drop-shadow(0 0 40px rgba(100, 160, 255, 0.6));
  animation: shimmer 12s linear infinite, glow 4s ease-in-out infinite alternate;
}

@keyframes shimmer {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 300% center;
  }
}

@keyframes glow {
  0% {
    filter: drop-shadow(0 0 14px rgba(180, 100, 255, 0.8)) drop-shadow(0 0 40px rgba(100, 160, 255, 0.5));
  }
  100% {
    filter: drop-shadow(0 0 28px rgba(220, 140, 255, 1)) drop-shadow(0 0 70px rgba(120, 200, 255, 0.8));
  }
}

.divider {
  margin: 1.5rem auto 0;
  width: 160px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(200, 120, 255, 0.9), transparent);
  box-shadow: 0 0 8px rgba(200, 120, 255, 0.6);
  animation: fadeIn 2s 1.5s ease both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.shooting-star {
  position: fixed;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  z-index: 2;
  box-shadow: 0 0 6px 2px rgba(180, 140, 255, 0.8);
  animation: shoot linear forwards;
}

@keyframes shoot {
  0% {
    transform: translate(0, 0) scaleX(1);
    opacity: 1;
  }
  100% {
    transform: translate(400px, 200px) scaleX(80);
    opacity: 0;
  }
}