/* WYRD landing page. Green CRT-terminal identity: near-black ground, phosphor-green
   accent (the HUD/link color), monospace as the UI voice, VT323 as the display face --
   the page should feel like the terminal-roguelike it fronts. Committed dark theme:
   a dungeon isn't light-mode. */

:root {
  /* Phosphor-green neutrals + the bright terminal-green accent. */
  --ink:        #9cc9a9;   /* primary text */
  --ink-dim:    #7fb894;   /* secondary text */
  --ink-faint:  #3f7350;   /* captions, notes, eyebrows */
  --ground:     #050805;   /* page ground, near-black with a green cast */
  --ground-2:   #080c08;   /* raised panels */
  --ground-3:   #0d130d;   /* cards */
  --line:       #17311f;   /* hairlines/borders */
  --line-2:     #234a30;   /* stronger borders */
  --gold:       #3ad16a;   /* the accent — bright terminal-green */
  --gold-deep:  #2f8a4e;   /* pressed/darker green */
  --ember:      #e8a54b;   /* danger/warning pop (semantic, not accent) */
  --living:     #4caf50;   /* the HP-green, used for the live-dot only */

  --font-body: 'IBM Plex Mono', monospace;
  --font-mono: 'IBM Plex Mono', monospace;
  --font-display: 'VT323', monospace;

  --wrap: 1080px;
  --step: clamp(1rem, 0.6rem + 1.4vw, 1.35rem);
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: #3ad16a; color: #04150a; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* CRT scanline overlay — landing page only (body.crt). play.html loads this
   stylesheet for its menu chrome but must NOT get the scanlines over the game. */
body.crt::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: #3ad16a; text-shadow: 0 0 12px rgba(58,209,106,.6); }
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: #0a120c;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.08em 0.4em;
  color: #d4f5dd;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* ---- HERO ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
#hero-scene {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: radial-gradient(120% 90% at 50% 20%, #0e1a10 0%, #050805 70%);
}
#hero-scene canvas { display: block; width: 100% !important; height: 100% !important; }

/* Scrim: darken the live scene so text is readable over it. */
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(5,8,5,0.55) 0%, rgba(5,8,5,0.35) 40%, rgba(5,8,5,0.85) 100%),
    radial-gradient(90% 70% at 50% 55%, transparent 40%, rgba(5,8,5,0.6) 100%);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: -1;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,0.7);
  pointer-events: none;
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1;
  background: linear-gradient(180deg, transparent, var(--ground));
  pointer-events: none;
}

