/* ============================================================
     NEON GRID — 2000s-era MUD homepage
     dense, text-first, table-led, with a quiet cyberpunk skin
     ============================================================ */

  :root {
    --bg:        #050608;
    --bg-1:      #0a0c10;
    --bg-2:      #0e1116;
    --panel:     #0c0e13;
    --ink:       #c7c9cf;
    --ink-bright:#e7e9ee;
    --ink-soft:  #7a7e88;
    --ink-dim:   #43474f;
    --ink-faint: #22252d;
    --pink:      #ff2d78;
    --pink-dim:  #5a1232;
    --cyan:      #00f5ff;
    --cyan-soft: #56b8c0;
    --cyan-dim:  #0f5a62;
    --amber:     #d9a548;
    --rule:      #1a1d24;
    --rule-2:    #262932;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
  body {
    font-family: "Share Tech Mono", "Courier New", ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  ::selection { background: var(--pink); color: #000; }

  /* old-school links */
  a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
  a:hover { color: var(--pink); }
  a:visited { color: var(--cyan-soft); }

  h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }

  /* ============ atmosphere — DIALED WAY DOWN ============ */
  #rain {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0.10;
  }

  /* ============ AMBIENT AI / BINARY LAYER ============ */
  /* faint full-page binary mat, tiled SVG */
  .bin-mat {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.05;
    background-repeat: repeat;
    background-size: 520px 320px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='320' font-family='monospace' font-size='11'><text x='8' y='14' fill='%2300f5ff'>01001110 01000111 :: 0xA9 :: subroutine void 01 :: protocol/22 :: entity_07</text><text x='8' y='44' fill='%23ff2d78'>// the grid remembers what you do, not what you meant</text><text x='8' y='74' fill='%2300f5ff'>01101000 01100101 01101100 01101100 01101111 ;; cmd::look ;; status:awake ;; sig:unstable</text><text x='8' y='104' fill='%2300f5ff'>doctrine.bind() // halverson_co // central_stack // wild_process // hushline</text><text x='8' y='134' fill='%23ff2d78'>0x14B ::REDACTED:: shadow.hybrid.bleed = TRUE ;; reclassify_on_sight</text><text x='8' y='164' fill='%2300f5ff'>01000010 01101100 01100001 01100011 01101011 :: choir :: 19m silence :: trace lost</text><text x='8' y='194' fill='%2300f5ff'>memory.persist = TRUE ;; reputation = clamp(-1000, +1000) ;; news.flag(WANTED)</text><text x='8' y='224' fill='%23ff2d78'>// pick a body. choose a doctrine. leave evidence.</text><text x='8' y='254' fill='%2300f5ff'>01010011 01000101 01000011 01010100 01001111 01010010 00100000 00110000</text><text x='8' y='284' fill='%2300f5ff'>compile.daemon(0x07) // patch.v0.7.3-r 'spitfire' // wipe_when_warm</text></svg>");
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%);
  }

  /* AI ghost watermarks behind each section */
  .sec { position: relative; overflow: visible; }
  .sec > * { position: relative; z-index: 1; }
  .sec-ghost {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    font-family: "Audiowide", monospace;
    font-size: clamp(72px, 11vw, 168px);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cyan);
    opacity: 0.04;
    white-space: nowrap;
    text-shadow: 0 0 24px rgba(0,245,255,0.15);
  }
  .sec-ghost.pk { color: var(--pink); text-shadow: 0 0 24px rgba(255,45,120,0.15); }
  .sec-ghost.tr { right: -40px; top: 40px; }
  .sec-ghost.tl { left: -60px; top: 60px; }
  .sec-ghost.br { right: -40px; bottom: 20px; }
  .sec-ghost.bl { left: -50px; bottom: 30px; }
  .sec-ghost.rot-r { transform: rotate(-4deg); }
  .sec-ghost.rot-l { transform: rotate(4deg); }
  .sec-ghost.tiny {
    font-size: clamp(16px, 1.6vw, 22px);
    opacity: 0.18;
    color: var(--ink-faint);
    font-family: "Share Tech Mono", monospace;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-shadow: none;
  }
  .sec-ghost.tiny.col {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: pre-wrap;
  }
  .scanlines {
    position: fixed; inset: 0; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px,
      transparent 1px, transparent 3px
    );
    mix-blend-mode: multiply;
  }
  .vignette {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  }

  /* ============ TOP BAR (kept) ============ */
  .topbar {
    position: sticky; top: 0; z-index: 90;
    background: rgba(5,6,8,0.96);
    border-bottom: 1px solid var(--rule-2);
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .topbar-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center;
    padding: 6px 20px;
    gap: 18px;
  }
  .brandmark {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
  }
  .brandmark img {
    height: 60px; width: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0 0 8px rgba(255,45,120,0.18));
  }
  .brandmark .build {
    color: var(--ink-dim);
    font-size: 10px;
    letter-spacing: 0.2em;
    padding-left: 12px;
    border-left: 1px solid var(--rule-2);
    margin-left: 4px;
  }
  .nav { display: flex; gap: 16px; flex-shrink: 0; }
  .nav a {
    color: var(--ink-soft);
    text-decoration: none;
  }
  .nav a:hover { color: var(--ink-bright); }
  .status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: var(--ink-soft); }
  .dot {
    width: 6px; height: 6px; background: var(--cyan);
    box-shadow: 0 0 6px var(--cyan);
    animation: blink 3s infinite steps(1);
  }
  @keyframes blink { 0%, 88%, 100% { opacity: 1; } 92%, 96% { opacity: 0.2; } }

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

    #rain,
    .scanlines,
    .vignette {
      display: none !important;
    }
  }

  /* ============ HELP SEARCH ============ */
  #help-search-slot { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
  .hs {
    position: relative;
    width: 100%; max-width: 300px;
    display: flex; align-items: center;
    border: 1px solid var(--rule-2);
    background: var(--bg-1);
    transition: border-color .15s ease;
  }
  .hs:focus-within { border-color: var(--cyan-dim); }
  .hs-prefix {
    font-family: "Share Tech Mono", monospace;
    font-size: 11px; letter-spacing: 0.14em;
    color: var(--cyan); padding: 0 9px 0 11px;
    border-right: 1px solid var(--rule-2);
    align-self: stretch; display: flex; align-items: center;
    text-transform: uppercase; user-select: none;
  }
  .hs-input {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--ink-bright);
    font-family: "Share Tech Mono", monospace;
    font-size: 12px; letter-spacing: 0.04em;
    padding: 7px 10px;
  }
  .hs-input::placeholder { color: var(--ink-dim); }
  .hs-input.hs-loading::placeholder { color: var(--cyan-soft); }
  .hs-hint {
    color: var(--ink-dim); font-size: 10px;
    letter-spacing: 0.14em; padding: 0 10px;
    border-left: 1px solid var(--rule-2);
    align-self: stretch; display: flex; align-items: center;
    text-transform: uppercase;
  }
  .hs-results {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--bg-1);
    border: 1px solid var(--cyan-dim);
    box-shadow: 0 12px 30px rgba(0,0,0,0.9);
    max-height: 70vh; overflow-y: auto;
    display: none; z-index: 95;
  }
  .hs-results.open { display: block; }
  .hs-item {
    display: grid; grid-template-columns: 1fr; gap: 4px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--rule);
    cursor: pointer;
    font-family: "Share Tech Mono", monospace;
  }
  .hs-item:last-child { border-bottom: none; }
  .hs-item:hover, .hs-item.active { background: rgba(0,245,255,0.04); }
  .hs-item.active { box-shadow: inset 2px 0 0 var(--pink); }
  .hs-item-kw { color: var(--ink-bright); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; }
  .hs-item-alt { color: var(--ink-dim); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
  .hs-item-snip {
    color: var(--ink); font-size: 11px;
    line-height: 1.45; margin-top: 3px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .hs-item mark { background: var(--pink); color: #000; padding: 0 2px; }
  .hs-empty { padding: 16px 12px; color: var(--ink-dim); font-size: 11px; letter-spacing: 0.1em; }

  /* ============ HELP MODAL ============ */
  html.hm-locked, html.hm-locked body { overflow: hidden; }
  .hm { position: fixed; inset: 0; z-index: 200; display: none; }
  .hm.open { display: block; }
  .hm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.88); }
  .hm-panel {
    position: relative;
    max-width: 860px; width: calc(100% - 40px);
    max-height: calc(100vh - 80px);
    margin: 40px auto;
    background: var(--bg-1);
    border: 1px solid var(--cyan-dim);
    box-shadow: 0 20px 50px rgba(0,0,0,0.9);
    display: flex; flex-direction: column;
  }
  .hm-head {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule-2);
    font-family: "Share Tech Mono", monospace;
    font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0.12em;
  }
  .hm-dots { display: flex; gap: 5px; }
  .hm-dots span { width: 7px; height: 7px; background: var(--ink-faint); }
  .hm-dots span:nth-child(1) { background: var(--pink-dim); }
  .hm-dots span:nth-child(2) { background: var(--cyan-dim); }
  .hm-path { flex: 1; color: var(--ink-bright); }
  .hm-prompt { color: var(--cyan); margin-right: 6px; }
  .hm-topic { color: var(--pink); text-transform: lowercase; }
  .hm-close {
    background: transparent; border: 1px solid var(--rule-2);
    color: var(--ink-dim);
    font-family: "Share Tech Mono", monospace;
    font-size: 11px; letter-spacing: 0.14em;
    padding: 5px 9px; cursor: pointer;
  }
  .hm-close:hover { border-color: var(--pink); color: var(--pink); }
  .hm-meta {
    display: flex; gap: 16px; justify-content: space-between;
    padding: 7px 14px;
    font-family: "Share Tech Mono", monospace;
    font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
    border-bottom: 1px solid var(--rule);
  }
  .hm-kws { text-align: right; }
  .hm-body {
    margin: 0; padding: 18px 22px 24px;
    overflow-y: auto; flex: 1;
    font-family: "Share Tech Mono", monospace;
    font-size: 13px; line-height: 1.65;
    color: var(--ink);
    white-space: pre-wrap; word-break: break-word;
    background: var(--bg-1);
  }
  .hm-foot {
    display: flex; justify-content: space-between;
    padding: 9px 14px;
    border-top: 1px solid var(--rule-2);
    font-family: "Share Tech Mono", monospace;
    font-size: 10.5px; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .hm-link { color: var(--cyan); cursor: pointer; border-bottom: 1px dotted var(--cyan-dim); }
  .hm-link:hover { color: var(--pink); border-bottom-color: var(--pink); }
  .c-pink { color: var(--pink); }
  .c-cyan { color: var(--cyan); }
  .c-ink { color: var(--ink-bright); }
  .c-dim { color: var(--ink-soft); }
  .c-faint { color: var(--ink-dim); }
  .c-b { font-weight: 700; }

  /* ============ LAYOUT — narrow, dense, sidebar ============ */
  .wrap {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
  }

  /* ============ MAIN LAYOUT — 2-column with sidebar ============ */
  .columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 28px;
    padding: 24px 0 40px;
    align-items: start;
  }
  .main-col { min-width: 0; }
  .side-col {
    position: sticky; top: 88px;
    display: flex; flex-direction: column; gap: 16px;
  }

  /* ============ SECTION HEADER — old MUD-site h2 ============ */
  .sec {
    padding: 22px 0 18px;
    border-bottom: 1px dotted var(--rule-2);
  }
  .sec:first-child { padding-top: 6px; }
  .sec:last-child { border-bottom: none; }
  .sec > h2 {
    font-family: "Audiowide", "Share Tech Mono", monospace;
    font-size: 22px;
    color: var(--ink-bright);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
    padding-bottom: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cyan-dim);
    display: flex; align-items: baseline; gap: 12px;
    position: relative;
    text-shadow:
      0 0 1px rgba(0,245,255,0.4),
      0 0 14px rgba(0,245,255,0.10);
  }
  .sec > h2::before {
    content: "";
    width: 14px; height: 14px;
    border-left: 2px solid var(--pink);
    border-top: 2px solid var(--pink);
    align-self: center;
    margin-right: 2px;
    flex-shrink: 0;
  }
  .sec > h2 .name { color: var(--cyan); }
  .sec > h2 .idx {
    margin-left: auto;
    color: var(--ink-dim);
    font-size: 10.5px;
    letter-spacing: 0.22em;
    font-family: "Share Tech Mono", monospace;
  }
  .sec > h2 .file {
    color: var(--ink-faint);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    font-family: "Share Tech Mono", monospace;
    text-transform: lowercase;
  }

  /* prose */
  .prose p {
    margin: 0 0 12px;
    color: var(--ink);
    max-width: 70ch;
  }
  .prose p.lede { color: var(--ink-bright); font-size: 14px; }
  .prose p em { font-style: normal; color: var(--ink-bright); }
  .prose p .pk { color: var(--pink); }
  .prose p .cy { color: var(--cyan); }
  .prose p strong { color: var(--ink-bright); font-weight: 400; }
  .prose .pull {
    margin: 10px 0 14px;
    padding-left: 12px;
    border-left: 2px solid var(--pink-dim);
    color: var(--pink);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ============ SIDEBAR PANELS ============ */
  .panel {
    border: 1px solid var(--rule-2);
    background: var(--panel);
    padding: 10px 12px 12px;
    font-size: 11.5px;
  }
  .panel h3 {
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    border-bottom: 1px solid var(--cyan-dim);
    padding-bottom: 6px;
    margin-bottom: 8px;
    display: flex; justify-content: space-between;
  }
  .panel h3 .live {
    color: var(--pink);
    animation: blink 3s infinite steps(1);
    font-size: 9.5px;
    letter-spacing: 0.2em;
  }
  .panel.pink h3 { color: var(--pink); border-bottom-color: var(--pink-dim); }

  .panel dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    font-family: "Share Tech Mono", monospace;
  }
  .panel dt {
    color: var(--ink-dim);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .panel dd {
    margin: 0;
    color: var(--ink-bright);
    font-size: 12px;
    text-align: right;
    letter-spacing: 0.02em;
  }
  .panel dd.pk { color: var(--pink); }
  .panel dd.cy { color: var(--cyan); }

  /* sidebar connect */
  .connect-box .host {
    color: var(--pink);
    font-size: 13px;
    word-break: break-all;
    letter-spacing: 0.02em;
  }
  .connect-box .port {
    color: var(--cyan);
    font-size: 16px;
    letter-spacing: 0.04em;
    margin-top: 2px;
  }
  .connect-box .port small {
    color: var(--ink-dim);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    margin-left: 6px;
  }
  .connect-box .play-btn {
    display: block;
    margin-top: 10px;
    padding: 9px 10px;
    background: rgba(255,45,120,0.08);
    border: 1px solid var(--pink-dim);
    color: var(--ink-bright);
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
  }
  .connect-box .play-btn:hover { background: rgba(255,45,120,0.16); border-color: var(--pink); color: var(--ink-bright); }
  .connect-box .play-btn .caret {
    display: inline-block;
    width: 6px; height: 11px;
    background: var(--pink);
    margin-left: 4px;
    vertical-align: middle;
    animation: caret 1.1s infinite steps(1);
  }
  @keyframes caret { 50% { opacity: 0; } }
  .connect-box .discord-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border: 1px solid #4752c4;
    background: linear-gradient(180deg, rgba(88,101,242,0.18), rgba(88,101,242,0.08));
    color: #e7e9ee;
    text-align: center;
    font-size: 11.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
  }
  .connect-box .discord-btn:hover { background: linear-gradient(180deg, rgba(88,101,242,0.32), rgba(88,101,242,0.18)); border-color: #5865f2; }
  .connect-box .discord-btn .d-logo {
    width: 16px; height: 16px;
    color: #5865f2;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(88,101,242,0.55));
  }
  .connect-box .discord-btn:hover .d-logo { color: #c6cbff; }

  /* news panel */
  .news-list { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
  .news-list li { padding: 6px 0; border-bottom: 1px dotted var(--rule-2); }
  .news-list li:last-child { border-bottom: none; }
  .news-list .date {
    color: var(--ink-dim);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-right: 6px;
  }
  .news-list .tag {
    display: inline-block;
    color: var(--cyan); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; margin-right: 6px;
  }
  .news-list .tag.pk { color: var(--pink); }
  .news-list .tag.am { color: var(--amber); }
  .news-list b { color: var(--ink-bright); font-weight: 400; }
  .news-list small { color: var(--ink-soft); display: block; font-size: 10.5px; margin-top: 2px; }

  /* quick links */
  .qlinks { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
  .qlinks li { padding: 3px 0; }
  .qlinks li::before { content: "› "; color: var(--ink-dim); }
  .qlinks a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
  .qlinks a:hover { color: var(--pink); }
  .qlinks .note { color: var(--ink-dim); font-size: 10.5px; }

  /* ============ TABLES (factions, classes, areas) ============ */
  .tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: "Share Tech Mono", monospace;
    font-size: 12.5px;
    margin: 4px 0 8px;
  }
  .tbl th, .tbl td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
  }
  .tbl thead th {
    color: var(--ink-dim);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cyan-dim);
    background: var(--bg-1);
    font-weight: 400;
  }
  .tbl tbody tr:hover { background: rgba(0,245,255,0.02); }
  .tbl .name {
    color: var(--ink-bright);
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
  .tbl .name.pk { color: var(--pink); }
  .tbl .sub {
    display: block;
    color: var(--ink-dim);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 2px;
  }
  .tbl .badge {
    display: inline-block;
    border: 1px solid var(--rule-2);
    color: var(--ink-soft);
    font-size: 9.5px;
    letter-spacing: 0.2em;
    padding: 2px 6px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .tbl .badge.cy { color: var(--cyan); border-color: var(--cyan-dim); }
  .tbl .badge.pk { color: var(--pink); border-color: var(--pink-dim); }
  .tbl .badge.am { color: var(--amber); border-color: #5a3f10; }
  .tbl .desc { color: var(--ink); line-height: 1.55; max-width: 60ch; }
  .tbl .desc em { font-style: normal; color: var(--ink-bright); }
  .tbl .desc .pk { color: var(--pink); }
  .tbl .desc .cy { color: var(--cyan); }
  .tbl tfoot td {
    color: var(--ink-dim);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-top: 1px solid var(--cyan-dim);
    border-bottom: none;
    padding-top: 8px;
  }

  /* class table is denser */
  .cls-tbl td { padding: 6px 10px; }

  /* connect terminal block */
  .term {
    border: 1px solid var(--rule-2);
    background: var(--bg-1);
    font-family: "Share Tech Mono", monospace;
    font-size: 12.5px;
    margin: 10px 0 14px;
  }
  .term-head {
    display: flex; align-items: center; gap: 10px;
    border-bottom: 1px solid var(--rule-2);
    padding: 8px 12px;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
    text-transform: uppercase;
  }
  .term-head .dots { display: flex; gap: 4px; }
  .term-head .dots span { width: 7px; height: 7px; background: var(--ink-faint); }
  .term-head .dots span:nth-child(1) { background: var(--pink-dim); }
  .term-head .dots span:nth-child(2) { background: var(--cyan-dim); }
  .term-head .grow { flex: 1; }
  .term-body { padding: 14px 16px; }
  .term-line {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 3px 0;
    color: var(--ink);
  }
  .term-line .k { color: var(--ink-dim); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
  .term-line .v { color: var(--ink-bright); }
  .term-line .v.pk { color: var(--pink); }
  .term-line .v.cy { color: var(--cyan); }
  .term-line .v small { color: var(--ink-dim); letter-spacing: 0.12em; font-size: 11px; margin-left: 6px; }

  /* ============ FOOTER ============ */
  footer {
    border-top: 1px solid var(--rule-2);
    background: var(--bg-1);
    padding: 22px 0 40px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--ink-soft);
  }
  .foot-inner { max-width: 1024px; margin: 0 auto; padding: 0 20px; }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 24px;
  }
  .foot-grid h6 {
    color: var(--cyan); font-size: 10.5px; letter-spacing: 0.2em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cyan-dim);
    padding-bottom: 4px;
    margin: 0 0 8px;
  }
  .foot-grid ul { list-style: none; margin: 0; padding: 0; }
  .foot-grid li { padding: 2px 0; }
  .foot-grid li::before { content: "› "; color: var(--ink-dim); }
  .foot-grid a { color: var(--cyan); }
  .foot-grid a:hover { color: var(--pink); }
  .foot-tag p {
    margin: 0 0 6px;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.6;
  }
  .foot-tag p.head {
    color: var(--ink-bright);
    font-family: "Audiowide", "Share Tech Mono", monospace;
    font-size: 18px;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(0,245,255,0.15);
  }
  .foot-tag p.head .pk { color: var(--pink); }

  .foot-bin {
    margin-top: 22px;
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.5;
    user-select: none;
    word-break: break-all;
    max-width: 92%;
  }
  .foot-bottom {
    margin-top: 22px;
    display: flex; justify-content: space-between; align-items: end; gap: 18px;
    border-top: 1px solid var(--rule-2);
    padding-top: 12px;
    color: var(--ink-dim);
    font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  }
  .foot-bottom .best {
    color: var(--ink-dim);
    font-size: 9.5px;
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 880px) {
    .columns { grid-template-columns: 1fr; }
    .side-col { position: static; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 620px) {
    .topbar-inner { flex-wrap: wrap; gap: 10px; }
    .nav { order: 2; }
    .status { order: 3; margin-left: auto; }
    #help-search-slot { order: 4; width: 100%; flex-basis: 100%; justify-content: stretch; }
    .hs { max-width: none; }
    .foot-grid { grid-template-columns: 1fr; }
    .brandmark .build { display: none; }
    .tbl { font-size: 11.5px; }
    .tbl th, .tbl td { padding: 6px 7px; }
    .tbl .desc { display: none; }
  }

  .nav a.cur { color: var(--cyan); border-bottom: 1px solid var(--cyan-dim); padding-bottom: 1px; }

  /* ============ LANDING TILES ============ */
  .tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 4px;
  }
  .tile {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num head"
      "num desc"
      "num tag";
    gap: 4px 14px;
    align-items: start;
    padding: 14px 16px 14px 14px;
    border: 1px solid var(--rule-2);
    background: var(--panel);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
    position: relative;
    overflow: hidden;
  }
  .tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 14px; height: 14px;
    border-top: 1px solid var(--cyan-dim);
    border-left: 1px solid var(--cyan-dim);
    transition: border-color .15s ease;
  }
  .tile:hover {
    border-color: var(--cyan-dim);
    background: rgba(0,245,255,0.03);
    transform: translate(-1px, -1px);
  }
  .tile:hover::before { border-color: var(--cyan); }
  .tile.alt::before { border-color: var(--pink-dim); }
  .tile.alt:hover { border-color: var(--pink-dim); background: rgba(255,45,120,0.03); }
  .tile.alt:hover::before { border-color: var(--pink); }
  .tile-num {
    grid-area: num;
    font-family: "Audiowide", "Share Tech Mono", monospace;
    font-size: 26px;
    color: var(--pink);
    letter-spacing: 0.04em;
    line-height: 1;
    align-self: center;
    text-shadow: 0 0 8px rgba(255,45,120,0.25);
    min-width: 28px;
    text-align: center;
  }
  .tile.alt .tile-num { color: var(--cyan); text-shadow: 0 0 8px rgba(0,245,255,0.25); }
  .tile-h {
    grid-area: head;
    font-family: "Audiowide", "Share Tech Mono", monospace;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--ink-bright);
    text-transform: uppercase;
    line-height: 1.1;
  }
  .tile-d {
    grid-area: desc;
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.55;
    margin-top: 2px;
  }
  .tile-tag {
    grid-area: tag;
    font-family: "Share Tech Mono", monospace;
    color: var(--cyan-soft);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-top: 4px;
  }
  .tile-tag.pk { color: var(--pink); }
  .tile-tag.cy { color: var(--cyan-soft); }
  @media (max-width: 700px) {
    .tiles { grid-template-columns: 1fr; }
  }


  /* ============ AREA SHOWCASE (world.html featured) ============ */
  .areas-feat {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 4px 0 32px;
  }
  .area-card {
    border: 1px solid var(--rule-2);
    background: var(--panel);
    position: relative;
    overflow: hidden;
  }
  .area-card .hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--rule-2);
    filter: contrast(1.04) saturate(0.95);
    transition: background-image .25s ease;
  }
  .area-card .hero::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, rgba(5,6,8,0.25) 0%, transparent 35%, rgba(5,6,8,0.0) 55%, rgba(5,6,8,0.85) 100%),
      radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
  }
  .area-card .reticle {
    position: absolute;
    top: 10px; right: 10px;
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 3px 7px;
    background: rgba(0,0,0,0.7);
    text-transform: uppercase;
    z-index: 2;
  }
  .area-card .reticle.pk { color: var(--pink); border-color: var(--pink-dim); }
  .area-card .caption {
    position: absolute;
    left: 14px; bottom: 12px;
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink-bright);
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95);
    z-index: 2;
  }
  .area-card .caption b { color: var(--pink); font-weight: 400; }
  .area-card .caption .cy { color: var(--cyan); }
  .area-card .corner {
    position: absolute;
    top: 8px; left: 8px;
    width: 16px; height: 16px;
    border-top: 1px solid var(--cyan);
    border-left: 1px solid var(--cyan);
    z-index: 2;
    opacity: 0.7;
  }
  .area-card .corner.br {
    top: auto; left: auto; bottom: 8px; right: 8px;
    border-top: 0; border-left: 0;
    border-bottom: 1px solid var(--cyan);
    border-right: 1px solid var(--cyan);
  }
  .area-card.pk .corner { border-color: var(--pink); }

  .area-card .thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
    background: var(--bg);
  }
  .area-card .thumbs .t {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    filter: brightness(0.55) saturate(0.85);
    transition: filter .15s ease;
    outline: 1px solid var(--rule-2);
    outline-offset: -1px;
    position: relative;
  }
  .area-card .thumbs .t::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    transition: background .15s ease;
  }
  .area-card .thumbs .t:hover { filter: brightness(0.9); }
  .area-card .thumbs .t.active { filter: brightness(1.0); outline: 1px solid var(--cyan); outline-offset: -1px; }
  .area-card.pk .thumbs .t.active { outline-color: var(--pink); }

  .area-card .body {
    padding: 16px 18px 18px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 22px;
  }
  .area-card h3 {
    font-family: "Audiowide", "Share Tech Mono", monospace;
    font-size: 17px;
    color: var(--ink-bright);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 6px;
    line-height: 1.1;
    text-shadow: 0 0 14px rgba(0,245,255,0.10);
  }
  .area-card .sub {
    font-family: "Share Tech Mono", monospace;
    color: var(--pink);
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    margin: 0 0 14px;
  }
  .area-card.pk h3 { text-shadow: 0 0 14px rgba(255,45,120,0.18); }
  .area-card p {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.65;
  }
  .area-card p em { font-style: normal; color: var(--ink-bright); }
  .area-card p .pk { color: var(--pink); }
  .area-card p .cy { color: var(--cyan); }
  .area-card .specs {
    border-left: 1px dashed var(--rule-2);
    padding-left: 16px;
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    color: var(--ink-dim);
  }
  .area-card .specs dt {
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-dim);
    margin-bottom: 2px;
  }
  .area-card .specs dd {
    margin: 0 0 8px;
    color: var(--ink-bright);
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .area-card .specs dd.pk { color: var(--pink); }
  .area-card .specs dd.cy { color: var(--cyan); }

  @media (max-width: 760px) {
    .area-card .body { grid-template-columns: 1fr; }
    .area-card .specs { border-left: 0; border-top: 1px dashed var(--rule-2); padding-left: 0; padding-top: 14px; }
    .area-card .thumbs { grid-template-columns: repeat(3, 1fr); }
  }

  /* ============ DISTRICT SCHEMATICS ATLAS ============ */
  .atlas {
    margin: 32px 0 28px;
    border: 1px solid var(--rule-2);
    background:
      linear-gradient(180deg, rgba(0,245,255,0.025), transparent 35%),
      var(--panel);
    padding: 18px 18px 20px;
    position: relative;
  }
  .atlas::before, .atlas::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border: 1px solid var(--cyan);
    opacity: 0.6;
  }
  .atlas::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
  .atlas::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
  .atlas-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--rule-2);
    margin-bottom: 12px;
  }
  .atlas-head h3 {
    font-family: "Audiowide", monospace;
    font-size: 14px;
    color: var(--cyan);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
  }
  .atlas-meta {
    display: flex;
    gap: 14px;
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-dim);
  }
  .atlas-meta .cy { color: var(--cyan); }
  .atlas-meta .pk { color: var(--pink); }
  .atlas-lede {
    color: var(--ink-soft);
    font-size: 11.5px;
    margin: 0 0 16px;
    line-height: 1.6;
  }
  .atlas-lede .cy { color: var(--cyan); }
  .atlas-lede .pk { color: var(--pink); }

  .atlas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .map-tile {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--rule-2);
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
  }
  .map-tile:hover {
    border-color: var(--cyan);
    transform: translateY(-1px);
  }
  .map-tile.pk:hover { border-color: var(--pink); }
  .map-tile.am:hover { border-color: var(--amber); }
  .map-tile:focus-visible {
    outline: 1px solid var(--cyan);
    outline-offset: 2px;
  }
  .map-thumb {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-color: #000;
    position: relative;
    filter: brightness(0.92) saturate(1.05);
    transition: filter .2s ease;
  }
  .map-thumb::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.55) 100%),
      repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,245,255,0.025) 2px, rgba(0,245,255,0.025) 3px);
    pointer-events: none;
  }
  .map-tile:hover .map-thumb { filter: brightness(1.05) saturate(1.1); }
  .map-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-top: 1px solid var(--rule-2);
    background: var(--panel);
  }
  .map-name {
    font-family: "Share Tech Mono", monospace;
    font-size: 11.5px;
    color: var(--ink-bright);
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-tile.pk .map-name { color: var(--ink-bright); }
  .map-code {
    font-family: "Share Tech Mono", monospace;
    font-size: 9.5px;
    color: var(--cyan);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid var(--cyan-dim);
    padding: 2px 6px;
    flex-shrink: 0;
  }
  .map-tile.pk .map-code { color: var(--pink); border-color: var(--pink-dim); }
  .map-tile.am .map-code { color: var(--amber); border-color: #5a4520; }
  .map-corner {
    position: absolute;
    top: 4px; left: 4px;
    width: 10px; height: 10px;
    border-top: 1px solid var(--cyan);
    border-left: 1px solid var(--cyan);
    opacity: 0.7;
    pointer-events: none;
  }
  .map-corner.br {
    top: auto; left: auto; bottom: 4px; right: 4px;
    border-top: 0; border-left: 0;
    border-bottom: 1px solid var(--cyan);
    border-right: 1px solid var(--cyan);
  }
  .map-tile.pk .map-corner { border-color: var(--pink); }
  .map-tile.am .map-corner { border-color: var(--amber); }

  .atlas-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--rule-2);
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .atlas-foot .dim { color: var(--ink-dim); }

  @media (max-width: 980px) {
    .atlas-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 700px) {
    .atlas-grid { grid-template-columns: repeat(2, 1fr); }
    .atlas-foot { flex-direction: column; gap: 4px; }
  }

  /* ============ MAP LIGHTBOX ============ */
  .map-lightbox {
    position: fixed; inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .map-lightbox.open { display: flex; }
  .ml-backdrop {
    position: absolute; inset: 0;
    background: rgba(2,3,5,0.86);
    backdrop-filter: blur(2px);
    cursor: pointer;
  }
  .ml-frame {
    position: relative;
    max-width: min(1500px, 96vw);
    max-height: 94vh;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--cyan-dim);
    box-shadow:
      0 0 0 1px rgba(0,245,255,0.08),
      0 30px 80px rgba(0,0,0,0.8),
      0 0 60px rgba(0,245,255,0.08);
    display: flex;
    flex-direction: column;
    animation: ml-pop 0.18s ease-out;
  }
  @keyframes ml-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
  }
  .ml-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule-2);
    background:
      linear-gradient(90deg, rgba(0,245,255,0.05), transparent 60%);
  }
  .ml-title-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
  }
  .ml-reticle {
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 3px 8px;
  }
  .ml-reticle.pk { color: var(--pink); border-color: var(--pink-dim); }
  .ml-reticle.am { color: var(--amber); border-color: #5a4520; }
  .ml-head h4 {
    font-family: "Audiowide", monospace;
    font-size: 15px;
    letter-spacing: 0.1em;
    color: var(--ink-bright);
    margin: 0;
    text-shadow: 0 0 14px rgba(0,245,255,0.18);
  }
  .ml-close {
    background: transparent;
    border: 1px solid var(--rule-2);
    color: var(--ink-soft);
    font: inherit;
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 10px;
    transition: border-color .15s ease, color .15s ease;
  }
  .ml-close:hover { border-color: var(--pink); color: var(--pink); }
  .ml-close .x { font-size: 16px; line-height: 1; }

  .ml-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 12px),
      #02050a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 14px;
  }
  .ml-stage img {
    max-width: 100%;
    max-height: calc(94vh - 130px);
    display: block;
    object-fit: contain;
    box-shadow: 0 0 40px rgba(0,245,255,0.08);
  }
  .ml-corner {
    position: absolute;
    width: 16px; height: 16px;
    border: 1px solid var(--cyan);
    opacity: 0.7;
    pointer-events: none;
  }
  .ml-corner.tl { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
  .ml-corner.tr { top: 6px; right: 6px; border-left: 0; border-bottom: 0; }
  .ml-corner.bl { bottom: 6px; left: 6px; border-right: 0; border-top: 0; }
  .ml-corner.br { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

  .ml-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid var(--rule-2);
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    color: var(--ink-soft);
  }
  .ml-sum {
    color: var(--ink-soft);
    font-size: 11px;
    flex: 1;
    min-width: 0;
  }
  .ml-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .ml-nav button {
    background: transparent;
    border: 1px solid var(--rule-2);
    color: var(--cyan);
    font: inherit;
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 4px 10px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .ml-nav button:hover { border-color: var(--cyan); color: var(--ink-bright); }
  .ml-count {
    color: var(--ink-dim);
    font-size: 10px;
    letter-spacing: 0.18em;
    min-width: 50px;
    text-align: center;
  }

  @media (max-width: 700px) {
    .ml-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ml-foot { flex-direction: column; align-items: flex-start; }
    .map-lightbox { padding: 10px; }
  }

  /* ============ GLITCH ROW (the grid) ============ */
  .glitch-row {
    position: relative;
    background:
      repeating-linear-gradient(0deg,
        rgba(255,45,120,0.04) 0px,
        rgba(255,45,120,0.04) 1px,
        transparent 1px,
        transparent 3px);
  }
  .glitch-row td {
    position: relative;
    color: var(--ink-dim);
  }
  .glitch-row::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent 0, transparent 30%, rgba(0,245,255,0.05) 30.5%, transparent 31%, transparent 70%, rgba(255,45,120,0.06) 70.5%, transparent 71%);
    mix-blend-mode: screen;
    animation: glitch-bands 5.2s steps(1) infinite;
  }
  @keyframes glitch-bands {
    0%, 90%, 100% { transform: translateY(0); opacity: 0.6; }
    91% { transform: translateY(-4px); opacity: 1; }
    92% { transform: translateY(6px); opacity: 1; }
    93% { transform: translateY(-2px); opacity: 0.4; }
    94% { transform: translateY(0); opacity: 0.7; }
  }
  .glitch {
    position: relative;
    display: inline-block;
    color: var(--pink);
    font-family: "Audiowide", "Share Tech Mono", monospace;
    letter-spacing: 0.08em;
    text-shadow:
      1px 0 0 var(--cyan),
     -1px 0 0 var(--pink);
    animation: glitch-shift 4.1s steps(1) infinite;
  }
  .glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
  }
  .glitch::before {
    color: var(--cyan);
    clip-path: inset(0 0 55% 0);
    transform: translateX(-1px);
    opacity: 0.7;
  }
  .glitch::after {
    color: var(--pink);
    clip-path: inset(55% 0 0 0);
    transform: translateX(1px);
    opacity: 0.7;
  }
  @keyframes glitch-shift {
    0%, 88%, 100% { transform: translate(0,0); }
    89%          { transform: translate(-2px, 1px); }
    90%          { transform: translate(2px, -1px); }
    91%          { transform: translate(-1px, 0); }
    92%          { transform: translate(1px, 0); }
    93%          { transform: translate(0, 2px); letter-spacing: 0.14em; }
    94%          { transform: translate(0, -1px); letter-spacing: 0.06em; }
  }
  .redacted {
    background: var(--ink-faint);
    color: var(--ink-faint);
    padding: 0 4px;
    margin: 0 1px;
    letter-spacing: -1px;
    user-select: none;
    border-radius: 1px;
    box-shadow: inset 0 0 0 1px rgba(255,45,120,0.18);
  }
  .glitch-row .badge.pk {
    border-color: var(--pink-dim);
    color: var(--pink);
    font-style: normal;
    letter-spacing: 0.08em;
  }
  .glitch-row .desc {
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.65;
  }
  .glitch-row .err {
    display: inline-block;
    margin-top: 4px;
    color: var(--pink);
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.16em;
    opacity: 0.7;
    animation: err-flicker 2.7s steps(1) infinite;
  }
  @keyframes err-flicker {
    0%, 96%, 100% { opacity: 0.7; }
    97%           { opacity: 0.15; }
    98%           { opacity: 0.9; }
    99%           { opacity: 0.3; }
  }


  /* ============ DOSSIER SELECTOR (world / factions / races / classes) ============ */
  .selector-mode .race-cat-label,
  .selector-mode .sec-label,
  .selector-mode .races-grid,
  .selector-mode .areas-feat,
  .selector-mode .sel-foot { display: none; }
  .selector-mode > .area-card { display: none; }            /* factions: cards are direct children */
  .selector-mode .selector-stage > .area-card { display: block; }

  .selector-bar {
    position: relative;
    margin: 18px 0 14px;
    padding: 14px 14px 12px;
    border: 1px solid var(--rule-2);
    background:
      linear-gradient(180deg, rgba(0,245,255,0.02), rgba(0,0,0,0.45)),
      repeating-linear-gradient(135deg, rgba(0,245,255,0.018) 0 1px, transparent 1px 14px);
    display: flex; flex-wrap: wrap; align-items: stretch;
    gap: 0;
  }
  .selector-bar::before, .selector-bar::after {
    content: ""; position: absolute; width: 12px; height: 12px;
    border-color: var(--cyan-dim); pointer-events: none;
  }
  .selector-bar::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
  .selector-bar::after  { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
  .sel-prefix {
    align-self: center;
    font-family: "Share Tech Mono", monospace;
    font-size: 10.5px; letter-spacing: 0.22em;
    color: var(--cyan); padding: 0 12px 0 4px;
    text-transform: uppercase;
    border-right: 1px dashed var(--rule-2);
    margin-right: 10px;
  }
  .sel-group {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px; padding: 4px 12px 4px 0; margin-right: 10px;
    border-right: 1px dashed var(--rule-2);
  }
  .sel-group:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .sel-label {
    font-family: "Share Tech Mono", monospace;
    font-size: 9.5px; letter-spacing: 0.22em;
    color: var(--ink-soft); margin-right: 4px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .sel-label.cy { color: var(--cyan); }
  .sel-label.pk { color: var(--pink); }
  .sel-label.am { color: var(--amber); }
  .sel-label::before { content: "// "; color: var(--ink-faint); }

  .sel-chip {
    appearance: none;
    border: 1px solid var(--rule-2);
    background: rgba(0,0,0,0.45);
    color: var(--ink-soft);
    font-family: "Share Tech Mono", monospace;
    font-size: 11px; letter-spacing: 0.08em;
    padding: 5px 10px; cursor: pointer;
    text-transform: uppercase;
    transition: border-color .12s, color .12s, background .12s, box-shadow .12s;
    white-space: nowrap;
  }
  .sel-chip:hover {
    border-color: var(--cyan-dim);
    color: var(--cyan);
    background: rgba(0,245,255,0.04);
  }
  .sel-chip.pk:hover {
    border-color: var(--pink-dim);
    color: var(--pink);
    background: rgba(255,45,120,0.05);
  }
  .sel-chip.active {
    border-color: var(--cyan);
    color: #02161a;
    background: var(--cyan);
    box-shadow: 0 0 14px rgba(0,245,255,0.35);
  }
  .sel-chip.pk.active {
    border-color: var(--pink);
    color: #1a040c;
    background: var(--pink);
    box-shadow: 0 0 14px rgba(255,45,120,0.4);
  }

  /* ----- stage ----- */
  .selector-stage { position: relative; margin: 8px 0 26px; min-height: 240px; }
  .selector-empty {
    border: 1px dashed var(--rule-2);
    padding: 70px 24px 78px;
    text-align: center;
    background:
      repeating-linear-gradient(135deg, rgba(0,245,255,0.022) 0 1px, transparent 1px 16px),
      repeating-linear-gradient(45deg,  rgba(255,45,120,0.018) 0 1px, transparent 1px 22px);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
  }
  .selector-stage.loaded .selector-empty { display: none; }
  .selector-empty .empty-mark {
    font-family: "Share Tech Mono", monospace;
    color: var(--cyan-dim); font-size: 12px; letter-spacing: 0.4em;
  }
  .selector-empty .empty-label {
    font-family: "Audiowide", "Share Tech Mono", monospace;
    color: var(--ink); font-size: 15px; letter-spacing: 0.28em;
  }
  .selector-empty .empty-sub {
    font-family: "Share Tech Mono", monospace;
    color: var(--ink-soft); font-size: 10.5px; letter-spacing: 0.24em;
    text-transform: uppercase;
  }

  /* ----- the solo card, lifted out of any 2-up grid context ----- */
  .selector-stage > .area-card.solo-active {
    margin: 0 !important;
    animation: solo-in .18s ease-out;
  }
  .selector-stage > .area-card.solo-active .body {
    grid-template-columns: 2fr 1fr;
    gap: 28px;
    padding: 20px 26px 24px;
  }
  .selector-stage > .area-card.solo-active .specs {
    border-left: 1px dashed var(--rule-2);
    border-top: 0;
    padding-left: 22px; padding-top: 0;
    display: block;
    font-size: 11px;
  }
  .selector-stage > .area-card.solo-active .specs dt { margin: 0 0 2px; font-size: 9.5px; }
  .selector-stage > .area-card.solo-active .specs dd { margin: 0 0 10px; font-size: 11.5px; }
  .selector-stage > .area-card.solo-active h3 { font-size: 22px; }
  .selector-stage > .area-card.solo-active .sub { font-size: 12px; margin-bottom: 14px; }
  .selector-stage > .area-card.solo-active p { font-size: 13px; line-height: 1.72; margin-bottom: 12px; }
  .selector-stage > .area-card.solo-active .body > div > p:last-of-type { margin-bottom: 0; }
  .selector-stage > .area-card.solo-active .thumbs { grid-template-columns: repeat(3, 1fr); }
  /* keep portraits showing faces in the wider hero */
  .selector-stage > .area-card.solo-active .hero,
  .selector-stage > .area-card.solo-active .thumbs .t:not(.placeholder) {
    background-position: center 22%;
  }
  /* world area cards have landscape captures — center crop reads better */
  .selector-stage > .area-card.solo-active[data-area] .hero,
  .selector-stage > .area-card.solo-active[data-area] .thumbs .t:not(.placeholder) {
    background-position: center;
  }

  @keyframes solo-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 760px) {
    .selector-bar { padding: 12px 10px 10px; }
    .sel-prefix { display: none; }
    .sel-group { padding: 4px 8px 4px 0; margin-right: 6px; }
    .selector-stage > .area-card.solo-active .body { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
    .selector-stage > .area-card.solo-active .specs {
      border-left: 0; border-top: 1px dashed var(--rule-2);
      padding-left: 0; padding-top: 14px;
    }
  }