/* MoonWarp site styles.
 *
 * The palette is lifted from the game's menu theme so the site and the app read as the same
 * product: the card ink, the gold used for primary actions, and the cyan used for status.
 *
 * No webfonts and no third-party requests anywhere on this site. That is partly speed and
 * partly the privacy policy: a page that tells you it does not track you should not be
 * asking another company for a font in order to say so.
 */

:root {
  --ink: #0e121e;
  --ink-raised: #161c2e;
  --edge: #2a3550;
  --text: #e8edf7;
  --text-dim: #b3bfd6;
  --text-faint: #8b97ae;
  --gold: #ffd066;
  --cyan: #66dbf2;
  --green: #73e69e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

/* --- header --------------------------------------------------------------------------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(14, 18, 30, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
header.site .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 66px;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-size: 15px;
}
.brand:hover { text-decoration: none; color: var(--gold); }
header.site nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
header.site nav a { color: var(--text-dim); font-size: 15px; }
header.site nav a:hover { color: var(--text); text-decoration: none; }

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

.hero {
  position: relative;
  padding: 84px 0 72px;
  border-bottom: 1px solid var(--edge);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 140%;
  background:
    radial-gradient(60% 50% at 30% 20%, rgba(102, 219, 242, 0.16), transparent 70%),
    radial-gradient(50% 45% at 78% 40%, rgba(255, 208, 102, 0.13), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }

/* Copy left, the game's own splash art right. The columns use minmax(0, …) because a grid
   track's default min-width is auto, which lets a wide image push the track past its share
   and squeeze the headline. Below 900px the art drops under the copy. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 44px;
  align-items: center;
}
.hero-art img { width: 100%; height: auto; display: block; }

.hero h1 {
  /* Smaller than it was: the headline no longer has the full page width to itself, and at
     the old 66px "Out-think your rivals" alone overflowed the column. */
  margin: 0 0 18px;
  font-size: clamp(34px, 4.4vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* Evens out the line lengths instead of filling each line and leaving "world." stranded
     on its own. Ignored by browsers that do not support it, which just get the greedy wrap. */
  text-wrap: balance;
}
.hero-copy .note { margin: 22px 0 0; }
.hero .tagline {
  font-size: clamp(18px, 2.4vw, 23px);
  color: var(--text-dim);
  max-width: 44ch;
  margin: 0 0 32px;
}
.badge {
  display: inline-block;
  padding: 5px 13px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 22px;
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid var(--edge);
  color: var(--text);
}
.btn:hover { text-decoration: none; border-color: var(--text-faint); }
.btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #241c04;
}
.btn.primary:hover { background: #ffdb8a; border-color: #ffdb8a; }
.note { color: var(--text-faint); font-size: 14px; }

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

section { padding: 76px 0; border-bottom: 1px solid var(--edge); }
section h2 {
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
section .lede { color: var(--text-dim); max-width: 62ch; margin: 0 0 40px; font-size: 17px; }

.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--ink-raised);
  border: 1px solid var(--edge);
  border-radius: 16px;
  padding: 26px;
}
.card h3 { margin: 0 0 10px; font-size: 19px; }
.card p { margin: 0; color: var(--text-dim); font-size: 15.5px; }
.card .kicker {
  display: block;
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}

/* --- tribes --------------------------------------------------------------------------- */

.tribe { text-align: center; padding-top: 0; overflow: hidden; }

/* One frame, four portraits, none of them cropped.
 *
 * The delivered art ran from 0.71 to 1.03 in aspect ratio. `contain` therefore sized each
 * portrait to whatever its own proportions allowed -- 149px wide beside 217px -- and looked
 * like four pictures at four scales; `cover` made them uniform but sliced the characters off
 * at the chest, which is worse.
 *
 * Neither is a CSS problem, so it is fixed in the art instead: every portrait is trimmed of
 * its transparent margin, scaled to the same character height, and padded onto one shared
 * 640x620 canvas, bottom-aligned so they stand on a common baseline (see website/README.md
 * for the ImageMagick command). Because the sources now share a ratio, `contain` fills this
 * box exactly and identically, and nothing is cut. */
.tribe .portrait {
  aspect-ratio: 64 / 62;
  /* Negative margins on the sides only, to cancel the card's 26px horizontal padding and let
     the portrait run edge to edge. NOT on top: .tribe already sets padding-top: 0, so a
     -26px top margin pushed 25px of every portrait above the card and overflow: hidden cut
     it off -- which is what was decapitating them. */
  margin: 0 -26px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  overflow: hidden;
}
.tribe .portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.tribe .role {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* "Prosperity Syndicate" is the only name that wraps to two lines. Without a floor the other
   three sit a line higher and the descriptions below them stop lining up across the row. */
.tribe h3 { line-height: 1.25; min-height: 2.5em; }

/* --- screenshot ----------------------------------------------------------------------- */

figure.shot { margin: 0; }
figure.shot img {
  /* The captures are portrait, from a phone. Stretched to the container width one of them
     was 2,190px tall and owned the whole page, so they are shown at something like the size
     of the device they came from. */
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--edge);
  display: block;
}
figure.shot figcaption {
  color: var(--text-faint);
  font-size: 14px;
  margin-top: 12px;
  text-align: center;
}

/* --- prose (legal pages) --------------------------------------------------------------- */

.prose { padding: 60px 0 90px; }
.prose h1 { font-size: clamp(30px, 4.6vw, 42px); margin: 0 0 8px; }
.prose .updated { color: var(--text-faint); font-size: 15px; margin: 0 0 44px; }
.prose h2 {
  font-size: 21px;
  margin: 44px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--edge);
}
.prose h3 { font-size: 17px; margin: 26px 0 8px; color: var(--gold); }
.prose p, .prose li { color: var(--text-dim); font-size: 16px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--text); }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 15px;
}
.prose th, .prose td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
.prose th { color: var(--text); font-weight: 600; }
.prose td { color: var(--text-dim); }
.callout {
  background: var(--ink-raised);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--cyan);
  border-radius: 10px;
  padding: 18px 22px;
  margin: 26px 0;
}
.callout p { margin: 0; }

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

footer.site { padding: 46px 0 60px; color: var(--text-faint); font-size: 14.5px; }
footer.site .wrap { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
footer.site nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
footer.site a { color: var(--text-dim); }

/* The hero stacks well before the rest of the page needs to: two columns stop working once
   the copy column is too narrow for the headline, which happens around 900px. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  section { padding: 56px 0; }
  .hero { padding: 60px 0 52px; }
  header.site .wrap { flex-wrap: wrap; min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  header.site nav { margin-left: 0; width: 100%; gap: 18px; }
  footer.site nav { margin-left: 0; width: 100%; }
}