/* The Eternal Chaos Codex, arcade style (Aaron, 2026-10-07: "i thought we changed everything to be more arcade style
   with all black backgrounds"): black glass on every page, neon borders, square corners, pixel headings, and plain
   readable text for anything longer than a label. Glows only on hover or selection: per-element glow filters by the
   dozen broke Chrome's drawing once (commit 80765757). The variable names are the old book's; their values are neon,
   so the page scripts that use var(--paper), var(--ink) and the rest follow. */
:root {
  --paper: #000;          /* page */
  --paper2: #07070d;      /* a panel on the page */
  --paper3: #10101a;      /* a panel's header band */
  --ink: #e8faff;         /* text */
  --ink2: #b4c6d4;        /* softer text */
  --muted: #8296a8;
  --line: #1c2333;        /* faint rules */
  --line2: #3b2a6e;       /* borders: violet */
  --rubric: #00f0ff;      /* links, headings: cyan */
  --rubric2: #8ff8ff;
  --gold: #ffe600;
  --gold2: #ff8b1f;
  --leather: #000;
  --leather2: #000;
  --plate: #05050a;
  --green: #39ff14;
  --blue: #4fb4ff;
  --orange: #ff8b1f;
  --mag: #ff2fd6;
  --cyan: #00f0ff; --magenta: #ff2fd6; --violet: #7a00ff; --yellow: #ffe600;
  --accent: #ff2fd6;
  --display: "Silkscreen", ui-monospace, Menlo, monospace;
  --deco: "Silkscreen", ui-monospace, Menlo, monospace;
  --serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pixel: "Silkscreen", ui-monospace, Menlo, monospace;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --scan: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.1) 2px 4px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #000; }
