/* NETWAR — world.html styles, part 2 of 9: Event cards, SITREP drawer, alerts, briefings, NEURAL LINK drawer.
   Moved out of world.html's <style> block unchanged (2026-10-03); the files load in this
   order, which is the old cascade order — a later file still overrides an earlier one. */
/* Event / boss / contract cards — scroll when the stack outgrows the map pane.
   pointer-events: auto so wheel hits this list (not the canvas underneath);
   #hud itself stays click-through. flex-shrink lets the list yield at max-height. */
/* Clip until the card stack actually outgrows the pane. overflow-y: auto on a
   fitting list is still a scroll container — Windows/Chrome then flash a
   scrollbar on any chrome hover (nl-glitch transform, mouse-move overlay). */
#hud .hud-events { flex: 0 1 auto; min-height: 0; margin-top: 6px; padding-right: 4px;
  overflow-x: clip; overflow-y: clip; overscroll-behavior: contain;
  pointer-events: auto; }
/* Round 8h: replaced the earlier "0 width at rest, N px on hover" scrollbar
   (and the Round 8g scrollbar-gutter:stable attempt, which didn't reliably
   hold the content width constant together with the ::-webkit-scrollbar
   width toggle below it — still reflowed on hover in testing). The
   scrollbar's reserved width is now CONSTANT at all times (7px / thin) —
   only the thumb's paint color toggles on hover/focus (transparent at
   rest, visible on hover) — so the content area's width, and therefore
   event-title wrapping and card/panel height, can never change on hover. */
#hud .hud-events.can-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#hud .hud-events.can-scroll:hover,
#hud .hud-events.can-scroll:focus-within { scrollbar-color: rgba(55,213,245,0.45) transparent; }
#hud .hud-events.can-scroll::-webkit-scrollbar { width: 7px; height: 7px; }
#hud .hud-events.can-scroll::-webkit-scrollbar-track { background: transparent; }
#hud .hud-events.can-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
#hud .hud-events.can-scroll:hover::-webkit-scrollbar-thumb,
#hud .hud-events.can-scroll:focus-within::-webkit-scrollbar-thumb { background: rgba(55,213,245,0.45); }
#hud .hud-events .event-card:first-child { margin-top: 2px; }
#hud .hud-head { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; pointer-events: auto; cursor: pointer; }
#hud .hud-head-title { flex: 1; min-width: 0; color: var(--chrome-text); }
#hud .hud-sel { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.08em;
  color: var(--chrome-muted); font-weight: 700; }
/* SITREP drawer: the panel slides out to the left; #hud-tab (placed by world.js
   placeHudTab) rides its right edge and stays at the screen edge when closed. */
#hud { transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .25s; }
/* SITREP is a full-height side panel: top to bottom of the map pane at a steady
   width (its max-width per breakpoint), whatever the number of live ops. The
   event list takes the free space and scrolls inside; the LAST line sits at the
   bottom. Phone layouts keep their own drawer rules (higher specificity). */
#hud { bottom: 10px; max-height: none; width: 100%; }
#hud .hud-body { flex: 1 1 auto; }
#hud .hud-events { flex: 1 1 auto; }
#hud .hud-foot { margin-top: auto; }
html:not([data-phone="land"]):not([data-phone="port"]) #hud.drawer-closed { transform: translateX(calc(-100% - 16px)); opacity: 0; pointer-events: none; }
#hud-tab {
  position: absolute; z-index: 6; width: 24px; padding: 10px 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(180deg, rgba(6,24,34,0.94), rgba(4,14,22,0.94));
  border: 1px solid rgba(0,255,245,0.3); border-left: 0;
  border-top: 2px solid var(--chrome-cyan);
  color: var(--chrome-cyan); cursor: pointer; pointer-events: auto;
  clip-path: polygon(0 0, 100% 8px, 100% calc(100% - 8px), 0 100%);
  box-shadow: 0 0 18px rgba(55,213,245,0.1);
  transition: left .32s cubic-bezier(.2, .8, .2, 1), background .15s, color .15s;
  font: 700 10px/1 'Chakra Petch', var(--chrome-display); letter-spacing: .32em;
}
#hud-tab[hidden] { display: none; }
#hud-tab .ht-label { writing-mode: vertical-rl; transform: rotate(180deg); }
#hud-tab .ht-arrow { font-size: 11px; letter-spacing: 0; transition: transform .32s; }
#hud-tab.closed .ht-arrow { transform: rotate(180deg); }
#hud-tab.closed { border-left: 1px solid rgba(0,255,245,0.3); }
#hud-tab:hover, #hud-tab:focus-visible {
  background: linear-gradient(180deg, rgba(10,44,60,0.96), rgba(6,26,38,0.96));
  color: #fff; box-shadow: 0 0 22px rgba(55,213,245,0.35); outline: none;
}
html[data-phone="land"] #hud-tab, html[data-phone="port"] #hud-tab { display: none; }
body.boot-chrome:not(.boot-chrome-run) #hud-tab { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #hud, #hud-tab, #hud-tab .ht-arrow { transition: none; } }
#hud b { color: var(--chrome-ok); text-shadow: 0 0 8px rgba(55,245,163,0.35); }
#hud .warn { color: var(--chrome-warn); }
#hud .sitrep { color: var(--chrome-cyan); font-weight: 700; letter-spacing: 0.22em; font-size: 13px;
  text-shadow: 0 0 10px rgba(55,213,245,0.45); }
#hud .ok { color: var(--chrome-ok); }
#hud .alert { color: var(--chrome-alert); }
#hud .dim { color: var(--chrome-muted); }
/* Round 8j: user wants the CORE pod-card's name always yellow-gold, and
   the HEAT pod-card's LOW tier specifically yellow-gold — an explicit
   override of the real ok/warn/alert/dim status-color convention for
   just these two spots, matching the reference file's own exact colors
   (netwar-map-hud-real-preview.html ~L254 CORE #ffd15c, ~L260 HEAT LOW
   #ffb01f). HEAT's HIGH/CRITICAL tiers keep their real warn/alert
   colors untouched. Text-shadow is left as the base .hsb-value cyan
   glow — the reference itself keeps that same cyan shadow under the
   yellow text (see same lines), so no shadow override is added here. */
#hud .gold-core { color: #ffd15c; }
#hud .gold-heat { color: #ffb01f; }
#hud .syn-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 2px;
  font-size: 9px; font-weight: bold; letter-spacing: 0.1em; vertical-align: middle;
  color: var(--syn-color, var(--chrome-muted)); border: 1px solid var(--syn-color, #2c1a55);
  background: rgba(8, 5, 16, 0.85); text-shadow: 0 0 6px color-mix(in srgb, var(--syn-color, #948ab8) 40%, transparent); }
#hud .syn-chip.syn-unaligned { opacity: 0.85; text-shadow: none; }
#hud .syn-chip.syn-glow {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--syn-color) 70%, #fff),
    0 0 10px color-mix(in srgb, var(--syn-color) 55%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--syn-color) 70%, transparent);
}
#hud .syn-legend-item.syn-legend-glow { color: var(--syn-color); font-weight: bold; }
#hud .syn-standing { margin-top: 8px; font-size: 10px; letter-spacing: 0.06em; color: var(--chrome-muted); line-height: 1.4; }
#hud .syn-standing-label { display: block; margin-bottom: 4px; letter-spacing: 0.14em; font-size: 9px; }
#hud .syn-bar { display: flex; height: 8px; border: 1px solid #2c1a55; background: #0a0612; overflow: hidden; margin-bottom: 5px; }
#hud .syn-bar-seg { height: 100%; min-width: 0; transition: flex 0.3s ease; box-shadow: inset 0 0 6px rgba(0,0,0,0.35); }
#hud .syn-bar-seg.lead { box-shadow: inset 0 0 8px rgba(255,255,255,0.12); }
#hud .syn-standing-labels { display: flex; flex-wrap: wrap; gap: 4px 10px; }
#hud .syn-standing .syn-pct { color: var(--syn-color, var(--chrome-secondary)); }
#hud .syn-standing .syn-pct.syn-lead { font-weight: bold; text-shadow: 0 0 6px var(--syn-color, #37d5f5); }
#hud .syn-map-legend { margin-top: 6px; font-size: 9px; letter-spacing: 0.06em; color: var(--chrome-muted);
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
#hud .syn-legend-item { display: inline-flex; align-items: center; gap: 4px;
  color: var(--syn-color, var(--chrome-secondary)); }
#hud .syn-legend-item i { display: inline-block; width: 8px; height: 8px; border-radius: 1px;
  background: var(--syn-color, var(--chrome-muted)); box-shadow: 0 0 6px var(--syn-color, var(--chrome-muted)); }
