:root {
    /* content (dark sci-fi, one step lighter than the chrome) */
    --fg: #d4e0f1;
    --muted: #8ea1c0;
    --accent: #56c8f5;
    --bg: #101d34;
    --bg-soft: #17263f;
    --bg-top: #14233d;
    --bg-bottom: #0e1a30;
    /* zone-map family colors (colorblind modes override these) */
    --map-tm: #41d3ff;
    --map-ics: #6ee7a0;
    --map-asi: #f5a05a;
    --map-gamma: #a78bfa;
    --map-special: #c8d2e0;
    --border: #25385c;
    --code-bg: #1b2c4a;
    --grid-line: rgba(65, 211, 255, 0.05);
    /* table headers: distinct band, clearly brighter than the rows */
    --th-bg: #1e4268;
    --th-fg: #d8f2ff;
    --th-edge: rgba(65, 211, 255, 0.7);
        /* light mode (content area only; chrome stays dark) */
    --light-fg: #14212e;
    --light-muted: #4d6274;
    --light-accent: #0d6fae;
    --light-bg: #f2f8fc;
    --light-bg-soft: #e4eff7;
    --light-border: #c2d7e6;
    --light-code-bg: #dcebf5;
    --light-grid-line: rgba(13, 111, 174, 0.07);

    /* sci-fi chrome */
    --chrome-bg: #070d1a;
    --chrome-bg2: #0d1730;
    --chrome-fg: #c9d7f0;
    --chrome-muted: #7787ab;
    --neon: #41d3ff;
    --neon-dim: rgba(65, 211, 255, 0.38);
    --neon-faint: rgba(65, 211, 255, 0.12);
    --glow-a: rgba(65, 211, 255, 0.07);
    --glow-b: rgba(65, 211, 255, 0.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--fg);
    background:
        radial-gradient(1100px 500px at 85% -10%, var(--glow-a), transparent 60%),
        radial-gradient(900px 420px at 8% 108%, var(--glow-b), transparent 60%),
        var(--chrome-bg);
    line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--code-bg);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
}
pre { background: var(--code-bg); padding: 0.9em 1em; border-radius: 8px; overflow-x: auto; }

/* scroll targets for in-page anchors (e.g. robot families) clear the sticky top bar */
a[id] { scroll-margin-top: 68px; }
pre code { background: none; padding: 0; }

/* ============ chrome: top bar ============ */
/* Two rows: the wiki title + search bar on top, the chrome icons
   (language / accent / theme) below. */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.55rem 1.2rem 0.5rem;
    background:
        linear-gradient(180deg, var(--chrome-bg2), var(--chrome-bg) 90%);
    border-bottom: 1px solid var(--neon-dim);
    box-shadow: 0 0 14px var(--neon-faint), 0 6px 24px rgba(0, 0, 0, 0.55);
}
.topbar-main { display: flex; align-items: center; gap: 0.8rem; width: 100%; flex: 1 1 auto; min-width: 0; }
.topbar-main .palette-wrap { margin-left: auto; }
/* The search bar sits on the right of the SAME row (desktop): brand left,
   search + chrome icons right. Mobile keeps its own row below. */
.topbar-search { display: flex; width: 100%; }
.topbar-search #wiki-search { width: 100%; min-width: 0; }
@media (min-width: 801px) {
    .topbar { flex-direction: row; align-items: center; gap: 1rem; padding-bottom: 0.55rem; }
    .topbar-main { flex: 1 1 auto; min-width: 0; }
    /* one row: brand … chrome icons, then the search bar at the right end.
       The search keeps its natural (shrinking) width first; only below the
       1100px breakpoint does the row get tight enough for the brand to
       start shrinking too — the search still shrinks first (shrink 3) and
       nothing ever overlaps. */
    .topbar-main .palette-wrap { margin-left: auto; flex: none; }
    .topbar-search { display: flex; flex: 0 1 560px; min-width: 140px; }
    .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.brand {
    font-weight: 700; font-size: 1.02rem; color: #eaf6ff;
    letter-spacing: 0.14em; text-transform: uppercase;
    text-shadow: 0 0 10px var(--neon-dim);
}
.brand:hover { text-decoration: none; color: var(--neon); }
.brand-logo {
    width: 26px; height: 26px;
    vertical-align: -0.35em; margin-right: 0.45rem;
    filter: drop-shadow(0 0 6px var(--neon-faint));
    color: var(--neon);
}
.palette-wrap { position: relative; display: flex; gap: 0.4rem; }
.palette-toggle {
    width: 36px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--neon-dim);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
}
.palette-toggle:hover { border-color: var(--neon); box-shadow: 0 0 8px var(--neon-faint); }
/* the swatch: a ring through all four accent colors */
.palette-swatch {
    width: 16px; height: 16px; border-radius: 50%;
    background: conic-gradient(#41d3ff, #a78bfa, #4ade80, #fbbf24, #41d3ff);
    border: 2px solid var(--chrome-bg);
    box-shadow: 0 0 6px var(--neon-faint);
}
.palette-menu {
    display: none;
    z-index: 5; /* above the title row when the menu opens over it */
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 168px;
    background: var(--chrome-bg2);
    border: 1px solid var(--neon-dim);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 0 14px var(--neon-faint);
    padding: 0.3rem;
    z-index: 30;
}
.palette-menu.open { display: block; }
.palette-menu button {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%;
    background: none; border: none; border-radius: 7px;
    color: var(--chrome-fg);
    font: inherit; font-size: 0.9rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    text-align: left;
}
.palette-menu button:hover { background: var(--neon-faint); }
.palette-menu button[aria-pressed="true"] { color: var(--neon); font-weight: 600; }
.palette-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.palette-group {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--chrome-muted);
    padding: 0.35rem 0.6rem 0.15rem;
}
.palette-group:first-child { padding-top: 0.25rem; }
.theme-toggle {
    width: 36px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--neon-dim);
    border-radius: 8px;
    color: var(--neon);
    font-size: 1.05rem; line-height: 1;
    cursor: pointer;
    padding: 0;
}
.theme-toggle:hover { background: var(--neon-faint); box-shadow: 0 0 10px var(--neon-faint); }
#wiki-search {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--neon-dim);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--chrome-fg);
    font-size: 0.95rem;
}
#wiki-search::placeholder { color: var(--chrome-muted); }
#wiki-search:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 10px var(--neon-faint); }

/* just below the sticky topbar, centered over
   it like the search bar itself */