.topbar {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px clamp(18px, 4vw, 44px);
  z-index: 2;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.32em;
  font-size: 1.3rem;
  color: var(--gold);
}
.brand-stage {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar-links {
  margin-left: auto;
  display: flex;
  gap: clamp(14px, 3vw, 30px);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.topbar-links a { color: var(--ink-dim); }
.topbar-links a:hover { color: var(--gold); }

/* ---- Shared sticky site header (every page EXCEPT the landing hero) ------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px clamp(18px, 4vw, 44px);
  background: rgba(5, 8, 5, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wordmark { font-size: 1.3rem; text-decoration: none; }
.site-header .wordmark:hover { color: #3ad16a; text-shadow: 0 0 12px rgba(58,209,106,.6); }
.site-header nav {
  margin-left: auto;
  display: flex;
  gap: clamp(14px, 3vw, 28px);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.site-header nav a { color: var(--ink-dim); }
.site-header nav a:hover { color: var(--gold); }
.site-header nav a[aria-current="page"] { color: var(--gold); }

.hero-content {
  position: relative;
  z-index: 2;
  margin: auto 0;
  padding: 0 clamp(18px, 6vw, 72px);
  max-width: 760px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 2rem + 9vw, 7.5rem);
  line-height: 0.98;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 1.2rem;
  text-shadow: 0 0 28px rgba(58,209,106,.55), 0 4px 24px rgba(0,0,0,0.7);
  color: var(--gold);
}
.hero-sub {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem);
  color: var(--ink-dim);
  max-width: 42ch;
  margin: 0 0 2rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.9);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* PLAY button: the page's single loud element. */
.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  color: #04150a;
  background: #3ad16a;
  border-radius: 6px;
  padding: 0.85em 1.5em;
  box-shadow: 0 0 26px rgba(58,209,106,.45);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.btn-play:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 0 36px rgba(58,209,106,.6);
  color: #04150a;
}
.btn-play:active { transform: translateY(0); }
.btn-play-glyph { font-size: 0.9em; }
.btn-play-note {
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  border-left: 1px solid rgba(4,21,10,0.35);
  padding-left: 0.7ch;
  margin-left: 0.3ch;
}
.btn-ghost {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  padding: 0.85em 0.4em;
}
.btn-ghost:hover { color: var(--gold); }

.hero-live {
  margin: 1.8rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.7ch;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--living);
  box-shadow: 0 0 0 0 rgba(76,175,80,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,80,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(76,175,80,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,80,0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Terminal cursor, used after the hero title. */
@keyframes wy-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.cursor {
  display: inline-block;
  width: .5ch;
  height: .78em;
  background: #3ad16a;
  box-shadow: 0 0 18px rgba(58,209,106,.85);
  animation: wy-blink 1.1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; opacity: 1; }
}

/* ---- PILLARS ------------------------------------------------------------- */
main { position: relative; z-index: 1; }

.pillars {
  max-width: var(--wrap);
  margin: clamp(48px, 8vw, 100px) auto;
  padding: 0 clamp(18px, 5vw, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.pillar {
  border-top: 1px solid var(--line-2);
  padding-top: 20px;
}
.pillar-mark {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2rem + 1vw, 2.8rem);
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(58,209,106,.5);
  margin-bottom: 0.6rem;
}
.pillar h2 {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.pillar p { color: var(--ink-dim); font-size: 1rem; margin: 0; max-width: 34ch; }

/* ---- GALLERY (screenshot placeholders) ----------------------------------- */
.gallery {
  max-width: var(--wrap);
  margin: clamp(48px, 8vw, 100px) auto;
  padding: clamp(28px, 4vw, 48px) clamp(18px, 5vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.gallery-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line-2);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  background: none;
  color: inherit;
  font: inherit;
  transition: border-color 0.12s, transform 0.12s;
}
.shot:hover, .shot:focus-visible {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot figcaption {
  position: relative;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: linear-gradient(0deg, rgba(5,8,5,0.92), rgba(5,8,5,0));
  width: 100%;
}
@media (max-width: 620px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Lightbox: enlarged shot over a dark backdrop. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 60px);
  background: rgba(3, 5, 3, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 60px rgba(58, 209, 106, 0.15);
  cursor: default;
}
.lightbox-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  width: 40px;
  height: 40px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--ink-dim);
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.lightbox-close:hover { color: var(--gold); border-color: var(--gold); }

/* ---- WATCH --------------------------------------------------------------- */
.watch {
  max-width: var(--wrap);
  margin: clamp(48px, 8vw, 100px) auto;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 48px);
  background: linear-gradient(180deg, var(--ground-2), var(--ground));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.watch-head h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}
.watch-head p { color: var(--ink-dim); margin: 0 0 1.8rem; max-width: 48ch; }
.watch-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.watch-empty {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-faint);
  padding: 8px 2px;
}
.watch-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-align: left;
  color: var(--ink);
  background: var(--ground-3);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 0.9em 1em;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.12s, background 0.12s;
}
.watch-btn:hover {
  border-color: var(--gold);
  background: #0f1a10;
  transform: translateY(-2px);
}
.watch-btn .watch-kind {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.15em 0.7em;
}

/* ---- CTA STRIP ----------------------------------------------------------- */
.cta-strip {
  text-align: center;
  padding: clamp(56px, 10vw, 120px) 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(70% 140% at 50% 0%, rgba(58,209,106,0.06), transparent 60%),
    var(--ground);
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 1.6rem;
  text-wrap: balance;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(58,209,106,.55), 0 4px 24px rgba(0,0,0,0.7);
}
.btn-play-lg { font-size: 1.1rem; padding: 1em 1.8em; box-shadow: 0 0 30px rgba(58,209,106,.5); }
.cta-telnet {
  margin: 1.6rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-faint);
}

/* ---- FOOTER -------------------------------------------------------------- */
.site-footer {
  padding: clamp(32px, 5vw, 56px) clamp(20px, 5vw, 48px);
  background: var(--ground);
}
.footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px 28px;
}
.footer-mark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-size: 1.3rem;
  color: var(--gold);
}
.footer-links {
  display: flex;
  gap: clamp(14px, 3vw, 28px);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.footer-links a { color: var(--ink-dim); }
.footer-links a:hover { color: var(--gold); }
.footer-note {
  margin-left: auto;
  color: var(--ink-faint);
  font-size: 0.85rem;
  font-style: italic;
}

@media (max-width: 620px) {
  .topbar-links { display: none; }
  .footer-note { margin-left: 0; width: 100%; }
}