/* ============================================================
   Latteland - site styles (DS1 Cottagecore-Noir)
   Tokens live in tokens.css.
   Compatibility target: ~Chrome 49+ / older evergreen browsers.
   Avoids: flex gap, clamp(), inset, aspect-ratio, logical
   properties (padding-inline/margin-block). Uses margins,
   fixed sizes + media queries, padding-ratio media boxes, and
   -webkit- prefixed backdrop-filter (degrades to a solid panel).
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 14px);
    /* The canvas needs its own colour. body's background propagates to it
       normally, but a view transition captures body into the snapshot and
       the bare canvas is what shows behind the animation. */
    color-scheme: dark;
    background-color: var(--surface);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background:
        radial-gradient(1100px 540px at 78% -8%, rgba(37, 64, 30, 0.55), transparent 60%),
        radial-gradient(900px 500px at 8% 4%, rgba(20, 48, 16, 0.50), transparent 58%),
        linear-gradient(180deg, var(--surface) 0%, #001003 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---------- Custom scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--surface-4) var(--surface-1); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-1); }
::-webkit-scrollbar-thumb {
    background: var(--surface-4);
    border-radius: var(--r-full);
    border: 3px solid var(--surface-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::-webkit-scrollbar-corner { background: var(--surface-1); }

/* ---------- Page transitions ---------- */
/* Gentle fade-in on load for everyone */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
.js body { animation: pageFadeIn 0.45s var(--ease) both; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-snug);
    margin: 0;
    color: var(--cream);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

/* Focus ring (plain :focus for broad support) */
a:focus, button:focus, [tabindex]:focus {
    outline: 2px solid var(--gold-strong);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

/* Skip link: parked just above the viewport (no -9999px, which caused
   horizontal overflow on mobile); slides into view on focus. */
.skip-link {
    position: absolute; left: 8px; top: 8px; z-index: 300;
    -webkit-transform: translateY(calc(-100% - 16px)); transform: translateY(calc(-100% - 16px));
    transition: -webkit-transform var(--dur) var(--ease); transition: transform var(--dur) var(--ease);
}
.skip-link:focus { -webkit-transform: translateY(0); transform: translateY(0); }

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.section { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Section divider, the same 1px line and token the sticky header and the
   footer use, so every seam on the site matches. Sections that space
   themselves with margin instead of padding (.player) would otherwise
   sit flush under the line, so give them real padding. */
main > section + section { border-top: 1px solid var(--panel-border); }
main > section + .player {
    margin-top: 0;
    padding-top: var(--space-xl);
}
.section--tight { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

.section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--space-lg);
}
.section-head > * + * { margin-top: var(--space-sm); }
.section-head h1, .section-head h2 { font-size: var(--fs-h2); }
.section-head p { color: var(--text-soft); max-width: 56ch; font-size: var(--fs-body-lg); }
.section-head .rule {
    width: 64px; height: 3px; border-radius: var(--r-full);
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.eyebrow {
    display: block;
    font-size: var(--fs-label-sm);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--gold);
}

/* ---------- Glass panel (blur degrades to solid-ish panel) ---------- */
.glass {
    background: var(--panel);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
    border: 1px solid var(--panel-border);
    border-radius: var(--r-xl);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 13px 26px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--dur) var(--ease),
                background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--gold);
    color: var(--on-accent);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.22);
}
.btn--primary:hover { background: var(--gold-strong); box-shadow: 0 12px 30px rgba(212, 175, 55, 0.30); }

.btn--ghost {
    background: rgba(231, 243, 223, 0.04);
    color: var(--cream);
    border-color: var(--panel-border-bright);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--cream); background: rgba(231, 243, 223, 0.10); }

.btn--soft {
    background: var(--surface-3);
    color: var(--text);
    border-color: rgba(127, 151, 124, 0.35);
}
.btn--soft:hover { border-color: var(--gold); color: var(--cream); }

/* Disabled (coming-soon games keep the same button layout, just inactive) */
.btn[disabled], .btn.is-disabled {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--panel-border);
    box-shadow: none;
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}
.btn[disabled]:hover, .btn.is-disabled:hover { transform: none; }