#hud .event-card { margin-top: 8px; padding: 8px 10px; background: rgba(8,5,16,0.92);
  border: 1px solid #3a2170; border-left-width: 4px; line-height: 1.45;
  pointer-events: auto; cursor: pointer; display: block; width: 100%; box-sizing: border-box;
  text-align: left; font: inherit; color: inherit; border-radius: 2px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
#hud .event-card:hover { background: rgba(18, 10, 36, 0.98);
  box-shadow: 0 0 16px rgba(55, 213, 245, 0.18); }
#hud .event-card:focus-visible { outline: 1px solid #37d5f5; outline-offset: 1px; }
#hud .event-card .ev-head { display: flex; align-items: flex-start; gap: 8px; }
#hud .event-card .ev-icon { font-size: 17px; line-height: 1; flex-shrink: 0; }
#hud .event-card .ev-title { font-family: var(--chrome-display); font-weight: 700;
  letter-spacing: 0.14em; font-size: 11px; color: var(--chrome-text); }
#hud .event-card .ev-timer { color: var(--chrome-warn); font-size: 11px; margin-top: 2px;
  animation: blink 1.4s ease-in-out infinite; text-shadow: 0 0 6px rgba(245,163,55,0.35); }
#hud .event-card .ev-effect { color: var(--chrome-text); font-size: 11px; margin-top: 5px; }
#hud .event-card .ev-loc { color: var(--chrome-cyan); font-size: 10px; margin-top: 3px; }
#hud .event-card .ev-relocate {
  color: #c9a0ff; font-size: 9px; margin-top: 3px; letter-spacing: 0.06em; font-weight: 700;
}
#hud .event-card .ev-hp-track { height: 6px; margin-top: 6px; background: #16101f; border: 1px solid #2c1a55;
  border-radius: 2px; overflow: hidden; }
#hud .event-card .ev-hp-fill { height: 100%; background: linear-gradient(90deg, #4c1d7a, #a855f7 65%, #d8a8ff);
  transition: width 0.4s cubic-bezier(.2,.8,.2,1); }
#hud .event-card .ev-hp-label { margin-top: 2px; font-size: 9px; letter-spacing: 0.08em; color: #d8a8ff; }
#hud .event-card .ev-goto { margin-top: 6px; font-size: 9px; letter-spacing: 0.12em;
  color: var(--chrome-cyan); font-weight: bold; }
#hud .event-card:hover .ev-goto { color: #5ee8ff; }
/* Per-kind border-left/hover colors used to be hardcoded here (7 pairs) —
   replaced in Round 8 by the --ev-color custom property set per card in
   world.js (renderEventCardsHtml()) plus the generic var(--ev-color, ...)
   rules near the end of this stylesheet. That refactor also fixes two
   pre-existing bugs: .event-card.scrubbing_run had NO rule at all here
   (silently fell back to the base violet #3a2170 instead of its real
   EVENT_UI color #37f5a3), and .barbarian_raid:hover used the wrong color
   (#f55858 instead of its own #f5a337). backdoor keeps its own explicit
   rule below since it's a fixed, non-EVENT_UI color. */
#hud .event-card.backdoor { border-left-color: #f5c842; }
#hud .event-card.backdoor:hover { border-color: #f5c842; }
#hud .event-card.backdoor .ev-timer { animation: none; text-shadow: none; }
#hud .ev-raid-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#hud .ev-raid-cd { color: #f5e358; font-size: 9px; letter-spacing: 0.5px; }
#cd-prompt { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 470; width: min(560px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: 16px 18px; background: rgba(12,8,6,0.97); border: 1px solid #f5a337;
  box-shadow: 0 0 40px rgba(245,163,55,0.35); font-family: 'IBM Plex Mono', Consolas, monospace; }
#cd-prompt > b { font: 700 15px 'Chakra Petch', sans-serif; letter-spacing: 0.14em; color: #f5a337; }
#cd-prompt > span { font-size: 12px; color: #d8d0c4; line-height: 1.5; }
#cd-prompt .cd-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#cd-prompt .cd-choices button { display: grid; gap: 6px; text-align: left; padding: 10px; cursor: pointer; background: transparent;
  border: 1px solid; font: inherit; color: #c9c2b6; }
#cd-prompt .cd-choices button b { font: 700 13px 'Chakra Petch', sans-serif; letter-spacing: 0.1em; }
#cd-prompt .cd-choices button small { font-size: 10.5px; line-height: 1.45; }
#cd-prompt .cd-fight { border-color: #f55858; } #cd-prompt .cd-fight b { color: #f55858; }
#cd-prompt .cd-pay { border-color: #f5e358; } #cd-prompt .cd-pay b { color: #f5e358; }
#cd-prompt .cd-ignore { border-color: #888; } #cd-prompt .cd-ignore b { color: #bbb; }
#cd-prompt .cd-choices button:hover { background: rgba(255,255,255,0.05); }
#cd-prompt .cd-later { justify-self: end; background: transparent; border: 0; color: #8a8378; font: 11px inherit; cursor: pointer; }
@media (max-width: 640px) { #cd-prompt .cd-choices { grid-template-columns: 1fr; } }
.ev-raid-btn { font: 10px Consolas, monospace; letter-spacing: 0.6px; padding: 5px 9px;
  border: 1px solid #665; background: rgba(20,12,28,0.95); color: #e8e0f0; cursor: pointer; }
.ev-raid-btn.fight { border-color: #f55858; color: #f55858; }
.ev-raid-btn.tribute { border-color: #f5e358; color: #f5e358; }
.ev-raid-btn.ignore { border-color: #888; color: #aaa; }
.ev-raid-btn:hover { filter: brightness(1.2); }
.sitrep-raid-btns { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.ev-fort-btn { font: 8px Consolas, monospace; letter-spacing: 0.5px; padding: 4px 6px;
  border: 1px solid #3a5a44; background: rgba(12, 22, 18, 0.95); color: #8ab89a; cursor: pointer; }
.ev-fort-btn.on { border-color: #37f5a3; color: #37f5a3; box-shadow: 0 0 8px rgba(55,245,163,0.25); }
.ev-fort-btn:hover { filter: brightness(1.15); }
.ev-fort-place { margin-top: 8px; width: 100%; padding: 6px;
  border: 1px solid #37f5a3; background: rgba(20, 40, 28, 0.95);
  color: #37f5a3; font: bold 10px Consolas, monospace; letter-spacing: 1px; cursor: pointer; }
#enter-defense-cta {
  position: fixed; right: 18px; bottom: 22px; z-index: 120;
  width: min(280px, calc(100vw - 36px));
  padding: 12px 14px; background: rgba(12, 6, 22, 0.96);
  border: 1px solid #f5a337; box-shadow: 0 0 18px rgba(245, 88, 88, 0.25);
  font: 11px Consolas, monospace; color: #e8e0f0;
}
#enter-defense-cta .ed-title { color: #f55858; font-weight: bold; letter-spacing: 1.2px; font-size: 12px; }
#enter-defense-cta .ed-sub { margin-top: 4px; color: #f5a337; }
/* W4/W9: while a duel is on screen the alert docks to the top edge, so it can never
   sit over the hand or the SKIP/FOLD row and steal a click meant for the board. */
/* Two compact rows so the banner stays clear of the duel box even on short screens. */
#enter-defense-cta.over-duel {
  top: 6px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%);
  width: min(600px, calc(100vw - 16px)); z-index: 130;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 10px;
}
#enter-defense-cta.over-duel .ed-title { grid-area: 1 / 1; white-space: nowrap; }
#enter-defense-cta.over-duel .ed-sub { grid-area: 1 / 2; margin-top: 0; }
#enter-defense-cta.over-duel .ed-status { grid-area: 2 / 1; margin-top: 0; white-space: nowrap; }
#enter-defense-cta.over-duel .ed-timer { grid-area: 2 / 2; margin-top: 0; }
#enter-defense-cta.over-duel #ed-enter-btn,
#enter-defense-cta.over-duel .ed-dismiss {
  grid-row: 1 / span 2; margin-top: 0; width: auto; padding: 7px 10px; align-self: center;
}
#enter-defense-cta.over-duel #ed-enter-btn { grid-column: 3; }
#enter-defense-cta.over-duel .ed-dismiss { grid-column: 4; }
@media (max-width: 620px) {
  #enter-defense-cta.over-duel { grid-template-columns: minmax(0, 1fr) auto; }
  #enter-defense-cta.over-duel .ed-title { grid-area: 1 / 1; }
  #enter-defense-cta.over-duel .ed-sub { grid-area: 2 / 1; }
  #enter-defense-cta.over-duel .ed-status { grid-area: 3 / 1; }
  #enter-defense-cta.over-duel .ed-timer { grid-area: 4 / 1; }
  #enter-defense-cta.over-duel #ed-enter-btn { grid-area: 1 / 2 / span 2 / 3; }
  #enter-defense-cta.over-duel .ed-dismiss { grid-area: 3 / 2 / span 2 / 3; }
}
#enter-defense-cta .ed-status { margin-top: 6px; color: #37f5a3; font-size: 10px; letter-spacing: 0.6px; }
#enter-defense-cta .ed-timer { margin-top: 3px; color: #cfc7e8; font-size: 10px; }
#enter-defense-cta #ed-enter-btn {
  margin-top: 10px; width: 100%; padding: 8px;
  border: 1px solid #37f5a3; background: rgba(20, 40, 28, 0.95);
  color: #37f5a3; font: bold 11px Consolas, monospace; letter-spacing: 1px; cursor: pointer;
}
#enter-defense-cta #ed-enter-btn:hover { filter: brightness(1.15); }
#enter-defense-cta .ed-dismiss {
  margin-top: 6px; width: 100%; padding: 5px;
  border: 1px solid #665; background: transparent; color: #8a7fb0;
  font: 9px Consolas, monospace; cursor: pointer;
}
/* W7 — first-breach defense briefing. Fires once per operator, and only with a clear
   screen (never over a duel board), so a plain centered panel is safe here. */
#defense-brief {
  position: fixed; inset: 0; z-index: 140;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 2, 10, 0.72); padding: 16px;
}
#defense-brief .db-box {
  width: min(560px, 100%); max-height: calc(100vh - 32px);
  background: rgba(12, 6, 22, 0.98);
  border: 1px solid #f5a337; box-shadow: 0 0 26px rgba(245, 163, 55, 0.25);
  font: 11px Consolas, monospace; color: #e8e0f0; line-height: 1.5;
}
/* Visual polish round 2, follow-up fix — the scanline sweep (::before,
   added further below) moves via a transform that travels well past the
   box's own bottom edge; that's intentional, it's a continuously scanning
   beam, not a static decoration. With overflow-y:auto on .db-box itself,
   that transformed pseudo-element enlarged the box's own scrollable area
   and produced a spurious vertical scrollbar on every FIELD MANUAL /
   defense-briefing popup, even short ones that never needed to scroll.
   Fix: .db-box no longer scrolls at all (overflow: hidden, see further
   below — fully clips the sweep); the real content lives in this inner
   .db-scroll wrapper instead (see showFieldTeach()/showDefenseBrief() in
   world.js), which owns the actual overflow-y:auto and the padding
   .db-box used to carry directly. */
