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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050508;
}

#deathstar {
  display: block;
  width: 100%;
  height: 100%;
}

.overlay {
  position: fixed;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
}

.caption {
  font-family: 'Orbitron', monospace;
  font-weight: 900;
  font-size: clamp(1.4rem, 5vw, 3.2rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #e8e8e8 30%,
    #cc2222 70%,
    #881111 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(200, 40, 40, 0.8))
          drop-shadow(0 0 24px rgba(200, 40, 40, 0.5))
          drop-shadow(0 0 48px rgba(120, 20, 20, 0.3));
  animation: fadeIn 2s ease-out forwards, pulse 4s ease-in-out 2s infinite;
  opacity: 0;
}

.tagline {
  font-family: 'Orbitron', monospace;
  font-weight: 400;
  font-size: clamp(0.6rem, 2vw, 0.85rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(180, 180, 190, 0.5);
  margin-top: 0.8em;
  animation: fadeIn 2.5s ease-out forwards;
  opacity: 0;
}

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

@keyframes pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(200, 40, 40, 0.8))
                       drop-shadow(0 0 24px rgba(200, 40, 40, 0.5)); }
  50%      { filter: drop-shadow(0 0 12px rgba(255, 60, 60, 1))
                       drop-shadow(0 0 36px rgba(200, 40, 40, 0.7))
                       drop-shadow(0 0 64px rgba(120, 20, 20, 0.4)); }
}