/*
 * Blight Light — wiki styles. Loaded after site.css on wiki pages only; uses its tokens.
 * Layout: solid header with search | nav sidebar · content column · rail (toc, links, status).
 */
@layer sections {

    :root {
        --w-panel: oklch(0.165 0.012 90);
        --w-panel-2: oklch(0.19 0.014 88);
        --w-line: oklch(0.6 0.09 82 / .32);
        --w-line-soft: oklch(0.45 0.03 90 / .35);
        --w-radius: 6px;
        --w-gold: oklch(0.83 0.15 85);
    }

    /* ── Solid header (wiki variant) ── */
    .site-header--solid {
        position: relative; padding: 0;
        background: linear-gradient(180deg, oklch(0.12 0.01 90), oklch(0.105 0.009 90));
        border-bottom: 1px solid var(--w-line);
    }
    .site-header--solid .site-header__bar { width: min(100% - 32px, 1760px); min-height: 72px; gap: 28px; }
    .site-header--solid .nav {
        margin: 0; padding: 0; background: none; border: 0; clip-path: none; gap: 0;
    }
    .site-header--solid .nav a { padding: 26px 16px; font-size: .95rem; }
    .site-header--solid .nav a::after { bottom: 0; height: 3px; left: 16px; right: 16px; }
    .site-header--solid .nav a[aria-current="page"] { color: var(--w-gold); background: none; box-shadow: none; }
    .site-header--solid .nav a[aria-current="page"]::after { background: var(--w-gold); box-shadow: 0 0 12px oklch(0.83 0.15 85 / .6); }
    .site-header--solid .brand__word { font-size: 1.55rem; }
    /* Without a search box (news, support) the Join button and account button sit at the right. */
    .site-header--solid .nav + .btn--join { margin-left: auto; }

    .btn--join {
        min-height: 46px; padding: 0 18px; gap: 10px; font-size: 1rem; flex: none;
        color: oklch(0.16 0.03 130); background: linear-gradient(180deg, oklch(0.84 0.2 130), oklch(0.7 0.19 134));
        border-color: oklch(0.9 0.16 128);
        box-shadow: inset 0 1px 0 oklch(1 0 0 / .4), 0 10px 26px -12px oklch(0.8 0.2 130 / .8);
    }
    .btn--join .icon { width: 20px; height: 20px; }
    .btn--join:hover { box-shadow: inset 0 1px 0 oklch(1 0 0 / .4), 0 14px 34px -10px oklch(0.8 0.2 130 / .95); }

    /* ── Search ── */
    .wiki-search { position: relative; }
    .wiki-search--header { flex: 1 1 280px; max-width: 560px; margin-left: auto; }
    .wiki-search__icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
    .wiki-search input {
        width: 100%; min-height: 44px; padding: 0 14px 0 42px;
        font: 500 .95rem/1 var(--font-body); color: var(--ink);
        background: oklch(0.14 0.01 90); border: 1px solid var(--w-line-soft); border-radius: var(--w-radius);
        transition: border-color .2s, box-shadow .2s;
    }
    .wiki-search input::placeholder { color: var(--ink-3); }
    .wiki-search input:focus { outline: none; border-color: var(--w-gold); box-shadow: 0 0 0 3px oklch(0.83 0.15 85 / .18); }
    .wiki-search__results {
        position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-menu);
        max-height: min(70vh, 480px); overflow: auto;
        background: var(--w-panel); border: 1px solid var(--w-line); border-radius: var(--w-radius);
        box-shadow: 0 30px 60px -20px oklch(0 0 0 / .95);
    }
    .wiki-search__results a { display: block; padding: 12px 16px; border-bottom: 1px solid var(--w-line-soft); }
    .wiki-search__results a:hover, .wiki-search__results [aria-selected="true"] a { background: oklch(0.83 0.15 85 / .08); }
    .wiki-search__results b { display: block; font: 700 .95rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
    .wiki-search__results small { display: block; margin-top: 3px; font-size: .76rem; color: var(--w-gold); }
    .wiki-search__results span { display: block; margin-top: 4px; font-size: .82rem; line-height: 1.4; color: var(--ink-3); }
    .wiki-search__results mark { background: none; color: var(--blight); font-weight: 600; }
    .wiki-search__empty { padding: 14px 16px; font-size: .88rem; color: var(--ink-3); }

    /* ── Shell ── */
    .wiki-shell {
        width: min(100% - 32px, 1760px); margin: 16px auto 0;
        display: grid; grid-template-columns: 250px minmax(0, 1fr) 270px; gap: 16px; align-items: start;
    }
    /* minmax(0, 1fr): without it the single track grows to the widest child's min-content
       (a table, a long heading) and the whole column spills sideways on phones. */
    .wiki-shell__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
    .wiki-shell__side, .wiki-shell__rail {
        position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto;
        scrollbar-width: thin; scrollbar-color: var(--w-line-soft) transparent;
    }

    .wpanel, .wnav, .rail__box {
        background:
            url("../images/grain.svg") repeat,
            linear-gradient(180deg, var(--w-panel-2), var(--w-panel));
        background-blend-mode: soft-light, normal;
        border: 1px solid var(--w-line); border-radius: var(--w-radius);
    }

    /* ── Sidebar ── */
    .wnav { padding: 6px 0 12px; }
    .wnav summary { list-style: none; cursor: pointer; }
    .wnav summary::-webkit-details-marker { display: none; }
    .wnav__title {
        position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px;
        font: 700 .92rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
        border-bottom: 1px solid var(--w-line-soft); margin-bottom: 8px;
    }
    .wnav__title > .icon { width: 22px; height: 22px; color: var(--w-gold); }
    .wnav__toggle { display: none; }
    .wnav__home {
        display: flex; align-items: center; gap: 10px; margin: 0 8px 6px; padding: 9px 12px; border-radius: 4px;
        font: 700 .95rem/1 var(--font-label); letter-spacing: .06em; color: var(--ink);
    }
    .wnav__home .icon { width: 18px; height: 18px; color: var(--w-gold); }
    .wnav__home:hover { background: oklch(1 0 0 / .04); }
    .wnav__home[aria-current="page"] { color: oklch(0.18 0.03 80); background: linear-gradient(180deg, var(--w-gold), oklch(0.72 0.14 76)); }
    .wnav__home[aria-current="page"] .icon { color: currentColor; }

    .wnav__group > summary {
        display: flex; align-items: center; gap: 10px; padding: 10px 16px 6px;
        font: 700 .95rem/1.1 var(--font-label); letter-spacing: .04em; color: var(--w-gold);
    }
    .wnav__group > summary .icon { width: 18px; height: 18px; flex: none; }
    .wnav__group > summary .wnav__chev { margin-left: auto; width: 16px; height: 16px; color: var(--ink-3); transition: rotate .25s var(--ease-out); }
    .wnav__group:not([open]) > summary .wnav__chev { rotate: -90deg; }
    .wnav__group ul { padding: 2px 8px 6px; }
    .wnav__group a {
        display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 18px; border-radius: 4px;
        font-size: .86rem; line-height: 1.3; color: var(--ink-2);
        transition: background-color .2s, color .2s;
    }
    .wnav__group a .icon { width: 15px; height: 15px; flex: none; color: oklch(0.72 0.1 82); }
    .wnav__group a:hover { color: var(--ink); background: oklch(1 0 0 / .04); }
    .wnav__group a[aria-current="page"] { color: oklch(0.18 0.03 80); background: linear-gradient(180deg, var(--w-gold), oklch(0.72 0.14 76)); font-weight: 600; }
    .wnav__group a[aria-current="page"] .icon { color: currentColor; }

    /* ── Banner ── */
    .wbanner {
        position: relative; isolation: isolate; overflow: hidden; border-radius: var(--w-radius);
        border: 1px solid var(--w-line); min-height: 250px; display: flex; align-items: flex-end;
        background: linear-gradient(180deg, oklch(0.2 0.035 170) 0%, oklch(0.3 0.07 110) 45%, oklch(0.42 0.11 68) 78%, oklch(0.25 0.05 65) 100%);
    }
    .wbanner__sky {
        position: absolute; z-index: -3; width: max(900px, 70%); height: auto; aspect-ratio: 1; max-width: none;
        right: -12%; top: -80%; opacity: .9;
        -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
        mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
    }
    .wbanner .scene { position: absolute; z-index: -2; inset: auto 0 0 0; width: 100%; height: 70%; max-width: none; }
    .wbanner__shade {
        position: absolute; inset: 0; z-index: -1;
        background: linear-gradient(90deg, oklch(0.1 0.01 90 / .82), oklch(0.1 0.01 90 / .35) 55%, transparent 80%),
                    linear-gradient(0deg, oklch(0.1 0.01 90 / .6), transparent 50%);
    }
    .wbanner__body { position: relative; padding: 28px 30px 30px; display: grid; gap: 8px; max-width: 760px; }
    .wbanner__brand {
        display: flex; align-items: center; gap: 10px;
        font: 700 .95rem/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--w-gold);
    }
    .wbanner__brand .icon { width: 22px; height: 22px; }
    .wbanner__brand span { color: var(--ink); letter-spacing: .1em; }
    .wbanner__title {
        font: 400 clamp(4rem, 8vw, 6rem)/.86 var(--font-display); letter-spacing: .02em; text-transform: uppercase;
        color: var(--w-gold);
        -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 6px 20px oklch(0 0 0 / .7));
    }
    .wbanner__lede { max-width: 60ch; font-size: clamp(.98rem, 1.2vw, 1.12rem); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
    .wbanner--compact { min-height: 190px; }
    .wbanner--compact .wbanner__sky { top: -120%; }
    .wbanner__page {
        display: flex; align-items: center; gap: 14px;
        font: 400 clamp(2rem, 4.2vw, 3.4rem)/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--ink);
        text-wrap: balance; filter: drop-shadow(0 4px 16px oklch(0 0 0 / .7));
    }
    .wbanner__page .icon { width: .8em; height: .8em; color: var(--w-gold); flex: none; }
    .wbanner__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .8rem; color: var(--ink-2); }
    .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 600 .76rem/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
    .crumbs a { color: var(--w-gold); }
    .crumbs a:hover { color: var(--blight); }

    .status {
        display: inline-block; padding: 4px 8px 3px; border: 1px solid currentColor; border-radius: 3px;
        font: 700 .64rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; background: oklch(0.1 0.01 90 / .7);
    }
    .status--partial { color: var(--w-gold); }
    .status--in-development { color: var(--ember); }

    /* ── Panels ── */
    .wpanel { padding: 16px 16px 18px; }
    .wpanel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 14px; }
    .wpanel__title {
        display: flex; align-items: center; gap: 12px;
        font: 700 clamp(1.25rem, 1.8vw, 1.6rem)/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--w-gold);
    }
    .wpanel__title .icon { width: 1.25em; height: 1.25em; filter: drop-shadow(0 0 8px oklch(0.83 0.15 85 / .35)); }
    .wpanel__blurb { flex: 1 1 260px; font-size: .88rem; color: var(--ink-2); }
    .wpanel__all {
        margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
        border: 1px solid var(--w-gold); border-radius: 4px;
        font: 700 .82rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--w-gold);
        transition: background-color .2s, color .2s;
    }
    .wpanel__all .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
    .wpanel__all:hover { background: var(--w-gold); color: oklch(0.18 0.03 80); }
    .wpanel__all:hover .icon { transform: translateX(3px); }
    .wiki-empty { color: var(--ink-3); }

    /* ── Picture tiles ── */
    .popular { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
    .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .tile {
        position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; align-items: flex-end;
        /* width 100% + min-width 0: a grid item with an aspect-ratio is not stretched to its column, so
           its width came from min-height through the ratio (128 x 2.4 = 307px), wider than a 320px
           phone's column. Now the tile fills its column and is at least 128px tall. */
        width: 100%; min-width: 0; min-height: 128px; aspect-ratio: 2.2 / 1; border: 1px solid var(--w-line-soft); border-radius: var(--w-radius);
        transition: border-color .3s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
    }
    /* min-height auto on a tile that clips (not a scroll container): a narrow tile grows to fit a
       title that wraps, instead of cutting it off. */
    .tile--tall { aspect-ratio: 5 / 6; min-height: auto; }
    .tile__art { position: absolute; inset: 0; z-index: -2; transition: transform .8s var(--ease-out), filter .8s var(--ease-out); }
    .tile__art.art--empty .art__icon { margin-bottom: 30%; width: 34%; }
    .tile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, oklch(0.08 0.01 90 / .95) 8%, oklch(0.08 0.01 90 / .55) 45%, transparent 80%); }
    .tile__body { display: flex; align-items: flex-end; gap: 10px; padding: 12px; width: 100%; }
    .tile__icon {
        flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px;
        color: var(--w-gold); border: 1px solid oklch(0.83 0.15 85 / .55); background: oklch(0.1 0.01 90 / .7);
    }
    .tile__icon .icon { width: 20px; height: 20px; }
    .tile--tall .tile__body { display: grid; gap: 4px; }
    .tile--tall .tile__icon { display: none; }
    .tile__text { display: grid; gap: 3px; min-width: 0; }
    .tile__title { font: 700 1.05rem/1.1 var(--font-label); letter-spacing: .04em; color: var(--w-gold); text-shadow: 0 2px 10px oklch(0 0 0 / .8); }
    .tile__line {
        font-size: .8rem; line-height: 1.35; color: var(--ink-2);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .tile__status { position: absolute; top: 10px; right: 10px; }
    .tile:hover { border-color: oklch(0.83 0.15 85 / .7); transform: translateY(-3px); box-shadow: 0 18px 34px -18px oklch(0 0 0 / .95), 0 0 24px -10px oklch(0.83 0.15 85 / .5); }
    .tile:hover .tile__art { transform: scale(1.06); filter: saturate(1.15) brightness(1.08); }

    /* ── Icon cards ── */
    .icards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .icard {
        display: flex; gap: 14px; padding: 16px; height: 100%;
        background: oklch(0.13 0.01 90 / .7); border: 1px solid var(--w-line-soft); border-radius: var(--w-radius);
        transition: border-color .3s var(--ease-out), background-color .3s;
    }
    .icard__icon {
        flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
        color: oklch(0.18 0.03 80); background: radial-gradient(circle at 35% 30%, oklch(0.9 0.14 88), var(--w-gold) 60%, oklch(0.62 0.13 72));
        box-shadow: 0 0 0 3px oklch(0.83 0.15 85 / .15), 0 8px 18px -8px oklch(0.83 0.15 85 / .6);
    }
    .icard__icon .icon { width: 26px; height: 26px; }
    .icard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .icard__title { font: 700 1.1rem/1.1 var(--font-label); letter-spacing: .04em; color: var(--w-gold); }
    .icard__text { font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
    .icard .status { align-self: flex-start; }
    .icard__go {
        display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px;
        font: 700 .8rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--w-gold);
    }
    .icard__go .icon { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
    .icard:hover { border-color: oklch(0.83 0.15 85 / .7); background: oklch(0.16 0.012 88 / .9); }
    .icard:hover .icard__go .icon { transform: translateX(4px); }

    /* ── Rail ── */
    .rail { display: grid; gap: 16px; }
    .rail__box { padding: 14px 16px 16px; }
    .rail__title {
        display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
        font: 700 .9rem/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
    }
    .rail__title .icon { width: 18px; height: 18px; color: var(--w-gold); }
    .rail__title--gold { color: var(--w-gold); }
    .rail__rule { width: 16px; height: 2px; background: var(--blight); box-shadow: 0 0 8px var(--blight); }
    .rail__toc { display: grid; gap: 2px; border-left: 1px solid var(--w-line-soft); margin-left: 8px; }
    .rail__toc a {
        position: relative; display: block; padding: 5px 0 5px 16px; font-size: .84rem; line-height: 1.3; color: var(--ink-2);
        transition: color .2s;
    }
    .rail__toc a::before { content: ""; position: absolute; left: -3px; top: 50%; width: 5px; height: 5px; border-radius: 50%; translate: 0 -50%; background: var(--ink-3); transition: background-color .2s; }
    .rail__toc a:hover, .rail__toc a.is-active { color: var(--w-gold); }
    .rail__toc a:hover::before, .rail__toc a.is-active::before { background: var(--w-gold); box-shadow: 0 0 6px var(--w-gold); }
    .rail__links { display: grid; gap: 2px; }
    .rail__links a {
        display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 4px;
        font-size: .88rem; color: var(--ink-2); transition: background-color .2s, color .2s;
    }
    .rail__links .icon { width: 20px; height: 20px; color: var(--w-gold); flex: none; }
    .rail__links a:hover { color: var(--ink); background: oklch(1 0 0 / .04); }

    .rail__state { display: flex; align-items: center; gap: 10px; font: 700 1.3rem/1 var(--font-label); letter-spacing: .02em; color: var(--ink-2); }
    .rail__state .dot { width: 14px; height: 14px; }
    .rail__state--online { color: var(--ink); }
    .rail__state--online .dot { background: var(--blight); box-shadow: 0 0 12px var(--blight); animation: pulse 2.4s ease-out infinite; }
    .rail__state--offline .dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
    .rail__state--unknown { font-size: 1.05rem; }
    .rail__players { margin: 4px 0 0 24px; font-size: .86rem; color: var(--ink-2); }
    .rail__facts { display: grid; margin: 14px 0; border-top: 1px solid var(--w-line-soft); }
    .rail__facts div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--w-line-soft); font-size: .8rem; }
    .rail__facts dt { display: flex; align-items: center; gap: 8px; color: var(--ink-3); }
    .rail__facts dt .icon { width: 15px; height: 15px; color: var(--ink-3); }
    .rail__facts dd { margin: 0; text-align: right; color: var(--ink); font-weight: 500; }
    .rail__status .btn--join { width: 100%; justify-content: center; }

    /* ── Article ── */
    .wiki-article { padding: clamp(18px, 2.4vw, 32px); }
    .prose { max-width: 80ch; font-size: 1.02rem; line-height: 1.7; color: var(--ink-2); }
    .prose > * + * { margin-top: 1em; }
    .prose h2 {
        position: relative; margin-top: 2.2em; padding-top: .9em; border-top: 1px solid var(--w-line-soft);
        font: 700 clamp(1.4rem, 2.2vw, 1.8rem)/1.1 var(--font-label); letter-spacing: .05em; text-transform: uppercase; color: var(--w-gold);
        scroll-margin-top: 20px;
    }
    .prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
    .prose h3 {
        position: relative; margin-top: 1.7em;
        font: 700 1.15rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
        scroll-margin-top: 20px;
    }
    .prose h4 { margin-top: 1.4em; font: 700 1rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
    .prose .anchor { margin-left: .4em; color: var(--ink-3); opacity: 0; text-decoration: none; transition: opacity .2s; }
    .prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus { opacity: 1; }
    .prose p, .prose li { text-wrap: pretty; }
    .prose strong { color: var(--ink); font-weight: 600; }
    .prose a { color: var(--blight); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
    .prose a:hover { color: var(--ink); }
    .prose ul, .prose ol { padding-left: 1.3em; }
    .prose ul { list-style: none; }
    .prose ul > li { position: relative; }
    .prose ul > li::before {
        content: ""; position: absolute; left: -1.05em; top: .72em; width: 6px; height: 6px;
        background: var(--w-gold); transform: rotate(45deg); opacity: .85;
    }
    .prose ol { list-style: decimal; }
    .prose ol > li::marker { color: var(--w-gold); font-family: var(--font-label); font-weight: 700; }
    .prose li + li { margin-top: .35em; }
    .prose code {
        padding: .1em .38em; border-radius: 3px; font: 500 .9em/1 ui-monospace, "Cascadia Code", Consolas, monospace;
        color: var(--blight); background: oklch(0.12 0.01 90); border: 1px solid var(--w-line-soft);
    }
    .prose hr { border: 0; border-top: 1px solid var(--w-line-soft); margin: 2em 0; }

    .table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--w-line-soft); border-radius: var(--w-radius); }
    .prose table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.45; }
    .prose th {
        padding: 10px 12px; text-align: left; white-space: nowrap;
        font: 700 .74rem/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--w-gold);
        background: oklch(0.13 0.011 90); border-bottom: 1px solid var(--w-line);
    }
    .prose td { padding: 9px 12px; border-bottom: 1px solid var(--w-line-soft); color: var(--ink-2); vertical-align: top; }
    .prose tr:last-child td { border-bottom: 0; }
    .prose tbody tr:nth-child(even) td { background: oklch(1 0 0 / .018); }
    .prose td:first-child { color: var(--ink); font-weight: 500; }

    .prose blockquote { padding: 14px 18px; border: 1px solid var(--w-line-soft); border-radius: var(--w-radius); background: oklch(1 0 0 / .02); color: var(--ink-2); }
    .prose blockquote > * + * { margin-top: .6em; }
    .callout { position: relative; padding-left: 48px !important; }
    .callout::before {
        content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px;
        -webkit-mask: var(--callout-icon) center / contain no-repeat; mask: var(--callout-icon) center / contain no-repeat;
        background: var(--c);
    }
    .callout strong:first-child { color: var(--c); font-family: var(--font-label); letter-spacing: .1em; text-transform: uppercase; font-size: .86em; }
    .callout--tip { --c: var(--blight); border-color: oklch(0.87 0.2 128 / .4); background: oklch(0.87 0.2 128 / .06); }
    .callout--warning { --c: var(--danger); border-color: oklch(0.68 0.19 28 / .45); background: oklch(0.68 0.19 28 / .07); }
    .callout--note { --c: var(--w-gold); border-color: oklch(0.83 0.15 85 / .4); background: oklch(0.83 0.15 85 / .05); }
    .callout--in-development { --c: var(--ember); border-color: oklch(0.68 0.18 40 / .45); background: oklch(0.68 0.18 40 / .06); border-style: dashed; }
    .callout--tip { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E"); }
    .callout--warning { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.7 18-8-14a2 2 0 0 0-3.5 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.7-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
    .callout--note { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
    .callout--in-development { --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 12 3 21l-1-1 9-12'/%3E%3Cpath d='m14 6 4 4 4-4-4-4z'/%3E%3C/svg%3E"); }

    /* ── Pager ── */
    .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .pager__link {
        display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--w-line-soft); border-radius: var(--w-radius); background: var(--w-panel);
        font: 700 1rem/1.2 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
        transition: border-color .25s;
    }
    .pager__link small { font: 600 .7rem/1 var(--font-label); letter-spacing: .2em; color: var(--w-gold); }
    .pager__link:hover { border-color: var(--w-gold); }
    .pager__link--next { grid-column: 2; text-align: right; }

    /* ── Field guide (bestiary + arena cards) ── */
    .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
    .filters button {
        min-height: 40px; padding: 0 14px; border: 1px solid var(--w-line-soft); border-radius: 4px; background: oklch(0.13 0.01 90);
        font: 700 .82rem/1 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
        transition: border-color .2s, color .2s, background-color .2s;
    }
    .filters button b { margin-left: 4px; color: var(--ink-3); }
    .filters button:hover { border-color: var(--w-line); color: var(--ink); }
    .filters button[aria-pressed="true"] { border-color: var(--w-gold); color: var(--w-gold); background: oklch(0.83 0.15 85 / .08); }

    .creatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
    .creature {
        display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--w-radius);
        background:
            radial-gradient(90% 60% at 100% 0%, var(--tint, oklch(0.87 0.2 128 / .08)), transparent 70%),
            linear-gradient(180deg, var(--w-panel-2), oklch(0.14 0.011 90));
        border: 1px solid var(--w-line-soft); scroll-margin-top: 20px;
    }
    .creature--blight-boss, .creature--world-boss, .creature--arena { border-color: var(--w-line); --tint: oklch(0.68 0.18 40 / .14); }
    .creature__head { display: flex; justify-content: space-between; gap: 12px; }
    .creature__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .creature__chips .chip { margin: 0; border-radius: 3px; }
    .chip--group { color: var(--w-gold); }
    .chip--dev { color: var(--ember); border-style: dashed; }
    .chip--blight { color: var(--blight); }
    .chip--blight[data-blight="crimson"] { color: oklch(0.7 0.19 25); }
    .chip--blight[data-blight="ashen"] { color: oklch(0.82 0.02 95); }
    .chip--blight[data-blight="hollow"] { color: oklch(0.78 0.1 250); }
    .creature__name { font: 400 1.6rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
    .creature__tag { margin-top: 5px; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
    .creature__hp { flex: none; display: grid; justify-items: end; align-content: start; font: 600 .66rem/1 var(--font-label); letter-spacing: .2em; color: var(--danger); }
    .creature__hp b { margin-top: 4px; font: 400 1.6rem/1 var(--font-display); letter-spacing: .02em; color: var(--ink); font-variant-numeric: tabular-nums; }
    .creature__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--w-line-soft); border: 1px solid var(--w-line-soft); border-radius: 4px; overflow: hidden; }
    .creature__stats div { padding: 8px 10px; background: oklch(0.13 0.011 90); }
    .creature__stats dt { font: 600 .64rem/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; color: var(--w-gold); }
    .creature__stats dd { margin: 4px 0 0; font: 600 .95rem/1.2 var(--font-label); color: var(--ink); overflow-wrap: anywhere; }
    .creature__block h4 { margin-bottom: 6px; font: 700 .7rem/1 var(--font-label); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
    .creature__list { display: grid; gap: 4px; font-size: .86rem; line-height: 1.4; color: var(--ink-2); }
    .creature__list li { position: relative; padding-left: 14px; }
    .creature__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--blight); transform: rotate(45deg); }
    .taken { display: grid; gap: 6px; }
    .taken__row { display: grid; grid-template-columns: minmax(80px, 1fr) 1.2fr auto; align-items: center; gap: 10px; font-size: .82rem; color: var(--ink-2); }
    .taken__bar { height: 6px; border-radius: 3px; background: oklch(1 0 0 / .06); position: relative; overflow: hidden; }
    .taken__bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink-3); }
    .taken__row b { font: 700 .85rem/1 var(--font-label); color: var(--ink); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
    .taken__row.is-weak i { background: var(--ember); }
    .taken__row.is-weak b { color: var(--ember); }
    .taken__row.is-tough i { background: var(--blight); }
    .phases { display: grid; gap: 6px; counter-reset: phase; }
    .phases li {
        position: relative; display: grid; gap: 2px; padding: 8px 10px 8px 38px; counter-increment: phase;
        border: 1px solid oklch(0.68 0.18 40 / .3); border-radius: 4px; background: oklch(0.68 0.18 40 / .06);
        font-size: .84rem; line-height: 1.4; color: var(--ink-2);
    }
    .phases li::before {
        content: counter(phase); position: absolute; left: 9px; top: 9px; display: grid; place-items: center;
        width: 20px; height: 20px; border-radius: 50%; background: var(--ember); color: oklch(0.16 0.03 40);
        font: 700 .72rem/1 var(--font-label);
    }
    .phases li span { font: 700 .72rem/1.2 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); }
    .creature__tips { display: grid; gap: 6px; padding: 10px 12px; border-radius: 4px; border: 1px solid oklch(0.87 0.2 128 / .3); background: oklch(0.87 0.2 128 / .05); font-size: .84rem; line-height: 1.45; color: var(--ink-2); }
    .creature__tips strong { color: var(--blight); font-family: var(--font-label); letter-spacing: .08em; text-transform: uppercase; font-size: .8em; }
    .creature__found { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: .8rem; color: var(--ink-3); }
    .creature__found .icon { width: 16px; height: 16px; color: var(--w-gold); }
    .arena-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 14px; }
    .arena-tier { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--w-line); border-radius: var(--w-radius); background: oklch(0.13 0.01 90); }
    .arena-tier__name { font: 400 1.4rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
    .arena-tier__rule { font-size: .84rem; color: var(--ink-3); }
    .arena-tier__cost { font: 700 1.2rem/1 var(--font-label); color: var(--w-gold); letter-spacing: .04em; }
    .arena-tier__cost small { font-size: .7em; letter-spacing: .14em; }

    /* ── Responsive ── */
    @media (max-width: 1500px) {
        .popular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .tile--tall { aspect-ratio: 16 / 11; }
    }
    /* The solid bar's links tighten here (1680px before the Skills link of 2026-10-05, 1600px before the Vote link, 1500px
       before the Quests link): with full padding the links need about 1745px. */
    @media (max-width: 1770px) {
        .site-header--solid .site-header__bar { gap: 18px; }
        .site-header--solid .nav a { padding-inline: 11px; }
    }
    /* The header search takes its own row under the nav at every width. With the Quests link (2026-10-03) the nav
       leaves it at most 131px beside the links even at 2000px (the bar stops at 1760px), signed in or not. */
    .site-header--solid .site-header__bar:has(.wiki-search--header) { flex-wrap: wrap; padding-block: 10px; }
    .site-header--solid .wiki-search--header { order: 10; flex-basis: 100%; max-width: none; margin: 0 0 4px; }
    .site-header--solid .wiki-search--header + .btn--join { margin-left: auto; } /* the buttons keep the right edge */
    @media (max-width: 1360px) {
        .wiki-shell { grid-template-columns: 240px minmax(0, 1fr); }
        .wiki-shell__rail { grid-column: 2; position: static; max-height: none; }
        .rail { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
        .tiles, .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 1620px) { /* the same width site.css folds the nav at */
        /* The folded nav: a solid panel under the header. The desktop strip's reset (no padding,
           no background) must not follow it here, or the links float over the page. */
        .site-header--solid .nav {
            position: absolute; inset: calc(100% + 8px) 12px auto 12px;
            padding: 10px; gap: 0; background: var(--panel); border: 1px solid var(--line);
            box-shadow: 0 30px 60px -20px oklch(0 0 0 / .9);
        }
        .site-header--solid .nav a { padding: 16px 14px; }
        .site-header--solid .nav a::after { bottom: 8px; height: 2px; left: 14px; right: auto; width: 40px; }
    }
    @media (max-width: 1100px) {
        .site-header--solid .site-header__bar { flex-wrap: wrap; padding-block: 10px; }
        .wiki-search--header { order: 10; flex-basis: 100%; max-width: none; margin: 0 0 4px; }
        .site-header--solid .btn--join { display: none; }
    }
    @media (max-width: 960px) {
        .wiki-shell { grid-template-columns: minmax(0, 1fr); }
        .wiki-shell__side, .wiki-shell__rail { position: static; max-height: none; grid-column: auto; }
        .wnav__toggle {
            display: grid; position: absolute; inset: 0; justify-items: end; align-items: center;
            padding-right: 16px; color: var(--ink-3); cursor: pointer;
        }
        .wnav__toggle .icon { width: 18px; height: 18px; transition: rotate .25s var(--ease-out); }
        .wnav.is-collapsed { padding-bottom: 6px; }
        .wnav.is-collapsed .wnav__title { margin-bottom: 0; border-bottom: 0; }
        .wnav.is-collapsed .wnav__body { display: none; }
        .wnav.is-collapsed .wnav__toggle .icon { rotate: -90deg; }
        .popular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .wbanner__body { padding: 22px 20px 24px; }
    }
    @media (max-width: 560px) {
        .tiles, .icards { grid-template-columns: minmax(0, 1fr); }
        /* Section tiles go landscape; popular topics (tile--tall) keep their shape, or their text is cut off. */
        .tile:not(.tile--tall) { aspect-ratio: 2.4 / 1; }
        .pager { grid-template-columns: 1fr; }
        .pager__link--next { grid-column: auto; }
        .creatures { grid-template-columns: minmax(0, 1fr); }
        .prose { font-size: 1rem; }
        .wpanel { padding: 14px 12px 16px; }
        .wpanel__all { margin-left: 0; }
        .site-header--solid .site-header__bar { gap: 10px; }
        .site-header--solid .brand__word { font-size: 1.3rem; }
    }
    /* Small phones, signed in: brand, bell, account and menu on one row (after the 560px block, which it tightens). */
    @media (max-width: 400px) {
        .site-header--solid .site-header__bar { gap: 6px; }
        .site-header--solid .brand__word { font-size: 1.15rem; }
    }
    @media (max-width: 360px) {
        .site-header--solid .brand__word { font-size: 1.12rem; }
    }
}