/* GORGE — gorgegame.app
 *
 * One stylesheet for the whole site. Three constraints shaped it, and none are stylistic:
 *
 *   * **No JavaScript, anywhere.** The nginx CSP is `script-src 'self' 'wasm-unsafe-eval'`
 *     with no 'unsafe-inline', because the Godot export needs wasm-eval and nothing else
 *     should get it. An inline <script> on a marketing page would either be blocked or
 *     force 'unsafe-inline' into a policy the game depends on. So: no script tags, and
 *     anything that would want one is built out of CSS instead.
 *
 *   * **No external assets.** `font-src 'self'` rules out hosted webfonts, `connect-src
 *     'self'` rules out anything that phones home. The type is a system stack, which is
 *     also why the privacy page can truthfully say the site loads nothing third-party.
 *
 *   * **Dark only.** The game is set underground. A light theme would be a second palette
 *     to keep in step for no reader who wants it, so the pages declare their colours
 *     outright rather than inheriting a scheme.
 */

/* ── Reset ──────────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* ── Tokens ─────────────────────────────────────────────────────────────────── */

:root {
  /* Ground. Warm-shifted rather than neutral grey — it reads as rock rather than as
     a dark UI chrome. */
  --bg: #0d0b09;
  --bg-raised: #16130f;
  --bg-sunk: #080706;

  --line: #2b2419;
  --line-soft: #1e1913;

  --ink: #ece4d7;
  --ink-dim: #a2977f;
  --ink-faint: #6f6757;

  /* Minerals. Amber is the primary — it is the tunnel-lit colour and the one the
     wordmark carries. Malachite marks the safe/structural half of a contrast pair,
     ember the lethal half; the how-to-play and strategy pages lean on that pairing
     to separate "this grows you" from "this kills you" without relying on words. */
  --amber: #e8a33d;
  --amber-dim: #8d6524;
  --malachite: #57b795;
  --ember: #d9573f;

  --radius: 3px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* One measure for prose, shared by every page so the pages feel like one site. */
  --measure: 34rem;
  --wide: 60rem;
}

/* ── Base ───────────────────────────────────────────────────────────────────── */

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  /* The legal pages carry long unbreakable tokens — a full email address, a URL — and one
     of them pushed terms.html 5px wide at a 320px viewport. Breaking mid-token is ugly
     exactly once and a horizontal scrollbar on a phone is ugly always. */
  overflow-wrap: break-word;
  font-size: 17px;
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The strata. Two very low-contrast gradients: a warm pool at the top, as though the
     surface were lit, falling away to unlit rock. Fixed so it does not slide under the
     content on scroll. */
  background-image:
    radial-gradient(
      ellipse 80% 50% at 50% -10%,
      rgba(232, 163, 61, 0.09),
      transparent 70%
    ),
    linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4));
  background-attachment: fixed;
}

a {
  color: var(--amber);
  text-decoration-color: rgba(232, 163, 61, 0.35);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: var(--amber);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--radius);
}

::selection {
  background: rgba(232, 163, 61, 0.28);
  color: #fff;
}

/* ── Shell ──────────────────────────────────────────────────────────────────── */

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

main {
  flex: 1;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.site-head {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.75rem;
  flex-wrap: wrap;
}

.mark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.mark:hover {
  color: var(--amber);
}

.mark::before {
  /* The seam: a two-tone rule standing in for excavated over solid. Decorative, so it
     is a pseudo-element rather than markup a screen reader has to skip. */
  content: "";
  width: 3px;
  height: 1.15em;
  background: linear-gradient(180deg, var(--amber) 45%, var(--amber-dim) 45%);
  border-radius: 1px;
}

.site-nav {
  display: flex;
  gap: 1.35rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--ink-dim);
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover {
  color: var(--ink);
  border-bottom-color: var(--amber);
}

.site-nav a[aria-current="page"] {
  color: var(--amber);
  border-bottom-color: var(--amber-dim);
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(3.5rem, 11vw, 7rem) clamp(2.5rem, 7vw, 4.5rem);
  text-align: center;
}

.wordmark {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3.2rem, 15vw, 7.5rem);
  line-height: 0.95;
  letter-spacing: 0.14em;
  /* Indented by the tracking's worth so the optical centre matches the layout centre —
     letter-spacing adds trailing space after the final G that nothing balances. */
  margin-inline-start: 0.14em;
  background: linear-gradient(175deg, #fff4e0 8%, var(--amber) 52%, #7d5518 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--ink-dim);
  max-width: 30rem;
  margin: 1.25rem auto 0;
  text-wrap: balance;
}

.tagline strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── Status chip ────────────────────────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  background: var(--bg-sunk);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  margin-bottom: 1.75rem;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--malachite);
  box-shadow: 0 0 0 3px rgba(87, 183, 149, 0.16);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  gap: 0.9rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.25rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--bg-raised);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.btn:hover {
  border-color: var(--amber-dim);
  color: var(--amber);
}