.btn--sm { padding: 9px 18px; font-size: var(--fs-label); }
.btn .ic { width: 18px; height: 18px; margin-right: 8px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---------- Pills / chips ---------- */
.pill {
    display: inline-flex; align-items: center;
    font-size: var(--fs-label-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    padding: 5px 12px;
    border-radius: var(--r-full);
    border: 1px solid transparent;
}
.pill--live  { color: var(--live); background: rgba(6, 22, 4, 0.80); border-color: var(--live-border); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pill--soon  { color: #f3ecd6; background: rgba(10, 18, 6, 0.82); border-color: rgba(214, 200, 160, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pill .dot { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.pill--live .dot { box-shadow: 0 0 0 0 rgba(191,231,168,0.7); animation: livePulse 2.4s infinite; }

@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(191, 231, 168, 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(191, 231, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(191, 231, 168, 0); }
}

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0; z-index: 100;
    height: var(--header-h);
    display: flex; align-items: center;
    border-bottom: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
    background: rgba(1, 18, 0, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--panel-border);
}
.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; }
.brand__mark { width: 46px; height: 46px; margin-right: 12px; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--cream);
    letter-spacing: 0.01em;
}

.nav { display: flex; align-items: center; }
.nav a {
    font-size: var(--fs-label);
    font-weight: 600;
    color: var(--text-soft);
    padding: 9px 14px;
    margin-left: 2px;
    border-radius: var(--r);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav a:hover { color: var(--cream); background: rgba(231, 243, 223, 0.06); }

/* Thin dividers between the top-level nav items */
.nav > * { position: relative; }
.nav > * + *::before {
    content: "";
    position: absolute; left: -1px; top: 50%;
    -webkit-transform: translateY(-50%); transform: translateY(-50%);
    width: 1px; height: 16px;
    background: var(--panel-border);
}

/* Games dropdown: opens on hover (and focus / click for touch + keyboard) */
.nav__games { position: relative; }
.nav__games-trigger {
    font: inherit;
    display: inline-flex; align-items: center;
    font-size: var(--fs-label); font-weight: 600; color: var(--text-soft);
    padding: 9px 14px; margin-left: 2px;
    background: transparent; border: 0;
    border-radius: var(--r); cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__games-trigger::after {
    content: ""; width: 7px; height: 7px; margin-left: 7px; position: relative; top: -2px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);
    transition: -webkit-transform var(--dur) var(--ease); transition: transform var(--dur) var(--ease);
}
.nav__games:hover .nav__games-trigger,
.nav__games.is-open .nav__games-trigger,
.nav__games-trigger:hover { color: var(--cream); background: rgba(231, 243, 223, 0.06); }
.nav__games:hover .nav__games-trigger::after,
.nav__games.is-open .nav__games-trigger::after { top: 1px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }

.nav__games__panel {
    display: none;
    position: absolute; top: 100%; left: 0; margin-top: 8px;
    min-width: 190px;
    background: var(--surface-2);
    border: 1px solid var(--panel-border);
    border-radius: var(--r-md);
    padding: 6px;
    box-shadow: var(--shadow-md);
    z-index: 120;
}
/* invisible bridge over the 8px gap so hover doesn't drop the menu */
.nav__games__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav__games:hover .nav__games__panel,
.nav__games.is-open .nav__games__panel { display: block; }
/* Separate rule: an unknown :focus-within must not invalidate the hover rule above on older browsers */
.nav__games:focus-within .nav__games__panel { display: block; }
.nav__games__panel a {
    display: block; padding: 9px 12px; margin-left: 0;
    border-radius: var(--r); color: var(--text-soft); font-weight: 600; font-size: var(--fs-label);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav__games__panel a:hover { color: var(--cream); background: rgba(231, 243, 223, 0.06); }

/* Discord nav link with icon */
.nav__discord { display: inline-flex; align-items: center; }
.nav__discord-ic { width: 23px; height: 23px; margin-right: 8px; }
.mobile-nav a.mobile-nav__discord:not(.btn) {
    display: -webkit-box; display: flex;
    -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row;
    -webkit-box-align: center; align-items: center;
}
.mobile-nav a.mobile-nav__discord .nav__discord-ic { -webkit-box-flex: 0; flex: 0 0 auto; margin-right: 10px; }

.header-actions { display: flex; align-items: center; }
.header-actions > * + * { margin-left: 10px; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--panel-border);
    border-radius: var(--r); color: var(--cream); cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Mobile drawer */
.mobile-nav {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
    display: none; /* fully closed: nothing rendered, so no horizontal overflow */
    background: rgba(0, 8, 0, 0.55);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mobile-nav.is-open { display: block; }
.mobile-nav__panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 340px; max-width: 86%;
    background: var(--surface-2);
    border-left: 1px solid var(--panel-border);
    padding: var(--space-md);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    transition: -webkit-transform var(--dur-slow) var(--ease);
    transition: transform var(--dur-slow) var(--ease);
}
.mobile-nav.is-anim .mobile-nav__panel { -webkit-transform: translateX(0); transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.mobile-nav a:not(.btn) {
    display: block;
    font-size: 1.05rem; font-weight: 600; color: var(--text-soft);
    padding: 12px 12px; border-radius: var(--r);
}
.mobile-nav a:not(.btn):hover { color: var(--cream); background: rgba(231,243,223,0.05); }
.mobile-nav .btn { margin-top: var(--space-md); width: 100%; }
/* Buttons keep their own text colours (the generic link rule no longer applies) */
.mobile-nav .btn--ghost { color: var(--cream); }
/* Games shown as an indented group (the desktop dropdown has no menu on mobile) */
.mobile-nav__group {
    display: block; padding: 14px 12px 4px;
    font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold);
}
.mobile-nav a.mobile-nav__sub { padding-left: 28px; }
.icon-btn {
    width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--panel-border); border-radius: var(--r);
    color: var(--cream); cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    /* Pull the banner up behind the (transparent) header so it reads as one
       continuous banner from the top down, with the header floating over it. */
    margin-top: calc(-1 * var(--header-h));
    padding-top: var(--header-h);
    min-height: 720px;
    display: flex; align-items: center;
    overflow: hidden;
}
/* Decorative artwork belongs in CSS, not as an <img>: it is not content,
   and an img is audited against its intrinsic ratio, which a cover
   background can never match. */
.hero__bg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;
    background-image: url("/assets/img/hero-forest.svg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.hero__bg::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    /* Darker at the very top for header legibility, easing down to reveal the
       forest, then to the surface colour. Continuous behind the header. */
    background:
        linear-gradient(180deg, rgba(1,18,0,0.62) 0%, rgba(1,18,0,0.40) 28%, rgba(1,18,0,0.5) 70%, var(--surface) 100%),
        radial-gradient(60% 60% at 50% 40%, transparent, rgba(1,18,0,0.35));
}
.hero .container { position: relative; z-index: 1; }
.hero__card {
    max-width: 720px;
    padding: 28px;
    display: flex; flex-direction: column;
    text-align: left;
}
.hero__card > * + * { margin-top: var(--space-md); }
.hero h1 {
    font-size: var(--fs-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-shadow: var(--text-shadow-hero);
}
.hero__lead { font-size: var(--fs-body-lg); color: var(--text); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; }
.hero__actions > * { margin-right: var(--space-sm); margin-bottom: var(--space-xs); }
.hero__status {
    display: flex; flex-wrap: wrap;
    font-size: var(--fs-label); color: var(--text-soft);
}
.hero__status span { display: inline-flex; align-items: center; margin-right: 20px; margin-bottom: 6px; }
.hero__status .s-dot { width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; }
.s-dot--live { background: var(--live); box-shadow: 0 0 10px rgba(191,231,168,0.6); }
.s-dot--soon { background: var(--soon); opacity: 0.7; }

/* ============================================================
   Games grid
   ============================================================ */
.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-md);
    gap: var(--space-md);
}
.game-card {
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.game-card:hover { transform: translateY(-6px); border-color: var(--panel-border-bright); background: var(--panel-hover); }

/* The whole card is the click target. Stretching the existing CTA keeps one
   tab stop and real link semantics, so it still works without JS and the
   status bar shows the same URL wherever you point. Longhands, not inset:
   the older Chromium that can still run Flash does not support it. */
.game-card [data-game-cta]::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

/* Anything else clickable in the card has to sit above that overlay. */
.game-card a:not([data-game-cta]),
.game-card button { position: relative; z-index: 2; }
/* Media box: padding-ratio keeps 16:10 without aspect-ratio */
.game-card__media { position: relative; width: 100%; padding-top: 62.5%; overflow: hidden; }
.game-card__media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.game-card:hover .game-card__media img { transform: scale(1.06); }
.game-card__status { position: absolute; top: 12px; right: 12px; }
.game-card__body { display: flex; flex-direction: column; padding: var(--space-md); flex: 1 0 auto; }
.game-card__body > * + * { margin-top: var(--space-sm); }
.game-card__body h3 { font-size: var(--fs-h3); color: var(--cream); }
.game-card__body p { color: var(--text-soft); }
.game-card__foot { display: flex; flex-wrap: wrap; align-items: center; }
.game-card__foot > * + * { margin-left: 10px; }
.game-card.is-soon .game-card__media img { filter: saturate(0.78) brightness(0.82); }

/* ============================================================
   Feature cards (Why Latteland)
   ============================================================ */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-md);
    gap: var(--space-md);
}
.feature {
    display: flex; flex-direction: column;
    padding: var(--space-md);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(10,37,6,0.55), rgba(6,33,4,0.35));
    border: 1px solid var(--panel-border);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.feature:hover { border-color: var(--panel-border-bright); transform: translateY(-3px); }
