/* The standalone legal pages (privacy, terms).

   These are documents, not the game — they scroll, and they are not the fixed
   402x800 canvas. But they are still RangeRead, so they take their colours,
   type and chrome from the same token file the app uses: styles/tokens.css.
   Lengths here are plain px rather than multiples of --u, because nothing on
   these pages is scaled to fit a phone canvas. */

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- app bar */
/* Deliberately the same object as the game's header: same height, same
   centred wordmark, same hairline underneath. Arriving here from the drawer
   should feel like another screen of the app, not another website.
   No back arrow: the drawer opens these in a new tab, so the game is still
   where it was in the other one. An arrow that loaded "/" here landed on a
   fresh intro instead of the game in progress. */

.appbar {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 52px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.appbar .wordmark {
    margin: 0;
    font-size: 17px;
    font-weight: var(--fw-heavy);
    letter-spacing: 0.2px;
    color: var(--ink);
}

/* --------------------------------------------------------------- page */

.wrap {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px 20px 72px;
}

h1 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-heavy);
}

.updated {
    margin: 0 0 28px;
    color: var(--ink-faint);
    font-size: var(--fs-sm);
}

h2 {
    margin: 32px 0 10px;
    font-size: 18px;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

p, li { color: var(--ink-soft); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }
strong { color: var(--ink); font-weight: var(--fw-medium); }
a { color: var(--accent); }

/* The summary card. The same soft-accent surface the app uses for a secondary
   button, so it reads as part of the same set. */
.summary {
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    margin: 0 0 4px;
}
.summary p { margin: 0; color: var(--ink); }

footer {
    margin-top: 44px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: var(--fs-sm);
    color: var(--ink-faint);
}
footer a { color: var(--ink-faint); }

/* Off a phone the document sits on the panel colour with its own edge, the
   way the game's stage does at the same widths. */
@media (min-width: 700px) {
    body { background: var(--surface-2); }
    .appbar { background: var(--surface); }
    .wrap {
        background: var(--surface);
        margin: 28px auto 48px;
        padding: 32px 40px 56px;
        border-radius: 14px;
        box-shadow: 0 2px 24px rgba(var(--shadow-ink), .10), 0 0 0 1px var(--rule);
    }
}