/*
 * Blight Light — site styles.
 * No build step: this file ships as-is. Layers keep specificity predictable.
 */
@layer reset, base, components, sections;

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
    ul, ol { padding: 0; list-style: none; }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
    code { font: inherit; }
    [hidden] { display: none !important; }
}

/* ───────────────────────── tokens + base ───────────────────────── */
@layer base {
    :root {
        color-scheme: dark;

        /* Surfaces: near-black with an olive cast, never pure black. */
        --bg: oklch(0.155 0.012 95);
        --bg-deep: oklch(0.12 0.01 95);
        --panel: oklch(0.18 0.013 95);
        --panel-2: oklch(0.205 0.015 95);

        /* Lines: bronze frame, soft dividers. */
        --line: oklch(0.52 0.07 80 / 0.55);
        --line-strong: oklch(0.7 0.1 80 / 0.85);
        --line-soft: oklch(0.36 0.02 95 / 0.75);

        /* Ink: bone white down to meta. All pass 4.5:1 on --panel. */
        --ink: oklch(0.95 0.012 95);
        --ink-2: oklch(0.83 0.014 95);
        --ink-3: oklch(0.72 0.014 95);

        /* Accents. Gold is for the one primary action; green is the Blight. */
        --gold: oklch(0.8 0.135 78);
        --gold-ink: oklch(0.2 0.03 70);
        --blight: oklch(0.87 0.2 128);
        --blight-soft: oklch(0.87 0.2 128 / 0.14);
        --ember: oklch(0.68 0.18 40);
        --danger: oklch(0.68 0.19 28);
        --discord: oklch(0.58 0.2 277);

        --font-display: "Anton", "Impact", "Haettenschweiler", sans-serif;
        --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
        --font-body: "Barlow", system-ui, sans-serif;
        --font-script: "Permanent Marker", "Segoe Print", cursive;

        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --gutter: clamp(16px, 3vw, 44px);
        --maxw: 1600px;

        --z-raised: 2;
        --z-header: 30;
        --z-menu: 40;
        --z-skip: 60;
    }

    html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 24px; }

    body {
        min-height: 100vh;
        overflow-x: clip;
        background: var(--bg);
        color: var(--ink-2);
        font: 400 1rem/1.6 var(--font-body);
        -webkit-font-smoothing: antialiased;
    }

    :focus-visible { outline: 2px solid var(--blight); outline-offset: 3px; }
    ::selection { background: var(--blight); color: var(--bg-deep); }

    .sr-only {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    .skip {
        position: absolute; left: 12px; top: -80px; z-index: var(--z-skip);
        padding: 10px 16px; background: var(--blight); color: var(--bg-deep);
        font: 700 .95rem/1 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
    }
    .skip:focus { top: 12px; }

    .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

    @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {

    .icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; }

    /* Framed panel: bronze hairline with brighter corner brackets. */
    .frame {
        position: relative;
        background:
            url("../images/grain.svg") repeat,
            linear-gradient(180deg, var(--panel-2), var(--panel));
        background-blend-mode: soft-light, normal;
        border: 1px solid var(--line);
        box-shadow: 0 30px 60px -34px oklch(0 0 0 / .85), inset 0 1px 0 oklch(1 0 0 / .04);
    }
    .frame::before {
        content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: var(--z-raised);
        --c: var(--line-strong);
        background:
            linear-gradient(var(--c), var(--c)) top left / 16px 2px,
            linear-gradient(var(--c), var(--c)) top left / 2px 16px,
            linear-gradient(var(--c), var(--c)) top right / 16px 2px,
            linear-gradient(var(--c), var(--c)) top right / 2px 16px,
            linear-gradient(var(--c), var(--c)) bottom left / 16px 2px,
            linear-gradient(var(--c), var(--c)) bottom left / 2px 16px,
            linear-gradient(var(--c), var(--c)) bottom right / 16px 2px,
            linear-gradient(var(--c), var(--c)) bottom right / 2px 16px;
        background-repeat: no-repeat;
    }

    /* Section title: tracked caps with a gold rule. */
    .sect-title {
        display: flex; align-items: center; gap: 14px;
        font: 600 clamp(1.02rem, 1.4vw, 1.25rem)/1 var(--font-label);
        letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
    }
    .sect-title::after {
        content: ""; flex: 0 0 64px; height: 7px;
        background:
            linear-gradient(var(--gold), var(--gold)) left center / calc(100% - 9px) 1px no-repeat,
            linear-gradient(45deg, transparent 30%, var(--gold) 30% 70%, transparent 70%) right center / 7px 7px no-repeat;
        opacity: .8;
    }

    /* Buttons. */
    .btn {
        display: inline-flex; align-items: center; gap: 14px;
        min-height: 60px; padding: 10px 26px 10px 20px;
        border: 1px solid transparent; border-radius: 3px;
        font: 700 1.3rem/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; text-align: left;
        transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), background-color .25s, color .25s, border-color .25s;
    }
    .btn .icon { width: 26px; height: 26px; }
    .btn small {
        display: block; margin-top: 5px;
        font: 600 .68rem/1 var(--font-label); letter-spacing: .16em; opacity: .8;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn__arrow { transition: transform .3s var(--ease-out); }
    .btn:hover .btn__arrow { transform: translateX(4px); }

    .btn--gold {
        color: var(--gold-ink);
        background: linear-gradient(180deg, oklch(0.87 0.13 85), oklch(0.72 0.14 70));
        border-color: oklch(0.93 0.09 88);
        box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), inset 0 -3px 0 oklch(0.5 0.1 60 / .45), 0 12px 32px -12px oklch(0.8 0.135 78 / .7);
    }
    .btn--gold:hover { box-shadow: inset 0 1px 0 oklch(1 0 0 / .5), inset 0 -3px 0 oklch(0.5 0.1 60 / .45), 0 16px 44px -8px oklch(0.8 0.135 78 / .85); }

    .btn--dark { color: var(--ink); background: oklch(0.12 0.01 95 / .85); border-color: var(--line-strong); }
    .btn--dark:hover { border-color: var(--blight); }
    .btn--dark:hover .icon { color: var(--blight); }

    .btn--connect {
        min-height: 48px; padding: 0 16px; gap: 10px; font-size: 1.05rem;
        color: var(--blight); background: oklch(0.87 0.2 128 / .08); border-color: var(--blight);
        box-shadow: inset 0 0 0 1px oklch(0.87 0.2 128 / .18), 0 0 26px -6px oklch(0.87 0.2 128 / .45);
    }
    .btn--connect .icon { width: 20px; height: 20px; }
    .btn--connect:hover { color: var(--bg-deep); background: var(--blight); }

    .btn--line {
        min-height: 46px; padding: 0 16px; gap: 10px; font-size: 1rem;
        color: var(--blight); border-color: var(--blight); background: oklch(0.87 0.2 128 / .06);
    }
    .btn--line .icon { width: 18px; height: 18px; }
    .btn--line:hover { color: var(--bg-deep); background: var(--blight); }

    /* Handwritten margin notes from the mockup, underlined with a green brush. */
    .note {
        position: absolute; pointer-events: none; z-index: var(--z-raised);
        font: 400 clamp(1.05rem, 1.55vw, 1.55rem)/1.08 var(--font-script);
        color: var(--ink); text-transform: uppercase;
        transform: rotate(-8deg); transform-origin: left top;
        text-shadow: 0 2px 14px oklch(0 0 0 / .75);
    }
    .note::after {
        content: ""; display: block; width: 78%; height: .5em; margin: .3em 0 0 18%;
        background: url("../images/brush.svg") center / 100% 100% no-repeat;
        filter: drop-shadow(0 0 6px oklch(0.87 0.2 128 / .45));
    }

    /* Painted art, or a designed stand-in until the painting exists. */
    .art { width: 100%; height: 100%; object-fit: cover; }
    .art--empty {
        position: relative; display: grid; place-items: center; overflow: hidden;
        background:
            url("../images/treeline.svg") center bottom / 100% 46% no-repeat,
            radial-gradient(70% 90% at var(--hx, 35%) 88%, oklch(0.87 0.2 128 / .3), transparent 70%),
            radial-gradient(55% 70% at var(--ex, 75%) 24%, oklch(0.68 0.18 40 / .38), transparent 72%),
            linear-gradient(180deg, oklch(0.25 0.035 118), oklch(0.15 0.015 95));
    }
    .art--empty::after {
        content: ""; position: absolute; inset: 0;
        background: url("../images/grain.svg"); opacity: .35; mix-blend-mode: overlay;
    }
    .art__icon {
        position: relative; z-index: 1; width: 30%; max-width: 64px; height: auto; aspect-ratio: 1;
        margin-bottom: 12%;
        color: oklch(0.87 0.2 128 / .62);
        filter: drop-shadow(0 0 14px oklch(0.87 0.2 128 / .55));
    }

    /* Status dot. */
    .dot {
        width: 12px; height: 12px; border-radius: 50%; flex: none;
        background: var(--ink-3); box-shadow: 0 0 0 3px oklch(1 0 0 / .06);
    }

    .chip {
        display: inline-block; margin-bottom: 5px; padding: 4px 7px 3px;
        border: 1px solid currentColor;
        font: 700 .64rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
        color: var(--ink-3);
    }
    .chip--upcoming { color: var(--blight); background: var(--blight-soft); }
    .chip--event { color: var(--gold); }
    .chip--update { color: var(--ink-2); }
}