.feature > * + * { margin-top: 10px; }
.feature__icon {
    width: 46px; height: 46px; border-radius: var(--r-md);
    -webkit-box-flex: 0; flex: 0 0 auto;
    display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center;
    background: var(--gold-soft); border: 1px solid rgba(212,175,55,0.30);
}
.feature__icon svg { width: 24px; height: 24px; stroke: var(--gold-strong); fill: none; stroke-width: 1.7; }
.feature__body { display: flex; flex-direction: column; }
.feature__body > * + * { margin-top: 6px; }
.feature h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--cream); }
.feature p { color: var(--text-soft); font-size: var(--fs-body); }

/* ============================================================
   Latte Player section
   ============================================================ */
.player { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
.player__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    grid-gap: var(--space-xl);
    gap: var(--space-xl);
    padding: 28px;
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(37,64,30,0.6), transparent 55%),
        var(--surface-1);
    border: 1px solid var(--panel-border);
}
.player__copy { display: flex; flex-direction: column; }
.player__copy > * + * { margin-top: var(--space-md); }
.player__copy h2 { font-size: var(--fs-h2); }
.player__copy p { color: var(--text-soft); font-size: var(--fs-body-lg); }
.player__downloads { display: flex; flex-wrap: wrap; }
.player__downloads > * { margin-right: var(--space-sm); margin-bottom: var(--space-sm); }
.player__art { position: relative; }
.player__art img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.player__art .glow { position: absolute; right: -8%; bottom: -12%; width: 46%; height: 46%; background: rgba(212,175,55,0.10); filter: blur(60px); border-radius: 50%; z-index: -1; }

/* ============================================================
   Community CTA
   ============================================================ */
