/* Standalone styling for the legal pages. Deliberately self-contained - it
   repeats the design tokens rather than pulling in style.css, which is all
   game-screen layout and would fight a plain document. */
:root {
  --ink-950: #0d0b0a;
  --ink-900: #131110;
  --ink-850: #1a1715;
  --line: #35302a;
  --parchment: #e9ddc7;
  --parchment-dim: #b3a68c;
  --parchment-faint: #7d7361;
  --gold: #c9a35c;
  --gold-bright: #e8c987;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Spline Sans Mono", "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* In the app these pages fill the screen with nothing above them, so the
   header ran under the notch and sat on the same line as the clock. The
   website never showed it because Safari's own chrome pushes the page down.
   The game's own screens have always done this; these pages had not. */
.legal-wrap {
  max-width: 46rem; margin: 0 auto;
  padding: max(2rem, calc(env(safe-area-inset-top) + 1.25rem))
           max(1.25rem, env(safe-area-inset-right))
           max(4rem, calc(env(safe-area-inset-bottom) + 3rem))
           max(1.25rem, env(safe-area-inset-left));
}

.legal-top {
  display: flex; align-items: center; gap: .75rem;
  padding-bottom: 1.25rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.legal-top img { width: 34px; height: 34px; }
.legal-top a { color: var(--parchment-dim); text-decoration: none; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.legal-top a:hover { color: var(--gold-bright); }

h1 {
  font-family: var(--font-display);
  font-weight: 600; font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15; margin: 0 0 .4rem; color: var(--gold-bright);
}
.legal-updated {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--parchment-faint); margin: 0 0 2.5rem;
}

h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 1.3rem; margin: 2.5rem 0 .75rem; color: var(--gold);
}
h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--parchment); }

p, li { color: var(--parchment-dim); }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
strong { color: var(--parchment); font-weight: 600; }
a { color: var(--gold); }
a:hover { color: var(--gold-bright); }

/* the one thing to read if you read nothing else: a pull quote between two
   faded gold rules, the ledger's lines (never a side bar) */
.callout { position: relative; padding: 1.1rem 0; margin: 1.75rem 0; }
.callout::before, .callout::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep, #8f6f35), transparent);
}
.callout::before { top: 0; }
.callout::after { bottom: 0; }
.callout p { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.12em; line-height: 1.55; color: var(--parchment); }
.callout p:last-child { margin-bottom: 0; }

.legal-foot {
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--parchment-faint);
}
.legal-foot a { color: var(--parchment-dim); }

/* the rules pages: a facts table that stays readable on a phone */
.facts {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 22px;
  font-size: 14.5px;
}
.facts th, .facts td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.1));
}
.facts th[scope="row"] {
  font-weight: 600;
  color: var(--parchment, #e8dcc8);
  width: 40%;
  padding-right: 18px;
}
.facts th[scope="col"] {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold, #c9a227);
}
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
@media (max-width: 520px) {
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
  .facts th[scope="row"] { border-bottom: 0; padding-bottom: 2px; }
  .facts td { padding-top: 0; padding-bottom: 12px; }
  .facts th[scope="col"] { display: none; }
}

/* store badges (js/stores.js renders them): plain text buttons, never the
   stores' own artwork */
.store-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.store-badges[hidden] { display: none; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; min-width: 168px; padding: 9px 14px 9px 12px; border: 1px solid #8f6f35; border-radius: 12px; background: var(--ink-850); color: var(--parchment); text-decoration: none; }
.store-badge:hover { border-color: var(--gold); }
.store-badge svg { width: 22px; height: 22px; flex: none; color: var(--gold-bright); }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.15; }
.store-badge__small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--parchment-dim); }
.store-badge__big { font-family: var(--font-display); font-size: 17px; color: var(--parchment); }