#defense-brief .db-scroll {
  max-height: calc(100vh - 32px); overflow-y: auto; padding: 16px 18px;
}
#defense-brief .db-title { color: #f5a337; font-weight: bold; font-size: 13px; letter-spacing: 1.4px; }
#defense-brief .db-sub { margin-top: 3px; color: #f55858; font-size: 10px; letter-spacing: 0.8px; }
#defense-brief .db-step { margin-top: 12px; padding-left: 10px; border-left: 2px solid #3a2a60; }
#defense-brief .db-step-h { color: #37f5a3; letter-spacing: 0.8px; margin-bottom: 3px; }
/* D-J6 — small diamond bullet per FIELD MANUAL line, same node-marker
   language as the CLEARANCE roadmap's .cl-node, not a new icon system. */
#defense-brief .db-step .db-line { position: relative; padding-left: 16px; margin: 7px 0; }
#defense-brief .db-step .db-line::before {
  content: ''; position: absolute; left: -2px; top: 4px;
  width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg);
  background: #1a2830; border: 1px solid #37f5a3;
}
#defense-brief .db-dim { color: #8a7fb0; font-size: 10px; margin-top: 3px; }
#defense-brief b { color: #fff; }
#defense-brief .db-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
#defense-brief .db-actions button {
  flex: 1 1 150px; padding: 9px 10px;
  border: 1px solid #37f5a3; background: rgba(20, 40, 28, 0.95);
  color: #37f5a3; font: bold 11px Consolas, monospace; letter-spacing: 1px; cursor: pointer;
}
#defense-brief .db-actions button:hover { filter: brightness(1.15); }
#defense-brief .db-actions #db-enter { border-color: #f55858; color: #f55858; background: rgba(40, 16, 20, 0.95); }
#defense-brief .db-actions .db-ghost {
  flex: 0 1 110px; border-color: #665; background: transparent; color: #8a7fb0; font-weight: normal;
}
@media (max-width: 480px) {
  #defense-brief .db-box { font-size: 10px; }
  #defense-brief .db-scroll { padding: 12px; }
  #defense-brief .db-actions button,
  #defense-brief .db-actions .db-ghost { flex: 1 1 100%; }
}
#hud .event-card.static { cursor: default; pointer-events: none; }
/* #hud is deliberately click-through (pointer-events: none) so the map underneath
   stays clickable — every [data-gloss] tooltip trigger inside it (SHIELD, STRONGHOLD,
   CAPTURE, DISTANCE, INTEL, and the rest of the Fase 1 SITREP glossary pass) was
   silently dead because nothing ever opted them back into pointer-events, unlike
   .event-card above. Also add a visible hover affordance — nothing signaled these
   labels were interactive at all. */
#hud [data-gloss], #hud [data-tip] {
  pointer-events: auto; cursor: help;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
/* Clickable chrome that also carries a custom tip keeps a pointer, not help —
   the dotted glossary underline would make these look like terms. */
#hud .hud-season[data-tip],
#hud .syn-chip[data-tip] {
  cursor: pointer; text-decoration: none;
}
/* Right dock — SITREP inspect */
#inspect-dock {
  position: absolute; top: 10px; right: 12px; z-index: 6;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0;
  /* --ms-reserve (world.js): the map controls' height, so TARGET stops above them. */
  max-height: min(72vh, calc(100% - 20px - var(--ms-reserve, 0px)));
  pointer-events: none;
}
#inspect-dock:has(#inspect.show) { pointer-events: auto; }
/* NEURAL LINK used to slide over SITREP with no indication it was still open
   underneath (independent list). Shifting the dock clear of the drawer keeps it
   reachable instead of silently hidden — same reach as the drawer's own widths. */
#viewport { --nl-w: clamp(460px, 36vw, 560px); }
#viewport:has(#neural-link.open) #inspect-dock {
  right: calc(12px + var(--nl-w));
  transition: right 0.32s cubic-bezier(0.2, 1.05, 0.4, 1);
}

/* NEURAL LINK — wide right drawer (slides from right) */
#neural-link {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 45;
  width: var(--nl-w, clamp(460px, 36vw, 560px));
  max-width: 100%;
  display: flex; flex-direction: column;
  font-size: 12px; color: var(--chrome-text); line-height: 1.45;
  background: #0d0618;
  border-left: 2px solid rgba(255,79,216,0.7);
  box-shadow: -12px 0 40px rgba(0,0,0,0.5), -4px 0 28px rgba(255,79,216,0.18);
  transform: translateX(105%);
  transition: transform 0.32s cubic-bezier(0.2, 1.05, 0.4, 1);
  pointer-events: none; visibility: hidden;
  animation: nl-edge-glow 5.5s ease-in-out infinite;
}
#neural-link.open {
  transform: translateX(0);
  pointer-events: auto; visibility: visible;
}
/* ── NEURAL LINK drawer contents (2026-09 redesign) ──────────────────────────
   Its own colour world so it never reads like SITREP / TARGET / Safehouse:
   violet panels, pink-magenta + lilac accents; green / amber / red keep their
   meaning and syndicate colours stay theirs. Markup: public/neural-link.js
   (nx-* classes; the ids / data-* hooks the handlers use are unchanged). */