.community-card {
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    border-color: rgba(212,175,55,0.28);
    background:
        radial-gradient(60% 100% at 50% 0%, rgba(88,101,242,0.10), transparent 62%),
        var(--panel);
}
.community-card > :not(.community-card__glyph) { position: relative; z-index: 1; }
.community-card > * + * { margin-top: var(--space-md); }
.community-card h2 { font-size: var(--fs-h2); }
.community-card p { color: var(--text-soft); max-width: 52ch; font-size: var(--fs-body-lg); }
.community-card__glyph {
    position: absolute; right: 3%; bottom: 18px; width: 160px; height: 160px;
    color: var(--cream); opacity: 0.05; z-index: 0; pointer-events: none;
}
.community-card__glyph svg { width: 100%; height: 100%; fill: currentColor; }
.btn-discord-ic { width: 20px; height: 20px; margin-right: 9px; fill: currentColor; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    margin-top: var(--space-xl);
    border-top: 1px solid var(--panel-border);
    background: linear-gradient(180deg, transparent, rgba(0,12,0,0.6));
}
.footer-grid {
    display: grid;
    /* brand ~40%, then four menu columns ~15% each */
    grid-template-columns: 2.66fr 1fr 1fr 1fr 1fr;
    grid-gap: var(--space-lg);
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-lg);
}
.footer-brand { display: flex; flex-direction: column; max-width: 38ch; }
.footer-brand > * + * { margin-top: var(--space-sm); }
.footer-brand .brand { margin-bottom: 4px; }
.footer-brand p { color: var(--text-soft); font-size: var(--fs-body); }
.footer-col h4 {
    font-family: var(--font-body); font-weight: 700;
    font-size: var(--fs-label-sm); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold); margin-bottom: var(--space-sm);
}
.footer-col a { display: block; color: var(--text-soft); padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-body); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--cream); }
.footer-bottom a { color: var(--text-soft); text-decoration: underline; }
.footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    padding-top: var(--space-md); padding-bottom: var(--space-md);
    border-top: 1px solid var(--panel-border);
    color: var(--text-muted); font-size: var(--fs-label-sm);
}
.footer-bottom > * { margin-right: 12px; margin-bottom: 4px; }
.footer-bottom a:hover { color: var(--cream); }

/* ============================================================
   Floating buttons (bottom-right): back-to-top + Discord
   ============================================================ */
.floaties {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    display: flex; flex-direction: column; align-items: center;
}
.floatie {
    width: 54px; height: 54px;
    display: -webkit-box; display: flex;
    -webkit-box-align: center; align-items: center;
    -webkit-box-pack: center; justify-content: center;
    border-radius: var(--r-full);
    background: var(--surface-2);
    border: 1px solid var(--panel-border-bright);
    color: var(--cream);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
                color var(--dur) var(--ease), background-color var(--dur) var(--ease),
                opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.floatie + .floatie { margin-top: 12px; }
.floatie:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--gold-strong); background: var(--surface-3); }
.floatie svg { width: 27px; height: 27px; }
.floatie--discord svg { fill: currentColor; }
/* Discord floating button larger than the back-to-top one (kept specific so it wins on mobile too) */
.floaties .floatie--discord { width: 64px; height: 64px; }
.floaties .floatie--discord svg { width: 32px; height: 32px; }
.floatie--top svg { fill: none; stroke: currentColor; stroke-width: 2; }
/* Back-to-top hidden until scrolled */
.floatie--top { opacity: 0; visibility: hidden; }
.floatie--top.is-visible { opacity: 1; visibility: visible; }

@media (max-width: 560px) {
    .floaties { right: 14px; bottom: 14px; }
    .floatie { width: 48px; height: 48px; }
    .floatie svg { width: 24px; height: 24px; }
    /* Game cards a touch more compact on phones (no image cropping) */
    .games-grid { grid-gap: var(--space-sm); gap: var(--space-sm); }
    .game-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
    .game-card__body > * + * { margin-top: 10px; }
    /* Footer: center the bottom legal line on phones */
    .footer-bottom { -webkit-box-pack: center; justify-content: center; text-align: center; }
    .footer-bottom > * { margin-right: 0; }
    /* Announcement: badge sits on its own centered line above the wrapped text */
    .announce__badge {
        display: block; width: -webkit-fit-content; width: fit-content;
        margin-left: auto; margin-right: auto; margin-bottom: 5px;
    }
}

/* ============================================================
   Gallery
   ============================================================ */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-md);
    gap: var(--space-md);
}
.gallery__tile {
    position: relative; width: 100%; padding-top: 66.66%; /* 3:2 */
    overflow: hidden;
    border-radius: var(--r-lg);
    border: 1px solid var(--panel-border);
    background: var(--surface-2);
}
.gallery__tile img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: -webkit-transform var(--dur-slow) var(--ease);
    transition: transform var(--dur-slow) var(--ease);
}
.gallery__tile:hover img { -webkit-transform: scale(1.06); transform: scale(1.06); }
.gallery__tile::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    box-shadow: inset 0 0 0 1px rgba(231,243,223,0.05);
    border-radius: var(--r-lg);
}

/* ============================================================
   News
   ============================================================ */