.search-results {
    position: fixed; top: 96px; left: 50%; transform: translateX(-50%);
    width: min(900px, 92vw); max-height: 70vh; overflow-y: auto;
    background: var(--chrome-bg2); border: 1px solid var(--neon-dim);
    border-radius: 10px; box-shadow: 0 0 18px var(--neon-faint), 0 10px 34px rgba(0, 0, 0, 0.6);
    z-index: 30; padding: 0.4rem;
}
.search-results a { display: block; padding: 0.45rem 0.7rem; border-radius: 6px; color: var(--chrome-fg); }
.search-results a:hover { background: var(--neon-faint); color: var(--neon); text-decoration: none; }
.search-results a .result-desc { color: var(--chrome-muted); font-size: 0.85em; }
.search-results .no-results, .search-results .result-count { padding: 0.6rem 0.7rem; color: var(--chrome-muted); }
.search-results .result-count { font-size: 0.8rem; border-bottom: 1px solid var(--neon-faint); border-radius: 6px 6px 0 0; padding-bottom: 0.4rem; }

/* ============ chrome: side menu ============ */
.layout {
    display: flex; align-items: stretch; gap: 1.2rem;
    margin: 1.4rem 1.2rem 1.6rem;
}
.content-col { flex: 1 1 auto; min-width: 0; }
.sidenav {
    position: sticky; top: 4.4rem; /* one-row topbar + margin */
    flex: 0 0 230px;
    max-height: calc(100vh - 5.6rem); overflow-y: auto;
    background: linear-gradient(180deg, var(--chrome-bg2), var(--chrome-bg));
    border: 1px solid var(--neon-dim);
    border-radius: 10px;
    padding: 0.7rem 0.55rem 0.9rem;
    box-shadow: 0 0 16px var(--neon-faint);
}
.sidenav ul { list-style: none; padding: 0; margin: 0; }
/* top-level groups: header row (overview link + collapse caret) above the items */
.sidenav .nav-group { margin-top: 0.9rem; }
.sidenav .nav-quick { margin-top: 0; }
.sidenav .nav-group-head { display: flex; align-items: center; gap: 0.5rem; }
/* collapse caret button on a group header */
.sidenav .nav-caret {
    flex: none; width: 1.7rem; height: 1.7rem; padding: 0;
    margin-left: auto;
    border: 1px solid var(--neon-dim); border-radius: 5px;
    background: transparent; color: var(--chrome-muted);
    font-size: 0.75rem; line-height: 1; cursor: pointer;
    transition: transform 0.15s ease;
}
.sidenav .nav-caret:hover { color: var(--neon); background: var(--neon-faint); }
.sidenav .nav-group.collapsed > .nav-items { display: none; }
/* sub-list parents (World, Gamma, Item shop): link + collapse caret row */
.sidenav .nav-sub-head { display: flex; align-items: center; }
.sidenav .nav-sub-head a { flex: 1; }
.sidenav .nav-has-sub.collapsed > ul { display: none; }
.sidenav .nav-group.collapsed > .nav-group-head .nav-caret,
.sidenav .nav-has-sub.collapsed > .nav-sub-head .nav-caret { transform: rotate(-90deg); }
/* Home quick link */
.sidenav .nav-quick a {
    margin-bottom: 0.2rem;
    border: 1px solid var(--neon-dim);
    background: var(--neon-faint);
    font-weight: 600;
}
/* a regular item that carries an icon (World, Extension tree) */
.sidenav a.nav-item-icon { display: flex; align-items: center; gap: 0.5rem; }
.sidenav a.nav-item-icon .navicon { width: 20px; height: 20px; }
.navicon { width: 36px; height: 36px; flex: none; color: var(--accent); }
.menuicon { width: 36px; height: 36px; flex: none; color: var(--accent); vertical-align: -0.9em; margin-right: 0.45rem; }
/* current-page selection: bold + neon outline with contrast */
.sidenav a.active, .footnav a.active {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 8px var(--neon-dim);
    outline: 2px solid var(--neon);
    outline-offset: 2px;
    border-radius: 4px;
    background: var(--neon-faint);
}
/* entries with an open/close caret: the selection box spans the whole row
   (it ends after the caret button) — the outline moves from the link to
   the row, the link keeps the bold/neon text */
.sidenav .nav-group-head.row-active,
.sidenav .nav-sub-head.row-active {
    outline: 2px solid var(--neon);
    outline-offset: 2px;
    border-radius: 6px;
    background: var(--neon-faint);
}
.sidenav .nav-group-head.row-active > a.active,
.sidenav .nav-sub-head.row-active > a.active {
    outline: none;
    background: transparent;
}
/* sub-category lists (item shop, content tables, zones) */
.sidenav ul.shop-sub, .sidenav ul.nav-sub { margin: 0.1rem 0 0.3rem 0.9rem; }
/* zone-map sub-category list (always open) */
.sidenav ul.map-sub { margin: 0.1rem 0 0.3rem 0.9rem; }
/* the Gamma tier level nests one deeper */
.sidenav ul.map-sub-deep { margin: 0.05rem 0 0.15rem 0.8rem; }
.sidenav ul.map-sub-deep a { font-size: 0.88em; padding: 0.22rem 0.6rem; }
.sidenav a {
    display: block; padding: 0.3rem 0.6rem; border-radius: 6px;
    color: var(--chrome-muted); font-size: 0.92rem;
    border-left: 2px solid transparent;
}
.sidenav a:hover {
    background: var(--neon-faint); color: var(--neon); text-decoration: none;
    border-left-color: var(--neon);
}
.sidenav .nav-group { margin: 0.8rem 0.2rem 0.15rem; }
.sidenav .nav-group-head {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--neon);
    opacity: 0.85;
}
.sidenav .nav-group-link {
    display: flex; align-items: center; gap: 0.5rem;
    flex: 1; /* span the row (incl. the gap before the caret) so the active
                outline covers the full entry width */
    padding: 0.2rem 0.6rem; margin: -0.2rem -0.6rem 0;
    border-radius: 6px; text-decoration: none;
}
.sidenav .nav-group-link:hover {
    background: var(--neon-faint); color: var(--neon);
    border-left-color: transparent;
}

/* ============ content panel (dark, lighter than chrome) ============ */
/* The CONTENT column (main + footer) is the centered element on wide
   screens — .content-col is the grid column that centers it, the sidenav
   sits to its left and is NOT part of the centered block. main and the
   footer share the 1050px max width so their borders line up. */
