/* ═══════════════════════════════════════════════════════════════════════════
   INTRO — Tutorial screen, language toggle, start button
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tutorial intro */
#intro {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", monospace;
}
#intro h1 {
  font-size: clamp(16px, 3vw, 28px);
  color: var(--neon-cyan);
  text-shadow: 0 0 20px var(--neon-cyan);
  margin-bottom: 16px;
  animation: textGlow 2s infinite alternate;
}
@keyframes textGlow {
  0% {
    text-shadow: 0 0 10px var(--neon-cyan);
  }
  100% {
    text-shadow:
      0 0 30px var(--neon-cyan),
      0 0 60px var(--neon-cyan);
  }
}
#intro p {
  font-size: 12px;
  color: #888;
  margin: 6px 0;
  line-height: 2;
}

/* Language toggle button (intro screen) */
#lang-btn {
  margin-top: 24px;
  padding: 8px 18px;
  font-family: "Press Start 2P", monospace;
  font-size: 11px;
  background: none;
  border: 2px solid var(--neon-yellow);
  color: var(--neon-yellow);
  cursor: none;
  box-shadow: 0 0 12px var(--neon-yellow);
  transition: all 0.2s;
}
#lang-btn:hover {
  background: var(--neon-yellow);
  color: #000;
}

/* Start game button */
#start-btn {
  margin-top: 16px;
  padding: 12px 24px;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  background: none;
  border: 2px solid var(--neon-green);
  color: var(--neon-green);
  cursor: none;
  box-shadow: 0 0 15px var(--neon-green);
  animation: blink 1s infinite;
  transition: all 0.2s;
}
#start-btn:hover {
  background: var(--neon-green);
  color: #000;
}