.news { max-width: 820px; margin-left: auto; margin-right: auto; }
.news__item {
    padding: 18px 0;
    border-bottom: 1px solid var(--panel-border);
}
.news__item:first-child { padding-top: 0; }
.news__date {
    display: block;
    font-size: var(--fs-label-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 6px;
}
.news__item h3 { font-size: 1.2rem; color: var(--cream); margin-bottom: 6px; }
.news__item p { color: var(--text-soft); font-size: var(--fs-body); }

/* ============================================================
   Announcement bar (above header; server-injectable later)
   ============================================================ */
.announce {
    background: linear-gradient(90deg, var(--surface-3), var(--surface-2));
    border-bottom: 1px solid var(--panel-border);
    color: var(--text);
    font-size: var(--fs-label);
}
.announce__inner {
    display: flex; align-items: center; justify-content: center;
    min-height: 42px;
    padding-top: 7px; padding-bottom: 7px; padding-left: 8px; padding-right: 8px;
}
/* Rotating items: only the active one shows, fading in on change */
.announce__track {
    position: relative; flex: 1 1 auto; min-height: 22px;
    display: flex; align-items: center; justify-content: center;
}
.announce__item { display: none; margin: 0; text-align: center; }
.announce__item.is-active { display: block; -webkit-animation: announceIn 0.45s var(--ease); animation: announceIn 0.45s var(--ease); }
@-webkit-keyframes announceIn { from { opacity: 0; -webkit-transform: translateX(20px); } to { opacity: 1; -webkit-transform: none; } }
@keyframes announceIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }
.announce__item a { color: var(--gold-strong); text-decoration: underline; font-weight: 600; margin-left: 6px; }
.announce__cd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold-strong); }
.announce__badge {
    display: inline-block; margin-right: 8px; padding: 2px 9px;
    border-radius: var(--r-full); background: var(--gold); color: var(--on-accent);
    font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.announce__nav {
    flex: 0 0 auto; width: 30px; height: 30px;
    display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
    background: transparent; border: 0; color: var(--text-soft); cursor: pointer; border-radius: var(--r);
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.announce__nav:hover { color: var(--cream); background: rgba(231,243,223,0.08); }
.announce__nav svg { width: 18px; height: 18px; }

/* ============================================================
   FAQ accordion (native <details>; works with no JS)
   ============================================================ */
.faq { max-width: 820px; margin-left: auto; margin-right: auto; }
.faq__item {
    border: 1px solid var(--panel-border);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(10,37,6,0.5), rgba(6,33,4,0.3));
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color var(--dur) var(--ease);
}
.faq__item[open] { border-color: var(--panel-border-bright); }
.faq__item summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body-lg); color: var(--cream);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-strong); }
.faq__icon { position: relative; width: 14px; height: 14px; flex: 0 0 auto; margin-left: 16px; }
.faq__icon::before, .faq__icon::after {
    content: ""; position: absolute; background: var(--gold); border-radius: 2px;
    transition: -webkit-transform var(--dur) var(--ease); transition: transform var(--dur) var(--ease);
}
.faq__icon::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq__icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq__item[open] .faq__icon::after { -webkit-transform: scaleY(0); transform: scaleY(0); }
.faq__body { padding: 0 20px 18px; color: var(--text-soft); }
.faq__body p { font-size: var(--fs-body); line-height: var(--lh-body); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
/* Only hide reveals when JS is present (head script adds .js). Without
   JS, or without IntersectionObserver, content stays fully visible. */
.js .reveal { opacity: 0; -webkit-transform: translateY(22px); transform: translateY(22px); transition: opacity 0.6s var(--ease), -webkit-transform 0.6s var(--ease); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.is-in { opacity: 1; -webkit-transform: none; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 768px) {
    .hero { min-height: 90vh; }
    .hero__card { padding: 44px; }
    .player__inner { padding: 48px; }
}

@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; max-width: none; }
    .player__inner { grid-template-columns: 1fr; grid-gap: var(--space-lg); gap: var(--space-lg); }
    .player__art { -webkit-box-ordinal-group: 0; order: -1; max-width: 560px; }
}

@media (max-width: 860px) {
    .nav, .header-actions .btn { display: none; }
    .nav-toggle { display: -webkit-box; display: flex; }
    .games-grid { grid-template-columns: 1fr; }
    .features { grid-template-columns: 1fr 1fr; }
    .gallery { grid-template-columns: 1fr 1fr; }
    .hero__card { padding: 24px; }
}

@media (max-width: 560px) {
    /* .features--2col is defined later in the file, so match its specificity */
    .features, .features.features--2col { grid-template-columns: 1fr; }
    /* feature cards: icon left, text right, more compact */
    .feature { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: start; align-items: flex-start; padding: 15px; }
    .feature > * + * { margin-top: 0; }
    .feature__icon { width: 42px; height: 42px; margin-right: 13px; }
    .feature__body > * + * { margin-top: 3px; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .section { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
    .section-head { margin-bottom: var(--space-md); }
    .hero__actions > * { flex: 1 1 auto; }
}

/* ============================================================
   Downloads page
   ============================================================ */
.dl-hero { padding-top: var(--space-lg); padding-bottom: var(--space-md); }
.dl-hero .section-head { margin-bottom: var(--space-md); }

.release-badge {
    display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: var(--r-full);
    background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.32);
    color: var(--gold-strong);
    font-size: var(--fs-label-sm); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
}
.release-badge svg { width: 15px; height: 15px; margin-right: 8px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Auto-download notice (revealed by JS once the download is triggered) */
.dl-banner {
    display: none;
    -webkit-box-align: center; align-items: center;
    max-width: 760px; margin-left: auto; margin-right: auto; margin-bottom: var(--space-md);
    padding: 13px 18px; border-radius: var(--r-md);
    background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.30);
    color: var(--text);
}
.dl-banner.is-active { display: -webkit-box; display: flex; }
.dl-banner__ic { width: 22px; height: 22px; margin-right: 12px; -webkit-box-flex: 0; flex: 0 0 auto; stroke: var(--gold-strong); fill: none; stroke-width: 1.8; }
.dl-banner p { font-size: var(--fs-body); }
.dl-banner a { color: var(--gold-strong); text-decoration: underline; font-weight: 600; }

/* Platform cards (Windows / macOS) */
.platform-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-md); gap: var(--space-md);
    max-width: 920px; margin-left: auto; margin-right: auto;
}
.platform-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: var(--space-md);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.platform-card:hover { transform: translateY(-4px); border-color: var(--panel-border-bright); background: var(--panel-hover); }
.platform-card.is-recommended { border-color: rgba(212, 175, 55, 0.55); }
.platform-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.platform-card__os { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; }
.platform-card__os svg { width: 30px; height: 30px; margin-right: 12px; fill: var(--gold); }
.platform-card__os h3 { font-size: var(--fs-h3); color: var(--cream); }
.platform-card__pick {
    display: none;
    font-size: var(--fs-label-sm); font-weight: 700; letter-spacing: var(--tracking-wide);
    color: var(--on-accent); background: var(--gold);
    padding: 4px 11px; border-radius: var(--r-full); white-space: nowrap;
}
.platform-card.is-recommended .platform-card__pick { display: -webkit-box; display: inline-flex; -webkit-box-align: center; align-items: center; }
.platform-card > p { color: var(--text-soft); font-size: var(--fs-body); }
.req-list { margin-top: var(--space-sm); margin-bottom: var(--space-md); }
.req-list li { display: flex; align-items: flex-start; color: var(--text-soft); font-size: var(--fs-body); margin-top: 9px; }
.req-list li:first-child { margin-top: 0; }
.req-list svg { width: 18px; height: 18px; margin-right: 10px; margin-top: 2px; -webkit-box-flex: 0; flex: 0 0 auto; stroke: var(--live); fill: none; stroke-width: 2; }
.platform-card__cta { margin-top: auto; }
.platform-card__cta .btn { width: 100%; }
.platform-card__note { text-align: center; color: var(--text-muted); font-size: var(--fs-label-sm); margin-top: 10px; }