#neural-link {
  --nx-panel: #170b28; --nx-panel-2: #1d0f33; --nx-deep: #0d0618;
  --nx-line: #3a1f5c; --nx-line-2: #5a2e86;
  --nx-text: #f3eafc; --nx-text-2: #cdb8e6; --nx-muted: #8d78a8;
  --nx-lilac: #d77bff; --nx-lilac-rgb: 215, 123, 255;
  --nx-pink: #ff4fd8; --nx-pink-rgb: 255, 79, 216;
  --nx-ok: #37f5a3; --nx-ok-rgb: 55, 245, 163;
  --nx-amber: #ffb01f; --nx-danger: #ff5c7a; --nx-danger-rgb: 255, 92, 122;
  --nx-display: 'Chakra Petch', var(--chrome-display);
  --nx-mono: var(--chrome-font);
}
#neural-link .nl-backdrop { display: none; }
#neural-link .nl-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  height: 100%; min-height: 0; overflow: hidden; color: var(--nx-text);
  background:
    radial-gradient(circle at 1px 1px, rgba(var(--nx-lilac-rgb), .10) 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(180deg, rgba(22, 10, 38, .97), rgba(10, 4, 18, .98));
}
#neural-link .nl-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px 11px; flex-shrink: 0; border-bottom: 1px solid var(--nx-line); }
#neural-link .nl-title { font: 700 14px var(--nx-display); letter-spacing: .34em; color: var(--nx-text); white-space: nowrap; }
#neural-link .nl-title span { color: var(--nx-pink); text-shadow: 0 0 12px rgba(var(--nx-pink-rgb), .6); }
#neural-link .nx-wave { flex: 1; min-width: 40px; height: 22px; overflow: hidden; }
#neural-link .nx-wave path { fill: none; stroke-width: 1.4; }
#neural-link .nx-wave .w1 { stroke: rgba(var(--nx-pink-rgb), .85); animation: nx-wave 3.2s linear infinite; }
#neural-link .nx-wave .w2 { stroke: rgba(var(--nx-lilac-rgb), .6); animation: nx-wave 2.1s linear infinite reverse; }
@keyframes nx-wave { to { transform: translateX(-60px); } }
#neural-link .nl-close { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; font-size: 13px;
  color: var(--nx-text-2); border: 1px solid var(--nx-line-2); background: var(--nx-panel); }
#neural-link .nl-close:hover { border-color: var(--nx-danger); color: var(--nx-danger); animation: glitch-flat-hover .32s steps(2) forwards; }

/* identity strip */
#neural-link .nx-ident { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 14px 16px; flex-shrink: 0;
  border-bottom: 1px solid var(--nx-line);
  background: radial-gradient(420px 120px at 0% 50%, rgba(var(--nx-pink-rgb), .16), transparent 70%), linear-gradient(90deg, rgba(var(--nx-lilac-rgb), .06), transparent 70%); }
#neural-link .nx-sigil { width: 52px; height: 58px; display: grid; place-items: center; position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--nx-pink), var(--nx-lilac)); }
#neural-link .nx-sigil::after { content: ''; position: absolute; inset: 2px; clip-path: inherit; background: linear-gradient(160deg, #26133f, var(--nx-deep)); }
#neural-link .nx-sigil b { position: relative; z-index: 1; font: 700 16px var(--nx-display); color: #fff; }
#neural-link .nx-who { min-width: 0; display: grid; gap: 6px; }
#neural-link .nx-who-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 700 18px/1.1 var(--nx-display); letter-spacing: .06em; word-break: break-word; }
#neural-link .nx-tbadge { display: inline-block; margin-left: 6px; padding: 2px 6px; font: 700 9px var(--nx-mono); letter-spacing: .14em; color: #1a0f00; background: var(--nx-amber); vertical-align: 1px; }
#neural-link .nx-who-name .nx-tbadge { margin-left: 0; }
#neural-link .nx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#neural-link .nx-chip { --cc: var(--nx-text-2); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent); background: rgba(13, 6, 24, .7);
  font: 10.5px var(--nx-mono); letter-spacing: .06em; color: var(--cc); transition: background .15s, border-color .15s; }
#neural-link .nx-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
#neural-link .nx-chip.cl { --cc: var(--nx-lilac); }
#neural-link .nx-chip.rank { --cc: var(--nx-ok); }
#neural-link .nx-chip.heat { --cc: var(--nx-danger); }
#neural-link .nx-chip:hover { border-color: var(--cc); background: rgba(34, 16, 58, .9); animation: glitch-flat-hover .32s steps(2) forwards; }

/* section tiles (tabs) with a live status line */
#neural-link .nl-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex-shrink: 0; border-bottom: 1px solid var(--nx-line); }
#neural-link .nl-tab { --c: var(--nx-lilac-rgb); position: relative; display: grid; gap: 3px; justify-items: start; min-width: 0; padding: 11px 11px 10px;
  text-align: left; cursor: pointer; border: 0; border-right: 1px solid var(--nx-line); background: transparent; color: var(--nx-muted);
  transition: background .15s, color .15s; }
#neural-link .nl-tab:last-child { border-right: 0; }
#neural-link .nl-tab[data-tab="syndicate"] { --c: 0, 148, 216; }
#neural-link .nl-tab[data-tab="wanted"] { --c: var(--nx-danger-rgb); }
#neural-link .nl-tab[data-tab="clearance"] { --c: var(--nx-ok-rgb); }
#neural-link .nx-tl { display: flex; align-items: center; gap: 7px; font: 700 11px var(--nx-display); letter-spacing: .16em; }
#neural-link .nx-tl svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; }
#neural-link .nx-ts { max-width: 100%; font: 10px var(--nx-mono); letter-spacing: .03em; color: var(--nx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#neural-link .nl-tab:hover { background: rgba(var(--nx-lilac-rgb), .05); color: var(--nx-text-2); animation: glitch-flat-hover .32s steps(2) forwards; }
#neural-link .nl-tab.active { color: var(--nx-text); background: linear-gradient(180deg, rgba(var(--c), .14), rgba(var(--c), .02)); }
#neural-link .nl-tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: rgb(var(--c)); box-shadow: 0 0 10px rgb(var(--c)); }
#neural-link .nl-tab.active .nx-ts { color: rgb(var(--c)); }
#neural-link .nx-dot { position: absolute; top: 8px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center;
  font: 700 9.5px var(--nx-mono); color: var(--nx-deep); background: rgb(var(--c)); border-radius: 8px; }

#neural-link .nl-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 22px;
  scrollbar-width: thin; scrollbar-color: var(--nx-line-2) transparent; }
#neural-link .nl-pane { display: none; }
#neural-link .nl-pane.active { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#neural-link .nl-pane.active.nl-enter { animation: nx-in .24s ease-out; }
@keyframes nx-in { from { opacity: 0; transform: translateY(4px); } }

/* cards */
#neural-link .nx-card { --acc: var(--nx-lilac); position: relative; display: grid; gap: 10px; padding: 13px 15px 14px;
  background: linear-gradient(160deg, var(--nx-panel-2), var(--nx-deep)); border: 1px solid var(--nx-line); border-left: 3px solid var(--acc);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
#neural-link .nx-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
#neural-link .nx-card-h h3 { margin: 0; font: 700 12.5px var(--nx-display); letter-spacing: .22em; text-transform: uppercase; color: var(--nx-text); }
#neural-link .nx-meta { font: 10px var(--nx-mono); color: var(--nx-muted); letter-spacing: .04em; white-space: nowrap; }
#neural-link .nx-lead { margin: -4px 0 0; font: 500 12px/1.5 var(--nx-display); color: var(--nx-text-2); }
#neural-link .nx-lead b { color: var(--nx-text); }
#neural-link .nx-hint { margin: 0; font: 500 11.5px/1.5 var(--nx-display); color: var(--nx-muted); }
#neural-link .nx-hint b { color: var(--nx-text-2); }
#neural-link .nx-empty { font: 12px var(--nx-mono); color: var(--nx-muted); padding: 6px 0; }
#neural-link .nx-kv { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
#neural-link .nx-k { font: 10px var(--nx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-muted); }
#neural-link .nx-v { font: 12.5px var(--nx-mono); color: var(--nx-text); min-width: 0; overflow-wrap: anywhere; }
#neural-link .nx-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#neural-link .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--nx-line-2); background: var(--nx-panel); color: var(--nx-text-2);
  font: 700 10.5px var(--nx-display); letter-spacing: .16em; text-transform: uppercase; transition: border-color .15s, color .15s, background .15s; }
#neural-link .nx-btn:hover:not(:disabled) { border-color: var(--nx-lilac); color: var(--nx-text); animation: glitch-flat-hover .32s steps(2) forwards; }
#neural-link .nx-btn.accent { border-color: rgba(var(--nx-lilac-rgb), .65); color: var(--nx-lilac); }
#neural-link .nx-btn.accent:hover:not(:disabled) { background: rgba(var(--nx-lilac-rgb), .12); }
#neural-link .nx-btn.pink { border-color: rgba(var(--nx-pink-rgb), .7); color: #ffb3ee; background: rgba(var(--nx-pink-rgb), .1); }
#neural-link .nx-btn.pink:hover:not(:disabled) { background: rgba(var(--nx-pink-rgb), .22); }
#neural-link .nx-btn.danger { border-color: rgba(var(--nx-danger-rgb), .6); color: var(--nx-danger); }
#neural-link .nx-btn.danger:hover:not(:disabled) { background: rgba(var(--nx-danger-rgb), .12); border-color: var(--nx-danger); }
#neural-link .nx-btn:disabled { opacity: .4; cursor: not-allowed; }
#neural-link .nx-status, #neural-link .nx-pill { display: inline-flex; align-items: center; gap: 8px; font: 11px var(--nx-mono); letter-spacing: .08em; }
#neural-link .nx-pill { padding: 3px 9px; border: 1px solid currentColor; font-size: 10px; letter-spacing: .14em; }
#neural-link .nx-pulse { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: nx-pulse 1.8s infinite; }
@keyframes nx-pulse { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 7px transparent; } }
#neural-link .ok { color: var(--nx-ok); } #neural-link .warn { color: var(--nx-amber); } #neural-link .bad { color: var(--nx-danger); }
#neural-link .info { color: var(--nx-lilac); } #neural-link .muted { color: var(--nx-muted); }

