/* Shared by the static guide and policy pages (how-to-play.html, about.html
   and the rest in this folder). They are plain HTML rather than views inside
   the app so that each has its own URL, and so a visitor or a crawler that
   runs no JavaScript and has no account still reads the whole page.

   Colours and font follow the app (src/styles.css); sizes are in rem rather
   than the app's vw, because these are pages of prose read on any screen. */

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('/fonts/nunito-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('/fonts/nunito-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --bg: #181c2f;
    --bg-2: #232946;
    --panel: #262b45;
    --line: #353b5c;
    --text: #e0e6f0;
    --muted: #8ba3d4;
    --heading: #f1f5f9;
    --accent: #667eea;
    --accent-2: #764ba2;
    --link: #93a8ff;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Nunito', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text);
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%) fixed;
}

a { color: var(--link); }
a:hover { color: #b9c6ff; }

/* ---- Header ----
   The same bar as the app's login screen (.auth-topbar in src/styles.css),
   value for value, so it is identical on every page: sized in vw like the
   app rather than in rem like the article below it, and spanning 6vw from
   the left to 8vw from the right, where the login screen's two panels sit.
   Change one and change the other. */

.site-header {
    display: flex;
    align-items: center;
    gap: 0.83vw 1.67vw;
    margin: 0 8vw 0 6vw;
    padding: 1.11vw 0;
    border-bottom: 0.069vw solid var(--line);
    line-height: 1.7;
}

.brand {
    font-weight: 900;
    font-size: 1.67vw;
    letter-spacing: 0.02em;
    color: var(--heading);
    text-decoration: none;
}

.site-nav {
    display: flex;
    gap: 0.28vw 1.22vw;
    flex: 1 1 auto;
}

.site-nav a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.06vw;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--heading); }

.play-btn {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.play-btn:hover { color: #fff; filter: brightness(1.08); }

/* ---- Article ---- */

.page {
    max-width: 48rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

.page h1 {
    margin: 0 0 0.5rem;
    font-size: 2.25rem;
    line-height: 1.2;
    color: var(--heading);
}

.lede {
    margin: 0 0 2rem;
    font-size: 1.15rem;
    color: var(--muted);
}

.page h2 {
    margin: 2.5rem 0 0.75rem;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--heading);
}

.page h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.15rem;
    color: var(--heading);
}

.page p,
.page ul,
.page ol { margin: 0 0 1rem; }

.page li { margin: 0.3rem 0; }

.page strong { color: var(--heading); }

.updated {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 0.95rem;
}

.note {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--accent);
    border-radius: 0.5rem;
    background: var(--panel);
}

.note p:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own box, never the page. */
.table-wrap {
    margin: 1rem 0 1.5rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0.6rem;
}

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

th, td {
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

th {
    color: var(--heading);
    background: var(--panel);
    font-weight: 800;
    white-space: nowrap;
}

tr:last-child td { border-bottom: none; }

td.num, th.num { text-align: right; white-space: nowrap; }

.cta {
    margin: 2.5rem 0 0;
    text-align: center;
}

/* Legal text: the all-capitals clauses read better a little smaller. */
.legal .caps { font-size: 0.9rem; }

/* ---- Ads ----
   One slot per page, filled only after consent (pages.js). A slot Google
   leaves empty is taken out of the layout rather than kept as a gap. */

.ad-slot { margin: 2rem 0; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ---- Footer ---- */

.site-footer {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9rem;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    margin-bottom: 0.5rem;
}

.site-footer a { color: var(--muted); }

/* ---- Cookie banner (pages.js) ---- */

.consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding: 0.9rem 1rem;
    background: #1b1f33;
    border-top: 1px solid var(--line);
    font-size: 0.95rem;
}

.consent p { margin: 0; max-width: 44rem; }

.consent button {
    padding: 0.45rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.consent button.accept {
    border-color: transparent;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #fff;
}

@media (max-width: 40rem) {
    .page h1 { font-size: 1.85rem; }
    .page h2 { font-size: 1.3rem; }
}