/* Install steps */
.steps {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--space-md); gap: var(--space-md);
    max-width: 920px; margin-left: auto; margin-right: auto;
}
.step {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: var(--space-md);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(10, 37, 6, 0.55), rgba(6, 33, 4, 0.35));
    border: 1px solid var(--panel-border);
}
.step__num {
    width: 48px; height: 48px; margin-bottom: var(--space-sm);
    display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
    border-radius: var(--r-full);
    background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.32);
    font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--gold-strong);
}
.step h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--cream); margin-bottom: 6px; }
.step p { color: var(--text-soft); font-size: var(--fs-body); }

/* Client-value features: 2-column variant of the homepage feature grid */
.features--2col { grid-template-columns: 1fr 1fr; }

/* "Prefer not to install" note */
.dl-note { max-width: 760px; margin-left: auto; margin-right: auto; padding: var(--space-md); text-align: center; }
.dl-note p { color: var(--text-soft); font-size: var(--fs-body-lg); }
.dl-note code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.9em; color: var(--cream); }
.dl-note__links { display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); }
.dl-note__links > * { margin: 6px; }
/* A download option = a button (to the page) with a direct-download link under it */
.dl-get { display: flex; flex-wrap: wrap; justify-content: center; margin-top: var(--space-md); }
.dl-get__item { display: flex; flex-direction: column; align-items: center; margin: 8px 16px; }
.dl-get__direct {
    margin-top: 7px; font-size: var(--fs-label-sm); font-weight: 600;
    color: var(--text-soft); text-decoration: underline; text-underline-offset: 2px;
}
.dl-get__direct:hover { color: var(--gold-strong); }

@media (max-width: 860px) {
    .platform-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
}

/* ============================================================
   Documentation layout (Help / Privacy / Legal)
   Left TOC + a content card that scrolls on its own. The page and
   sidebar stay put; clicking a TOC item scrolls the card, not the page.
   ============================================================ */
.policy__layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    grid-gap: var(--space-lg); gap: var(--space-lg);
    /* Sidebar column must stretch to the row height, otherwise the sticky
       nav has nothing to stick within and scrolls away (not "locked"). */
    align-items: stretch;
}
.policy__toc nav {
    position: -webkit-sticky; position: sticky;
    top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.policy__toc-label {
    font-size: var(--fs-label-sm); font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
    margin-bottom: var(--space-sm); padding-left: 6px;
}
/* Items sit indented under the label */
.policy__toc a {
    display: block; padding: 7px 12px 7px 22px;
    border-left: 2px solid transparent; border-radius: 0 var(--r) var(--r) 0;
    color: var(--text-soft); font-size: var(--fs-label); font-weight: 600;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.policy__toc a:hover { color: var(--cream); background: rgba(231, 243, 223, 0.06); }
.policy__toc a.is-active { color: var(--gold-strong); background: var(--gold-soft); border-left-color: var(--gold); }
/* Clean focus: no detached offset box. Subtle for mouse, ring only for keyboard. */
.policy__toc a:focus, .policy__bar a:focus { outline: none; }
/* :focus first so a browser without :focus-visible still shows a ring. */
.policy__toc a:focus { outline: 2px solid var(--gold-strong); outline-offset: -2px; }
.policy__toc a:focus:not(:focus-visible) { outline: none; }
.policy__toc a:focus-visible { outline: 2px solid var(--gold-strong); outline-offset: -2px; }
/* Indented sub-heading entries (second level) */
.policy__toc a.is-sub { padding-left: 36px; font-size: var(--fs-label-sm); color: var(--text-muted); }
.policy__toc a.is-sub:hover { color: var(--cream); }

/* Content flows with the page; the sidebar stays locked (no inner scrollbar) */
.policy__body { padding: var(--space-lg); }
.policy__title .eyebrow { margin-bottom: 8px; }
.policy__title h1 { font-size: var(--fs-h2); }
.policy__meta { margin-top: 10px; color: var(--text-soft); font-size: var(--fs-body-lg); }
.policy__body section { margin-top: var(--space-lg); }
.policy__body section.is-sub { margin-top: var(--space-md); }
.policy__body h2 {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--cream);
    padding-bottom: var(--space-sm); margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--panel-border);
}
.policy__body h3 {
    font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--cream);
    margin-bottom: 8px;
}
.policy__body p { color: var(--text-soft); font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.policy__body p + p { margin-top: var(--space-sm); }
.policy__body a { color: var(--gold-strong); text-decoration: underline; }
.policy__body a:hover { color: var(--cream); }
.policy__body ol, .policy__body ul { margin-top: var(--space-sm); padding-left: 24px; color: var(--text-soft); font-size: var(--fs-body-lg); }
.policy__body ol li { margin-top: 10px; line-height: var(--lh-body); list-style: decimal; }
.policy__body ul li { margin-top: 8px; line-height: var(--lh-body); list-style: disc; }
.policy__body code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em;
    background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--r-sm);
    padding: 2px 6px; color: var(--cream); word-break: break-all;
}