/* inbox */
#neural-link .nx-inbox { display: grid; gap: 1px; max-height: 280px; overflow-y: auto; background: var(--nx-line); border: 1px solid var(--nx-line); }
#neural-link .nx-msg { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; background: #120a20; }
#neural-link .nx-msg:hover { background: #1b0e2e; animation: glitch-slide-hover .4s steps(2) forwards; }
#neural-link .nx-mi { width: 24px; height: 24px; display: grid; place-items: center; font-size: 11px; border: 1px solid currentColor; }
#neural-link .nx-mt { font: 12px/1.45 var(--nx-mono); color: var(--nx-text-2); }
#neural-link .nx-mt b { color: var(--nx-text); font-weight: 400; }
#neural-link .nx-mw { font: 10px var(--nx-mono); color: var(--nx-muted); white-space: nowrap; padding-top: 2px; }
#neural-link .nx-msg.unread { background: #1a0d2b; box-shadow: inset 2px 0 0 var(--nx-lilac); }
#neural-link .nx-msg.unread .nx-mt { color: var(--nx-text); }
#neural-link .nx-msg.unread .nx-mw::before { content: 'NEW · '; color: var(--nx-lilac); }

/* danger zone */
#neural-link .nx-danger-wrap > summary { list-style: none; width: 100%; justify-content: space-between; }
#neural-link .nx-danger-wrap > summary::-webkit-details-marker { display: none; }
#neural-link .nx-danger-wrap[open] > summary span { transform: rotate(180deg); }
#neural-link .nx-card.danger { --acc: var(--nx-danger); margin-top: 8px; background: linear-gradient(160deg, #1e0d16, #0a0509); border-color: rgba(var(--nx-danger-rgb), .3); }
#neural-link .nx-card.danger h3 { color: var(--nx-danger); }
#neural-link .nx-del-row { display: flex; flex-wrap: wrap; gap: 8px; }
#neural-link .nx-input { flex: 1 1 150px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(var(--nx-danger-rgb), .45); background: #0a0509;
  font: 12px var(--nx-mono); letter-spacing: .14em; color: var(--nx-text); }
#neural-link .nx-input::placeholder { color: rgba(var(--nx-danger-rgb), .45); }
#neural-link .nx-input:focus { outline: none; border-color: var(--nx-danger); box-shadow: 0 0 10px rgba(var(--nx-danger-rgb), .25); }
#neural-link .nx-input:disabled { opacity: .4; cursor: not-allowed; }

/* syndicate */
#neural-link .nx-aff { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
#neural-link .nx-emblem { width: 70px; height: 78px; display: grid; place-items: center; font-size: 28px; color: var(--sc);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--sc) 40%, transparent), color-mix(in srgb, var(--sc) 8%, var(--nx-deep)) 70%);
  box-shadow: inset 0 0 0 2px var(--sc); }
#neural-link .nx-aff-main { display: grid; gap: 8px; min-width: 0; }
#neural-link .nx-aff-name { font: 700 18px var(--nx-display); letter-spacing: .12em; color: var(--sc); word-break: break-word; }
#neural-link .nx-aff-name.syn-glow { text-shadow: 0 0 14px color-mix(in srgb, var(--sc) 70%, transparent); }
#neural-link .nx-star { color: var(--nx-amber); margin-left: 6px; font-size: 15px; }
#neural-link .nx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#neural-link .nx-stat { display: grid; gap: 2px; padding: 7px 9px; background: rgba(13, 6, 24, .7); border: 1px solid var(--nx-line); transition: border-color .15s, background .15s; }
#neural-link .nx-stat:hover { border-color: rgba(var(--nx-lilac-rgb), .55); background: linear-gradient(160deg, rgba(44, 20, 72, .95), rgba(16, 7, 28, .95));
  animation: act-btn-glitch-lift .38s steps(2) forwards; }
#neural-link .nx-sk { font: 9.5px var(--nx-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-muted); }
#neural-link .nx-sv { font: 700 15px var(--nx-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
#neural-link .nx-season-status { font: 11px var(--nx-mono); letter-spacing: .06em; }
#neural-link .nx-rep { display: grid; gap: 6px; }
#neural-link .nx-rep-row { padding: 7px 11px; border: 1px solid rgba(var(--nx-ok-rgb), .25); font: 11px var(--nx-mono); color: var(--nx-text-2); }
#neural-link .nx-rep-set { margin-top: 4px; letter-spacing: 0.2em; font-size: 14px; }
#neural-link .nx-rep-set .on { color: #ffd15c; }
#neural-link .nx-rep-set .off { color: rgba(168,198,207,0.4); }
#neural-link .nx-passive { padding: 8px 11px; border: 1px dashed rgba(var(--nx-ok-rgb), .45); background: rgba(var(--nx-ok-rgb), .06); font: 11.5px var(--nx-mono); color: var(--nx-text-2); }
#neural-link .nx-passive b { color: var(--nx-ok); font-weight: 400; }
#neural-link .nx-passive.off { border-color: rgba(255, 176, 31, .45); background: rgba(255, 176, 31, .06); }
#neural-link .nx-passive.off b { color: var(--nx-amber); }
#neural-link .nx-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#neural-link .nx-pick { display: grid; gap: 5px; justify-items: start; padding: 11px; text-align: left; cursor: pointer; color: var(--nx-text);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 14%, var(--nx-panel)), var(--nx-deep)); }
#neural-link .nx-pick:hover:not(:disabled) { border-color: var(--sc); box-shadow: 0 8px 20px -10px var(--sc); animation: act-btn-glitch-lift .38s steps(2) forwards; }
#neural-link .nx-pick:disabled { opacity: .45; cursor: not-allowed; }
#neural-link .nx-pick-ic { font-size: 19px; color: var(--sc); }
#neural-link .nx-pick-n { font: 700 11.5px var(--nx-display); letter-spacing: .1em; }
#neural-link .nx-pick-p { font: 11px var(--nx-mono); color: var(--sc); }
#neural-link .nx-pick-g { font: 10px var(--nx-mono); color: var(--nx-muted); }
#neural-link .nx-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#neural-link .nx-rule { padding: 8px 10px; border: 1px solid var(--nx-line); background: rgba(13, 6, 24, .6); font: 11px/1.45 var(--nx-mono); color: var(--nx-text-2); }
#neural-link .nx-rule b { display: block; margin-bottom: 2px; font: 700 10px var(--nx-display); letter-spacing: .16em; color: var(--nx-text); }

/* leaderboard */
#neural-link .nx-filters { display: grid; gap: 7px; }
#neural-link .nx-frow { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: center; }
#neural-link .nx-fk { font: 10px var(--nx-mono); letter-spacing: .14em; color: var(--nx-muted); text-transform: uppercase; }
#neural-link .nx-fnote { font: 10.5px var(--nx-mono); color: var(--nx-muted); }
#neural-link .nx-seg { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; border: 1px solid var(--nx-line-2); }
#neural-link .nx-seg button { padding: 5px 10px; cursor: pointer; border: 0; border-right: 1px solid var(--nx-line-2); background: transparent;
  font: 11px var(--nx-mono); color: var(--nx-muted); }
#neural-link .nx-seg button:last-child { border-right: 0; }
#neural-link .nx-seg button.on { background: rgba(var(--nx-lilac-rgb), .16); color: var(--nx-lilac); }
#neural-link .nx-seg button:hover { color: var(--nx-text); animation: glitch-flat-hover .32s steps(2) forwards; }
#neural-link .nx-lb-body { display: grid; gap: 8px; min-height: 48px; }
#neural-link .nx-season-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 7px 11px;
  border: 1px solid rgba(var(--nx-lilac-rgb), .3); background: rgba(var(--nx-lilac-rgb), .06); font: 11px var(--nx-mono); letter-spacing: .1em; color: var(--nx-lilac); }