.content-col {
    display: grid;
    grid-template-columns: minmax(0, 1050px);
    justify-content: center;
}
main {
    margin: 0;
    width: 100%;
    min-width: 0;
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    background-size: 28px 28px, 28px 28px, 100% 100%;
    border: 1px solid var(--border);
    border-top: 2px solid var(--neon);
    border-radius: 10px;
    padding: 0.4rem 2.2rem 2.2rem;
    box-shadow: 0 0 0 1px rgba(65, 211, 255, 0.10), 0 18px 50px rgba(0, 0, 0, 0.55);
}
/* prose keeps a readable line length on wide screens; tables, code and
   diagrams (mermaid, zone maps) are unaffected and use the full width */
main p, main li, main blockquote, main dt, main dd {
    max-width: 46rem;
}
/* ============ mobile: the sidenav becomes an off-canvas drawer, opened by
   the hamburger (top left of the two-row topbar). Touch behaviour: tap the
   hamburger or the dimmed backdrop to close, tap a link to navigate +
   close, swipe the drawer left to close, Escape closes. */
.sidenav-toggle { display: none; }
@media (max-width: 800px) {
    /* no extra side margin: .layout and the footer below share the same
       1.2rem inset, so the panel edges line up top to bottom */
    main { margin: 0 0 2rem; padding: 0.4rem 1.2rem 1.6rem; }
    .sidenav {
        display: block;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(82vw, 330px);
        z-index: 45;
        flex: none;
        transform: translateX(-103%);
        transition: transform 0.22s ease-out;
        border-radius: 0 10px 10px 0;
        border-top: 0; border-bottom: 0; border-left: 0;
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.5);
    }
    body.sidenav-open .sidenav { transform: translateX(0); }
    body.sidenav-open { overflow: hidden; } /* scroll lock behind the drawer */
    /* while the drawer is open the three chrome buttons (language, palette,
       theme) leave the topbar — which the drawer covers — and reposition
       inside the drawer, just below the Home quick-link (measured: the
       link's bottom sits at ~65px from the viewport top). */
    body.sidenav-open .palette-wrap {
        position: fixed; left: 0.75rem; top: 4.2rem;
        z-index: 46; /* above the drawer (45) */
        gap: 0.35rem;
    }
    /* dim backdrop behind the drawer (a tap on it closes, via JS) */
    body.sidenav-open::before {
        content: "";
        position: fixed; inset: 0;
        background: rgba(4, 10, 20, 0.6);
        z-index: 44;
    }
    .sidenav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 2.4rem; height: 2.4rem; flex: none;
        font-size: 1.1rem; line-height: 1;
        color: var(--chrome-fg);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--neon-dim);
        border-radius: 8px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .sidenav-toggle:hover, .sidenav-toggle:focus-visible {
        border-color: var(--neon); color: var(--neon); outline: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .sidenav { transition: none; }
    }
}
@media (max-width: 640px) {
    /* the two-row top bar must fit a phone: row 1 keeps brand + icons, the
       search (row 2) fills the width */
    .topbar { padding: 0.5rem 0.8rem 0.45rem; }
    .topbar-main { gap: 0.5rem; }
    /* row 1 must fit a phone: keep the title short enough for the icons */
    .brand { font-size: 0.72rem; letter-spacing: 0.08em; white-space: nowrap; }
    .sidenav-toggle, .theme-toggle, .palette-toggle { width: 34px; height: 34px; }
    #wiki-search { min-width: 0; }
}

h1 {
    font-size: 1.9rem; margin-top: 0.2rem; letter-spacing: 0.02em;
    color: #ecf5ff;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(65, 211, 255, 0.55);
    box-shadow: 0 6px 14px -10px rgba(65, 211, 255, 0.9);
}
h2 {
    margin-top: 2rem; border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem; padding-left: 0.65rem; position: relative;
    color: #dfe9f8;
}
h2::before {
    content: "";
    position: absolute; left: 0; top: 0.3em; bottom: 0.32em; width: 3px;
    background: var(--neon); border-radius: 2px; opacity: 0.75;
}
/* wide tables scroll inside themselves instead of pushing the page into a
   horizontal scroll (mobile); narrow tables are unaffected */
