/* Disperato brand tokens — the single source of truth for every DOM surface.
   Enforces 10-IDENTITY/branding.md: change a value HERE, never inline.
   Consumers: privacy.html, terms.html (body.legal chrome), index.html +
   consent banner (tokens only). Canvas surfaces read theme.ts instead —
   the hero red #e03131 must stay equal to SUMMER ballColor there. */

:root {
  /* palette anchors */
  --brand-black: #000000;      /* plate / chrome black */
  --brand-accent: #e03131;     /* the hero's own red — links, primary buttons */
  --brand-ink: #0c0c0e;        /* page ground */
  --brand-ink-raised: #141418; /* boxes, cards */
  --brand-ink-line: #26262c;   /* hairline borders */
  --brand-ink-table: #17171b;  /* table header, code chips */
  --brand-button: #2a2a2e;     /* secondary buttons */
  --brand-text: #d9d9de;       /* body text on ink */
  --brand-heading: #ffffff;    /* headings, emphasis */
  --brand-muted: #8a8a92;      /* subdued lines, fine print */

  /* shape + type */
  --brand-radius: 10px;
  --brand-radius-s: 8px;
  --brand-font-display: 'Grinched', 'Marker Felt', 'Chalkboard SE', 'Comic Sans MS', cursive;
  --brand-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* the wordmark font — headings speak Disperato (owner) */
@font-face {
  font-family: 'Grinched';
  src: url('/fonts/GrinchedRegular.ttf') format('truetype');
  font-display: swap;
}

/* ── Legal-page chrome (privacy, terms) — scoped so the game page can link
      this file for tokens without inheriting document styles ─────────── */

body.legal {
  margin: 0;
  background: var(--brand-ink);
  color: var(--brand-text);
  font: 16px/1.65 var(--brand-font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.legal .wrap { max-width: 760px; margin: 0 auto; padding: 34px 22px 80px; }
.legal .brand { display: block; margin: 0 0 30px; text-decoration: none; width: fit-content; }
.legal .brand img { height: 76px; width: auto; display: block; }
.legal a { color: var(--brand-accent); }
.legal h1, .legal h2 {
  font-family: var(--brand-font-display);
  font-weight: normal;
  letter-spacing: 1px;
  color: var(--brand-heading);
}
.legal h1 { font-size: 34px; margin: 0 0 6px; }
.legal h2 { font-size: 22px; margin: 34px 0 10px; }
.legal .sub { color: var(--brand-muted); margin: 0 0 28px; font-size: 14px; }
.legal .box {
  background: var(--brand-ink-raised);
  border: 1px solid var(--brand-ink-line);
  border-radius: var(--brand-radius);
  padding: 16px 18px;
  margin: 18px 0;
}
.legal .back { display: inline-block; margin-top: 34px; }
.legal ul { padding-left: 22px; }
.legal li { margin: 4px 0; }
.legal table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 15px; }
.legal th, .legal td {
  border: 1px solid var(--brand-ink-line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal th { background: var(--brand-ink-table); color: var(--brand-heading); }
.legal button {
  font: 600 15px var(--brand-font-body);
  padding: 10px 18px;
  border-radius: var(--brand-radius-s);
  border: none;
  background: var(--brand-button);
  color: #eee;
  cursor: pointer;
}
.legal code {
  background: var(--brand-ink-table);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 14px;
}

/* On a portrait phone three side-by-side columns compress into unreadable
   slivers — so below 640px each ROW becomes a card and each cell stacks,
   labelled by the data-label the header row would have given it. */
@media (max-width: 640px) {
  .legal table, .legal tbody, .legal tr, .legal td {
    display: block; width: 100%; box-sizing: border-box;
  }
  .legal tr:first-child { display: none; } /* labels come from data-label */
  .legal tr {
    border: 1px solid var(--brand-ink-line);
    border-radius: var(--brand-radius);
    overflow: hidden;
    margin: 0 0 12px;
  }
  .legal td { border: none; border-top: 1px solid var(--brand-ink-line); }
  .legal td:first-child { border-top: none; }
  .legal td::before {
    content: attr(data-label);
    display: block;
    color: var(--brand-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 2px;
  }
}