#neural-link .nx-lb { display: grid; gap: 4px; }
#neural-link .nx-lb-cols, #neural-link .nx-lb-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 76px 64px 18px; gap: 8px; align-items: center; }
#neural-link .nx-lb-cols { padding: 0 10px; font: 9.5px var(--nx-mono); letter-spacing: .14em; color: var(--nx-muted); text-transform: uppercase; }
#neural-link .nx-lb-cols span:nth-child(4) { text-align: right; }
#neural-link .nx-lb-row { padding: 7px 10px; background: rgba(13, 6, 24, .7); border: 1px solid var(--nx-line); transition: border-color .15s, background .15s; }
#neural-link .nx-lb-row.jump { cursor: pointer; }
#neural-link .nx-lb-row:hover { border-color: var(--nx-line-2); background: rgba(34, 16, 58, .85); animation: glitch-nudge-hover .4s steps(2) forwards; }
#neural-link .nx-pos { font: 700 13px var(--nx-display); color: var(--nx-text-2); font-variant-numeric: tabular-nums; }
#neural-link .nx-nm { font: 12px var(--nx-mono); color: var(--nx-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#neural-link .nx-you { color: var(--nx-lilac); }
#neural-link .nx-sy { display: flex; align-items: center; gap: 6px; font: 10px var(--nx-mono); letter-spacing: .08em; color: var(--sc); white-space: nowrap; overflow: hidden; }
#neural-link .nx-sy::before { content: ''; width: 7px; height: 7px; flex: 0 0 auto; background: var(--sc); box-shadow: 0 0 6px var(--sc); }
#neural-link .nx-pt { font: 13px var(--nx-mono); text-align: right; font-variant-numeric: tabular-nums; }
#neural-link .nx-go { color: var(--nx-lilac); text-align: center; }
#neural-link .nx-lb-row.gold .nx-pos { color: #ffd23f; }
#neural-link .nx-lb-row.silver .nx-pos { color: #d9d2e6; }
#neural-link .nx-lb-row.bronze .nx-pos { color: #e0955a; }
#neural-link .nx-lb-row.gold { border-color: rgba(255, 210, 63, .45); background: linear-gradient(90deg, rgba(255, 210, 63, .1), rgba(13, 6, 24, .7) 50%); }
#neural-link .nx-lb-row.mine { border-color: rgba(var(--nx-lilac-rgb), .7); box-shadow: inset 3px 0 0 var(--nx-lilac); }
#neural-link .nx-lb-you { display: flex; justify-content: space-between; gap: 8px; padding: 8px 11px; border: 1px dashed rgba(var(--nx-lilac-rgb), .5);
  font: 11.5px var(--nx-mono); color: var(--nx-lilac); }

/* hall of seasons */
#neural-link .nx-hall { display: grid; gap: 6px; }
#neural-link .nx-hall-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; width: 100%;
  padding: 9px 11px; text-align: left; cursor: pointer; border: 1px solid var(--nx-line); background: rgba(13, 6, 24, .7); color: var(--nx-text); }
#neural-link .nx-hall-row:hover { border-color: var(--nx-line-2); animation: glitch-nudge-hover .4s steps(2) forwards; }
#neural-link .nx-hs { font: 700 11.5px var(--nx-display); letter-spacing: .14em; }
#neural-link .nx-hw { font: 11px var(--nx-mono); color: var(--nx-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#neural-link .nx-hw b { color: var(--nx-amber); font-weight: 400; }
#neural-link .nx-ht { font: 10px var(--nx-mono); letter-spacing: .08em; color: var(--sc); white-space: nowrap; }
#neural-link .nx-hx { color: var(--nx-muted); transition: transform .2s; }
#neural-link .nx-hall-row.open .nx-hx { transform: rotate(90deg); }
#neural-link .nx-hall-top { display: grid; gap: 2px; margin: -2px 0 4px 12px; padding: 6px 10px 8px 20px; border-left: 2px solid var(--nx-line-2); }
#neural-link .nx-hall-top-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 64px 70px; gap: 8px; font: 11px var(--nx-mono); color: var(--nx-text-2); }
#neural-link .nx-hall-top-row span:last-child { text-align: right; }

/* wanted */
#neural-link .nx-posters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#neural-link .nx-poster { position: relative; display: grid; gap: 7px; justify-items: center; padding: 14px 10px 12px; text-align: center;
  border: 1px solid rgba(var(--nx-danger-rgb), .35); background: linear-gradient(180deg, rgba(var(--nx-danger-rgb), .12), #0a0509 75%); transition: border-color .15s; }
#neural-link .nx-poster.first { border-color: var(--nx-danger); box-shadow: 0 0 24px -8px rgba(var(--nx-danger-rgb), .8); }
#neural-link .nx-poster:hover { border-color: var(--nx-danger); animation: act-btn-glitch-lift .38s steps(2) forwards; }
#neural-link .nx-poster-rk { font: 700 28px/1 var(--nx-display); color: var(--nx-danger); text-shadow: 0 0 14px rgba(var(--nx-danger-rgb), .7); }
#neural-link .nx-poster-n { font: 700 12px var(--nx-display); letter-spacing: .08em; word-break: break-word; }
#neural-link .nx-poster-heat { width: 100%; height: 6px; background: #2a0f14; position: relative; }
#neural-link .nx-poster-heat i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--nx-amber), var(--nx-danger)); box-shadow: 0 0 8px var(--nx-danger); }
#neural-link .nx-poster-hv { font: 11px var(--nx-mono); color: var(--nx-danger); letter-spacing: .08em; }
#neural-link .nx-poster-bounty { padding: 2px 7px; font: 9.5px var(--nx-mono); letter-spacing: .14em; color: #1a0f00; background: var(--nx-amber); }
#neural-link .nx-poster-none { font: 10px var(--nx-mono); color: var(--nx-muted); }
#neural-link .nx-poster-you { position: absolute; top: 6px; left: 6px; font: 9px var(--nx-mono); letter-spacing: .12em; color: var(--nx-lilac); }
#neural-link .nx-heatbar { height: 10px; position: relative; background: #1a1024; border: 1px solid var(--nx-line); }
#neural-link .nx-heatbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--nx-ok), var(--nx-amber) 55%, var(--nx-danger)); }
#neural-link .nx-heatlabels { display: flex; justify-content: space-between; margin-top: -4px; font: 9.5px var(--nx-mono); letter-spacing: .1em; color: var(--nx-muted); }

/* clearance road */
#neural-link .nx-cl-prog { display: grid; gap: 6px; }
#neural-link .nx-cl-bar { height: 8px; position: relative; background: #1d0f33; border: 1px solid var(--nx-line); }
#neural-link .nx-cl-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--nx-ok), var(--nx-lilac)); box-shadow: 0 0 8px var(--nx-ok); }
#neural-link .nx-cl-lab { display: flex; justify-content: space-between; gap: 8px; font: 10px var(--nx-mono); letter-spacing: .1em; color: var(--nx-muted); }
#neural-link .nx-cl-lab b { color: var(--nx-ok); font-weight: 400; }
#neural-link .cl-road { position: relative; display: grid; gap: 10px; padding-left: 28px; }
#neural-link .cl-road::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--nx-ok) 0 var(--done-h, 45%), var(--nx-line-2) var(--done-h, 45%)); }
#neural-link .cl-node { position: relative; display: grid; gap: 4px; padding: 10px 13px; border: 1px solid var(--nx-line); background: rgba(13, 6, 24, .7); cursor: default; }
#neural-link .cl-node:hover { border-color: var(--nx-line-2); animation: glitch-slide-hover .4s steps(2) forwards; }
#neural-link .cl-node::before { content: ''; position: absolute; left: -24px; top: 12px; width: 12px; height: 12px; transform: rotate(45deg);
  border: 2px solid var(--nx-line-2); background: var(--nx-deep); }
#neural-link .cl-node-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 700 11.5px var(--nx-display); letter-spacing: .14em; color: var(--nx-text-2); }
#neural-link .cl-node-state { font: 9.5px var(--nx-mono); letter-spacing: .14em; white-space: nowrap; }
#neural-link .cl-node-detail { font: 11.5px/1.5 var(--nx-mono); color: var(--nx-text-2); white-space: pre-line; }
#neural-link .cl-node.done::before { background: var(--nx-ok); border-color: var(--nx-ok); }
#neural-link .cl-node.done .cl-node-state { color: var(--nx-ok); }
#neural-link .cl-node.current { border-color: var(--nx-ok); background: linear-gradient(90deg, rgba(var(--nx-ok-rgb), .1), rgba(13, 6, 24, .7)); box-shadow: 0 0 20px -8px rgba(var(--nx-ok-rgb), .7); }
#neural-link .cl-node.current::before { border-color: var(--nx-ok); box-shadow: 0 0 10px var(--nx-ok); animation: nx-beacon 1.6s infinite; }
@keyframes nx-beacon { 50% { box-shadow: 0 0 2px var(--nx-ok); } }
#neural-link .cl-node.current .cl-node-title { color: var(--nx-text); }
#neural-link .cl-node.current .cl-node-state { color: var(--nx-ok); }
#neural-link .cl-node.next { border-style: dashed; border-color: rgba(var(--nx-lilac-rgb), .5); }
#neural-link .cl-node.next::before { border-color: var(--nx-lilac); }
#neural-link .cl-node.next .cl-node-state { color: var(--nx-lilac); }
#neural-link .cl-node.far { opacity: .55; }
#neural-link .cl-node.far .cl-node-detail { font-style: italic; color: var(--nx-muted); }
#neural-link .cl-node.far .cl-node-state { color: var(--nx-muted); }