/* Callout box (tips / notes) */
.callout {
    display: flex; align-items: flex-start;
    margin-top: var(--space-md);
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--gold-soft);
    border: 1px solid rgba(212, 175, 55, 0.30);
}
.callout svg { width: 20px; height: 20px; margin-right: 12px; margin-top: 2px; -webkit-box-flex: 0; flex: 0 0 auto; stroke: var(--gold-strong); fill: none; stroke-width: 1.8; }
.callout p { margin: 0; color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); }
.callout p strong { color: var(--cream); }

/* Tables inside doc pages */
.policy__body table {
    width: 100%; border-collapse: collapse;
    margin-top: var(--space-md); font-size: var(--fs-body);
}
.policy__body th, .policy__body td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.policy__body thead th { color: var(--gold); font-size: var(--fs-label-sm); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.policy__body tbody td { color: var(--text-soft); }
.policy__body tbody td:first-child { color: var(--cream); font-weight: 600; }
.policy__body tbody tr:last-child td { border-bottom: 0; }

/* Mobile heading bar (built by JS from the TOC); hidden on desktop */
.policy__bar { display: none; }

@media (max-width: 860px) {
    /* minmax(0,…) so a nowrap child cannot force the track wider than the screen */
    .policy__layout { grid-template-columns: minmax(0, 1fr); }
    .policy__toc { display: none; }
    /* Sticky heading bar replaces the sidebar; bleeds to the screen edges */
    .policy__bar {
        display: block;
        position: -webkit-sticky; position: sticky; top: var(--header-h); z-index: 6;
        margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
        margin-bottom: var(--space-md);
        padding: 10px var(--gutter);
        background: var(--surface-1);
        border-bottom: 1px solid var(--panel-border);
        overflow-x: auto; white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .policy__bar a {
        display: inline-block; margin-right: 8px;
        padding: 6px 13px; border-radius: var(--r-full);
        background: var(--surface-2); border: 1px solid var(--panel-border);
        color: var(--text-soft); font-size: var(--fs-label); font-weight: 600;
        text-decoration: none;
    }
    .policy__bar a:last-child { margin-right: 0; }
    .policy__bar a.is-active { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-strong); }
}

/* ============================================================
   FAQ page (doc layout; content shown as topic cards)
   ============================================================ */
.faq-doc > * + * { margin-top: var(--space-md); }
.faq-doc .policy__title { padding-left: 4px; padding-right: 4px; }
.faq-card { padding: var(--space-lg); }
.faq-card > h2 {
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3); color: var(--cream);
    padding-bottom: var(--space-sm); margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--panel-border);
}
.faq-qa + .faq-qa { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--panel-border); }
.faq-qa h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--cream); margin-bottom: 7px; }
.faq-qa p { color: var(--text-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.faq-qa a { color: var(--gold-strong); text-decoration: underline; }
.faq-qa a:hover { color: var(--cream); }

/* Rich content inside cards (the Help center uses h3 sub-headings, lists, tables).
   Scoped to direct children so it does not affect the FAQ Q&A blocks. */
.faq-card > h3 {
    font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--cream);
    margin-top: var(--space-md); margin-bottom: 8px;
}
.faq-card > h2 + h3, .faq-card > h2 + p { margin-top: 0; }
.faq-card > p { color: var(--text-soft); font-size: var(--fs-body); line-height: var(--lh-body); }
.faq-card > p + p { margin-top: var(--space-sm); }
.faq-card a { color: var(--gold-strong); text-decoration: underline; }
.faq-card a:hover { color: var(--cream); }
.faq-card > ol, .faq-card > ul { margin-top: var(--space-sm); padding-left: 24px; color: var(--text-soft); font-size: var(--fs-body); }
.faq-card ol li { margin-top: 10px; line-height: var(--lh-body); list-style: decimal; }
.faq-card ul li { margin-top: 8px; line-height: var(--lh-body); list-style: disc; }
.faq-card code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.9em;
    background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--r-sm);
    padding: 2px 6px; color: var(--cream); word-break: break-all;
}
.faq-card > table { width: 100%; border-collapse: collapse; margin-top: var(--space-md); font-size: var(--fs-body); }
.faq-card th, .faq-card td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--panel-border); vertical-align: top; }
.faq-card thead th { color: var(--gold); font-size: var(--fs-label-sm); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.faq-card tbody td { color: var(--text-soft); }
.faq-card tbody td:first-child { color: var(--cream); font-weight: 600; }
.faq-card tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   Contact page
   ============================================================ */
.contact-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    grid-gap: var(--space-md); gap: var(--space-md);
    max-width: 760px; margin-left: auto; margin-right: auto;
}
.contact-card {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--space-md);
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.contact-card:hover { transform: translateY(-4px); border-color: var(--panel-border-bright); background: var(--panel-hover); }
.contact-card__icon {
    width: 46px; height: 46px; margin-bottom: var(--space-sm);
    display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center;
    border-radius: var(--r-md); background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, 0.30);
}
.contact-card__icon svg { width: 24px; height: 24px; stroke: var(--gold-strong); fill: none; stroke-width: 1.7; }
.contact-card__icon svg.is-fill { fill: var(--gold-strong); stroke: none; }
.contact-card h3 { font-size: var(--fs-h3); color: var(--cream); margin-bottom: 8px; }
.contact-card p { color: var(--text-soft); font-size: var(--fs-body); margin-bottom: var(--space-md); }
.contact-card .btn { margin-top: auto; }
.contact-note {
    max-width: 760px; margin-left: auto; margin-right: auto; margin-top: var(--space-md);
    color: var(--text-muted); font-size: var(--fs-body); text-align: center;
}
.contact-note a { color: var(--gold-strong); text-decoration: underline; }