table { border-collapse: collapse; width: auto; max-width: 100%; margin: 1rem 0; font-size: 0.9rem; }
.prose table, main table { display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; }
th {
    background: var(--th-bg);
    color: var(--th-fg);
    letter-spacing: 0.03em; font-weight: 600;
    border-bottom: 2px solid var(--th-edge);
}
tr:nth-child(even) td { background: #13213a; }

blockquote {
    margin: 1rem 0; padding: 0.6rem 1rem;
    border-left: 4px solid var(--accent);
    background: var(--bg-soft); border-radius: 0 8px 8px 0;
    color: var(--muted);
}
blockquote p { margin: 0.2rem 0; }

/* Zola built-in shortcodes (note/info/warning/tip) */
.note, .info, .warning, .tip {
    border: 1px solid var(--border); border-left-width: 4px;
    border-radius: 8px; padding: 0.7rem 1rem; margin: 1rem 0;
}
.note { border-left-color: #7b8794; }
.info { border-left-color: var(--accent); }
.warning { border-left-color: #d9822b; }
.tip { border-left-color: #2f9e6f; }

/* ============ light mode (whole site, including chrome) ============ */
/* ============ accent palettes (sci-fi; apply to the whole site) ============
   Each palette redefines the neon triple (+ the derived content accents).
   Cyan is the :root default, so only the other palettes need a selector. */
html[data-palette="violet"] {
    --neon: #a78bfa;
    --neon-dim: rgba(167, 139, 250, 0.38);
    --neon-faint: rgba(167, 139, 250, 0.12);
    --accent: #b7a5ff;
    --glow-a: rgba(167, 139, 250, 0.08);
    --glow-b: rgba(167, 139, 250, 0.05);
    --grid-line: rgba(167, 139, 250, 0.06);
    --th-bg: #3b3168;
    --th-fg: #e9e2ff;
    --th-edge: rgba(167, 139, 250, 0.7);
    --bg-top: #221b48;
    --bg-bottom: #120d28;
    /* background family, tinted violet */
    --fg: #ded8f2;
    --muted: #9c92c4;
    --bg: #171130;
    --bg-soft: #201a41;
    --border: #37305e;
    --code-bg: #251e4c;
    --chrome-bg: #0b0718;
    --chrome-bg2: #141031;
    --chrome-fg: #d3cdee;
    --chrome-muted: #8a82b4;
}
html[data-palette="green"] {
    --neon: #4ade80;
    --neon-dim: rgba(74, 222, 128, 0.38);
    --neon-faint: rgba(74, 222, 128, 0.12);
    --accent: #6ee7a0;
    --glow-a: rgba(74, 222, 128, 0.08);
    --glow-b: rgba(74, 222, 128, 0.05);
    --grid-line: rgba(74, 222, 128, 0.06);
    --th-bg: #1d4a35;
    --th-fg: #dcffe9;
    --th-edge: rgba(74, 222, 128, 0.7);
    --bg-top: #12301f;
    --bg-bottom: #081a10;
    /* background family, tinted green (phosphor terminal) */
    --fg: #d2ecdb;
    --muted: #84b499;
    --bg: #0c2015;
    --bg-soft: #122c1d;
    --border: #235239;
    --code-bg: #123423;
    --chrome-bg: #050f0a;
    --chrome-bg2: #0a1c12;
    --chrome-fg: #c4e5d1;
    --chrome-muted: #6f9c84;
}
html[data-palette="amber"] {
    --neon: #fbbf24;
    --neon-dim: rgba(251, 191, 36, 0.38);
    --neon-faint: rgba(251, 191, 36, 0.12);
    --accent: #fcd34d;
    --glow-a: rgba(251, 191, 36, 0.08);
    --glow-b: rgba(251, 191, 36, 0.05);
    --grid-line: rgba(251, 191, 36, 0.06);
    --th-bg: #5c4a1e;
    --th-fg: #fff3d6;
    --th-edge: rgba(251, 191, 36, 0.7);
    --bg-top: #2f2512;
    --bg-bottom: #191204;
    /* background family, tinted warm dark */
    --fg: #f0e6d2;
    --muted: #b4a482;
    --bg: #211909;
    --bg-soft: #2d2310;
    --border: #574722;
    --code-bg: #352a12;
    --chrome-bg: #120d04;
    --chrome-bg2: #1f1809;
    --chrome-fg: #e6dcc4;
    --chrome-muted: #9c8f6f;
}
/* light mode: same palettes, deepened to keep contrast on the pale chrome */
html[data-theme="light"][data-palette="violet"] {
    --neon: #6d28d9;
    --neon-dim: rgba(109, 40, 217, 0.45);
    --neon-faint: rgba(109, 40, 217, 0.10);
    --accent: #6d28d9;
    --grid-line: rgba(109, 40, 217, 0.08);
    --th-bg: #d5c9f2;
    --th-fg: #3b1d70;
    --th-edge: rgba(109, 40, 217, 0.5);
    --bg-top: #faf8ff;
    --bg-bottom: #efeafb;
    --fg: #241c38;
    --muted: #5c5280;
    --bg: #f7f5fd;
    --bg-soft: #efeafb;
    --border: #cfc3e8;
    --code-bg: #e8e2f6;
    --chrome-bg: #e4ddf3;
    --chrome-bg2: #f0ecfa;
    --chrome-fg: #332a52;
    --chrome-muted: #6a6094;
}
html[data-theme="light"][data-palette="green"] {
    --neon: #15803d;
    --neon-dim: rgba(21, 128, 61, 0.45);
    --neon-faint: rgba(21, 128, 61, 0.10);
    --accent: #15803d;
    --grid-line: rgba(21, 128, 61, 0.08);
    --th-bg: #bfe3cc;
    --th-fg: #124324;
    --th-edge: rgba(21, 128, 61, 0.5);
    --bg-top: #f8fefb;
    --bg-bottom: #e6f4ec;
    --fg: #16281e;
    --muted: #4a7560;
    --bg: #f3fbf6;
    --bg-soft: #e4f4e9;
    --border: #bfe0cd;
    --code-bg: #ddefe2;
    --chrome-bg: #d9efe0;
    --chrome-bg2: #ecf8f1;
    --chrome-fg: #1d3a2b;
    --chrome-muted: #55806a;
}
html[data-theme="light"][data-palette="amber"] {
    --neon: #b45309;
    --neon-dim: rgba(180, 83, 9, 0.45);
    --neon-faint: rgba(180, 83, 9, 0.10);
    --accent: #b45309;
    --grid-line: rgba(180, 83, 9, 0.08);
    --th-bg: #f2ddb4;
    --th-fg: #5c3403;
    --th-edge: rgba(180, 83, 9, 0.5);
    --bg-top: #fffdf7;
    --bg-bottom: #f6eeda;
    --fg: #2a2010;
    --muted: #7c6a48;
    --bg: #fdf9f0;
    --bg-soft: #f7eed9;
    --border: #e0cfa5;
    --code-bg: #f3e8cf;
    --chrome-bg: #f3e8d4;
    --chrome-bg2: #faf3e5;
    --chrome-fg: #46381c;
    --chrome-muted: #8a7850;
}
html[data-theme="light"] {
    --th-bg: #bcd7ec;
    --th-fg: #0d3a5c;
    --th-edge: rgba(13, 111, 174, 0.6);
    --bg-top: #f7fbfe;
    --bg-bottom: #eaf3fa;
    --fg: var(--light-fg);
    --muted: var(--light-muted);
    --accent: var(--light-accent);
    --bg: var(--light-bg);
    --bg-soft: var(--light-bg-soft);
    --border: var(--light-border);
    --code-bg: var(--light-code-bg);
    --grid-line: var(--light-grid-line);
    /* chrome goes light too: same sci-fi shapes, soft blue-grey palette */
    --chrome-bg: #dce8f3;
    --chrome-bg2: #edf4fb;
    --chrome-fg: #22384e;
    --chrome-muted: #51667f;
    --neon: #0d6fae;
    --neon-dim: rgba(13, 111, 174, 0.45);
    --neon-faint: rgba(13, 111, 174, 0.10);
}
html[data-theme="light"] body {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(13, 111, 174, 0.06), transparent 60%),
        radial-gradient(900px 420px at 8% 108%, rgba(13, 111, 174, 0.04), transparent 60%),
        #d3e1ef;
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .sidenav,
html[data-theme="light"] footer {
    box-shadow: 0 6px 22px rgba(30, 60, 100, 0.14);
}
html[data-theme="light"] .topbar { border-bottom-color: var(--neon-dim); }
html[data-theme="light"] .sidenav { border-color: var(--neon-dim); }
html[data-theme="light"] footer { border-top-color: var(--neon-dim); }
html[data-theme="light"] .brand { color: #14212e; text-shadow: none; }
html[data-theme="light"] .theme-toggle,
html[data-theme="light"] #wiki-search,
html[data-theme="light"] .search-results a:hover {
    background: rgba(13, 111, 174, 0.08);
}
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] #wiki-search:focus {
    box-shadow: 0 0 10px rgba(13, 111, 174, 0.25);
}
html[data-theme="light"] .sidenav a { color: var(--chrome-muted); }
html[data-theme="light"] .sidenav a:hover { color: var(--neon); background: var(--neon-faint); }
html[data-theme="light"] .search-results {
    box-shadow: 0 10px 30px rgba(30, 60, 100, 0.2);
    border-color: var(--neon-dim);
}
html[data-theme="light"] .footnav .here strong { color: #14212e; text-shadow: none; }
html[data-theme="light"] main {
    background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
        linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
    background-size: 28px 28px, 28px 28px, 100% 100%;
}
html[data-theme="light"] h1 { color: #0e1c29; box-shadow: none; }
html[data-theme="light"] h2 { color: #10243a; }
html[data-theme="light"] tr:nth-child(even) td { background: #ebf4fa; }

/* zone-map family colors: class-driven so colorblind modes can recolor */
.mapfam-tm { fill: var(--map-tm); background-color: var(--map-tm); }
.mapfam-ics { fill: var(--map-ics); background-color: var(--map-ics); }
.mapfam-asi { fill: var(--map-asi); background-color: var(--map-asi); }
.mapfam-gamma { fill: var(--map-gamma); background-color: var(--map-gamma); }
.mapfam-special { fill: var(--map-special); background-color: var(--map-special); }

/* ============ colorblind modes (independent of accent palette) ============
   Okabe-Ito-based sets: distinguishable per CVD type. Each mode retints the
   map family colors AND the accent so links/highlights stay usable. */
html[data-cb="deutan"], html[data-cb="protan"] {
    --map-tm: #56B4E9; --map-ics: #0072B2; --map-asi: #E69F00;
    --map-gamma: #CC79A7; --map-special: #999999;
    --neon: #56B4E9; --neon-dim: rgba(86, 180, 233, 0.4); --neon-faint: rgba(86, 180, 233, 0.12);
    --accent: #56B4E9;
    --glow-a: rgba(86, 180, 233, 0.08); --glow-b: rgba(86, 180, 233, 0.05);
}
html[data-cb="tritan"] {
    --map-tm: #E69F00; --map-ics: #009E73; --map-asi: #56B4E9;
    --map-gamma: #CC79A7; --map-special: #999999;
    --neon: #E69F00; --neon-dim: rgba(230, 159, 0, 0.4); --neon-faint: rgba(230, 159, 0, 0.12);
    --accent: #E69F00;
    --glow-a: rgba(230, 159, 0, 0.08); --glow-b: rgba(230, 159, 0, 0.05);
}
html[data-cb="achro"] {
    --map-tm: #f2f2f2; --map-ics: #c2c2c2; --map-asi: #929292;
    --map-gamma: #626262; --map-special: #3a3a3a;
    --neon: #e8e8e8; --neon-dim: rgba(232, 232, 232, 0.4); --neon-faint: rgba(232, 232, 232, 0.12);
    --accent: #e8e8e8;
    --glow-a: rgba(232, 232, 232, 0.06); --glow-b: rgba(232, 232, 232, 0.04);
}
html[data-theme="light"][data-cb="achro"] {
    --neon: #222222; --neon-dim: rgba(34, 34, 34, 0.45); --neon-faint: rgba(34, 34, 34, 0.10);
    --accent: #222222;
    --map-special: #e0e0e0;
}

/* interactive SVG wrappers (world map + extension tree) */
.map-zoom-wrap {
    position: relative;
    height: min(78vh, 900px);
    margin: 1.2rem 0;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.zoommap {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    transform-origin: center center;
    will-change: transform;
    touch-action: none;
    cursor: grab;
}
.zoommap.dragging { cursor: grabbing; }
.zoommap-reset {
    position: absolute;
    top: 0.6rem; right: 0.6rem;
    z-index: 2;
    width: 2.2rem; height: 2.2rem;
    font-size: 1.15rem; line-height: 1;
    color: var(--chrome-fg);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.zoommap-reset:hover { border-color: var(--neon); color: var(--neon); }

/* zone map (generated inline SVG) */
.zonemap-wrap {
    position: relative;
    height: min(78vh, 860px);
    margin: 1.2rem 0;
    overflow: hidden;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.zonemap {
    display: block;
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
    transform-origin: center center;
    will-change: transform;
    touch-action: none;
    cursor: grab;
}
.zonemap.dragging { cursor: grabbing; }
.zonemap-reset {
    position: absolute;
    top: 0.6rem; right: 0.6rem;
    z-index: 2;
    width: 2.2rem; height: 2.2rem;
    font-size: 1.15rem; line-height: 1;
    color: var(--chrome-fg);
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
}
.zonemap-reset:hover { border-color: var(--neon); color: var(--neon); }
/* zone teleport maps: inlined from /zonemaps/*.svg by zone-map.js into
   the same wrapper the world map uses (map.js then attaches zoom/pan).
   The maps are square, so a squarer panel than the world map's. */
.zonetp-wrap { height: min(72vh, 700px); position: relative; }
/* display-mode switcher for zone maps with real terrain (zone-map.js) */
.zonemap-modes { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; display: flex; gap: 0.25rem; }
.zonemap-mode {
    padding: 0.22rem 0.5rem; font-size: 0.72rem; line-height: 1.2;
    color: var(--chrome-fg); background: var(--bg-soft);
    border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
.zonemap-mode:hover, .zonemap-mode:focus-visible { border-color: var(--neon); outline: none; }
.zonemap-mode[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.zonemap a { cursor: pointer; }
.zonemap a:hover > circle, .zonemap a:hover > path {
    stroke: #ffffff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}
.zonemap text { user-select: none; }

.zonemap-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
    color: var(--muted); font-size: 0.88em;
    margin: -0.6rem 0 1.2rem;
}
.legend-isle {
    display: inline-block;
    height: 12px;
    border-radius: 3px;
    background: var(--map-special);
    border: 1px solid rgba(0, 0, 0, 0.35);
    vertical-align: middle;
}
/* inter-zone teleports: dashed lines, the stroke set per line as a gradient
   from the source family color to the destination's (see ZonesMapPage.cs).
   Desktop pointers: almost invisible at rest — map.js fades the line in
   while the cursor is near it (.zm-tp-on); touch layouts keep them plainly
   visible (no mouse to "approach" with). */
.zonemap-tp { stroke-width: 1.1; stroke-opacity: 0.65; stroke-dasharray: 5 4; }
.zonemap-tp:hover { stroke-opacity: 1; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) {
  .zonemap-tp { stroke-opacity: 0.25; transition: stroke-opacity 0.15s; }
  .zonemap-tp.zm-tp-on { stroke-opacity: 0.9; stroke-width: 1.6; }
  .zonemap-tp:hover { stroke-opacity: 1; stroke-width: 2; }
}
.zonemap-link { stroke: var(--accent); stroke-width: 1.6; stroke-opacity: 0.85; stroke-dasharray: 5 3; }
.zonemap-link:hover { stroke: var(--neon); stroke-width: 2.2; }
/* local (in-zone) teleports on the zone maps: the dashed lines between a
   pair's columns are always visible (they are the point of the map); map.js
   brightens them a touch while the cursor is near an endpoint (data-ltp).
   The world map does not carry ltp elements at all. */
.zonetp-wrap .ltp-line { opacity: 0.85; transition: opacity 0.15s; pointer-events: none; }
.zonetp-wrap .ltp-line.ltp-on { opacity: 1; }
.zonetp-wrap .ltp-dot { pointer-events: none; stroke: rgba(0, 0, 0, 0.5); stroke-width: 1; }
/* exit teleports: a dashed line from the column to the map edge, pointing
   the way the destination zone lies on the world map (family color stroke).
   Dark casings under the ltp lines / landing-spot circles keep the dashes
   readable on the bright color-mode terrain. Neither kind of helper may
   eat pointer events (the columns and spots are the clickable elements). */
.zonetp-wrap .exi-line { pointer-events: none; opacity: 0.75; transition: opacity 0.15s; }
/* the color render is bright terrain: the teleport lines get extra contrast
   there — darkened (zone-map.js also thickens them while the mode is on,
   via the zm-color class on the wrap). */
.zonetp-wrap.zm-color .ltp-line, .zonetp-wrap.zm-color .exi-line { filter: brightness(0.5) saturate(1.15); }
.zonetp-wrap .zm-casing { pointer-events: none; }
/* the destination selector (map.js): while it is open the dashed lines of
   the hovered/tapped item are emphasised — .tp-sel-on on the exit lines
   (zone maps) and the inter-zone TP lines (world map); hovering one entry
   in the selector keeps only THAT line emphasised. */
.zonetp-wrap .exi-line.tp-sel-on { opacity: 1; }
.zonemap-tp.tp-sel-on { stroke-opacity: 1; stroke-width: 1.8; }
/* the destination-selector popover (inside the map wrap, absolute) */
.tp-sel {
    position: absolute; z-index: 40; display: none;
    min-width: 132px; max-width: 230px;
    background: rgba(7, 12, 22, 0.96);
    border: 1px solid var(--neon-dim);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    padding: 4px;
    font-size: 0.78rem; line-height: 1.35;
    color: var(--chrome-fg);
}
.tp-sel-head {
    padding: 2px 8px 4px;
    font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--chrome-muted);
}
.tp-sel-item {
    display: block; width: 100%; text-align: left;
    padding: 4px 8px; margin: 1px 0;
    background: none; border: 0; border-radius: 6px;
    color: var(--chrome-fg); font: inherit; cursor: pointer;
}
.tp-sel-item:hover, .tp-sel-item:focus-visible {
    background: var(--neon-faint); color: var(--neon); outline: none;
}
/* world-map card: the small horizontal link to /zones/map/ that every
   zone page carries above its own teleport map */
.worldmap-card { margin: 0.4rem 0 0.7rem; }
.worldmap-card a {
    display: flex; align-items: center; gap: 0.8rem;
    border: 1px solid var(--border); border-radius: 10px;
    padding: 0.45rem 0.65rem;
    background: var(--bg-soft);
    transition: border-color 0.15s ease;
}
.worldmap-card a:hover { border-color: var(--neon-dim); }
.worldmap-card img { height: 56px; width: auto; border-radius: 4px; display: block; flex: none; }
.worldmap-card-body { font-size: 0.85rem; color: var(--muted); }
.worldmap-card-body strong { color: var(--fg); }
/* world map sub-sections: zone cards (thumbnail = the coastline-only
   thumb.png), small enough for 3-4 per row */
.zone-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 0.7rem;
    margin: 0.8rem 0 1.4rem;
}
.zone-card {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.55rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
}
.zone-card:hover, .zone-card:focus-visible {
    border-color: var(--neon); outline: none;
    transform: translateY(-1px);
}
.zone-card-thumb {
    width: 100%; aspect-ratio: 1; object-fit: cover;
    border-radius: 6px; background: #10151f;
}
.zone-card-name { color: var(--fg); font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.zone-card-meta { color: var(--muted); font-size: 0.82rem; }
/* anchor jumps (category boxes on the extensions page, the side-menu map
   anchors, …) land below the sticky topbar so the section heading stays
   visible — one row on desktop, two rows on mobile */
main [id] { scroll-margin-top: 4.2rem; }
@media (max-width: 800px) { main [id] { scroll-margin-top: 7rem; } }
.zonemap-label { fill: var(--fg); opacity: 0.85; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.zonemap circle, .zonemap rect { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }
.zonemap a:hover circle, .zonemap a:hover rect { stroke: var(--neon); stroke-width: 2.5; }
.zonemap a { cursor: pointer; }
.mapdot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; margin-right: 0.35em; vertical-align: baseline; }

/* home menu group icons: outline-only shapes (transparent inside) that blend into the page */
.menuhead { white-space: nowrap; }
.menuhead .menuicon { vertical-align: -0.25em; margin-right: 0.4rem; color: var(--accent); }

/* robot model icons (robots page; masked placeholder icon) */
.robot-icon {
    height: 2.6em; width: auto;
    vertical-align: -0.5em; margin-right: 0.5rem;
    filter: drop-shadow(0 0 6px var(--neon-faint));
}
.robot-icon.icon-mask { width: 2.6em; }

/* video grid (home page): responsive, several per row on wide windows */
.video-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 1.1rem 0; }
/* the click-to-play embed fills the 16:9 card, at any width */
.video-card iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-card {
    position: relative; aspect-ratio: 16 / 9;
    border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-soft);
    cursor: pointer;
}
.video-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card .video-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem; color: #fff;
    background: rgba(0, 0, 0, 0.28);
    transition: background 0.15s ease;
}
.video-card:hover .video-play, .video-card:focus-visible .video-play { background: var(--neon-faint); }
.video-card .video-title {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 1.1rem 0.7rem 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
    color: #fff; font-size: 0.85rem; line-height: 1.3;
}
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* mermaid diagrams — zoomable/pannable like the maps (map.js attaches
   wheel/drag/pinch + creates the ⟲ reset button) */
.mermaid {
    margin: 1.2rem 0; padding: 1rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
    position: relative;
    overflow: hidden; /* the zoom/pan moves the svg inside this box */
}
/* fit the rendered diagram to the column (any width); zoom in for detail */
.mermaid svg { max-width: 100%; height: auto; }
.mermaid svg.dragging { cursor: grabbing; }

/* ============ chrome: bottom section ============ */
/* inside the content column, under main */
footer {
    clear: both;
    margin: 1.6rem 0 0;
    /* sits in the same centered 1050px grid column as main (see .content-col) */
    padding: 0.9rem 1.2rem 1.6rem;
    background:
        linear-gradient(180deg, var(--chrome-bg) 0%, var(--chrome-bg2) 100%);
    border: 1px solid var(--neon-dim);
    border-top: 2px solid var(--neon);
    border-radius: 10px;
    box-shadow: 0 0 14px var(--neon-faint);
    color: var(--chrome-muted);
    font-size: 0.85rem;
}
.footnav {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.35rem 1.6rem;
    padding: 0.35rem 0.4rem 0.7rem;
    margin: 0;
    font-size: 0.95rem;
}
.footnav a { color: var(--chrome-fg); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.footnav a:hover { color: var(--neon); text-decoration: none; }
.footnav .here { color: var(--neon); letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.82rem; }
.footnav .here strong { color: #ffffff; text-shadow: 0 0 8px var(--neon-dim); }
.footnav .here .curtitle { color: var(--chrome-fg); text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
.footlinks {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.35rem 1.4rem;
    padding: 0.15rem 0.4rem 0.55rem;
}
.footlinks a {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--chrome-fg);
    font-size: 0.82rem; letter-spacing: 0.05em;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
}
.footlinks a:hover { color: var(--neon); border-color: var(--neon-dim); text-decoration: none; }
.footlinks svg { flex: none; }
.footcredit { margin: 0.35rem 0.4rem 0; }
.footcredit .attr { opacity: 0.8; }
.footcredit .attr a { text-decoration: underline; }
.footcredit a { color: var(--chrome-fg); }
.footcredit code { background: rgba(255, 255, 255, 0.07); color: var(--chrome-fg); }

/* Steam storefront embed (home page): the iframe is a fixed 600x172, keep it
   contained and theme-neutral — Steam renders its own chrome. */
.steam-card {
    max-width: 460px;
    margin: 1rem 0;
}
.steam-card-link {
    display: block;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg-soft);
    transition: border-color 0.15s ease;
}
.steam-card-link:hover { border-color: var(--neon); }
.steam-card-img {
    display: block;
    width: 100%;
    height: auto;
}
.steam-card-label {
    display: block;
    padding: 0.55rem 0.8rem;
    color: var(--fg);
    font-size: 0.92em;
    border-top: 1px solid var(--border);
}

/* Home page "at a glance": high-level game topic cards (OSRS main-page
   style). The first card is the world map: a low-resolution render of the
   real map with "World" centered over it; the rest are name + one-line
   description. Card names are bright against the dim card body on purpose. */
.home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.8rem;
    margin: 1.1rem 0 1.6rem;
}
.home-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.6rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-card:hover, .home-card:focus-visible {
    border-color: var(--neon); outline: none;
    transform: translateY(-1px);
}
.home-card-img {
    position: relative;
    display: block;
    width: 100%; aspect-ratio: 600 / 886;
    border-radius: 6px;
    overflow: hidden;
    background: #0a0e15;
}
.home-card-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0.92;
    transition: opacity 0.15s ease, transform 0.3s ease;
}
.home-card:hover .home-card-img img, .home-card:focus-visible .home-card-img img {
    opacity: 1;
    transform: scale(1.03);
}
.home-card-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg);
    background: rgba(7, 12, 20, 0.55);
    transition: background 0.15s ease;
}
.home-card:hover .home-card-overlay, .home-card:focus-visible .home-card-overlay {
    background: rgba(7, 12, 20, 0.35);
}
/* The World Map card takes a line to itself: a wide banner (full grid
   width) with the low-res map cover-fitted and "World Map" centered. */
.home-card-map {
    grid-column: 1 / -1;
    position: relative;
    display: block;
    height: 230px;
    padding: 0;
    overflow: hidden;
}
@media (max-width: 640px) { .home-card-map { height: 170px; } }
.home-card-map img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
.home-card-map .home-card-overlay {
    font-size: 1.7rem;
}
.home-card-name {
    color: var(--fg); /* high contrast on the dim card body */
    font-weight: 650;
    font-size: 1.02rem;
    line-height: 1.25;
}
.home-card:hover .home-card-name, .home-card:focus-visible .home-card-name {
    color: var(--accent);
}
.home-card-desc { color: var(--muted); font-size: 0.83rem; line-height: 1.35; }

/* ============ missions catalog: per-type tier cards ============ */
.mission-index { line-height: 2; margin: 0.8rem 0; }
.mission-type-chip {
    display: inline-block; padding: 0.1rem 0.55rem; margin: 0.05rem 0.15rem;
    border: 1px solid var(--neon-dim); border-radius: 999px;
    background: var(--bg-soft); font-size: 0.85em;
}
a:hover > .mission-type-chip { border-color: var(--neon); color: var(--accent); }
/* tech tree line chips: same look as the mission type chips */
.tt-index { line-height: 2; margin: 0.8rem 0; }
.tt-chip {
    display: inline-block; padding: 0.1rem 0.55rem; margin: 0.05rem 0.15rem;
    border: 1px solid var(--neon-dim); border-radius: 999px;
    background: var(--bg-soft); font-size: 0.85em;
}
a:hover > .tt-chip { border-color: var(--neon); color: var(--accent); }
.mission-category { color: var(--muted); font-style: italic; }
.mission-cards {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem; margin: 1rem 0 1.4rem;
}
.mission-card {
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-soft); padding: 0.8rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.6rem;
}
.mission-card-head { display: flex; gap: 0.7rem; align-items: flex-start; }
.mission-card-icon { width: 2em; height: 2em; flex: 0 0 auto; color: var(--accent); margin-top: 0.15rem; }
.mission-card-title { font-weight: 600; }
.mission-card-sub { font-size: 0.88em; color: var(--muted); }
.mission-card-rewards { display: flex; flex-direction: column; gap: 0.35rem; }
.ext-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 10px 0 26px;
}

.ext-card {
  border: 1px solid var(--line, #2a3242);
  border-radius: 10px;
  padding: 10px 12px;
  background: #121926;
  font-size: 13px;
}

.ext-card-name {
  font-weight: 600;
  font-size: 13.5px;
  color: #e8ecf4;
}

.ext-card-meta {
  color: var(--muted, #8b93a5);
  font-size: 12px;
  margin: 3px 0 7px;
}
/* the interesting values in the meta line (rank, credits, bonus) get
   contrast: bold + a color each */
.ext-card-meta .ext-val-rank { color: var(--neon, #41d3ff); font-weight: 700; }
.ext-card-meta .ext-val-price { color: #6ee7a0; font-weight: 700; }
.ext-card-meta .ext-val-bonus { color: #facc15; font-weight: 700; }

.ext-card-bonus {
  color: #cdd5e4;
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0 0 7px;
}

.ext-card-prereq {
  color: var(--muted, #8b93a5);
  font-size: 12px;
  line-height: 1.5;
}

/* item pages: "Produced from" component cards (replaced the mermaid tree —
   one card per component: icon + name on the left, required amount in the
   body). Grid mirrors .ext-cards. */
.prod-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 10px 0 26px;
}

.prod-card {
  border: 1px solid var(--line, #2a3242);
  border-radius: 10px;
  padding: 9px 11px;
  background: #121926;
  font-size: 13px;
  min-width: 0;
}

.prod-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.prod-card-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  color: var(--neon, #41d3ff);
}

.prod-card-name {
  font-weight: 600;
  font-size: 13px;
  color: #e8ecf4;
  min-width: 0;
  overflow-wrap: anywhere;
}

a.prod-card-name { text-decoration: none; }
a.prod-card-name:hover { color: var(--neon, #41d3ff); }

.prod-card-body {
  color: var(--muted, #8b93a5);
  font-size: 12px;
  margin-top: 4px;
}

.prod-card-body b { color: #e8ecf4; font-weight: 700; }

.reward-box {
    display: flex; align-items: center; gap: 0.5rem;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); padding: 0.28rem 0.5rem; font-size: 0.9em;
}
.reward-box-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: var(--accent); }
/* SVG icons loaded via <img> can't inherit page CSS colors, so theme-tinted
   icons are rendered as alpha masks over currentColor instead. */
.icon-mask {
    display: inline-block;
    background: currentColor;
    -webkit-mask: url("/img/placeholder.svg") no-repeat center;
    mask: url("/img/placeholder.svg") no-repeat center;
    -webkit-mask-size: contain; mask-size: contain;
}
.robot-icon.icon-mask { color: var(--accent); }
.palette-toggle { color: var(--neon); }

/* "A new update is available" toast (update-check.js): a clickable pill,
   bottom right, above everything, in the chrome's dark style. */
.update-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: min(90vw, 22rem);
    padding: 0.65rem 0.95rem;
    font: inherit;
    font-size: 0.92em;
    color: var(--fg);
    text-align: left;
    background: var(--bg-soft);
    border: 1px solid var(--accent);
    border-radius: 0.6rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    animation: update-toast-in 0.25s ease-out;
}
.update-toast::before {
    content: "↑";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 50%;
    background: var(--accent);
    color: var(--bg);
    font-weight: 700;
}
.update-toast:hover, .update-toast:focus-visible {
    border-color: var(--neon, var(--accent));
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--accent);
    outline: none;
}
@keyframes update-toast-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .update-toast { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Play / Dev mode toggle (top bar) + dev-mode visibility              */
/* ------------------------------------------------------------------ */
.mode-toggle {
    display: inline-flex; align-items: center; gap: 1px;
    padding: 2px;
    border: 1px solid var(--neon-dim); border-radius: 999px;
    background: var(--chrome-bg2); color: var(--chrome-muted);
    font: 600 0.7rem/1.3 system-ui, sans-serif; letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.mode-toggle:hover, .mode-toggle:focus-visible { border-color: var(--neon); outline: none; }
.mode-opt { padding: 2px 8px; border-radius: 999px; opacity: 0.55; transition: opacity 0.15s ease; }
html:not([data-mode="dev"]) .mode-opt[data-mode-opt="play"],
html[data-mode="dev"] .mode-opt[data-mode-opt="dev"] {
    opacity: 1; color: var(--neon);
    background: var(--neon-faint);
    box-shadow: 0 0 8px var(--neon-faint);
}
/* the Dev sidenav group is hidden outside dev mode */
.nav-dev { display: none; }
html[data-mode="dev"] .nav-dev { display: block; }
/* dev mode: the menu shows ONLY the Dev group — the Home quick link and
   every play-mode group are hidden */
html[data-mode="dev"] .sidenav > ul > li:not(.nav-dev) { display: none; }

/* ------------------------------------------------------------------ */
/* Dev mode: "the matrix" — near-black, everything glows bright green */
/* (placed after the light-mode rules so it wins when both are set)    */
/* ------------------------------------------------------------------ */
html[data-mode="dev"] {
    --fg: #8affb0;
    --muted: #3ddc74;
    --accent: #00ff41;
    --bg: #020a04;
    --bg-soft: #041507;
    --bg-top: #03130a;
    --bg-bottom: #010703;
    --border: #16c24f;
    --code-bg: #04190b;
    --grid-line: rgba(0, 255, 65, 0.06);
    --th-bg: #062b12;
    --th-fg: #aaffc6;
    --th-edge: rgba(0, 255, 65, 0.5);
    --chrome-bg: #010502;
    --chrome-bg2: #03130a;
    --chrome-fg: #7dffb2;
    --chrome-muted: #35b568;
    --neon: #00ff41;
    --neon-dim: rgba(0, 255, 65, 0.45);
    --neon-faint: rgba(0, 255, 65, 0.13);
    --glow-a: rgba(0, 255, 65, 0.08);
    --glow-b: rgba(0, 255, 65, 0.06);
}
html[data-mode="dev"] body {
    background:
        radial-gradient(1100px 500px at 85% -10%, rgba(0, 255, 65, 0.07), transparent 60%),
        radial-gradient(900px 420px at 8% 108%, rgba(0, 255, 65, 0.05), transparent 60%),
        #010502;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.30);
}
html[data-mode="dev"] a { text-shadow: 0 0 8px rgba(0, 255, 65, 0.50); }
html[data-mode="dev"] .brand { color: #00ff41; text-shadow: 0 0 10px rgba(0, 255, 65, 0.7); }
html[data-mode="dev"] h1 { color: #b4ffc9; text-shadow: 0 0 12px rgba(0, 255, 65, 0.45); }