@media (max-width: 767px) {
  #neural-link .nx-picks, #neural-link .nx-posters, #neural-link .nx-stats, #neural-link .nx-rules { grid-template-columns: 1fr; }
  #neural-link .nl-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #neural-link .nl-tab:nth-child(2) { border-right: 0; }
  #neural-link .nl-tab:nth-child(-n+2) { border-bottom: 1px solid var(--nx-line); }
  #neural-link .nx-kv { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  #neural-link .nx-wave path, #neural-link .nx-pulse, #neural-link .cl-node.current::before,
  #neural-link [class*="nx-"]:hover, #neural-link .nl-tab:hover, #neural-link .cl-node:hover { animation: none !important; }
}
#hud .hud-season {
  margin-top: 6px; font-size: 10px; letter-spacing: 0.06em; color: var(--chrome-cyan);
  cursor: pointer; border: 1px solid transparent; padding: 4px 0;
}
#hud .hud-season:hover { color: #7aeeff; text-decoration: underline; }
#hud .hud-warlord {
  margin-left: 6px; padding: 1px 6px; font-size: 9px; letter-spacing: 0.1em;
  color: #1a1208; background: #f5c842; vertical-align: middle;
}
/* ── Language button (public/i18n.js) — the same quiet chip as MANUAL, a cyan ring for an icon ── */
#btn-lang {
  font: 10px var(--chrome-font); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px 6px 20px; cursor: pointer; flex-shrink: 0; position: relative;
  color: var(--chrome-muted); border: none; background: transparent; box-shadow: none;
  transition: color 0.15s;
}
#btn-lang::before {
  content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; border: 1px solid #00fff5; box-shadow: 0 0 6px rgba(0, 255, 245, 0.5); opacity: 0.85;
}
#btn-lang:hover { color: var(--chrome-text); }
@media (max-width: 767px) { #btn-lang { padding: 4px 6px 4px 16px; font-size: 9px; letter-spacing: 0.8px; } }
/* ── OPERATOR MANUAL button ── */
#btn-manual {
  font: 10px var(--chrome-font); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px 6px 20px; cursor: pointer; flex-shrink: 0; position: relative;
  color: var(--chrome-muted); border: none; background: transparent; box-shadow: none;
  transition: color 0.15s;
}
#btn-manual::before {
  content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid #ff3860; opacity: 0.8;
}
#btn-manual:hover {
  color: var(--chrome-text);
  animation: nl-glitch 0.35s steps(2) 1;
}
@media (max-width: 767px) { #btn-manual { padding: 4px 8px 4px 16px; font-size: 9px; letter-spacing: 0.8px; } }

#btn-feedback {
  font: 10px var(--chrome-font); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px 6px 20px; cursor: pointer; flex-shrink: 0; position: relative;
  color: var(--chrome-muted); border: none; background: transparent; box-shadow: none;
  transition: color 0.15s;
}
#btn-feedback::before {
  content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid #ff9fb3; opacity: 0.8;
}
#btn-feedback:hover {
  color: var(--chrome-text);
  animation: nl-glitch 0.35s steps(2) 1;
}
@media (max-width: 767px) { #btn-feedback { padding: 4px 8px 4px 16px; font-size: 9px; letter-spacing: 0.8px; } }

/* APP WINDOW (world/fullscreen.js): only on a computer whose browser can install the game. */
#btn-app {
  font: 10px var(--chrome-font); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px 6px 20px; cursor: pointer; flex-shrink: 0; position: relative;
  color: var(--chrome-muted); border: none; background: transparent; box-shadow: none;
  transition: color 0.15s;
}
#btn-app:hover { color: var(--chrome-text); animation: nl-glitch 0.35s steps(2) 1; }

#btn-support {
  font: 10px var(--chrome-font); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px 6px 20px; cursor: pointer; flex-shrink: 0; position: relative;
  color: var(--chrome-muted); border: none; background: transparent; box-shadow: none;
  transition: color 0.15s;
  animation: support-amber-label 11s steps(1, end) infinite;
}
#btn-support::before {
  content: ''; position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 6px solid #ffd84a; opacity: 0.55;
  animation: support-amber-led 11s steps(1, end) infinite;
}
#btn-support:hover {
  color: #ffd84a;
}
#btn-support:hover::before {
  animation: none;
  opacity: 1;
}
@keyframes support-amber-label {
  0%, 68% { color: var(--chrome-muted); text-shadow: none; }
  70%, 82% { color: #ffd84a; text-shadow: 0 0 8px rgba(255, 216, 74, 0.55); }
  84%, 100% { color: var(--chrome-muted); text-shadow: none; }
}
@keyframes support-amber-led {
  0%, 68% { opacity: 0.5; }
  70% { opacity: 1; }
  72% { opacity: 0.25; }
  74% { opacity: 1; }
  76% { opacity: 0.3; }
  78% { opacity: 1; }
  80% { opacity: 0.35; }
  82% { opacity: 1; }
  84%, 100% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  #btn-support, #btn-support::before { animation: none; }
}
@media (max-width: 767px) { #btn-support { padding: 4px 8px 4px 16px; font-size: 9px; letter-spacing: 0.8px; } }

#support-overlay {
  --chrome-text: #e8e2ff;
  --chrome-secondary: #b0a4d8;
  --chrome-muted: #948ab8;
  --chrome-font: 'Share Tech Mono', Consolas, 'Courier New', monospace;
  --chrome-display: Orbitron, 'Share Tech Mono', sans-serif;
  position: fixed; inset: 0; z-index: 180;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  font-family: var(--chrome-font); color: var(--chrome-text);
}
#support-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
#support-overlay .sp-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 14, 0.72);
}
#support-overlay .sp-panel {
  position: relative; width: min(440px, 100%);
  background: #0c101c; border: 1px solid #3a3010;
  border-top: 2px solid #E6B800;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  padding: 18px 18px 16px;
}
#support-overlay .sp-eyebrow {
  font-size: 9px; letter-spacing: 0.22em; color: #E6B800;
  margin-bottom: 4px;
}
#support-overlay .sp-title {
  font-family: var(--chrome-display); font-size: 15px; letter-spacing: 0.12em;
  margin: 0 0 12px; color: #E6B800;
}
#support-overlay .sp-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; cursor: pointer;
  color: var(--chrome-muted); background: transparent;
  border: 1px solid #3a3010; font-size: 14px;
}
#support-overlay .sp-close:hover { color: #E6B800; border-color: #E6B800; }
#support-overlay .sp-copy {
  font-size: 12px; color: var(--chrome-secondary); line-height: 1.55; margin: 0 0 12px;
  white-space: pre-line;
}
#support-overlay .sp-unconfigured {
  font-size: 11px; letter-spacing: 0.08em; color: #E6B800; margin: 0 0 12px;
}
#support-overlay .sp-open {
  display: block; width: 100%; text-align: center; text-decoration: none;
  font: 11px var(--chrome-font); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 10px 12px; cursor: pointer;
  color: #120c00; background: #E6B800; border: 1px solid #b89400;
}
#support-overlay .sp-open:hover { background: #ffd84a; }
#support-overlay .sp-open.off {
  opacity: 0.4; cursor: not-allowed; pointer-events: none;
}
#support-overlay .sp-foot {
  margin: 10px 0 0; font-size: 10px; letter-spacing: 0.04em; color: var(--chrome-muted);
}

