/* ELYSIUM TECHNOLOGIES — intro experience
   Fullscreen, scroll/zoom locked stage. All narrative text is a DOM overlay
   layered above the canvas (added in a later step). */

@font-face {
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/orbitron-latin-wght-normal.woff2") format("woff2");
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a0f;
  /* Lock scroll/zoom — the reference experience was mobile-locked. */
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Terminal/text overlay container. */
#overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

/* Top-centered terminal panel above Jax. Color / glow / font are applied from
   config (TERMINAL) in terminal.js; layout lives here. */
#terminal {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  max-width: min(92%, 780px);
  text-align: center;
  letter-spacing: 1px;
  font-size: clamp(13px, 2.3vw, 21px);
  line-height: 1.75;
  text-transform: uppercase;
}

/* Semi-transparent black backing (only while a wall is showing) so text reads
   over Jax/targets. The large, soft shadow feathers the edge so it blends in
   rather than being a hard box. */
#terminal.has-content {
  padding: 0.7em 1.2em;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 32px 22px rgba(0, 0, 0, 0.72);
}

.term-line {
  white-space: pre-wrap;
  min-height: 1.75em;
}

/* Final beat: centered ELYSIUM logo (SVG or text fallback). Filter/width/glow
   are applied from config (REBOOT) in main.js; positioning + fade live here. */
#logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
#logo.show {
  opacity: 1;
}
.logo-fallback {
  font-family: "Orbitron", monospace;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(18px, 5vw, 46px);
}

/* Clickable choices in a prompt line. Desktop: compact "Y/N". */
.yn {
  pointer-events: auto;
  cursor: pointer;
  font-weight: 700;
  transition: opacity 0.15s ease;
}
.yn:hover {
  opacity: 0.6;
}
.yn-long {
  display: none; /* desktop shows the short form */
}

/* Touch devices: show spaced, bordered "YES" / "NO" with large tap targets. */
@media (pointer: coarse) {
  .yn-short,
  .yn-sep {
    display: none;
  }
  .yn-long {
    display: inline;
  }
  .yn {
    display: inline-block;
    margin: 0.4em 0.6em;
    padding: 0.4em 1em;
    border: 1px solid currentColor;
    border-radius: 8px;
  }
}

/* Faint "press any key" hint shown when a wall is waiting to advance. */
.term-hint {
  margin-top: 1.6em;
  font-size: 0.62em;
  opacity: 0.5;
  letter-spacing: 3px;
  animation: term-blink 1.2s steps(1) infinite;
}

/* Blinking caret on the line currently typing. */
.term-caret::after {
  content: "▌";
  margin-left: 1px;
  animation: term-blink 1s steps(1) infinite;
}

@keyframes term-blink {
  50% {
    opacity: 0;
  }
}