:root {
  color-scheme: dark;
  --amber: #ffbc4b;
  --text: #edf0ef;
  --muted: #d0d7d9;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: #192126;
  color: var(--text);
  font: 16px/1.6 system-ui, sans-serif;
}
main { max-width: 36rem; margin: 8vh auto; padding: 1.5rem; }
h1 { color: var(--amber); line-height: 1.15; }
label { display: block; margin: .8rem 0 .3rem; }
input[type=email], input[type=password] {
  width: 100%;
  padding: .75rem;
  border: 1px solid #718089;
  border-radius: .25rem;
  background: #10191eee;
  color: var(--text);
  font: inherit;
}
input[type=checkbox] { accent-color: var(--amber); }
.consent { font-size: .9375rem; color: var(--muted); }
button {
  margin-top: 1rem;
  padding: .8rem 1.4rem;
  background: var(--amber);
  color: #182126;
  border: 1px solid var(--amber);
  border-radius: .25rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
button:hover { background: #ffd28a; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.hp { position: absolute; left: -9999px; }
.err { color: #ffb4ab; }
.ok { color: #9be59b; }
table { width: 100%; border-collapse: collapse; }
td, th { border-bottom: 1px solid #444; padding: .3rem; text-align: left; }
a { color: var(--amber); text-underline-offset: .2em; }
footer { text-align: center; padding: 1rem 1.5rem 2rem; font-size: .875rem; }

/* Overscan keeps the scene beyond both screen edges throughout the pan. */
.alpha-signup {
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}
.alpha-signup::before, .alpha-signup::after {
  content: "";
  position: fixed;
  pointer-events: none;
}
.alpha-signup::before {
  inset: 0 -24vw;
  z-index: -2;
  background: url('/assets/mars-hero.webp') center / cover no-repeat;
  animation: mars-pan 36s ease-in-out infinite alternate;
  will-change: transform;
}
.alpha-signup::after {
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #0b1218b8, #0b12187a),
    linear-gradient(0deg, #0b1218e6, #0b12182e 65%);
}
.alpha-signup main {
  width: min(36rem, calc(100% - 3rem));
  margin: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #8b9a9f55;
  border-top: 2px solid var(--amber);
  border-radius: .4rem;
  background: #111b21e6;
  box-shadow: 0 1.5rem 5rem #0005;
}
.alpha-signup h1 { margin: 0 0 1.5rem; font-size: clamp(1.8rem, 5vw, 2.4rem); }
.alpha-signup { padding-top: clamp(2rem, 7vh, 5rem); }
.alpha-signup footer { margin-top: 2rem; color: #a7b0b5; overflow-wrap: anywhere; }
.alpha-signup button { width: 100%; }
@keyframes mars-pan {
  from { transform: translate3d(-12vw, 0, 0); }
  to { transform: translate3d(12vw, 0, 0); }
}
@media (max-width: 600px) {
  .alpha-signup::before { background-position: 62% center; }
  .alpha-signup main { width: calc(100% - 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .alpha-signup::before { animation: none; transform: none; will-change: auto; }
}

/* Reuse the homepage's MΛRS / COLONY lettering beside the game subtitle. */
.alpha-signup .game-title {
  --wordmark-size: clamp(20px, 4vw, 29px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 24px);
}
.alpha-signup .brand {
  color: #e9eceb;
  font: 400 var(--wordmark-size)/1 Arial, Helvetica, sans-serif;
  letter-spacing: clamp(5px, 1vw, 9px);
  white-space: nowrap;
}
.alpha-signup .brand-a { margin-right: 1px; }
.alpha-signup .brand small {
  display: block;
  margin-top: 10px;
  color: #a7b0b5;
  font-size: 9px;
  letter-spacing: 2.5px;
}
.alpha-signup .game-subtitle {
  color: var(--amber);
  font: 400 var(--wordmark-size)/1 Arial, Helvetica, sans-serif;
  letter-spacing: clamp(2px, .55vw, 5px);
  white-space: nowrap;
}
.consent-note { display: block; margin-top: .25rem; text-align: right; }

/* 2026-10-27: value block above the form, after-signup share panel. */
.alpha-intro h2, .alpha-thanks h2 { margin: 0 0 .75rem; font-size: clamp(1.35rem, 3.6vw, 1.7rem); line-height: 1.2; color: var(--text); }
.alpha-thanks h2.ok { color: #9be59b; }
.alpha-lede { margin: 0 0 1rem; color: var(--muted); }
.alpha-points { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.alpha-points li { margin: 0 0 .55rem; }
.alpha-points li::marker { color: var(--amber); }
.alpha-points strong { color: var(--text); }
.alpha-shot { margin: 0 0 1.5rem; }
.alpha-shot img { display: block; width: 100%; height: auto; border: 1px solid #8b9a9f55; border-radius: .25rem; }
.alpha-shot figcaption { margin-top: .4rem; font-size: .8125rem; color: #a7b0b5; }
.alpha-thanks h3 { margin: 1.5rem 0 .6rem; font-size: 1.05rem; color: var(--amber); }
.alpha-hint { font-size: .9375rem; color: var(--muted); }
.share-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.share-btn { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--amber); border-radius: .25rem; text-decoration: none; font-weight: 650; }
.share-btn:hover { background: #ffbc4b22; }
.copy-row { display: flex; gap: .5rem; }
.copy-row input { flex: 1; min-width: 0; padding: .65rem; border: 1px solid #718089; border-radius: .25rem; background: #10191eee; color: var(--text); font: inherit; font-size: .9rem; }
.alpha-signup .copy-row button { width: auto; margin-top: 0; white-space: nowrap; }

/* Pin the preview typography across Windows, Android and other platforms. */
@font-face {
  font-family: "Alpha Sans";
  src: url("/assets/alpha-fonts/NotoSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Alpha Sans";
  src: url("/assets/alpha-fonts/NotoSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
.alpha-signup { font-family: "Alpha Sans", system-ui, sans-serif; }

/* Three horizontal strokes form the E, preserving the title's cap height. */
.alpha-signup .brand-e {
  display: inline-block;
  width: .667em;
  height: .6875em;
  height: 1cap;
  margin-right: clamp(2px, .55vw, 5px);
  vertical-align: baseline;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
}