/* Terran Revenge splash page.
   The game's control-panel palette (dark ground, orange accent) with the
   sectors' nebula colours bled into the page as gradients and a drifting
   starfield behind everything. Michroma for the wordmark, Chakra Petch for
   text. No framework and no build step; the only scripts are the decorative
   clock and the key request form. */

@font-face { font-family: "Chakra Petch"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ChakraPetch-Regular.ttf") format("truetype"); }
@font-face { font-family: "Chakra Petch"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ChakraPetch-Medium.ttf") format("truetype"); }
@font-face { font-family: "Share Tech Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ShareTechMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "Michroma"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Michroma-Regular.ttf") format("truetype"); }

:root {
  --ground: #06080c;
  --text: #dfe6ee;
  --muted: #8b98a6;
  --accent-bright: #ff8a1f;
  --accent-hot: #ffb04a;
  --accent-deep: #ff5a2a;
  --landmark: #99ccff;
  --nebula-purple: 122, 75, 214;
  --nebula-teal: 22, 110, 118;
  --font-ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --font-mark: "Michroma", "Chakra Petch", sans-serif;
  --font-mono: "Share Tech Mono", "SFMono-Regular", Menlo, monospace;
  --hud-caption: #8fa0b3;
  --hud-critical: #ff2020;
  --hud-band-3: #ff8c33;
  --hud-band-4: #ff473d;
  --gutter: 20px;
  --wide: 1200px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--text); font-family: var(--font-ui); font-size: 17px; line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--ground);
  background-image:
    radial-gradient(1200px 700px at 100% -10%, rgba(var(--nebula-purple), 0.18), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(var(--nebula-teal), 0.22), transparent 60%),
    radial-gradient(800px 500px at 80% 110%, rgba(var(--nebula-purple), 0.12), transparent 60%);
  background-attachment: fixed;
}
.wrap { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Starfield ----------
   Two tiled layers of tiny radial dots drifting at different speeds, fixed
   behind the page. */
.stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stars::before, .stars::after { content: ""; position: absolute; inset: -30%; background-repeat: repeat; }
.stars::before {
  background-image:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,0.9), transparent 1.5px),
    radial-gradient(1px 1px at 90px 140px, rgba(255,255,255,0.6), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 200px 60px, rgba(190,215,255,0.8), transparent 2px),
    radial-gradient(1px 1px at 260px 220px, rgba(255,255,255,0.5), transparent 1.5px),
    radial-gradient(1px 1px at 330px 110px, rgba(255,255,255,0.7), transparent 1.5px);
  background-size: 380px 260px;
  opacity: 0.55;
  animation: drift-a 160s linear infinite;
}
.stars::after {
  background-image:
    radial-gradient(1px 1px at 40px 80px, rgba(255,255,255,0.7), transparent 1.5px),
    radial-gradient(2px 2px at 160px 30px, rgba(255,200,150,0.6), transparent 2.5px),
    radial-gradient(1px 1px at 240px 180px, rgba(255,255,255,0.5), transparent 1.5px),
    radial-gradient(1.5px 1.5px at 420px 120px, rgba(184,128,255,0.7), transparent 2px);
  background-size: 520px 360px;
  opacity: 0.4;
  animation: drift-b 240s linear infinite;
}
@keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-380px, -130px, 0); } }
@keyframes drift-b { from { transform: translate3d(0,0,0); } to { transform: translate3d(260px, -180px, 0); } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; flex: 1;
  display: grid; align-items: center; overflow: hidden;
  /* minmax(0, ...) keeps the column at the screen width. An auto column grows to
     fit its widest child, and on a narrow phone the response clock is wider than
     the screen, which pushed the tagline off the right edge. */
  grid-template-columns: minmax(0, 1fr);
}
.hero-art {
  position: absolute; inset: 0; z-index: -2;
  /* The capture has the ship in the lower left and Earth upper right, so it is
     shown whole (cover, centered); the title sits in the upper left, above the
     ship, and the veil only darkens that corner. Retune for a new image. */
  background: url("../img/hero.jpg") 50% 50% / cover no-repeat;
  animation: hero-in 1.6s var(--ease) both;
}
@media (max-width: 1000px) { .hero-art { background-position: 30% 50%; } }
@media (max-width: 700px) { .hero-art { background-position: 25% 50%; opacity: 0.7; } }
@keyframes hero-in { from { transform: scale(1.06); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 78% 45%, rgba(var(--nebula-purple), 0.22), transparent 70%),
    radial-gradient(40% 50% at 20% 90%, rgba(var(--nebula-teal), 0.35), transparent 70%),
    radial-gradient(60% 60% at 12% 24%, rgba(6, 8, 12, 0.9), rgba(6, 8, 12, 0.5) 55%, transparent 100%),
    linear-gradient(180deg, rgba(6, 8, 12, 0.55) 0%, transparent 35%, transparent 75%, var(--ground) 100%);
}
.hero-veil::after {
  /* faint scanlines, the HUD's texture */
  content: ""; position: absolute; inset: 0; opacity: 0.18; mix-blend-mode: overlay;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 3px);
}
/* The hero copy is pinned to the upper left of the viewport, not the centered
   column, so on wide screens it stays over the empty nebula instead of drifting
   into the drone and Earth in the middle of the frame. */
