/* The title page keeps VT323 + Press Start 2P (per user: "the front menu
   page is good for now"). base.css defaults --font-ui/--font-prose to
   SF Mono; override them here to preserve the retro splash vibe. */
body {
  --font-ui:    "VT323", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  --font-prose: "VT323", ui-monospace, Menlo, Consolas, "Courier New", monospace;
  font-size: 18px;
}

/* ---------- Title screen ---------- */
.stage {
  position: fixed; inset: 0;
  overflow: hidden;
}

.bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05) brightness(0.78);
  transform: scale(1.05);
}

.vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.9) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

/* Press-to-start splash */
.splash {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 50;
  background: rgba(0,0,0,0.55);
  transition: opacity 0.8s ease;
}
.splash.hidden { opacity: 0; pointer-events: none; }

.splash-inner {
  text-align: center;
  transform: translateY(-2vh);
}

.press-start {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-weight: 400;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.3em;
  text-shadow: 2px 2px 0 #000, 0 0 14px var(--gold-glow), 0 0 28px var(--gold-glow);
}

/* Left-side vertical letter column ---------------------------------- */
.letter-column {
  position: absolute;
  left: 3.2vw;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6vh;
  z-index: 45;
  pointer-events: none;
  user-select: none;
}
.letter-column img {
  display: block;
  width: auto;
  height: 8.2vh;
  max-height: 68px;
  min-height: 34px;
  image-rendering: pixelated;
  transform-origin: center;
  /* Hidden until Press Start */
  opacity: 0;
  filter: blur(10px) drop-shadow(2px 2px 0 rgba(0,0,0,0.9));
  transform: scale(0.94);
}

/* Reveal all letters together, then begin a staggered pulse wave. */
body.started .letter-column img {
  animation:
    letterDissolveIn 900ms cubic-bezier(.2,.7,.2,1) 100ms forwards,
    letterPulse 3.6s ease-in-out 1050ms infinite;
}
body.started .letter-column img:nth-child(1) { animation-delay: 100ms, 1050ms; }
body.started .letter-column img:nth-child(2) { animation-delay: 100ms, 1230ms; }
body.started .letter-column img:nth-child(3) { animation-delay: 100ms, 1410ms; }
body.started .letter-column img:nth-child(4) { animation-delay: 100ms, 1590ms; }
body.started .letter-column img:nth-child(5) { animation-delay: 100ms, 1770ms; }
body.started .letter-column img:nth-child(6) { animation-delay: 100ms, 1950ms; }
body.started .letter-column img:nth-child(7) { animation-delay: 100ms, 2130ms; }
body.started .letter-column img:nth-child(8) { animation-delay: 100ms, 2310ms; }

@keyframes letterDissolveIn {
  0%   { opacity: 0; filter: blur(10px) drop-shadow(2px 2px 0 rgba(0,0,0,0.9)); transform: scale(0.94); }
  60%  { opacity: 0.9; filter: blur(1.5px) drop-shadow(2px 2px 0 rgba(0,0,0,0.9)) drop-shadow(0 0 10px var(--gold-glow)); }
  100% { opacity: 0.92; filter: blur(0) drop-shadow(2px 2px 0 rgba(0,0,0,0.9)) drop-shadow(0 0 6px var(--gold-glow)); transform: scale(1); }
}

@keyframes letterPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.82;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.9)) drop-shadow(0 0 4px var(--gold-glow));
  }
  50% {
    transform: scale(1.045);
    opacity: 1;
    filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.9)) drop-shadow(0 0 14px var(--gold-glow));
  }
}

@media (max-width: 640px) {
  .letter-column { left: 1.5vw; gap: 0.3vh; }
  .letter-column img { height: 6.2vh; min-height: 22px; }
}

/* Title + menu */
.title-ui {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  padding: 4vh 6vw;
  z-index: 40;
  pointer-events: none;
}
.title-ui > * { pointer-events: auto; }

.brand {
  align-self: start;
  justify-self: center;
  text-align: center;
  margin-top: 2vh;
}
.brand .sub {
  /* Only Press Start 2P usage on the site — reserved for this tagline. */
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.35em;
  line-height: 1.9;
  color: var(--gold);
  text-shadow: 2px 2px 0 #000, 0 0 18px var(--gold-glow);
  text-transform: uppercase;
}

.menu {
  align-self: end;
  justify-self: center;
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 8vh;
  min-width: 280px;
  align-items: stretch;
}

.menu .pixel-btn { width: 100%; }

/* ---- Initial hidden state for brand + menu; revealed after Press Start ---- */
.title-ui .brand,
.title-ui .menu .pixel-btn {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: none;
}

.title-ui[data-open="1"] .brand,
.title-ui[data-open="1"] .menu .pixel-btn {
  animation: dissolveIn 900ms cubic-bezier(.2,.7,.2,1) forwards;
}

.title-ui[data-open="1"] .menu .pixel-btn { pointer-events: auto; }

/* Sequence: letters reveal first (~100-1000ms), then brand, then buttons */
.title-ui[data-open="1"] .brand                        { animation-delay: 1100ms; }
.title-ui[data-open="1"] .menu .pixel-btn:nth-child(1) { animation-delay: 1600ms; }
.title-ui[data-open="1"] .menu .pixel-btn:nth-child(2) { animation-delay: 1800ms; }
.title-ui[data-open="1"] .menu .pixel-btn:nth-child(3) { animation-delay: 2000ms; }

@keyframes dissolveIn {
  0%   { opacity: 0; filter: blur(10px); transform: translateY(10px) scale(0.96); }
  55%  { opacity: 0.85; filter: blur(1.5px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

.menu .pixel-btn::before {
  content: "▶";
  position: absolute; left: 10px; top: 50%;
  transform: translate(-12px, -50%);
  color: var(--gold);
  opacity: 0;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.menu .pixel-btn:hover::before,
.menu .pixel-btn:focus-visible::before {
  transform: translate(0, -50%);
  opacity: 1;
}

.footer {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center;
  color: var(--ink-dim);
  font-size: 9px;
  letter-spacing: 0.3em;
  z-index: 30;
  text-shadow: 1px 1px 0 #000;
}

/* Title-screen modal tweaks (base modal styles live in base.css) */
.modal .row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.modal input[type=range] { flex: 1; }

.storyline p { margin: 0 0 14px; }