/* Cardtell on the web.
 *
 * The apex domain is a page ABOUT the game, never the game — see the note in
 * deploy/nginx/cardtell-web.conf. So this file has one job: look like the same
 * product as the app, on a phone browser, without a build step.
 *
 * The palette is the app's, from app/src/design/tokens.ts. When that file
 * changes, this one changes with it — a site in last year's colours reads as an
 * abandoned product, which is the opposite of what a landing page is for. */
:root {
  color-scheme: dark;
  --bg: #0b0b0f;
  --surface: #17171c;
  --surface-alt: #202028;
  --border: #2e2e38;
  --border-strong: #454553;
  --text: #ffffff;
  --dim: #a6a6b2;
  --faint: #6e6e7c;
  --accent: #ff8a00;
  --accent-ink: #0b0b0f;
  --danger: #e23b2e;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

main { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem 5rem; }

a { color: var(--accent); }
a:hover { color: #ffa640; }

/* Headings are heavy uppercase with a little tracking — the app's voice, kept
   here so the two do not read as different products. The wordmark is the one
   exception: it is a name, not a heading. */
h1, h2, h3 {
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* ---------------------------------------------------------------- landing */

header.hero {
  max-width: 46rem;
  margin: 0 auto;
  padding: 4rem 1.25rem 2.5rem;
  text-align: center;
}

.wordmark { margin: 0; }

/* The logo is white-on-transparent and this page is already dark, so it needs no
   plate. Intrinsic width/height on the tag reserves the space before it loads so
   the page does not jump. */
.wordmark img {
  width: 100%;
  max-width: 24rem;
  height: auto;
}

.tagline {
  color: var(--dim);
  font-size: 1.05rem;
  margin: 0.75rem auto 0;
  max-width: 26rem;
}

/* The black prompt card, which is the app's one recognisable shape. */
.card {
  background: linear-gradient(140deg, #141418, #000000);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  margin: 2.5rem 0;
  text-align: center;
}
.card p {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.card .blank {
  color: var(--accent);
  border-bottom: 3px solid var(--accent);
  padding: 0 0.6em;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}
.badge {
  display: inline-block;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  color: var(--dim);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge.age { border-color: var(--danger); color: var(--danger); }

section { margin-top: 3.5rem; }
section h2 { font-size: 1.05rem; color: var(--dim); margin: 0 0 1rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.steps .n {
  color: var(--accent);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.steps p { margin: 0; color: var(--dim); }
.steps strong { color: var(--text); display: block; font-weight: 700; }

.note {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1rem;
  color: var(--dim);
}

footer {
  border-top: 1px solid var(--border);
  margin-top: 4rem;
  padding: 2rem 1.25rem 3rem;
  text-align: center;
  color: var(--faint);
  font-size: 0.9rem;
}
footer nav { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }

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

.legal main { padding-top: 2.5rem; }
.legal h1 { font-size: 1.9rem; margin: 0 0 0.25rem; }
.legal h2 { font-size: 1.05rem; margin: 2.5rem 0 0.5rem; text-transform: uppercase; }
.legal h3 {
  font-size: 0.95rem;
  margin: 1.5rem 0 0.35rem;
  color: var(--dim);
  text-transform: none;
  letter-spacing: 0;
}
.updated { color: var(--faint); font-size: 0.9rem; margin: 0 0 2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal p, .legal li { color: var(--text); }
.back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--dim);
  text-decoration: none;
  font-size: 0.9rem;
}
.back:hover { color: var(--accent); }

/* --------------------------------------------------------- phones, closely */

/* Smooth scrolling is a nicety; to anyone who has asked their operating system
   for less motion it is a symptom. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The gutter is 1.25rem everywhere, which is right up until the page is held in
   landscape on a notched phone — there the notch and the rounded corner eat into
   that side and the text sits under them. max() keeps the old gutter as the
   floor and grows it only where the OS says it has to, so nothing moves on a
   device without insets. */
header.hero,
main,
footer {
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
main { padding-bottom: max(5rem, env(safe-area-inset-bottom)); }
footer { padding-bottom: max(3rem, env(safe-area-inset-bottom)); }

/* Sideways on a phone there are about 400px of height to spend in total, and
   4rem of it was going to empty space above the wordmark. */
@media (orientation: landscape) and (max-height: 30rem) {
  header.hero { padding-top: 2rem; padding-bottom: 1.5rem; }
  .wordmark img { max-width: 16rem; }
  section { margin-top: 2.5rem; }
}

/* ------------------------------------------------------------------ tables */

/* Only the privacy page has these. They are prose in columns rather than
   figures, so they are allowed to get narrow — no min-width, because forcing a
   phone to scroll sideways to finish a sentence is worse than a tight column.
   The wrapper is the safety net for a cell that turns out to hold something
   unbreakable after all. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th, td {
  border: 1px solid var(--border);
  padding: 0.7rem 0.8rem;
  text-align: left;
  vertical-align: top;
  /* Cells are narrow on a phone and some hold identifiers with no spaces in
     them; without this, one of those sets the width of the whole table. */
  overflow-wrap: anywhere;
}

th {
  background: var(--surface-alt);
  color: var(--dim);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

code {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}