/* base.css — Fonts, colour tokens, reset, typography.
   The site wears the game's own look: its dark wood panels, gold titles,
   Noto Sans for text (the game's UI face, docs/ui-architecture.md) and
   square corners on all chrome. Panel titles and the name use Arbutus
   Slab, the face of the game's world map. */

@font-face { font-family: 'Noto Sans'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('/static/fonts/notosans-regular.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans'; font-weight: 700; font-style: normal; font-display: swap;
    src: url('/static/fonts/notosans-bold.woff2') format('woff2'); }
@font-face { font-family: 'Arbutus Slab'; font-weight: 400; font-style: normal; font-display: swap;
    src: url('/static/fonts/arbutus-slab.woff2') format('woff2'); }

:root {
    /* The world around the page and the page's own boards, darkest first. */
    --ink: #0a0806;
    --bg: #15110c;
    --surface: #1b1610;
    --surface-2: #211a13;
    --surface-3: #2a2118;
    --well: #0e0b08;

    /* Lines: a quiet divider, a panel's edge, a gilded edge. */
    --line: #31281d;
    --line-strong: #44382a;
    --line-gold: #6b5a38;

    /* Text. */
    --text: #e9e1cc;
    --text-muted: #b0a68f;
    --text-dim: #80765f;

    /* Gold, the game's title colour, and its lit and shaded tones. */
    --gold: #c8ad70;
    --gold-bright: #f2dc9e;
    --gold-deep: #8f7440;

    /* States: the grass green of a world that is up, red, amber. */
    --green: #7cc35a;
    --red: #d96d66;
    --amber: #e3b04c;

    /* Places one to three. */
    --rank-1: #f0c75e;
    --rank-2: #c9cfd6;
    --rank-3: #cf8d52;

    --font-text: 'Noto Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-title: 'Arbutus Slab', Georgia, 'Times New Roman', serif;

    --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    --transition: 0.15s ease;
    --frame: 1140px;

    /* Names the forum, shop and admin pages still use. */
    --bg-alt: var(--surface);
    --bg-card: var(--surface-2);
    --bg-card-hover: var(--surface-3);
    --border: var(--line-strong);
    --border-light: var(--line-gold);
    --text-bright: #f6f0e1;
    --primary: var(--gold);
    --primary-hover: var(--gold-bright);
    --primary-glow: rgba(200, 173, 112, 0.18);
    --secondary: var(--surface-3);
    --secondary-hover: #33281d;
    --accent: var(--gold);
    --accent-hover: var(--gold-bright);
    --error: var(--red);
    --success: var(--green);
    --warning: var(--amber);
    --shadow-card: var(--shadow);
    --shadow-glow: none;
    --radius: 0;
    --radius-lg: 0;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Hidden means hidden, whatever display a class gives (a .btn). */
[hidden] { display: none !important; }

body {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    /* Around the page, the wilds, far below and in the dark. */
    background:
        linear-gradient(rgba(10, 8, 6, 0.86), rgba(10, 8, 6, 0.92)),
        url('/static/img/world_wilds.webp') center top / cover fixed no-repeat,
        var(--ink);
    image-rendering: pixelated;
}
body > * { image-rendering: auto; }

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

/* Screenshots of pixel art stay crisp at any size. */
.pixel { image-rendering: pixelated; }

h1, h2, h3, h4 { color: var(--text-bright); line-height: 1.25; font-weight: 700; }
h1, h2 { font-family: var(--font-title); font-weight: 400; }

::selection { background: var(--gold-deep); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--line-gold); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Utilities */
.container { max-width: var(--frame); margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-gold { color: var(--gold); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }