/* Phosphor Nine — the game's own palette, lifted from Sources/ArcadeView.swift so
   the site and the app cannot drift apart. */
:root {
  --void:      #000000;
  --phosphor:  #c4ffe0;   /* the ship, and anything you own */
  --amber:     #ffb054;   /* controls and interface */
  --electric:  #59c7ff;   /* crystal */
  --violet:    #e67aff;   /* lance */
  --hostile:   #ff4a47;   /* enemies */
  --dim:       #4f7869;   /* quiet text */
  --rule:      rgba(196, 255, 224, 0.14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--phosphor);
  /* The game draws every glyph in the monospaced system font. */
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

/* A vector monitor is mostly empty. Resist filling it. */
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- masthead ---- */

header { padding: 5.5rem 0 3rem; text-align: center; }

.icon {
  width: 104px; height: 104px; border-radius: 23%;
  display: block; margin: 0 auto 2rem;
  box-shadow: 0 0 0 1px var(--rule), 0 0 44px rgba(196, 255, 224, 0.13);
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  /* Phosphor bloom: a tight core with a wide, faint halo, the same way the
     game strokes its vectors. */
  text-shadow: 0 0 18px rgba(196, 255, 224, 0.5), 0 0 62px rgba(196, 255, 224, 0.2);
}

.tagline {
  margin: 1.4rem 0 0;
  color: var(--amber);
  letter-spacing: 0.2em;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.blurb { margin: 2.2rem auto 0; max-width: 34rem; color: var(--dim); }

/* ---- the arcade button, straight off the home screen ---- */

.cta { margin: 3rem 0 0; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 190px; height: 190px; border-radius: 50%;
  border: 2px solid var(--amber);
  color: var(--amber); text-decoration: none;
  letter-spacing: 0.22em; font-size: 0.8rem; text-transform: uppercase;
  background: radial-gradient(circle at 50% 50%, rgba(255, 176, 84, 0.11), transparent 68%);
  transition: box-shadow 0.25s ease, color 0.25s ease;
}
.button:hover, .button:focus-visible {
  box-shadow: 0 0 34px rgba(255, 176, 84, 0.36), inset 0 0 26px rgba(255, 176, 84, 0.14);
  color: #ffd9a8;
}
.cta .note { margin-top: 1.4rem; color: var(--dim); font-size: 0.78rem; letter-spacing: 0.12em; }

/* ---- sections ---- */

section { padding: 4.5rem 0; border-top: 1px solid var(--rule); }

h2 {
  margin: 0 0 2.2rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--amber);
}

h3 { margin: 0 0 0.4rem; font-size: 1rem; font-weight: 600; letter-spacing: 0.06em; }

.grid { display: grid; gap: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

/* Four features want to be 2x2 or 4x1 — never 3+1, which leaves a hole where
   the reader expects a fourth column. */
.grid.four { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 62rem) { .grid.four { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 34rem) { .grid.four { grid-template-columns: 1fr; } }
.grid p { margin: 0; color: var(--dim); font-size: 0.92rem; }

/* Each feature borrows the colour of the thing it describes. */
.k-phosphor h3 { color: var(--phosphor); }
.k-electric  h3 { color: var(--electric); }
.k-violet    h3 { color: var(--violet); }
.k-hostile   h3 { color: var(--hostile); }

/* ---- screens ---- */

.shots {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.shots img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 14px;
}

/* ---- prose (privacy) ---- */

/* Centred column, justified body. A privacy policy is read, not scanned, so it
   gets a measure of about 42rem and sits in the middle of the page like the
   title above it. */
.prose { max-width: 42rem; margin-left: auto; margin-right: auto; }
.prose p { text-align: justify; hyphens: manual; }
/* Auto-hyphenation is off deliberately. The browser broke "diagnostics" as
   "dia-gnostics", which is simply wrong, and a policy page is the last place to
   look careless. Monospace justification opens the word spaces a little without
   it; that is the better trade.
   On narrow screens the measure is too short to justify at all without rivers,
   so ragged-right wins there. */
@media (max-width: 40rem) { .prose p { text-align: left; } }
.prose p, .prose li { color: var(--dim); }
.prose strong { color: var(--phosphor); font-weight: 600; }
.prose a { color: var(--amber); }
.prose h2 { margin-top: 3rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.updated { color: var(--dim); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ---- footer ---- */

/* Centred, to sit under the masthead rather than fight it.

   The links are spaced with `gap`, never a trailing margin on each anchor: a
   margin-right on the *last* link pushes the whole row that far off true
   centre, which is precisely what made this read as left-aligned. The old rule
   also made <footer> itself the flex container, so .wrap became a flex item and
   its `margin: 0 auto` centring stopped behaving predictably. */
footer {
  border-top: 1px solid var(--rule);
  padding: 2.6rem 0 4rem;
  color: var(--dim); font-size: 0.8rem;
  text-align: center;
}
.footer-links {
  display: flex; flex-wrap: wrap;
  gap: 0.6rem 2rem; justify-content: center;
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover, footer a:focus-visible { color: var(--phosphor); }
.copyright { margin: 1.5rem 0 0; letter-spacing: 0.12em; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}