@media (max-width: 560px) {
    .contact-grid { grid-template-columns: 1fr; }
    .policy__body { padding: var(--space-md); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    .reveal { opacity: 1; -webkit-transform: none; transform: none; }
}

/* ============================================================
   Cross-document view transitions

   Opts every same-origin navigation into a native crossfade, so
   moving between pages reads as one app rather than a reload.
   Browsers without support navigate normally, and anyone who has
   asked for reduced motion gets an instant cut.
   ============================================================ */

@view-transition {
    navigation: auto;
}

/* The outgoing frame is held at full opacity for the whole transition and
   the incoming one fades in on top of it. Cross-fading both leaves their
   combined opacity below 1 partway through, and the page flashes. */
::view-transition-old(root) {
    animation: latteHold 0.26s linear both;
}

::view-transition-new(root) {
    animation: latteFadeIn 0.26s var(--ease) both;
}

@keyframes latteHold {
    from, to { opacity: 1; }
}

@keyframes latteFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* The header and footer are on every page, so holding them still
   across a navigation is what makes it feel like one document. */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }

/* A named element is cut out of the root snapshot, so a gap in its own
   cross-fade would show the canvas through that hole. Both frames are
   held opaque; the content is identical across pages anyway. */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: latteHold 0.26s linear both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* ============================================================
   Mobile and installed-app refinements
   ============================================================ */

/* Tables keep table semantics; a fixed layout makes the columns share the
   screen width and wrap instead of pushing the page sideways. */
@media (max-width: 560px) {
    .faq-card > table, .policy__body table { table-layout: fixed; }
    .faq-card th, .faq-card td,
    .policy__body th, .policy__body td { padding: 9px 10px; }
}

/* Notch and home-indicator clearance. */
@supports (padding: max(0px)) {
    .container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
    .site-footer { padding-bottom: max(var(--space-lg), env(safe-area-inset-bottom)); }
    .mobile-nav__panel { padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
}

/* Touch devices: no hover lift, and every control reaches a 44px target. */
@media (pointer: coarse) {
    .feature:hover, .game-card:hover, .btn:hover { transform: none; }
    .btn, .nav-toggle, .mobile-nav a { min-height: 44px; }
    .policy__bar a { min-height: 40px; display: inline-flex; align-items: center; }
    /* The announcement arrows are 30px by design on desktop; a finger
       needs the full target, so grow the hit area without the visuals. */
    .announce__nav { width: 44px; height: 44px; }
    .footer-col a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Installed app: the browser chrome is gone, so reclaim its breathing room
   and drop calls to action that only make sense in a tab. */
@media (display-mode: standalone) {
    .install-cta { display: none !important; }
    .site-header { padding-top: env(safe-area-inset-top); }
}

/* Add-to-home-screen prompt, shown only once the browser offers it. */
.install-cta { display: none; }
.install-cta.is-ready { display: inline-flex; }

/* Add-to-home-screen block on the downloads page. */
.webapp-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-md);
    align-items: center;
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--r-lg);
}
.webapp-cta h3 { margin: 6px 0 8px; font-family: var(--font-display); font-size: var(--fs-h3); color: var(--cream); }
.webapp-cta p { margin: 0; max-width: 62ch; color: var(--text-soft); }
.webapp-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 720px) {
    .webapp-cta { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Page banner

   The same forest artwork and gradient as the homepage hero, as a
   shorter band behind the top of every other page. The header is
   transparent until scrolled, so the banner reads continuously from the
   very top the way the hero does.
   ============================================================ */

.page-bg {
    position: absolute;
    top: 0;
    left: 0;
    /* Explicit width, not left+right: the body is the containing block and
       an auto width resolved to nothing there. */
    width: 100%;
    height: 460px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background-image: url("/assets/img/hero-forest.svg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}



.page-bg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* Darker at the top so the header stays legible, easing down into the
       surface colour so the band has no visible edge. */
    background:
        linear-gradient(180deg, rgba(1,18,0,0.72) 0%, rgba(1,18,0,0.58) 30%, rgba(1,18,0,0.80) 66%, var(--surface) 100%),
        radial-gradient(60% 60% at 50% 40%, transparent, rgba(1,18,0,0.35));
}

/* Everything real sits above the band. The header is deliberately absent:
   it is already sticky with its own z-index, and giving it position:
   relative here silently un-stuck it. */
body { position: relative; }
body > main,
body > .site-footer,
body > .announce { position: relative; z-index: 1; }

@media (max-width: 860px) {
    .page-bg { height: 360px; }
}