.hero .wrap {
  padding: 96px 0 80px; align-self: start;
  margin-inline: 0; margin-left: clamp(var(--gutter), 4vw, 72px);
  width: min(var(--wide), 100% - 2 * var(--gutter));
}
@media (max-width: 700px) { .hero .wrap { align-self: center; } }

.overline {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--landmark); margin-bottom: 1.2em;
}
.overline::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--landmark), transparent); }

h1 {
  margin: 0 0 0.3em;
  font-family: var(--font-mark); font-weight: 400;
  font-size: clamp(2rem, 5vw, 4.2rem); letter-spacing: 0.1em; line-height: 1.05;
}
h1 .a, h1 .b { background-clip: text; -webkit-background-clip: text; color: transparent; }
h1 .a { background-image: linear-gradient(180deg, #ffffff, #b9c6d4); }
h1 .b { background-image: linear-gradient(135deg, var(--accent-hot) 0%, var(--accent-bright) 45%, var(--accent-deep) 100%); filter: drop-shadow(0 0 18px rgba(255, 138, 31, 0.35)); }

.tagline {
  margin: 0 0 1.4em;
  font-size: clamp(1.08rem, 1.8vw, 1.32rem); max-width: 44ch;
  text-shadow: 0 2px 20px rgba(6,8,12,0.8);
}
.status {
  margin: 0;
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Response clock (the in-game ENEMY RESPONSE FORCE readout) ---------- */
/* Same layout as ResponseCluster in the HUD: caption, then clock | threat | band on one
   row, then the sector line, inside four corner brackets. Counted down into the critical
   band, so the clock and the threat word both take the HUD's critical red. */
.response {
  position: absolute; top: clamp(14px, 2vw, 28px); right: clamp(14px, 2vw, 28px);
  z-index: 1;
  display: grid; justify-items: end; gap: 4px;
  padding: 16px 22px 14px;
  color: var(--hud-caption);
  font-family: var(--font-ui); letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(6, 8, 12, 0.6);
  backdrop-filter: blur(6px);
  animation: response-in 1.2s 0.6s var(--ease) both;
}
.response::before, .response::after,
.response .bl, .response .br {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(160, 180, 205, 0.7);
}
.response::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.response::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.response .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.response .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.response .caption { font-size: 0.62rem; }
.response .row {
  display: flex; align-items: center; gap: 13px;
  font-family: var(--font-mono); font-size: clamp(1.05rem, 1.8vw, 1.55rem); letter-spacing: 0.06em;
  line-height: 1.1; color: #fff;
}
.response .row .sep { width: 1px; height: 1.1em; background: rgba(160, 180, 205, 0.55); }
.response .clock { min-width: 11ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--hud-critical); }
.response .threat { color: var(--hud-critical); animation: response-pulse 1.4s ease-in-out infinite; }
.response .band { color: var(--hud-band-4); white-space: nowrap; }
.response .place { font-size: 0.62rem; }
@keyframes response-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes response-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (max-width: 900px) {
  .response { position: static; justify-self: start; justify-items: start; margin-top: 28px; }
  .response .row { font-size: 1.05rem; }
}
/* Small phones (320 to 400 px wide): tighten the clock so it fits the screen. */
@media (max-width: 400px) {
  .response { padding: 14px 16px 12px; }
  .response .row { gap: 8px; font-size: 0.95rem; }
}
@media (max-width: 359px) {
  .response { padding: 12px 12px 10px; }
  .response .row { gap: 6px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) { .response, .response .threat { animation: none; } }

/* ---------- Button ----------
   The HUD's outlined orange control: a thin accent border on dark glass that fills
   with the accent on hover. Used by REQUEST A KEY and the form's SEND REQUEST. */
.button {
  display: inline-block;
  padding: 11px 26px;
  border: 1px solid var(--accent-bright); border-radius: 0;
  background: rgba(255, 138, 31, 0.1);
  color: var(--accent-hot);
  font: 500 0.82rem/1.2 var(--font-ui); letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.button:hover, .button:focus-visible { background: var(--accent-bright); color: var(--ground); }
.button:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; }
.button:disabled { opacity: 0.5; cursor: default; }

/* ---------- Tester invitation (under the status line) ----------
   It lands over the ship in the hero image, so it sits on the response clock's dark
   glass to stay readable. */
.tester {
  margin-top: 30px; max-width: 34rem;
  padding: 18px 22px 22px;
  background: rgba(6, 8, 12, 0.66);
  border: 1px solid rgba(160, 180, 205, 0.16);
  backdrop-filter: blur(6px);
}
/* On wide screens it drops lower, over the ship, leaving the title and tagline room. */
@media (min-width: 701px) { .tester { margin-top: 100px; } }
.tester h2 {
  margin: 0 0 0.5em;
  font-family: var(--font-ui); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-bright);
}
.tester p { margin: 0 0 1.2em; font-size: 0.98rem; color: var(--text); text-shadow: 0 2px 16px rgba(6,8,12,0.8); }

/* ---------- Key request dialog ----------
   The response clock's frame: dark glass inside four corner brackets. */
.key-request {
  width: min(440px, 100% - 2 * var(--gutter));
  padding: 30px 28px 24px;
  border: 0; color: var(--text);
  background: rgba(10, 13, 19, 0.96);
  font-family: var(--font-ui);
}
.key-request::backdrop { background: rgba(6, 8, 12, 0.72); backdrop-filter: blur(3px); }
.key-request::before, .key-request::after,
.key-request .bl, .key-request .br {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid rgba(160, 180, 205, 0.7);
}
.key-request::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.key-request::after { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.key-request .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.key-request .br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.key-request h2 {
  margin: 0 0 22px;
  font-family: var(--font-ui); font-weight: 500; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.key-request form { display: grid; gap: 10px; }
.key-request form[hidden] { display: none; }
.key-request label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hud-caption); }
.key-request input {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(160, 180, 205, 0.35); border-radius: 0;
  background: rgba(6, 8, 12, 0.8); color: var(--text);
  font: 400 1rem var(--font-ui);
}
.key-request input:focus { outline: none; border-color: var(--accent-bright); }
.key-request .turnstile { min-height: 65px; margin-top: 6px; }
.key-request form .button { justify-self: start; }
.key-request .note { margin: 4px 0 0; font-size: 0.8rem; color: var(--muted); }
.key-request .message { margin: 12px 0 0; font-size: 0.9rem; }
.key-request .message:empty { display: none; }
.key-request .message[data-kind="error"], .key-request .message[data-kind="check"] { color: var(--hud-band-4); }
.key-request .message[data-kind="sent"] { margin-top: 0; color: var(--text); }
/* The close control: an X drawn from two thin bars. */
.key-request .close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: 0; background: none; cursor: pointer; color: var(--muted);
}
.key-request .close::before, .key-request .close::after {
  content: ""; position: absolute; left: 8px; top: 15px; width: 16px; height: 1.5px; background: currentColor;
}
.key-request .close::before { transform: rotate(45deg); }
.key-request .close::after { transform: rotate(-45deg); }
.key-request .close:hover, .key-request .close:focus-visible { color: var(--accent-bright); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid rgba(120, 150, 190, 0.14); background: linear-gradient(180deg, rgba(6,8,12,0.4), rgba(6,8,12,0.9)); }
.site-footer .wrap { padding: 24px 0; font-size: 0.85rem; color: var(--muted); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--accent-bright); }
.site-footer .footer-sep { margin: 0 6px; opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}