/* The game's own palette, verbatim from lib/helpers/palette.dart. The site and
   the game should not be two guesses at the same colour. */
:root {
  --ground: #0a0524;
  --ground-lift: #140a33;
  --surface: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.13);

  --accent: #b26bff;   /* the orbit */
  --shards: #ffc857;   /* what you collect */
  --anchors: #4fd8d3;  /* the pod, and Retrograde */
  --plates: #ff7a9c;   /* your hull, and Transfer */

  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.72);
  --ink-faint: rgba(255, 255, 255, 0.46);

  --measure: 34rem;
  --page: 64rem;
}

@font-face {
  font-family: 'Baloo';
  src: url('assets/baloo.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink-soft);
  /* System stack for running text: it renders on the first frame, where a
     webfont would leave the page blank or reflow it. Baloo is the display
     face only, which is how it is used in the game. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: 'Baloo', Verdana, sans-serif;
  color: var(--ink);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--anchors); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--shards); }
:focus-visible { outline: 2px solid var(--shards); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.5rem; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  /* The art is mostly empty sky at the top and the orbit at the bottom, so the
     type sits in the sky and the pod is left to carry the lower half. */
  background: #05030f url('assets/hero.jpg') center / cover no-repeat;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5, 3, 15, 0.82) 0%,
    rgba(5, 3, 15, 0.30) 34%,
    rgba(10, 5, 36, 0.00) 55%,
    rgba(10, 5, 36, 0.86) 100%);
}
.hero > * { position: relative; z-index: 1; }

/* The mark rides at the top of the empty sky, the title sits down where the
   orbit begins. Letting both sink to the bottom left a void above them that
   read as a mistake rather than as space. */
.hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: 1.75rem 5rem;
}
.mark { display: flex; align-items: center; gap: 0.75rem; margin-bottom: auto; }
.hero h1 { margin-top: 2rem; }
.mark img { width: 44px; border-radius: 11px; }
.mark span { font-family: 'Baloo', sans-serif; color: var(--ink); letter-spacing: 0.04em; }

.hero h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); letter-spacing: 0.02em; }
.hero .tagline {
  font-family: 'Baloo', sans-serif;
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  color: var(--shards);
  margin: 0.6rem 0 0;
}
.hero p.lede { max-width: var(--measure); margin: 1.4rem 0 2rem; color: var(--ink-soft); }

/* ---------- store buttons ---------- */

.stores { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.store {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  font-family: 'Baloo', sans-serif; font-size: 1.02rem;
  text-decoration: none; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.store-primary { background: var(--accent); color: #12042a; }
.store-primary:hover { background: #c288ff; color: #12042a; transform: translateY(-2px); }
.store-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.store-ghost:hover { border-color: var(--anchors); color: var(--ink); transform: translateY(-2px); }
.soon { font-size: 0.9rem; color: var(--ink-faint); align-self: center; }

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

section { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.eyebrow {
  font-family: 'Baloo', sans-serif; font-size: 0.82rem;
  letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.9rem;
}
h2 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); }
section p { max-width: var(--measure); }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 800px) { .split { grid-template-columns: 1fr 1fr; } }
.split.flip > figure { order: -1; }
@media (max-width: 799px) { .split.flip > figure { order: 0; } }
figure { margin: 0; }
figure img { border-radius: 18px; border: 1px solid var(--line); }

/* ---------- modes ---------- */

.modes { display: grid; gap: 1.1rem; margin-top: 2.2rem; }
@media (min-width: 700px) { .modes { grid-template-columns: 1fr 1fr; } }
.mode { padding: 1.7rem; border-radius: 18px; border: 1px solid; background: var(--surface); }
.mode-retro { border-color: rgba(79, 216, 211, 0.4); }
.mode-transfer { border-color: rgba(255, 122, 156, 0.4); }
.mode h3 { font-size: 1.45rem; letter-spacing: 0.08em; }
.mode-retro h3 { color: var(--anchors); }
.mode-transfer h3 { color: var(--plates); }
.mode p { margin: 0.5rem 0 0; font-size: 0.97rem; }

/* ---------- sectors ---------- */

.sectors { display: grid; gap: 0.7rem; margin-top: 2.2rem; }
@media (min-width: 620px) { .sectors { grid-template-columns: repeat(2, 1fr); } }
.sector {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 1rem 1.2rem; border-radius: 14px;
  background: var(--surface); border-left: 3px solid var(--dot, var(--accent));
}
.sector b { font-family: 'Baloo', sans-serif; color: var(--ink); font-weight: 400; white-space: nowrap; }
.sector span { font-size: 0.93rem; color: var(--ink-faint); }

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

footer { border-top: 1px solid var(--line); padding-block: 3rem 4rem; }
.footer-row { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; }
footer small { color: var(--ink-faint); }

/* ---------- legal pages ---------- */

.legal { padding-block: 3.5rem 5rem; }
.legal .wrap { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 6vw, 3rem); }
.legal .updated { color: var(--ink-faint); font-size: 0.92rem; margin-top: 0.6rem; }
.legal h2 { font-size: 1.45rem; margin-top: 3rem; }
.legal h3 { font-size: 1.1rem; margin-top: 2rem; color: var(--shards); }
.legal p, .legal li { max-width: none; }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: 0.5rem; }
.legal table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: 0.94rem; }
.legal th, .legal td { text-align: left; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal th { font-family: 'Baloo', sans-serif; color: var(--ink); font-weight: 400; }
.legal .scroll { overflow-x: auto; }
.back { display: inline-block; margin-bottom: 2rem; font-family: 'Baloo', sans-serif; }

.note {
  border-left: 3px solid var(--shards);
  background: var(--surface);
  padding: 1rem 1.2rem;
  border-radius: 0 12px 12px 0;
  margin-top: 1.5rem;
}

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

/* ---------- redirect interstitial ---------- */

/* Shown for under a second before the store opens. It exists for three
   reasons: the analytics beacon needs a moment to leave, a page that jumps
   without explanation reads as broken, and it carries the way out. */
.veil {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(10, 5, 36, 0.94);
  backdrop-filter: blur(6px);
  padding: 1.5rem;
}
.veil-inner { text-align: center; display: grid; gap: 1.1rem; justify-items: center; }
.veil-title {
  font-family: 'Baloo', sans-serif; color: var(--ink);
  font-size: 1.35rem; margin: 0;
}
/* A button, not a link: staying dismisses the overlay in place rather than
   navigating, and every navigation used to be another chance to be sent to
   the store. It still has to read as a link. */
.veil-stay {
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.veil-stay:hover { color: var(--shards); }