/* ───────────────────────── sections ───────────────────────── */
@layer sections {

    /* ── Header ── */
    .site-header { position: absolute; inset: 0 0 auto 0; z-index: var(--z-header); padding-top: 12px; }
    .site-header__bar {
        width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto;
        display: flex; align-items: center; gap: 20px; min-height: 64px;
    }

    .brand { display: flex; align-items: center; gap: 12px; color: var(--gold); }
    .brand__mark { width: 44px; height: 44px; filter: drop-shadow(0 0 12px oklch(0.8 0.135 78 / .35)); }
    .brand__light { fill: var(--blight); filter: drop-shadow(0 0 4px var(--blight)); }
    .brand__word {
        display: flex; flex-direction: column; white-space: nowrap;
        font: 400 1.65rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
    }
    .brand__word small {
        margin-top: 5px;
        font: 600 .62rem/1 var(--font-label); letter-spacing: .3em; color: var(--gold);
    }

    .nav {
        margin-inline: auto; display: flex; align-items: center; gap: 2px;
        padding: 6px 34px;
        background: linear-gradient(180deg, oklch(0.11 0.01 95 / .86), oklch(0.13 0.012 95 / .72));
        border-block: 1px solid var(--line);
        clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 100%, 0 100%);
    }
    .nav a {
        position: relative; padding: 13px 16px; white-space: nowrap;
        font: 600 .92rem/1 var(--font-label); letter-spacing: .15em; text-transform: uppercase;
        color: var(--ink-2); transition: color .25s var(--ease-out);
    }
    .nav a::after {
        content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
        background: var(--blight); transform: scaleX(0); transform-origin: left;
        transition: transform .35s var(--ease-out);
    }
    .nav a:hover { color: var(--ink); }
    .nav a:hover::after { transform: scaleX(1); }
    .nav a[aria-current="page"] {
        color: var(--blight);
        background: linear-gradient(180deg, transparent, oklch(0.87 0.2 128 / .13));
        box-shadow: inset 0 0 0 1px oklch(0.87 0.2 128 / .22);
    }
    .nav a[aria-current="page"]::after { transform: scaleX(1); box-shadow: 0 0 12px var(--blight); }
    .nav__connect { display: none; }

    .menu-btn {
        display: none; place-items: center; width: 46px; height: 46px; margin-left: auto;
        border: 1px solid var(--line-strong); background: oklch(0.12 0.01 95 / .85); color: var(--ink);
    }
    .menu-btn .icon { width: 24px; height: 24px; grid-area: 1 / 1; }
    .menu-btn__close { opacity: 0; }
    [data-open] .menu-btn__open { opacity: 0; }
    [data-open] .menu-btn__close { opacity: 1; }

    /* Account: Steam sign-in, or the signed-in player's menu (My tickets, Sign out). */
    .acct { position: relative; flex: none; }
    .acct__signin, .acct > summary {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
        color: var(--ink-2); background: oklch(0.12 0.01 95 / .85); border: 1px solid var(--line-strong);
        font: 600 .9rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
        transition: color .2s, border-color .2s;
    }
    .acct__signin { flex: none; padding: 0 14px; }
    .acct__signin .icon { width: 18px; height: 18px; }
    .acct__signin:hover, .acct > summary:hover, .acct[open] > summary { color: var(--ink); border-color: var(--gold); }
    .acct > summary { position: relative; width: 46px; padding: 0; list-style: none; cursor: pointer; }
    .acct > summary::-webkit-details-marker { display: none; }
    .acct__avatar, .acct__initial { width: 30px; height: 30px; }
    .acct__avatar { object-fit: cover; }
    .acct__initial { display: grid; place-items: center; color: var(--gold); background: var(--panel); font: 700 1rem/1 var(--font-label); }
    .acct__dot {
        position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%;
        background: var(--blight); box-shadow: 0 0 0 2px var(--bg-deep), 0 0 10px var(--blight);
    }
    .acct__menu {
        position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-menu); display: grid; min-width: 240px; padding: 6px;
        background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 60px -20px oklch(0 0 0 / .9);
    }
    .acct__who { margin: 0; padding: 10px 12px 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink-3); font-size: .85rem; }
    .acct__who b { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .acct__menu form { margin: 0; }
    .acct__menu :is(a, button) {
        display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; cursor: pointer;
        color: var(--ink-2); background: none; border: 0; text-align: left;
        font: 600 .92rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase;
    }
    .acct__menu :is(a, button):hover { color: var(--ink); background: oklch(1 0 0 / .05); }
    .acct__menu .icon { width: 18px; height: 18px; color: var(--gold); }
    .acct__count {
        margin-left: auto; min-width: 22px; padding: 4px 6px 3px; text-align: center;
        color: var(--bg-deep); background: var(--blight); font: 700 .78rem/1 var(--font-label); letter-spacing: 0;
    }

    /* The alerts bell, beside the account button and built the same way. Signed-in only. */
    .bell {
        position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px;
        color: var(--ink-2); background: oklch(0.12 0.01 95 / .85); border: 1px solid var(--line-strong);
        transition: color .2s, border-color .2s;
    }
    .bell:hover, .bell[aria-current] { color: var(--ink); border-color: var(--gold); }
    .bell:focus-visible { outline: 2px solid var(--blight); outline-offset: 2px; }
    .bell .icon { width: 20px; height: 20px; }
    .bell__count {
        position: absolute; top: -7px; right: -7px; min-width: 20px; padding: 4px 5px 3px; text-align: center;
        color: var(--bg-deep); background: var(--blight); box-shadow: 0 0 0 2px var(--bg-deep), 0 0 10px var(--blight);
        font: 700 .72rem/1 var(--font-label); letter-spacing: 0;
    }
    .bell__count[hidden] { display: none; }

    /* ── Hero ── */
    .hero {
        position: relative; isolation: isolate; overflow: hidden;
        min-height: clamp(660px, 96vh, 920px);
        display: grid; place-items: center; text-align: center;
        padding: 132px var(--gutter) clamp(180px, 22vh, 240px);
        background: linear-gradient(180deg,
            oklch(0.17 0.03 180) 0%, oklch(0.23 0.05 150) 30%,
            oklch(0.33 0.085 100) 58%, oklch(0.4 0.11 70) 74%, oklch(0.24 0.05 70) 100%);
    }
    .hero__sky {
        position: absolute; z-index: -4;
        width: max(1150px, 82vw); height: auto; aspect-ratio: 1; max-width: none;
        right: -20vw; top: -38%;
        opacity: .92;
        -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
        mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
    }
    .scene { position: absolute; z-index: -3; inset: auto 0 0 0; width: 100%; height: clamp(260px, 27vw, 520px); max-width: none; }
    .scene__far { fill: oklch(0.27 0.04 145); }
    .scene__mid { fill: oklch(0.2 0.03 140); }
    .scene__near { fill: oklch(0.12 0.012 95); }
    .scene__heli { fill: oklch(0.17 0.015 95); }
    .scene__seams { fill: none; stroke: oklch(0.29 0.035 140); stroke-width: 1.3; }
    .scene__fog {
        fill: var(--blight); opacity: .2;
        transform-box: fill-box; transform-origin: center;
        animation: fog-drift 36s ease-in-out infinite alternate;
    }
    .scene__fog--mid { opacity: .14; animation-duration: 52s; animation-direction: alternate-reverse; }

    .hero__shade {
        position: absolute; inset: 0; z-index: -2; pointer-events: none;
        background:
            radial-gradient(56% 46% at 50% 46%, oklch(0.1 0.01 95 / .7), oklch(0.1 0.01 95 / .25) 72%, transparent),
            linear-gradient(180deg, oklch(0.1 0.01 95 / .75), transparent 20%);
    }
    .hero::after {
        content: ""; position: absolute; inset: auto 0 0 0; z-index: -1; height: 22%;
        background: linear-gradient(180deg, transparent, oklch(0.155 0.012 95 / .8) 60%, var(--bg));
        pointer-events: none;
    }

    .hero__inner { max-width: 1060px; display: grid; justify-items: center; gap: 18px; }

    .kicker {
        display: inline-flex; align-items: center; gap: 16px;
        font: 600 clamp(.76rem, 1.1vw, .95rem)/1.2 var(--font-label);
        letter-spacing: .34em; text-transform: uppercase; color: var(--ink-2);
    }
    .kicker::before, .kicker::after {
        content: ""; width: clamp(22px, 4vw, 60px); height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold));
    }
    .kicker::after { transform: scaleX(-1); }

    .hero__title {
        font: 400 clamp(3rem, 8.4vw, 6rem)/.92 var(--font-display);
        letter-spacing: .012em; text-transform: uppercase; color: var(--ink);
        text-wrap: balance;
        -webkit-mask: url("../images/grunge.svg") 0 0 / 480px 240px repeat;
        mask: url("../images/grunge.svg") 0 0 / 480px 240px repeat;
        filter: drop-shadow(0 8px 26px oklch(0 0 0 / .6));
    }
    .hero__line { display: inline-block; }
    .hero__title em {
        font-style: normal; color: var(--blight);
        text-shadow: 0 0 28px oklch(0.87 0.2 128 / .45);
    }

    .hero__tags {
        display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px;
        font: 600 clamp(.84rem, 1.25vw, 1.05rem)/1.2 var(--font-label);
        letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
    }
    .hero__tags span + span::before { content: "•"; margin: 0 .85em; color: var(--gold); }

    .hero__lede {
        max-width: 62ch; color: var(--ink-2);
        font-size: clamp(.98rem, 1.15vw, 1.08rem); line-height: 1.6; text-wrap: pretty;
    }

    .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 8px; }

    .note--hero { right: clamp(28px, 7vw, 150px); top: 33%; font-size: clamp(1.2rem, 1.9vw, 1.9rem); }

    /* Entrance: starts readable (blurred and lower, never invisible). */
    .kicker, .hero__line, .hero__tags, .hero__lede, .hero__cta {
        animation: rise 1s var(--ease-out) both;
    }
    .hero__line:nth-child(1) { animation-delay: .08s; }
    .hero__line:nth-child(2) { animation-delay: .18s; }
    .hero__tags { animation-delay: .32s; }
    .hero__lede { animation-delay: .42s; }
    .hero__cta { animation-delay: .52s; }

    /* ── Server strip ── */
    .strip {
        z-index: var(--z-raised); margin-top: -120px;
        display: grid; grid-template-columns: minmax(300px, 1.45fr) minmax(0, 5fr);
    }
    .strip__id {
        display: flex; align-items: center; gap: 16px; padding: 14px 18px;
        border-right: 1px solid var(--line-soft);
    }
    .strip__id img {
        width: 128px; height: 72px; flex: none; object-fit: cover; object-position: 10% 50%;
        border: 1px solid var(--line);
    }
    .strip__name {
        font: 400 1.5rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
    }
    .strip__name span { color: var(--blight); }
    .strip__tags {
        display: flex; flex-wrap: wrap; margin-top: 9px;
        font: 600 .74rem/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
    }
    .strip__tags span:not(:last-child)::after { content: "|"; margin: 0 .6em; color: var(--gold); }

    /* 1px gaps over a line-coloured background draw the grid rules at any column count. */
    .strip__stats {
        display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 1px; background: var(--line-soft);
    }
    .stat {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: center;
        padding: 16px 16px; background: var(--panel);
    }
    .stat > .icon, .stat > .dot { grid-row: span 2; align-self: center; }
    .stat > .icon { width: 28px; height: 28px; color: var(--ink-2); }
    .stat > .dot { margin-inline: 8px; }
    .stat__label {
        font: 600 .7rem/1.2 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
    }
    .stat__value {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px;
        font: 600 1.08rem/1.3 var(--font-label); letter-spacing: .03em; color: var(--ink);
        font-variant-numeric: tabular-nums;
    }
    .stat__value small {
        flex-basis: 100%;
        font: 400 .78rem/1.35 var(--font-body); letter-spacing: 0; color: var(--ink-3);
    }
    .stat__of { color: var(--ink-3); }
    .stat__none { color: var(--ink-3); font-weight: 500; }
    .stat__count { color: var(--ink); }
    .stat__ip { font: 600 1rem/1.3 var(--font-label); letter-spacing: .04em; overflow-wrap: anywhere; }
    .stat__link { color: var(--blight); text-decoration: underline; text-underline-offset: 3px; }

    .stat--online > .icon { color: var(--blight); }
    .stat--online > .dot {
        background: var(--blight);
        box-shadow: 0 0 0 0 oklch(0.87 0.2 128 / .6), 0 0 12px var(--blight);
        animation: pulse 2.4s ease-out infinite;
    }
    .stat--online .stat__value { color: var(--blight); }
    .stat--offline > .dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
    .stat--offline .stat__value { color: var(--danger); }

    .copy {
        display: inline-grid; place-items: center; width: 40px; height: 40px;
        border: 1px solid var(--line); color: var(--ink-2); background: oklch(0.12 0.01 95);
        transition: color .2s, border-color .2s;
    }
    .copy .icon { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .2s, transform .3s var(--ease-out); }
    .copy__done { opacity: 0; transform: scale(.6); color: var(--blight); }
    .copy:hover { color: var(--blight); border-color: var(--blight); }
    .copy[data-state="copied"] .copy__idle { opacity: 0; transform: scale(.6); }
    .copy[data-state="copied"] .copy__done { opacity: 1; transform: scale(1); }

    /* ── Server information ── */
    .intel {
        margin-top: 22px;
        display: grid; grid-template-columns: minmax(240px, 22%) minmax(0, 1fr) minmax(210px, 18%);
    }
    .intel__art { position: relative; overflow: hidden; border-right: 1px solid var(--line-soft); min-height: 240px; }
    .intel__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }
    .intel__art::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(180deg, oklch(0.1 0.01 95 / .7), transparent 45%, oklch(0.1 0.01 95 / .35));
    }
    .note--intel { left: 18px; top: 22px; font-size: clamp(1rem, 1.3vw, 1.3rem); }

    .intel__body { padding: 22px 26px 24px; min-width: 0; }
    .facts {
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin-top: 18px;
    }
    .fact { display: flex; gap: 14px; align-items: flex-start; }
    .fact__icon {
        flex: none; display: grid; place-items: center; width: 58px; height: 58px;
        color: var(--blight);
        border: 1px solid var(--line);
        background: radial-gradient(circle at 50% 42%, oklch(0.87 0.2 128 / .16), transparent 70%), var(--bg-deep);
        box-shadow: inset 0 0 0 3px var(--bg-deep), inset 0 0 0 4px oklch(0.52 0.07 80 / .35);
    }
    .fact__icon .icon { width: 28px; height: 28px; filter: drop-shadow(0 0 6px oklch(0.87 0.2 128 / .4)); }
    .fact__text { font-size: .88rem; line-height: 1.42; color: var(--ink-3); text-wrap: pretty; }
    .fact__text strong {
        display: block; margin: 3px 0 4px;
        font: 700 .98rem/1.15 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
    }
    .facts--small {
        grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 14px 18px;
        margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
    }
    .facts--small .fact { gap: 12px; align-items: center; }
    .facts--small .fact__icon { width: 44px; height: 44px; }
    .facts--small .fact__icon .icon { width: 22px; height: 22px; }
    .facts--small .fact__text { font-size: .8rem; }
    .facts--small .fact__text strong { font-size: .84rem; margin: 0 0 2px; }

    .intel__operator { position: relative; min-width: 0; }
    .intel__operator img {
        position: absolute; right: 0; bottom: 0; width: calc(100% + 24px); height: calc(100% + 46px); max-width: none;
        object-fit: cover; object-position: 62% 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
        mask-image: linear-gradient(90deg, transparent, #000 34%);
    }
    .note--operator { right: 14px; top: 28%; transform: rotate(-10deg); }

    /* ── Key features ── */
    .features { margin-top: 30px; }
    .features__head {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: 10px 24px; margin-bottom: 14px;
    }
    .features__tag {
        font: 600 .8rem/1.2 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
    }
    .features__tag span { color: var(--blight); margin: 0 .3em; }

    .feat-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
    .feat {
        position: relative; display: flex; flex-direction: column; overflow: hidden;
        background: var(--panel); border: 1px solid var(--line-soft);
        transition: border-color .35s var(--ease-out), transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
    }
    .feat > .art { aspect-ratio: 16 / 10; height: auto; transition: transform .8s var(--ease-out), filter .8s var(--ease-out); }
    .feat__body { position: relative; padding: 26px 14px 16px; flex: 1; }
    .feat__badge {
        position: absolute; left: 12px; top: -22px;
        display: grid; place-items: center; width: 42px; height: 42px;
        color: var(--blight); background: var(--bg-deep); border: 1px solid var(--line);
        box-shadow: 0 6px 16px -6px oklch(0 0 0 / .8);
    }
    .feat__badge .icon { width: 22px; height: 22px; filter: drop-shadow(0 0 6px oklch(0.87 0.2 128 / .55)); }
    .feat h3 {
        font: 700 1rem/1.15 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
    }
    .feat p { margin-top: 6px; font-size: .85rem; line-height: 1.42; color: var(--ink-3); text-wrap: pretty; }
    .feat:hover {
        border-color: oklch(0.87 0.2 128 / .6); transform: translateY(-4px);
        box-shadow: 0 22px 40px -22px oklch(0 0 0 / .9), 0 0 0 1px oklch(0.87 0.2 128 / .22), 0 0 30px -12px oklch(0.87 0.2 128 / .5);
    }
    .feat:hover > .art { transform: scale(1.06); filter: saturate(1.15) brightness(1.06); }

    /* ── Why play here + news ── */
    .lower {
        margin-top: 30px;
        display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(330px, 1fr); gap: 16px;
    }
    .why { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.45fr); overflow: hidden; }
    .why__text { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; }
    .why__title {
        font: 400 clamp(1.7rem, 2.3vw, 2.2rem)/1 var(--font-display);
        letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
    }
    .why__by {
        margin-top: -4px;
        font: 600 .74rem/1.2 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
    }
    .why__by span { color: var(--blight); margin: 0 .3em; }
    .why__text > p:not(.why__by) { max-width: 56ch; font-size: .96rem; text-wrap: pretty; }

    .reasons { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: auto; padding-top: 12px; }
    .reason { display: flex; align-items: center; gap: 10px; font-size: .78rem; line-height: 1.3; color: var(--ink-3); }
    .reason__icon {
        display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
        color: var(--blight); border: 1px solid oklch(0.87 0.2 128 / .45); background: var(--blight-soft);
    }
    .reason__icon .icon { width: 19px; height: 19px; }
    .reason strong {
        display: block; font: 700 .8rem/1.1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
    }

    .why__art { position: relative; min-height: 260px; border-left: 1px solid var(--line-soft); }
    .why__art > .art { position: absolute; inset: 0; }
    .why__art::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(90deg, oklch(0.18 0.013 95 / .55), transparent 30%);
    }
    .note--why { right: 9%; top: 16%; }

    .news { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 14px; }
    .news__list { display: grid; gap: 4px; }
    .news-item {
        display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 12px; align-items: center;
        padding: 8px; border: 1px solid transparent;
        transition: border-color .25s, background-color .25s;
    }
    .news-item:hover { border-color: var(--line-soft); background: oklch(1 0 0 / .025); }
    .news-item > .art { width: 100px; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line-soft); }
    .news-item h3 {
        font: 700 .92rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
    }
    .news-item p { margin-top: 2px; font-size: .8rem; line-height: 1.38; color: var(--ink-3); }
    .date {
        display: grid; justify-items: center; width: 50px; padding: 7px 0 6px;
        border: 1px solid var(--line); background: var(--bg-deep);
        font: 600 .64rem/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
    }
    .date b { margin-top: 4px; font: 400 1.5rem/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
    .news__empty { padding: 10px 8px; font-size: .88rem; color: var(--ink-3); }
    .news__empty a { color: var(--blight); text-decoration: underline; text-underline-offset: 3px; }
    /* Each card opens its post: the title's link stretches over the whole card. */
    .news-item { position: relative; }
    .news-item__link { color: inherit; text-decoration: none; }
    .news-item__link::after { content: ""; position: absolute; inset: 0; }
    .news-item:hover .news-item__link { color: var(--blight); }
    .news-item__link:focus-visible { outline: 2px solid var(--blight); outline-offset: 2px; }
    .news__all {
        display: inline-flex; align-items: center; gap: 8px; margin: 12px 8px 0;
        color: var(--gold); text-decoration: none;
        font: 600 .82rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase;
    }
    .news__all .icon { width: 15px; height: 15px; }
    .news__all:hover { color: var(--blight); }

    /* ── Footer ── */
    .site-footer {
        position: relative; overflow: hidden; margin-top: 56px;
        border-top: 1px solid var(--line-soft);
        background: linear-gradient(180deg, oklch(0.135 0.011 95), var(--bg-deep));
    }
    .site-footer__inner {
        display: grid; align-items: center; gap: 28px; padding-block: 30px;
        grid-template-columns: minmax(230px, 1.3fr) minmax(110px, .55fr) minmax(110px, .55fr) minmax(340px, 1.6fr) minmax(220px, 1fr);
    }
    .foot-brand p { margin-top: 12px; max-width: 32ch; font-size: .86rem; color: var(--ink-3); }
    .foot-col h2 {
        margin-bottom: 8px;
        font: 700 .76rem/1 var(--font-label); letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
    }
    .foot-col a { display: inline-block; padding: 4px 0; font-size: .9rem; color: var(--ink-2); transition: color .2s; }
    .foot-col a:hover { color: var(--blight); }

    .foot-discord { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
    .foot-discord__icon {
        display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 12px;
        color: oklch(0.98 0 0); background: var(--discord);
        box-shadow: 0 8px 24px -10px var(--discord);
    }
    .foot-discord__icon .icon { width: 30px; height: 30px; }
    .foot-discord h2 {
        font: 700 1.1rem/1.1 var(--font-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blight);
    }
    .foot-discord p { margin-top: 3px; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
    .foot-discord .btn { margin-left: auto; flex: none; }

    .foot-art { position: relative; align-self: stretch; min-height: 150px; margin-block: -30px; }
    .foot-art > .art {
        position: absolute; inset: 0;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
        mask-image: linear-gradient(90deg, transparent, #000 45%);
    }
    .note--foot { right: 8%; top: 26%; font-size: clamp(1rem, 1.3vw, 1.3rem); }

    .site-footer__legal { border-top: 1px solid oklch(1 0 0 / .05); }
    .site-footer__legal .wrap {
        display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
        padding-block: 14px; font-size: .78rem; color: var(--ink-3);
    }

    /* ── Scroll-linked reveal for the feature cards (progressive: visible without support). ── */
    @supports (animation-timeline: view()) {
        @media (prefers-reduced-motion: no-preference) {
            .feat {
                animation: card-in linear both;
                animation-timeline: view();
                animation-range: entry calc(var(--i, 0) * 3%) entry calc(55% + var(--i, 0) * 3%);
            }
        }
    }

    /* ── Responsive ── */
    @media (max-width: 1440px) {
        .feat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .strip { grid-template-columns: 1fr; }
        .strip__id { border-right: 0; border-bottom: 1px solid var(--line-soft); }
        .intel { grid-template-columns: minmax(220px, 24%) minmax(0, 1fr) minmax(180px, 17%); }
        .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .lower { grid-template-columns: minmax(0, 1fr); }
        .news__list { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); column-gap: 16px; }
        .site-footer__inner { grid-template-columns: minmax(230px, 1.2fr) minmax(110px, .5fr) minmax(110px, .5fr) minmax(340px, 1.6fr); }
        .foot-art { display: none; }
    }

    @media (max-width: 1360px) {
        .note--hero { display: none; }
    }

    /* The bar ran out of room below about 1480px (1640px with the Store link, 1790px since the Quests link of
       2026-10-03): the account or sign-in button ended up past the right edge. Before the nav folds, the Connect button
       keeps only its icon (its words stay for screen readers) and the nav links tighten. Measured with a 1300-2000px
       sweep of every header variant, with the Store link. */
    @media (min-width: 1101px) {
        .site-header__bar > :is(.brand, .btn--connect) { flex: none; } /* never squeezed: the nav folds instead */
    }
    /* Since the Vote link (2026-10-05) this holds at EVERY desktop width, not just below 1790px: the home bar stops
       at 1600px, and with the full Connect button it needed 1664px signed out (1741px with the Store link) - signed in,
       the bell and account button had already run it 77px past its edge from 1800px. Re-measured with a 1300-2000px
       sweep of /, /quests, /wiki, /vote and /market, signed in and out, with the Store link. */
    @media (min-width: 1101px) {
        .btn--connect { justify-content: center; width: 48px; padding: 0; gap: 0; }
        .btn--connect > span {
            position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
        }
        .btn--connect .btn__arrow { display: none; }
        .nav { padding-inline: 28px; }
        .nav a { padding-inline: 11px; letter-spacing: .1em; }
    }

    /* Below 1620px (1560px before the Skills link of 2026-10-05, 1440px before the Vote link, 1340px before the Quests
       link) the full nav no longer fits beside the brand and the account buttons with the Store link, so it folds into
       the menu button and nothing in the bar wraps onto a second line. Just above the fold the bar has 37px to spare
       (home, signed in, Store link); the solid bar 35px at 1771px (wiki.css). Measured with a 1561-2000px sweep. */
    @media (max-width: 1620px) {
        .nav {
            position: fixed; inset: 84px 12px auto 12px; z-index: var(--z-menu);
            display: none; flex-direction: column; align-items: stretch; gap: 0;
            padding: 10px; margin: 0; clip-path: none;
            border: 1px solid var(--line); background: var(--panel);
            box-shadow: 0 30px 60px -20px oklch(0 0 0 / .9);
        }
        [data-open] .nav { display: flex; }
        .nav a { padding: 16px 14px; font-size: 1rem; }
        .nav a::after { left: 14px; right: auto; width: 40px; }
        .menu-btn { display: grid; }
        .nav + .btn--connect { margin-left: auto; }
        :is(.acct, .acct__signin) + .menu-btn { margin-left: 0; }
    }

    @media (max-width: 1100px) {
        .nav__connect { display: block; color: var(--blight) !important; }
        .btn--connect { display: none; }
        .acct, .acct__signin { margin-left: auto; }
        .bell { margin-left: auto; }        /* signed in, the bell leads the right-hand group */
        .bell + .acct { margin-left: 0; }

        .strip__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .intel { grid-template-columns: 1fr; }
        .intel__art { min-height: 0; aspect-ratio: 21 / 8; border-right: 0; border-bottom: 1px solid var(--line-soft); }
        .intel__operator { display: none; }
        .note--intel { display: none; }
        .note--hero { display: none; }
        .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .foot-brand { grid-column: 1 / -1; }
        .foot-discord { grid-column: 1 / -1; }
    }

    @media (max-width: 860px) {
        .why { grid-template-columns: 1fr; }
        .why__art { order: -1; aspect-ratio: 16 / 7; min-height: 0; border-left: 0; border-bottom: 1px solid var(--line-soft); }
        .facts { grid-template-columns: 1fr; }
    }

    @media (max-width: 720px) {
        .hero { min-height: 0; padding-top: 118px; padding-bottom: 200px; }
        .brand__word { font-size: 1.35rem; }
        .brand__word small { letter-spacing: .22em; }
        .strip { margin-top: -90px; }
        .strip__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .site-footer__inner { grid-template-columns: 1fr 1fr; }
        .foot-discord { flex-wrap: wrap; }
        .foot-discord .btn { margin-left: 0; }
    }

    @media (max-width: 520px) {
        .acct__signin { width: 46px; padding: 0; }
        .acct__signin span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        /* Brand, account and menu button share one row on a phone: a smaller mark, no tagline. */
        .site-header__bar { gap: 10px; }
        .site-header .brand { gap: 8px; }
        .site-header .brand__mark { width: 36px; height: 36px; }
        .site-header .brand__word { font-size: 1.3rem; }
        .site-header .brand__word small { display: none; }
        .bell .icon { width: 18px; height: 18px; }
        .hero__tags { font-size: .8rem; letter-spacing: .1em; }
        .hero__tags span + span::before { margin: 0 .5em; }
        .btn { min-height: 56px; font-size: 1.15rem; }
        .hero__cta { width: 100%; }
        .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
        .kicker { letter-spacing: .2em; gap: 10px; }
        .strip__id img { width: 96px; height: 54px; }
        .strip__name { font-size: 1.25rem; }
        .stat { padding: 14px 12px; column-gap: 10px; }
        .feat-grid { grid-template-columns: 1fr; }
        .feat > .art { aspect-ratio: 21 / 9; }
        .news-item { grid-template-columns: 76px minmax(0, 1fr) auto; }
        .news-item > .art { width: 76px; }
        .reasons { flex-direction: column; }
    }

    /* Small phones: brand, bell, account and menu share one row. Tighter gaps and 42px buttons below 400px, and
       only the mark below 350px (the link keeps its 'home' label). */
    @media (max-width: 400px) {
        .site-header__bar { gap: 6px; }
        .bell, .menu-btn { width: 42px; height: 42px; }
        .acct > summary, .acct__signin { width: 42px; min-height: 42px; }
        .site-header .brand__word { font-size: 1.15rem; }
    }
    @media (max-width: 350px) {
        .site-header .brand__word { display: none; }
    }

    @media (max-width: 360px) {
        .site-header .brand__word { font-size: 1.12rem; }
    }
}

/* ───────────────────────── motion ───────────────────────── */
@keyframes rise {
    from { transform: translateY(22px); filter: blur(6px); }
}
@keyframes fog-drift {
    from { transform: translateX(-5%) scaleX(1); }
    to { transform: translateX(6%) scaleX(1.1); }
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 oklch(0.87 0.2 128 / .55), 0 0 12px var(--blight); }
    70%, 100% { box-shadow: 0 0 0 10px oklch(0.87 0.2 128 / 0), 0 0 12px var(--blight); }
}
@keyframes card-in {
    from { opacity: 0; transform: translateY(36px); }
}

@layer components {
    /* One-line notices after a redirect, e.g. a failed Steam sign-in. */
    .flash {
        position: fixed; z-index: calc(var(--z-header) + 1); top: 92px; left: 50%;
        transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0;
        padding: 12px 18px; background: var(--panel-2); border: 1px solid var(--line-strong);
        color: var(--ink); font: 500 1rem/1.4 var(--font-body);
        box-shadow: 0 14px 34px oklch(0 0 0 / 0.5);
        animation: flash-out 0.4s var(--ease-out) 7s forwards;
    }
    @keyframes flash-out { to { opacity: 0; visibility: hidden; } }
}