/* ===== Cinematic / overlay screens ===== */
.overlay {
  position: absolute; inset: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  opacity: 0; pointer-events: none;
  transition: opacity 1.2s;
}
.overlay.visible { opacity: 1; pointer-events: auto; }
.overlay.fast { transition: opacity 0.4s; }

#intro-cinematic {
  background: radial-gradient(ellipse at center, #050810 0%, #000 70%);
}
#intro-stars {
  position: absolute; inset: 0;
}
#intro-content {
  position: relative; z-index: 2;
  width: min(680px, 92vw);
  padding: 24px;
}
#comms-box {
  border: 1px solid #44ffaa;
  background: rgba(0,30,20,0.7);
  padding: 22px 26px;
  box-shadow: 0 0 30px rgba(68,255,170,0.25), inset 0 0 30px rgba(68,255,170,0.08);
  position: relative;
}
#comms-box::before {
  content: '◆ COMMS LINK ACTIVE ◆';
  position: absolute; top: -10px; left: 20px;
  background: #000;
  padding: 0 10px;
  color: #44ffaa;
  font-size: 11px;
  letter-spacing: 0.2em;
}
#comms-text {
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(13px, 2.2vw, 16px);
  line-height: 1.7;
  color: #aaffdd;
  white-space: pre-wrap;
  min-height: 320px;
  text-shadow: 0 0 6px rgba(170,255,221,0.6);
}
#comms-text .cursor {
  display: inline-block;
  background: #44ffaa;
  width: 0.6em; height: 1em;
  vertical-align: text-bottom;
  animation: blink 0.7s steps(2) infinite;
}
#comms-text .emphasis { color: #ff8866; font-weight: bold; }
#comms-text .warn { color: #ffcc44; }
.skip-btn, .action-btn {
  margin-top: 18px;
  background: transparent;
  border: 1px solid #44ffaa;
  color: #44ffaa;
  padding: 10px 22px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  letter-spacing: 0.25em;
  cursor: pointer;
  transition: all 0.2s;
  text-shadow: 0 0 6px currentColor;
}
.skip-btn:hover, .action-btn:hover {
  background: rgba(68,255,170,0.15);
  box-shadow: 0 0 16px rgba(68,255,170,0.5);
}
.skip-btn { opacity: 0.7; font-size: 10px; padding: 6px 14px; }

/* ===== Title / Play Again ===== */
#title-screen, #endgame-screen {
  background: radial-gradient(ellipse at center, #0a1a25 0%, #000 70%);
  flex-direction: column;
  text-align: center;
}
#title-screen h1 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(40px, 8vw, 86px);
  letter-spacing: 0.15em;
  color: #fff;
  text-shadow:
    0 0 20px #44ffaa,
    0 0 40px #44ffaa,
    0 0 6px #fff;
  margin-bottom: 8px;
}
#title-screen .subtitle {
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 2.5vw, 22px);
  color: #ff8866;
  letter-spacing: 0.3em;
  margin-bottom: 50px;
  text-shadow: 0 0 10px currentColor;
}
#title-screen .start-btn {
  font-size: 14px; padding: 14px 36px;
  border-width: 2px;
}
#title-screen .credits {
  position: absolute; bottom: 24px;
  font-size: 10px;
  color: rgba(170,255,221,0.4);
  letter-spacing: 0.2em;
}

#endgame-message {
  font-family: 'Share Tech Mono', monospace;
  color: #aaffdd;
  font-size: clamp(14px, 2.4vw, 18px);
  line-height: 2;
  white-space: pre-wrap;
  text-shadow: 0 0 8px rgba(170,255,221,0.5);
  margin-bottom: 30px;
}
#playagain-btn {
  opacity: 0;
  transition: opacity 1.4s 1s;
}
#playagain-btn.visible { opacity: 1; }