.btn-primary {
  background: var(--amber);
  border-color: var(--amber);
  color: #14100a;
  font-weight: 600;
}

.btn-primary:hover {
  background: #f5b556;
  border-color: #f5b556;
  color: #14100a;
}

.btn-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin: 1rem auto 0;
  max-width: 32rem;
  letter-spacing: 0.04em;
}

/* ── Sections ───────────────────────────────────────────────────────────────── */

.section {
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  border-top: 1px solid var(--line-soft);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-bottom: 0.9rem;
}

h1,
h2,
h3 {
  line-height: 1.2;
  text-wrap: balance;
  font-weight: 650;
  /* The header is sticky, so a jump to #delete puts the heading *behind* it — the visitor
     lands mid-paragraph with no idea they arrived at the right section. That link is the
     one an App Store reviewer follows, so the offset is not cosmetic. Slightly more than
     the 3.75rem header so the heading is not flush against it either. */
  scroll-margin-top: 5rem;
}

.page-title {
  font-size: clamp(2rem, 6vw, 2.9rem);
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}

.lede {
  font-size: 1.1rem;
  color: var(--ink-dim);
  max-width: var(--measure);
}

h2 {
  font-size: clamp(1.35rem, 3.4vw, 1.7rem);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.05rem;
  letter-spacing: 0;
}

/* ── Prose ──────────────────────────────────────────────────────────────────── */

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1.1rem;
}

.prose > h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
}

.prose > h3 {
  margin-top: 2rem;
  color: var(--ink);
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose li + li {
  margin-top: 0.5rem;
}

.prose li::marker {
  color: var(--amber-dim);
}

.prose strong {
  color: #fff;
  font-weight: 600;
}

.prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.1em 0.4em;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin-block: 2rem;
}

/* ── Steps ──────────────────────────────────────────────────────────────────── */

.steps {
  max-width: var(--measure);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1.6rem;
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--amber);
  border: 1px solid var(--line);
  background: var(--bg-sunk);
  border-radius: var(--radius);
  width: 2rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
}

/* The spine, drawn between markers rather than through them. */
.steps li::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.3rem;
  bottom: 0.2rem;
  width: 1px;
  background: var(--line-soft);
}

.steps li:last-child {
  padding-bottom: 0;
}

.steps li:last-child::after {
  display: none;
}

.steps h3 {
  margin-bottom: 0.3rem;
}

.steps p {
  color: var(--ink-dim);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */

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

.card {
  border: 1px solid var(--line-soft);
  background: var(--bg-raised);
  border-radius: var(--radius);
  padding: 1.4rem;
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.15s, background 0.15s;
}

.card-link:hover {
  border-color: var(--amber-dim);
  background: #1a1611;
}

.card-link h3 {
  color: var(--amber);
}

/* ── Figures ────────────────────────────────────────────────────────────────── */

/* Wider than the prose measure on purpose: the artwork is the one thing on these pages
   that earns more width than a line of text should have. Capped at --wide so it never
   outruns the header it sits under. */
.figure {
  margin-block: 2rem;
  max-width: var(--wide);
}

.figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  /* The art is dark-ground already, so a light placeholder box would flash on slow
     connections. Matching the page ground means loading is invisible rather than a flicker. */
  background: var(--bg-sunk);
}

.figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ── Callouts ───────────────────────────────────────────────────────────────── */

.note {
  max-width: var(--measure);
  border-left: 2px solid var(--line);
  background: var(--bg-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--ink-dim);
}

.note strong {
  color: var(--ink);
}

.note-warn {
  border-left-color: var(--ember);
}

.note-warn strong {
  color: #f0836d;
}

.note-good {
  border-left-color: var(--malachite);
}

.note-good strong {
  color: #7fd2b3;
}

/* ── Definition rows (controls, data tables) ────────────────────────────────── */

.rows {
  max-width: var(--measure);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.rows > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  font-size: 0.95rem;
}

.rows > div + div {
  border-top: 1px solid var(--line-soft);
}

.rows dt,
.rows .k {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-dim);
  padding-top: 0.15rem;
}

.rows dd,
.rows .v {
  margin: 0;
  color: var(--ink-dim);
}

.rows .v strong {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 34rem) {
  .rows > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-sunk);
  padding-block: 2.5rem 3rem;
  margin-top: 4rem;
  font-size: 0.9rem;
}

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

.foot-col h2 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.8rem;
}

.foot-col ul {
  list-style: none;
  padding: 0;
}

.foot-col li + li {
  margin-top: 0.45rem;
}

.foot-col a {
  color: var(--ink-dim);
  text-decoration: none;
}

.foot-col a:hover {
  color: var(--amber);
}

.foot-legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Motion ─────────────────────────────────────────────────────────────────── */

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