#feedback-overlay {
  --chrome-text: #e8e2ff;
  --chrome-secondary: #b0a4d8;
  --chrome-muted: #948ab8;
  --chrome-cyan: #37d5f5;
  --chrome-ok: #37f5a3;
  --chrome-alert: #f55858;
  --chrome-font: 'Share Tech Mono', Consolas, 'Courier New', monospace;
  --chrome-display: Orbitron, 'Share Tech Mono', sans-serif;
  position: fixed; inset: 0; z-index: 180;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  font-family: var(--chrome-font); color: var(--chrome-text);
}
#feedback-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
#feedback-overlay .fb-backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 14, 0.72);
}
#feedback-overlay .fb-panel {
  position: relative; width: min(440px, 100%);
  background: #0c101c; border: 1px solid #2a3a58;
  border-top: 2px solid var(--chrome-cyan);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  padding: 18px 18px 16px;
}
#feedback-overlay .fb-eyebrow {
  font-size: 9px; letter-spacing: 0.22em; color: var(--chrome-cyan);
  margin-bottom: 4px;
}
#feedback-overlay .fb-title {
  font-family: var(--chrome-display); font-size: 15px; letter-spacing: 0.12em;
  margin: 0 0 10px;
}
#feedback-overlay .fb-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; cursor: pointer;
  color: var(--chrome-muted); background: transparent;
  border: 1px solid #2a3a58; font-size: 14px;
}
#feedback-overlay .fb-close:hover { color: var(--chrome-cyan); border-color: var(--chrome-cyan); }
#feedback-overlay .fb-copy {
  font-size: 11px; color: var(--chrome-secondary); line-height: 1.55; margin: 0 0 12px;
}
#feedback-overlay .fb-kinds { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
#feedback-overlay .fb-kind {
  font: 700 10px var(--chrome-font); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; cursor: pointer; color: var(--chrome-muted);
  border: 1px solid #2a3a58; background: #0a0e18;
}
#feedback-overlay .fb-kind.on {
  color: #0a1220; background: var(--chrome-cyan); border-color: var(--chrome-cyan);
}
#feedback-overlay textarea {
  width: 100%; min-height: 140px; resize: vertical;
  font: 12px/1.5 var(--chrome-font); color: var(--chrome-text);
  background: #080c16; border: 1px solid #2a3a58; padding: 10px;
  box-sizing: border-box;
}
#feedback-overlay textarea:focus { outline: none; border-color: var(--chrome-cyan); }
#feedback-overlay .fb-meta {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px; color: var(--chrome-muted); margin: 6px 0 12px;
}
#feedback-overlay .fb-error { font-size: 11px; color: var(--chrome-alert); min-height: 16px; margin: 0 0 8px; }
#feedback-overlay .fb-error.ok { color: var(--chrome-ok); }
#feedback-overlay .fb-send {
  width: 100%; cursor: pointer;
  font: 700 11px var(--chrome-font); letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 12px; color: #0a1220;
  background: var(--chrome-cyan); border: 1px solid var(--chrome-cyan);
}
#feedback-overlay .fb-send:hover { background: #7ae8ff; }
#feedback-overlay .fb-send:disabled { opacity: 0.45; cursor: not-allowed; }


/* Neural Link sections in their own colours (owner, 2026-10-08: "too purple, everything blends").
   The head and the tab strip stay the Neural Link's magenta; below them each section re-tints the
   theme tokens its cards read — the panels, lines, muted text and the default card accent — and
   the body behind them: OPERATOR cyan, SYNDICATE indigo (so the syndicate's own colour stands out
   on AFFILIATION), WANTED red, CLEARANCE green. */
#neural-link .nl-tab[data-tab="operator"] { --c: 69, 232, 255; }
#neural-link .nl-tab[data-tab="syndicate"] { --c: 124, 140, 255; }
#neural-link .nl-pane[data-pane="operator"] {
  --nx-panel: #0c1a24; --nx-panel-2: #0f2130; --nx-deep: #071119; --nx-line: #1d3a4c; --nx-line-2: #2a5470;
  --nx-text-2: #bfe3ee; --nx-muted: #7aa0ae; --nx-lilac: #45e8ff; --nx-lilac-rgb: 69, 232, 255;
}
#neural-link .nl-pane[data-pane="syndicate"] {
  --nx-panel: #10132e; --nx-panel-2: #141a3c; --nx-deep: #090b1d; --nx-line: #262f66; --nx-line-2: #36429a;
  --nx-text-2: #c6ccf2; --nx-muted: #8088b8; --nx-lilac: #7c8cff; --nx-lilac-rgb: 124, 140, 255;
  --nx-blue: #5aa9ff;
}
#neural-link .nl-pane[data-pane="wanted"] {
  --nx-panel: #1f0b13; --nx-panel-2: #26101a; --nx-deep: #12060b; --nx-line: #4a1a28; --nx-line-2: #6e2638;
  --nx-text-2: #f0c4ce; --nx-muted: #b07a88; --nx-lilac: #ff5c7a; --nx-lilac-rgb: 255, 92, 122;
}
#neural-link .nl-pane[data-pane="clearance"] {
  --nx-panel: #0b1d17; --nx-panel-2: #0e241d; --nx-deep: #06120e; --nx-line: #1d4a3a; --nx-line-2: #2a6a52;
  --nx-text-2: #c2ecd9; --nx-muted: #78a894; --nx-lilac: #37f5a3; --nx-lilac-rgb: 55, 245, 163;
}
/* The scrolling body takes the open section's tint, with the same dot grid. */
#neural-link .nl-body { transition: background-color .3s; }
#neural-link .nl-body:has(> .nl-pane.active[data-pane="operator"]) { background: radial-gradient(circle at 1px 1px, rgba(69, 232, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px, #08141c; }
#neural-link .nl-body:has(> .nl-pane.active[data-pane="syndicate"]) { background: radial-gradient(circle at 1px 1px, rgba(124, 140, 255, .08) 1px, transparent 1.5px) 0 0 / 22px 22px, #0a0d22; }
#neural-link .nl-body:has(> .nl-pane.active[data-pane="wanted"]) { background: radial-gradient(circle at 1px 1px, rgba(255, 92, 122, .07) 1px, transparent 1.5px) 0 0 / 22px 22px, #14070c; }
#neural-link .nl-body:has(> .nl-pane.active[data-pane="clearance"]) { background: radial-gradient(circle at 1px 1px, rgba(55, 245, 163, .07) 1px, transparent 1.5px) 0 0 / 22px 22px, #07140f; }

/* Syndicates unlock at Clearance 3: a locked tab, then a NEW mark until it is first opened. */
#neural-link .nl-tab.locked { opacity: .55; }
#neural-link .nl-tab.is-new { animation: nl-new-glow 1.8s ease-in-out infinite; }
@keyframes nl-new-glow { 50% { box-shadow: inset 0 0 22px rgba(var(--c), .35); } }
#neural-link .nl-new-tag, #btn-neural-link .nl-btn-new {
  padding: 1px 5px; font: 700 8px var(--chrome-font, monospace); letter-spacing: .14em; color: #0a0d22;
  background: #7c8cff; box-shadow: 0 0 10px #7c8cff; animation: cl-tag 1s steps(2) infinite;
}
#neural-link .nl-new-tag { position: absolute; top: 6px; right: 6px; }
#btn-neural-link.has-new { position: relative; }
/* After the label, inside the button: its cut corners (clip-path, world-09-skin.css) hid a tag that
   sat outside, so only a faint sliver of it glowed (owner, 2026-10-10). */
#btn-neural-link .nl-btn-new { position: static; display: inline-block; margin-left: 8px; vertical-align: middle; line-height: 1.2; pointer-events: none; text-shadow: none; }
@keyframes cl-tag { 50% { opacity: .55; } }

/* The language picker (public/i18n.js, docs/I18N.md). */
.lang-menu { position: fixed; z-index: 400; display: flex; flex-direction: column; min-width: 150px; padding: 4px;
  background: rgba(6, 14, 22, 0.97); border: 1px solid rgba(0, 255, 245, 0.35); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
.lang-menu button { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; background: none; border: 0; cursor: pointer;
  color: #cfe9ef; font: 12px var(--chrome-font, monospace); text-align: left; letter-spacing: 0.06em; text-transform: none; }
.lang-menu button b { color: #00fff5; min-width: 22px; font-weight: 700; }
.lang-menu button:hover, .lang-menu button:focus-visible { background: rgba(0, 255, 245, 0.1); }
.lang-menu button.on { color: #00fff5; }
#neural-link .nx-picks-locked { opacity: .5; filter: saturate(.5); }

/* Phone login card (2026-10-09): the QR on white with its quiet zone (cameras read it best that
   way), the 6-digit code big beside it, and the time left. */
#neural-link .nx-pair { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
#neural-link .nx-qr { width: 156px; height: 156px; flex: none; border-radius: 4px; box-shadow: 0 0 0 1px rgba(var(--nx-lilac-rgb), .5), 0 0 18px rgba(var(--nx-lilac-rgb), .25); }
#neural-link .nx-pair-side { display: grid; gap: 6px; justify-items: start; }
#neural-link .nx-pair-code { font: 700 30px/1 var(--nx-display); letter-spacing: .16em; color: var(--nx-text); text-shadow: 0 0 12px rgba(var(--nx-lilac-rgb), .5); }
#neural-link .nx-pair-left { font: 12px var(--nx-mono); color: var(--nx-lilac); }
#neural-link .nx-err { color: var(--nx-danger); }