body {
  color: var(--ink);
  font: 17px/1.6 var(--serif);
  min-height: 100vh;
  display: flex; flex-direction: column;
  background-color: #000;
  background-image:
    linear-gradient(rgba(122, 0, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122, 0, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}
::selection { background: #ff2fd6; color: #000; }
a { color: var(--rubric); text-decoration: none; }
a:hover { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; margin: 0 0 0.5em; line-height: 1.3; }
h1 { font-size: 2rem; color: var(--gold); letter-spacing: 0.02em; }
h2 { font-size: 1.05rem; color: var(--magenta); margin-top: 1.8em; letter-spacing: 0.06em; padding-bottom: 0.35em;
  border-bottom: 2px solid var(--violet); position: relative; }
h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 3.5em; height: 2px; background: var(--magenta); }
h3 { font-size: 0.86rem; color: var(--rubric); margin-top: 1.2em; letter-spacing: 0.03em; }
p { margin: 0.4em 0 0.8em; }
b, strong { font-weight: 700; }
code, .mono { font-family: var(--mono); font-size: 0.82em; color: #9ff; }
.muted { color: var(--muted); }
.dim { color: var(--ink2); }
.small { font-size: 0.88em; }
hr { border: 0; height: 2px; margin: 1.6em 0; background: linear-gradient(90deg, transparent, var(--violet) 15%, var(--magenta) 50%, var(--violet) 85%, transparent); }
select, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea {
  background: #000; color: var(--ink); border: 2px solid var(--line2); border-radius: 0; }
button { background: #000; color: var(--ink); border: 2px solid var(--line2); border-radius: 0; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
button:disabled { opacity: 0.45; cursor: default; }
select:focus, input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: #ff2fd6; }

/* ------------------------------------------------------------ the header */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: 0.55rem 1.2rem;
  background: #000;
  border-bottom: 2px solid var(--cyan);
  box-shadow: 0 2px 0 #000, 0 4px 0 var(--violet);
}
.brand { display: flex; align-items: baseline; gap: 0.6rem; white-space: nowrap; text-decoration: none !important; }
.brand-fq { font-family: var(--pixel); font-size: 1.3rem; color: var(--magenta); text-shadow: 2px 2px 0 #3a0060; }
.brand-cx { font-family: var(--pixel); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--cyan); text-transform: uppercase; }
.brand:hover .brand-fq { color: var(--gold); }
.menu { display: none; background: #000; border: 2px solid var(--cyan); color: var(--cyan); border-radius: 0; font-size: 1.1rem; padding: 0.05rem 0.5rem; cursor: pointer; }
.search { position: relative; margin-left: auto; flex: 0 1 340px; min-width: 150px; }
.search input {
  width: 100%; padding: 0.42rem 0.8rem; border-radius: 0;
  border: 2px solid var(--violet); background: #000; color: var(--ink); font: 16px var(--serif);
}
.search input::placeholder { color: #7484a0; }
.search input:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 240, 255, 0.35); }
.hits {
  position: absolute; right: 0; left: 0; top: calc(100% + 4px);
  background: #000; border: 2px solid var(--cyan); border-radius: 0;
  max-height: 65vh; overflow: auto; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.8);
}
.hits a { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem 0.7rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.hits a:last-child { border-bottom: 0; }
.hits a:hover, .hits a.sel { background: #0b1220; color: var(--gold); text-decoration: none; }
.hits .kind { color: var(--magenta); font-family: var(--pixel); font-size: 0.6em; min-width: 6.2em; text-transform: uppercase; }
.hits .ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; }
.hits .ico img { max-width: 28px; max-height: 28px; image-rendering: pixelated; }

.shell { flex: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr); max-width: 1440px; width: 100%; margin: 0 auto; gap: 0; padding: 1.4rem 1.2rem 2rem; }
.side { position: sticky; top: 76px; align-self: start; padding: 0.2rem 1rem 1rem 0; max-height: calc(100vh - 90px); overflow: auto; }
.side-h { font-family: var(--pixel); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta); margin: 1.1rem 0 0.4rem; padding-bottom: 0.3rem; border-bottom: 2px solid #2a1050; }
.side-h:first-child { margin-top: 0; }
.side a { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.26rem 0.5rem; color: #cfe3ee; border-radius: 0; font-size: 0.98rem; border-left: 2px solid transparent; }
.side a i { font-style: normal; font-family: var(--pixel); font-size: 0.66rem; color: #a46bff; min-width: 1.8em; text-align: right; }
.side a:hover { background: #0b0b18; color: var(--gold); text-decoration: none; border-left-color: var(--gold); }
.side a.on { background: #0b1220; color: var(--cyan); border-left-color: var(--cyan); }
.side a.play { margin-top: 1.2rem; border: 2px solid var(--green); color: var(--green); font-family: var(--pixel); font-size: 0.8rem; letter-spacing: 0.08em; justify-content: center; }
.side a.play:hover { background: var(--green); color: #000; }
.side a.play i { min-width: 0; }

/* ------------------------------------------------------------ the page */
main {
  min-width: 0; position: relative;
  padding: 2.2rem 2.8rem 3.4rem;
  background: #000;
  border: 2px solid var(--violet);
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #26104a;
}
main::before { /* corner ticks, top left and bottom right, as on an arcade bezel */
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 22px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) top left / 2px 22px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--magenta), var(--magenta)) bottom right / 2px 22px no-repeat;
}
.foot { padding: 0.8rem 1.2rem 1.4rem; color: var(--muted); font-size: 0.82em; text-align: center; }

.crumbs { color: var(--muted); font-family: var(--pixel); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; }
.crumbs a { color: var(--green); }
.blurb { font-size: 1.1em; color: var(--ink2); max-width: 64ch; }
.lede { font-size: 1.06em; max-width: 68ch; }
.dropcap::first-letter, .prose > p:first-of-type::first-letter {
  font-family: var(--pixel); float: left; font-size: 3em; line-height: 0.9; padding: 0.06em 0.12em 0 0; color: var(--magenta);
}
.doc { color: var(--ink2); max-width: 80ch; white-space: pre-wrap; }
.notice, .tip-box {
  background: #07070d; border: 1px solid var(--line2); border-left: 4px solid var(--magenta);
  padding: 0.6rem 0.9rem; margin: 1rem 0; border-radius: 0; color: var(--ink);
}
.tip-box { border-left-color: var(--gold); }
.tip-box .tip-h, .notice .tip-h { font-family: var(--pixel); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.2rem; }
.notice .tip-h { color: var(--magenta); }

/* ------------------------------------------------------------ tables */
table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
th, td { text-align: left; padding: 0.34rem 0.55rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { font-family: var(--pixel); color: var(--cyan); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid var(--violet); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--gold); }
th.sorted::after { content: " ▾"; color: var(--magenta); }
th.sorted.asc::after { content: " ▴"; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:nth-child(even) td { background: #07070e; }
tbody tr:hover td { background: #0d0d20; }
.wrap { overflow-x: auto; }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; align-items: center; margin: 1rem 0 1.2rem; padding: 0.6rem 0.7rem; background: #05050b; border: 1px solid var(--line2); border-radius: 0; }
.filters input, .filters select, .seg button {
  padding: 0.28rem 0.55rem; border-radius: 0; border: 2px solid var(--line2);
  background: #000; color: var(--ink); font: 15px var(--serif);
}
.filters input:focus, .filters select:focus { border-color: var(--cyan); outline: 0; }
.filters input[type=search] { min-width: 12em; }
.filters .count { color: var(--muted); margin-left: auto; font-family: var(--pixel); font-size: 0.64rem; }
.seg { display: inline-flex; }
.seg button { cursor: pointer; border-radius: 0; margin-left: -2px; }
.seg button:hover { position: relative; z-index: 1; }
.seg button.on { background: var(--magenta); color: #000; border-color: var(--magenta); position: relative; z-index: 1; }

/* ------------------------------------------------------------ cards and facts */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.card { background: #06060c; border: 1px solid var(--line2); border-radius: 0; padding: 0.8rem 0.95rem; position: relative; }
.card h3 { margin-top: 0; }
.card .sub { color: var(--ink2); font-size: 0.95em; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem 0.8rem; margin: 0.8rem 0 1rem; }
.fact { border-top: 2px solid var(--violet); padding: 0.35rem 0.1rem; }
.fact .k { color: var(--cyan); font-family: var(--pixel); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; }
.fact .v { font-size: 1.06em; font-variant-numeric: tabular-nums; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 2.4rem; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.tag { display: inline-block; padding: 0.05em 0.5em; border-radius: 0; font-family: var(--pixel); font-size: 0.6rem; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid var(--line2); color: var(--ink2); margin-right: 0.3em; white-space: nowrap; vertical-align: 0.3em; background: #000; }
h1 .tag { vertical-align: 0.6em; }
.tag.city { color: var(--cyan); border-color: var(--cyan); }
.tag.under { color: var(--orange); border-color: var(--orange); }
.tag.wild { color: var(--green); border-color: var(--green); }
.tag.plane { color: var(--mag); border-color: var(--mag); }
.tag.named { color: #000; background: var(--orange); border-color: var(--orange); }
.glyph { font-family: var(--mono); display: inline-block; width: 1.4em; text-align: center; font-weight: bold; background: var(--plate); border: 1px solid #1a1a2a; }
.swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0; vertical-align: 0; margin-right: 0.35em; border: 1px solid rgba(255, 255, 255, 0.25); }
.rar-common { color: var(--ink); } .rar-uncommon { color: var(--green); } .rar-rare { color: var(--blue); } .rar-named { color: var(--orange); }
a.rar-common { color: var(--rubric); }
.lvl { color: var(--ink2); font-variant-numeric: tabular-nums; }
.lvl-badge { font-family: var(--pixel); font-size: 0.6rem; color: #000; background: var(--gold); padding: 0.1em 0.45em; border-radius: 0; white-space: nowrap; }
ul.plain { list-style: none; padding: 0; margin: 0.3em 0; }
ul.plain li { padding: 0.18em 0; }
ul.plain li.withpic { display: flex; align-items: center; gap: 0.5rem; }
.ladder { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.3rem 0.8rem; align-items: baseline; }
.ladder .lv { font-family: var(--pixel); color: var(--gold); font-size: 0.8em; text-align: right; }

/* the feats as paths: three columns, each a ladder of six, the cross feats below */
.fpaths { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0.6rem 0; }
.fpath { background: #06060c; border: 1px solid var(--line2); border-radius: 0; padding: 0.7rem 0.9rem 0.6rem; }
.fpath h3 { margin: 0 0 0.2rem; }
.fpath .style { color: var(--ink2); font-style: italic; margin: 0 0 0.5rem; }
.fpath.cross { margin: 0 0 1rem; }
.fpath li.feat, .feats-found li { padding: 0.3rem 0; border-top: 1px solid var(--line); line-height: 1.45; }
.fpath li.feat:first-child { border-top: 0; }
.fpath li.feat .needs, .feats-found .needs { display: block; }
.tag.kind-rank { color: var(--ink2); }
.tag.kind-side { color: var(--green); border-color: var(--green); }
.tag.kind-capstone { color: #000; background: var(--magenta); border-color: var(--magenta); }
.tag.kind-cross { color: var(--blue); border-color: var(--blue); }
.tag.kind-general { color: var(--gold); border-color: var(--gold); }
.tag.retired { color: var(--muted); border-style: dashed; }

/* ------------------------------------------------------------ pictures */
.pix { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.pic { display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.pic img { image-rendering: pixelated; max-width: 100%; max-height: 100%; }
.pic.s24 { width: 24px; height: 24px; } .pic.s32 { width: 32px; height: 32px; } .pic.s48 { width: 48px; height: 48px; } .pic.s64 { width: 64px; height: 64px; }
.pic.glyphpic { background: var(--plate); border-radius: 0; font-family: var(--mono); font-weight: bold; }
td .pic { margin-right: 0.45rem; }

/* a sprite standing on a lit plate, as on an arcade cabinet's attract screen */
.plate {
  display: grid; place-items: end center; position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(0, 240, 255, 0.14), transparent 58%),
    radial-gradient(ellipse at 50% 90%, rgba(0, 0, 0, 0.7) 0 18%, transparent 19%),
    linear-gradient(#0b0620, #000);
  border: 2px solid #2a1a55; border-radius: 0;
}
.plate img { image-rendering: pixelated; position: relative; bottom: 10%; }
.plate .g { font-family: var(--mono); font-weight: bold; align-self: center; }

/* ------------------------------------------------------------ the wiki infobox */
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
.entry > .body { min-width: 0; }
@media (max-width: 1100px) { .entry { grid-template-columns: 1fr; } .infobox { order: -1; max-width: 360px; width: 100%; } }
.infobox { background: #05050b; border: 2px solid var(--cyan); box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--violet); border-radius: 0; font-size: 0.93em; }
.infobox .ib-title { font-family: var(--pixel); text-align: center; background: #000; color: var(--gold); padding: 0.5rem 0.6rem; letter-spacing: 0.03em; border-bottom: 2px solid var(--cyan); font-size: 0.9rem; }
.infobox .plate { height: 210px; margin: 0.6rem; }
.infobox .ib-cap { text-align: center; font-style: italic; color: var(--ink2); font-size: 0.92em; padding: 0 0.6rem 0.4rem; }
.infobox table { font-size: 0.95em; }
.infobox th { font-family: var(--pixel); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); width: 42%; vertical-align: top; padding-top: 0.5rem; }
.infobox td { vertical-align: top; }
.infobox tbody tr:nth-child(even) td { background: transparent; }
.infobox tr:last-child th, .infobox tr:last-child td { border-bottom: 0; }
.infobox .ib-sec { font-family: var(--pixel); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; background: #12062a; color: var(--magenta); padding: 0.25rem; }

/* ------------------------------------------------------------ the bestiary */
.beasts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.beast { display: flex; flex-direction: column; color: var(--ink); background: #05050b; border: 2px solid #22184a; border-radius: 0; padding: 6px; transition: transform 0.12s, border-color 0.12s; }
.beast:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--cyan); box-shadow: 0 0 12px rgba(0, 240, 255, 0.35); color: var(--ink); }
.beast .plate { height: 116px; border-width: 1px; }
.beast .nm { font-family: var(--pixel); font-size: 0.7rem; line-height: 1.35; margin: 0.5rem 0.1rem 0.2rem; letter-spacing: 0.01em; color: #fff; }
.beast.named .nm { color: var(--orange); }
.beast .mt { display: flex; justify-content: space-between; gap: 0.3rem; align-items: center; font-size: 0.8rem; color: var(--muted); margin: auto 0.1rem 0; }
.beast .mt span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.beast.named { border-color: #5a2a08; }
.beast.named:hover { border-color: var(--orange); box-shadow: 0 0 12px rgba(255, 139, 31, 0.4); }
.beast.named .plate { border-color: #6a3008; }
.group-h { font-family: var(--pixel); color: var(--cyan); font-size: 0.85rem; letter-spacing: 0.06em; margin: 1.8rem 0 0.7rem; display: flex; align-items: center; gap: 0.8rem; }
.group-h::after { content: ""; flex: 1; height: 2px; background: var(--violet); }

/* people and callings */
.callings { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.calling { display: grid; grid-template-columns: 96px 1fr; gap: 0.85rem; background: #05050b; border: 2px solid #22184a; border-radius: 0; padding: 0.7rem; color: var(--ink); }
.calling:hover { text-decoration: none; color: var(--ink); border-color: var(--magenta); box-shadow: 0 0 12px rgba(255, 47, 214, 0.35); }
.calling .plate { height: 124px; }
.calling h3 { margin: 0.1rem 0 0.3rem; font-size: 0.9rem; }
.calling .sub { font-size: 0.92em; color: var(--ink2); line-height: 1.45; }
.calling .role { font-family: var(--pixel); font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); }
.gallery { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0 1rem; }
.gallery .plate { width: 84px; height: 108px; }
.gallery figure { margin: 0; text-align: center; font-size: 0.74em; color: var(--ink2); }
.statbars { display: grid; grid-template-columns: 3.2em 1fr 2.4em; gap: 0.25rem 0.6rem; align-items: center; font-size: 0.9em; max-width: 420px; }
.statbars .k { font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); }
.statbars .bar { height: 9px; background: #0a0a14; border: 1px solid var(--line2); border-radius: 0; position: relative; }
.statbars .bar b { position: absolute; inset: 0 auto 0 0; background: var(--magenta); }
.statbars .bar b.hi { background: var(--green); }
.statbars .bar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink2); opacity: 0.5; }
.statbars .n { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ the home page */
.cover { text-align: center; padding: 1rem 0 0.4rem; }
.cover .over { font-family: var(--pixel); letter-spacing: 0.3em; font-size: 0.72rem; text-transform: uppercase; color: var(--cyan); }
.cover h1 { font-family: var(--pixel); font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.2em 0 0.15em; color: var(--magenta); text-shadow: 3px 3px 0 #3a0060; }
.cover .under { color: var(--ink2); font-size: 1.06rem; }
.parade { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 1.3rem auto 0.4rem; height: 110px; padding: 0 1rem; overflow: hidden;
  background: radial-gradient(ellipse at 50% 100%, rgba(122, 0, 255, 0.28), transparent 70%); border-bottom: 2px solid var(--violet); }
.parade img { image-rendering: pixelated; }
.chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.2rem 2.4rem; margin: 1.5rem 0; }
.chapter { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; align-content: start; padding: 0.6rem 0.3rem; border-bottom: 1px dashed #2f2060; color: var(--ink); }
.chapter:hover { text-decoration: none; color: var(--ink); background: #07071a; }
.chapter:hover .ct { color: var(--gold); }
.chapter .cn { font-family: var(--pixel); color: var(--magenta); font-size: 0.85rem; }
.chapter .ct { font-family: var(--pixel); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--cyan); }
.chapter .cd { grid-column: 2; color: var(--ink2); font-size: 0.93em; margin-top: 0.15rem; }
.featured { display: grid; grid-template-columns: 160px 1fr; gap: 1.2rem; align-items: center; }
.featured .plate { height: 170px; }
@media (max-width: 640px) { .featured { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ prose chapters */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 2.4rem; }
@media (max-width: 1100px) { .article { grid-template-columns: 1fr; } .toc { display: none; } }
.toc { position: sticky; top: 90px; align-self: start; font-size: 0.93em; }
.toc .toc-h { font-family: var(--pixel); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--magenta); margin-bottom: 0.4rem; }
.toc a { display: block; padding: 0.2rem 0 0.2rem 0.7rem; color: var(--ink2); border-left: 2px solid var(--line2); }
.toc a.on { color: var(--cyan); border-left-color: var(--cyan); }
.toc a:hover { text-decoration: none; color: var(--gold); }
.prose { max-width: 72ch; }
.prose table { margin: 0.6rem 0 1rem; }
.prose h2 { scroll-margin-top: 90px; }
.prose h3 { margin-top: 1.4em; }
.prose li { margin: 0.3em 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li::marker { color: var(--magenta); }
.formula { font-family: var(--mono); font-size: 0.85em; background: #05050b; border: 1px solid var(--line2); border-radius: 0; padding: 0.4rem 0.8rem; display: inline-block; color: var(--green); }
kbd { font-family: var(--pixel); font-size: 0.62em; display: inline-block; min-width: 1.9em; text-align: center; padding: 0.2em 0.45em; margin: 0 0.1em; color: var(--cyan); background: #000; border: 2px solid var(--cyan); border-bottom-width: 3px; border-radius: 0; vertical-align: 0.15em; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; align-items: start; margin: 0.6rem 0 1rem; }
.keys dt { white-space: nowrap; }
.keys dd { margin: 0; }
.figure { float: right; margin: 0.2rem 0 0.8rem 1.4rem; width: 150px; text-align: center; font-size: 0.8em; font-style: italic; color: var(--ink2); }
.figure .plate { height: 150px; margin-bottom: 0.3rem; }
@media (max-width: 640px) { .figure { float: none; margin: 0.6rem auto; } }
.pull { font-size: 1.12em; color: var(--ink2); border-left: 3px solid var(--magenta); padding: 0.2rem 0 0.2rem 1rem; margin: 1.2rem 0; }
.scroll-quote { font-style: italic; text-align: center; color: var(--ink2); margin: 1.2rem auto; max-width: 52ch; }
.scroll-quote cite { display: block; font-style: normal; font-family: var(--pixel); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--magenta); margin-top: 0.3rem; }
.art-wanted { border: 1px dashed var(--line2); background: repeating-linear-gradient(-45deg, rgba(122, 0, 255, 0.08) 0 10px, transparent 10px 20px); color: var(--muted); font-style: italic; display: grid; place-items: center; text-align: center; padding: 1rem; font-size: 0.9em; }

/* ------------------------------------------------------------ the zone sketch map */
.wmap { position: relative; overflow: auto; border: 2px solid var(--violet); border-radius: 0; padding: 16px; background: #000; }
.wmap svg { display: block; margin: 0 auto; }
.wmap .cell { fill: #05050b; stroke: var(--ink2); stroke-width: 1; cursor: pointer; }
.wmap .cell.city { fill: #001a20; stroke: var(--cyan); stroke-width: 1.6; }
.wmap .cell.under { fill: #1d0d00; stroke: var(--orange); stroke-dasharray: 3 2; }
.wmap .cell.wild { fill: #061a03; stroke: var(--green); }
.wmap .cell.plane { fill: #1d0219; stroke: var(--mag); }
.wmap g:hover .cell { stroke: var(--gold); stroke-width: 2.4; }
.wmap text { fill: var(--ink); font-family: var(--pixel); pointer-events: none; }
.wmap .lv { fill: var(--ink2); font-family: var(--serif); font-size: 11px; }
.wmap .ico { font-size: 12px; font-family: var(--serif); }
.wmap .link { stroke: var(--ink2); stroke-width: 1.3; opacity: 0.55; stroke-dasharray: 4 3; }
.maplegend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.9em; color: var(--ink2); margin: 0.6rem 0; }
.maplegend span::before { content: ""; display: inline-block; width: 0.9em; height: 0.7em; margin-right: 0.35em; vertical-align: 0; border: 1.5px solid; }
.maplegend .city::before { border-color: var(--cyan); background: #001a20; }
.maplegend .wild::before { border-color: var(--green); background: #061a03; }
.maplegend .under::before { border-color: var(--orange); border-style: dashed; background: #1d0d00; }
.maplegend .plane::before { border-color: var(--mag); background: #1d0219; }

.zmap-wrap { border: 2px solid var(--cyan); box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--violet); border-radius: 0; background: #000; overflow: auto; max-height: 78vh; max-width: 100%; width: fit-content; position: relative; }
.zmap-wrap canvas { display: block; image-rendering: pixelated; }
.zmap-tools { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; margin: 0.6rem 0; font-size: 0.88em; }
.zmap-tools label { display: inline-flex; align-items: center; gap: 0.3em; color: var(--ink2); cursor: pointer; }
.zmap-tools button { background: #000; color: var(--ink); border: 2px solid var(--line2); border-radius: 0; padding: 0.1rem 0.6rem; font: inherit; cursor: pointer; }
.zmap-tools button:hover { border-color: var(--gold); color: var(--gold); }
.key { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 0; vertical-align: -0.05em; margin-right: 0.25em; border: 1px solid rgba(255, 255, 255, 0.3); }
.tip {
  position: fixed; z-index: 40; pointer-events: none;
  background: #000; border: 2px solid var(--cyan); border-radius: 0; color: var(--ink);
  padding: 0.4rem 0.6rem; font: 14px/1.45 var(--serif); max-width: 290px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.8);
}
.tip b { color: var(--gold); }
.legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.85em; color: var(--ink2); margin-top: 0.5rem; }
.camps-list td:first-child { white-space: nowrap; }
.camps-list tr.hl td { background: rgba(255, 230, 0, 0.12); }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); padding: 0.8rem 0.6rem 1.4rem; }
  .menu { display: inline-block; }
  .side { position: fixed; top: 56px; left: 0; bottom: 0; width: 260px; max-height: none; z-index: 25; background: #000; border-right: 2px solid var(--cyan); padding: 1rem; transform: translateX(-105%); transition: transform 0.2s; box-shadow: 8px 0 24px rgba(0, 0, 0, 0.8); }
  .side.open { transform: none; }
  main { padding: 1.5rem 1rem 2.2rem; }
  .brand-cx { display: none; }
  .brand-fq { font-size: 1rem; }
  .top { gap: 0.6rem; padding: 0.5rem 0.8rem; }
  .search { flex: 1 1 auto; min-width: 0; }
  .keys { grid-template-columns: 1fr; }
  .keys dd { margin-bottom: 0.4rem; }
  h1 { font-size: 1.5rem; }
  body { font-size: 16px; }
}

/* ------------------------------------------------------------ painted plates (assets/codex, codex/plates.json) */
.banner { margin: 0.4rem 0 1.4rem; width: 100%; overflow: hidden; border: 2px solid var(--cyan); border-radius: 0; position: relative;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--magenta); }
.banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--scan); }
.banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .banner { margin: 1.4rem auto 0; }
.cover .parade { margin-top: 0.8rem; }
.pmap { position: relative; margin: 1rem 0 0.4rem; border: 2px solid var(--cyan); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--violet); }
.pmap img { display: block; width: 100%; height: auto; }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  padding: 0.14rem 0.45rem; background: rgba(0, 0, 0, 0.88); border: 1px solid var(--green); border-radius: 0; color: #fff;
  white-space: nowrap; transition: transform 0.12s, background 0.12s; }
.pin b { font-family: var(--pixel); font-weight: 400; font-size: clamp(0.45rem, 0.85vw, 0.66rem); letter-spacing: 0.02em; }
.pin i { font-style: normal; font-family: var(--pixel); font-size: clamp(0.4rem, 0.75vw, 0.58rem); color: var(--green); }
.pin.city { border-color: var(--cyan); color: var(--cyan); }
.pin.city i { color: var(--cyan); }
.pin:hover { transform: translate(-50%, -50%) scale(1.08); text-decoration: none; background: #000; color: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 230, 0, 0.5); z-index: 2; }
@media (max-width: 640px) { .pin i { display: none; } .pin { padding: 0 0.25rem; } }
.zlore { margin: 0.4rem 0 1.2rem; }
.zlore p { font-size: 1.04em; }

/* the World Map and the Builder, first in the sidebar */
.side a.bigmap { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.8rem; padding: 0.65rem 0.75rem; border: 2px solid var(--cyan); border-radius: 0;
  background: #000; color: var(--cyan); }
.side a.bigmap + a.bigmap { border-color: var(--magenta); color: var(--magenta); margin-bottom: 1.1rem; }
.side a.bigmap b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 0.78rem; letter-spacing: 0.02em; }
.side a.bigmap small { display: block; color: var(--ink2); font-size: 0.78rem; }
.side a.bigmap:hover, .side a.bigmap.on { background: #0b1220; color: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 230, 0, 0.35); }
.open-map { display: block; margin: 1.4rem 0 0.4rem; padding: 1rem 1.2rem; background: #000; border: 2px solid var(--cyan); box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--violet); border-radius: 0; color: var(--cyan); }
.open-map b { display: block; font-family: var(--pixel); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.open-map span { color: var(--ink2); }
.open-map:hover { text-decoration: none; color: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 230, 0, 0.4); }

/* the Development page (pages.dev): rows by state, and the filter chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { padding: 2px 10px; border: 1px solid var(--line2); border-radius: 0; text-decoration: none; font-size: 0.9em; }
.chips .chip.on { background: var(--accent); color: #000; border-color: transparent; }
table.dev tr.dev-live td { background: rgba(57, 255, 20, 0.08); }
table.dev tr.dev-repo td { background: rgba(255, 230, 0, 0.08); }
table.dev th a { color: inherit; text-decoration: none; white-space: nowrap; }