/* ============================================================================
   Drag(*)nBall Z: Fighter's Edition — SCOUTER-TECH // LOCK-ON (app.css)
   ----------------------------------------------------------------------------
   The WHOLE site is one full-screen terminal application — a scouter lens that
   reads power levels. Green = scan/data, amber = secondary readout, orange =
   brand/locked/commit, gold = names & links, red = threat/admin.
   Every readout binds to REAL data. Reduced-motion safe. No looping ambience.
   ========================================================================= */

/* ---- design tokens ------------------------------------------------------ */
:root {
  /* surfaces — green-black instrument glass */
  --bg:        #040605;   /* viewport void */
  --bg-win:    #070a09;   /* terminal window body */
  --bg-pane:   #060908;   /* readout panes (.box) */
  --bg-bar:    #0b100d;   /* title/menu bars, thead strips, .box-hd */
  --bg-raise:  #0f1512;   /* hover raise / selected rows */
  --bg-well:   #020403;   /* input wells, .cli-wrap, .play terminal */

  /* structure */
  --line:      #17211c;   /* hairlines, row rules */
  --line-hot:  #2a3a31;   /* emphasized borders, chips, input borders */
  --line-lock: #3d5648;   /* focused/locked frames, scrollbar thumb hover */

  /* phosphor + brand */
  --green:     #4df2a2;   /* primary phosphor data: PL, online, lock states */
  --green-dim: #2c8f63;   /* passive ticks, meters at rest */
  --amber:     #ffb454;   /* secondary readout, changed-state, panel titles */
  --orange:    #ff8c1a;   /* Saiyan orange: brand, active tab, primary CTA */
  --orange-dk: #c96a0f;
  --gold:      #ffc24b;   /* dragonball gold: links, fighter names */
  --red:       #ff4d4d;   /* threat / alert / admin channel */

  /* text */
  --fg:        #e9f4ee;   /* near-white, faint green cast */
  --fg-dim:    #9db4a8;   /* secondary prose — the prose floor */
  --fg-faint:  #5f7268;   /* labels/decor ONLY, never body copy */

  /* glows — one green, one orange, one red; all subtle */
  --glow:      0 0 0.4em rgba(255,140,26,0.40);
  --glow-grn:  0 0 0.45em rgba(77,242,162,0.35);
  --glow-red:  0 0 0.4em rgba(255,77,77,0.45);

  /* race channel — row ticks, race names, profile bands */
  --race-saiyan:    #ff9a2e;
  --race-human:     #e9f4ee;
  --race-halfbreed: #ffb454;
  --race-namekian:  #5ce86e;
  --race-android:   #5cd3e8;
  --race-icer:      #8fb8ff;
  --race-demon:     #ff5a5a;
  --race-kaio:      #b48cff;
  --race-genie:     #ffd166;
  --race-spirit:    #c9d2ff;
  --race-alien:     #9be85c;
  --race-yardratian:#ff8ad4;
  --race-immortal:  #ffe680;
  --race-bioandroid:#4fc98a;
  --race-mutant:    #77e6c8;
  --race-saibaman:  #8edb55;
  --race-arlian:    #e29aff;
  --race-shinjin:   #c6a4ff;
  --race-god:       #ffe06d;
  --race-makyan:    #64dfb3;
  --race-kanassan:  #82c8ff;
  --race-diety:     #ffe789;
  --race-deity:     #ffe789;
  --race-angel:     #b9efff;

  /* ki / PL magnitude bands — .plm meters + FORMS tier climb */
  --ki-1: #2c8f63;
  --ki-2: #4df2a2;
  --ki-3: #ffb454;
  --ki-4: #ff8c1a;
  --ki-5: #ff4d4d;

  /* leaderboard podium metals (rank glyphs #1/#2/#3) */
  --rank-1: #ffcf5c;
  --rank-2: #c8d2ea;
  --rank-3: #d29a6b;

  /* channel-scoped instrument vars (admin flips these red via .pane-admin) */
  --tick:      var(--green-dim);
  --tick-hot:  var(--green);
  --hd-tick:   var(--green);
  --lock:      var(--green);
  --lock-wash: rgba(77,242,162,0.05);

  /* fonts + spacing */
  --mono: 'Share Tech Mono', ui-monospace, 'Cascadia Code', 'DejaVu Sans Mono', monospace;
  --ui:   'Rajdhani', var(--mono);
  --pad:  clamp(0.6rem, 1.4vw, 1.1rem);
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: clamp(14px, 1.1vw + 0.5vh, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* the window owns scrolling */
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--orange); }
::selection { background: var(--green); color: #03170d; }
:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }

/* thin terminal scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-hot) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-hot); border: 2px solid var(--bg-win); }
*::-webkit-scrollbar-thumb:hover { background: var(--line-lock); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- CRT overlay (static — no flicker) ---------------------------------- */
.crt {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0.10) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(120% 100% at 50% 0%, rgba(77,242,162,0.03), transparent 55%),
    radial-gradient(120% 120% at 50% 50%, transparent 66%, rgba(0,0,0,0.5) 100%);
}

/* ============================================================================
   Terminal window
   ========================================================================= */
#app {
  --app-margin: clamp(0px, 1.2vmin, 14px);
  /* anchor top/left/right, but drive HEIGHT off the DYNAMIC viewport (dvh) rather than a bottom:0 stretch.
     `inset:0` fixed resolves to the LARGE viewport on mobile, so the bottom (the input row) hid behind the
     URL bar; `100dvh` tracks the currently-visible height as the browser chrome shows/hides, so the shell
     always fits with no page scroll. `vh` is the fallback for the (few) engines without dvh. */
  position: fixed; inset: 0 0 auto 0;
  height: calc(100vh - 2 * var(--app-margin));
  height: calc(100dvh - 2 * var(--app-margin));
  display: grid;
  grid-template-rows: auto auto 1fr;
  /* minmax(0,1fr): without it the single auto column inflates to the titlebar's
     nowrap min-content (~464px) and every page hard-clips on phones. */
  grid-template-columns: minmax(0, 1fr);
  margin: var(--app-margin);
  background: var(--bg-win);
  border: 1px solid var(--line-hot);
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(0,0,0,0.7), inset 0 0 90px rgba(0,0,0,0.5);
  overflow: hidden;
}
#app.boot {
  display: grid; place-items: center; grid-template-rows: none;
  color: var(--green);
}
.boot-line { font-family: var(--mono); letter-spacing: 0.05em; }
.boot-line::after { content: '_'; animation: blink 1s steps(1) infinite; }

/* ---- title bar ----------------------------------------------------------- */
.titlebar {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.45rem 0.8rem;
  background: var(--bg-bar);
  border-bottom: 1px solid var(--line-hot);
  user-select: none;
  min-width: 0; /* defensive: never let the nowrap row set the grid's min-content */
}
/* instrument LEDs — square, seamed; green-dim / amber / orange (no macOS dots) */
.dots { display: flex; gap: 0.4rem; align-items: center; }
.dots i {
  width: 0.45rem; height: 0.45rem; border-radius: 1px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4);
}
.dots i:nth-child(1) { background: var(--green-dim); }
.dots i:nth-child(2) { background: var(--amber); }
.dots i:nth-child(3) { background: var(--orange); }

.titlebar .title {
  font-family: var(--mono);
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.titlebar .title b { color: var(--orange); font-weight: 400; text-shadow: var(--glow); }
.titlebar .title .db { color: var(--gold); }

.titlebar .spacer { flex: 1; }
.titlebar .stat {
  font-family: var(--mono); font-size: 0.82em;
  color: var(--fg-faint); white-space: nowrap;
}
.titlebar .stat b { color: var(--green); font-weight: 400; }

/* ---- menu bar (tabs) — green = scanning, orange = locked ----------------- */
.menubar {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0;
  padding: 0 0.4rem;
  background: var(--bg-bar);
  border-bottom: 1px solid var(--line);
  /* NO overflow-x: auto -- with flex-wrap:wrap the tabs wrap onto a 2nd row, and `overflow-x:auto`
     makes the browser compute `overflow-y:auto` too, spawning a stray scrollbar in the nav (login/discord
     corner). The menubar is an `auto` grid row, so it just grows to fit the wrapped tabs. */
  overflow: visible;
}
.tab {
  appearance: none; background: none; border: none;
  font-family: var(--mono); font-size: 0.92em; color: var(--fg-dim);
  letter-spacing: 0.08em;
  padding: 0.5rem 0.55rem;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 120ms ease;
}
.tab .br { color: var(--fg-faint); }
.tab:hover { color: var(--green); }
.tab:hover .br { color: var(--green-dim); }
.tab.active { color: var(--orange); text-shadow: var(--glow); }
.tab.active .br { color: var(--orange); }
.tab.active::after {
  content: ''; position: absolute; left: 0.35rem; right: 0.35rem; bottom: -1px;
  height: 2px; background: var(--orange); box-shadow: var(--glow);
}
.tab.tab-admin { color: var(--red); }
.tab.tab-admin .br { color: var(--red); }
.tab.tab-admin:hover, .tab.tab-admin:hover .br { color: var(--red); }
.tab.tab-admin.active { color: var(--red); text-shadow: var(--glow-red); }
.tab.tab-admin.active .br { color: var(--red); }
.tab.tab-admin.active::after { background: var(--red); box-shadow: var(--glow-red); }
.spacer-tab { flex: 1; min-width: .4rem; pointer-events: none; }
.tab.tab-logout { color: var(--fg-dim); }
.tab.tab-logout .br { color: var(--fg-faint); }
.tab.tab-logout:hover { color: var(--red); }
.tab.tab-logout:hover .br { color: var(--red); }
/* Discord link — blurple accent, always in the bar. */
.tab.tab-discord { color: #7d86f7; text-decoration: none; }
.tab.tab-discord .br { color: #5865f2; }
.tab.tab-discord:hover, .tab.tab-discord:hover .br { color: #5865f2; }
.tab:focus-visible { outline: 1px dashed var(--green); outline-offset: -3px; }

/* ============================================================================
   Terminal body: command line + scrolling pane
   ========================================================================= */
.term-body {
  display: grid; grid-template-rows: auto 1fr;
  min-height: 0;
  position: relative;             /* hosts the route scan-sweep */
  background: var(--bg-win);
}
.cmdline {
  display: flex; align-items: baseline; gap: 0.5ch;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  color: var(--fg);
  white-space: pre;
  overflow: hidden;
}
.cmdline .prompt { color: var(--green); }
.cmdline .prompt .at { color: var(--fg-dim); }
.cmdline .prompt .host { color: var(--amber); }
.cmdline .prompt .path { color: var(--gold); }
.cmdline .cmd { color: var(--fg); }

/* the live blinking cursor — the only element on the site that blinks */
.cursor {
  display: inline-block; width: 0.62ch; height: 1.05em;
  margin-left: 0.1ch; transform: translateY(0.15em);
  background: var(--green); box-shadow: var(--glow-grn);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* the scroll region that holds the active pane */
.viewport {
  min-height: 0; overflow: auto;
  padding: var(--pad);
}
/* (Zhayl) the PLAY view mounts as `#viewport > .pane > .play`; the `.pane` wrapper is content-sized, so
   CSS percentage/flex heights up the chain didn't constrain the cockpit and it GREW with the text stream.
   play.js now MEASURES the available space and sets `.play`'s height explicitly (px) — see fitPlayHeight —
   so this just guards the wrapper from adding its own scroll. The internal panes (`.play-out`, the rail)
   have their own `overflow-y:auto`, so the stream/map scroll INSIDE the fixed cockpit. */
.pane-play { min-height: 0; overflow: hidden; padding: 0; }
.pane-play > .play { max-height: 100%; }
/* On the PLAY route the content-body must not add its OWN padding/scroll: the cockpit is height-locked and
   its panes (.play-out, the rail, the map) scroll INTERNALLY, so the PAGE never scrolls. Scoped via :has so
   every other route keeps its normal padded, scrollable viewport. (play.js adds .pane-play to the pane.) */
.viewport:has(> .pane-play) { padding: 0; overflow: hidden; }

/* ---- route scan-sweep (replaces the old pane-in translate) --------------- */
.pane { animation: none; }
.scan-sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--green); opacity: 0.22;
  box-shadow: var(--glow-grn);
  pointer-events: none; z-index: 60;
}
@media (prefers-reduced-motion: no-preference) {
  .scan-sweep { animation: scan-sweep 240ms linear both; }
}
@keyframes scan-sweep { from { top: 0; } to { top: 100%; } }

/* ---- framed panes — HUD-glass corner ticks -------------------------------
   ::before carries the dim ticks (always on), ::after the bright ticks that
   cross-fade in on hover / focus-within. Overlays are pointer-events:none and
   only paint 8px corner arms, so scrollbars and sticky theads stay usable. */
.box {
  border: 1px solid var(--line-hot);
  background: var(--bg-pane);
  margin: 0 0 var(--pad);
  position: relative;
}
.box::before, .box::after,
.modal-win::before, .play::before {
  content: ''; position: absolute; inset: -1px;
  pointer-events: none; z-index: 3;
  background-image:
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk)),
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk)),
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk)),
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk));
  background-repeat: no-repeat;
  background-position:
    left top, left top, right top, right top,
    left bottom, left bottom, right bottom, right bottom;
  background-size:
    8px 1px, 1px 8px, 8px 1px, 1px 8px,
    8px 1px, 1px 8px, 8px 1px, 1px 8px;
}
.box::before { --tk: var(--tick); }
.box::after { --tk: var(--tick-hot); opacity: 0; transition: opacity 120ms ease-out; }
.box:hover::after, .box:focus-within::after { opacity: 1; }
/* locked frames: modals, the play terminal, the hero — full-brightness ticks */
.modal-win::before, .play::before { --tk: var(--tick-hot); }
.box.tick-hot::before { --tk: var(--tick-hot); }

.box > .box-hd {
  display: flex; align-items: center; gap: 0.6ch;
  padding: 0.35rem 0.7rem;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--hd-tick), var(--hd-tick)) no-repeat left bottom / 26px 2px,
    linear-gradient(180deg, var(--bg-bar), var(--bg-pane));
  color: var(--amber);
  font-family: var(--ui); font-weight: 600;
  letter-spacing: 0.18em; font-size: 0.82em;
  text-transform: uppercase;
}
.box > .box-hd::before { content: '\25B8\00A0'; color: var(--hd-tick); }
/* right slot — a REAL readout only ("13 SCANNED", "85 ENTRIES") */
.box-hd .hd-r {
  margin-left: auto;
  font-family: var(--mono); font-weight: 400;
  font-size: 0.9em; letter-spacing: 0.08em;
  color: var(--fg-faint); text-transform: uppercase;
}
.box > .box-bd { padding: var(--pad); }

/* ascii art block */
.ascii {
  font-family: var(--mono); white-space: pre; line-height: 1.05;
  margin: 0; color: var(--orange);
  text-shadow: var(--glow);
  font-size: clamp(7px, 1.55vw, 15px);
  overflow-x: auto;
}
.ascii.gold { color: var(--gold); text-shadow: 0 0 0.4em rgba(255,194,75,0.4); }
.ascii.green { color: var(--green); text-shadow: var(--glow-grn); }

/* generic helpers */
.muted { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.hot { color: var(--orange); }
.gold { color: var(--gold); }
.grn { color: var(--green); }
.red { color: var(--red); }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: var(--pad); }
.col { flex: 1 1 18rem; min-width: 0; }
.lead { font-size: 1.02em; color: var(--fg); max-width: 62ch; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: var(--pad) 0; }

/* ---- action buttons — boxy [ LABEL ] terminal skeletons ------------------ */
.btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.6ch;
  font-family: var(--mono); font-size: 0.95em; letter-spacing: 0.06em;
  color: var(--orange); background: transparent;
  border: 1px solid var(--orange-dk);
  padding: 0.45rem 0.9rem;
  white-space: nowrap; flex-shrink: 0; max-width: 100%; box-sizing: border-box; justify-content: center;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.btn::before { content: '['; color: var(--gold); }
.btn::after  { content: ']'; color: var(--gold); }
.btn:hover { background: var(--orange); color: #1a0e00; box-shadow: var(--glow); }
.btn:hover::before, .btn:hover::after { color: #1a0e00; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }
.btn:disabled { opacity: 0.32; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; box-shadow: none; }
.btn.scan:disabled:hover { color: var(--green); }
.btn.scan:disabled:hover::before, .btn.scan:disabled:hover::after { color: var(--green-dim); }
/* scan variant — non-command actions: search, filters, pagers, category chips */
.btn.scan { color: var(--green); border-color: var(--line-lock); }
.btn.scan::before, .btn.scan::after { color: var(--green-dim); }
.btn.scan:hover { background: var(--green); color: #03170d; box-shadow: var(--glow-grn); }
.btn.scan:hover::before, .btn.scan:hover::after { color: #03170d; }
.btn.ghost { color: var(--fg-dim); border-color: var(--line-hot); }
.btn.ghost::before, .btn.ghost::after { color: var(--fg-faint); }
.btn.ghost:hover { color: var(--gold); border-color: var(--gold); background: transparent; box-shadow: none; }
.btn.ghost:hover::before, .btn.ghost:hover::after { color: var(--gold); }

/* simple menu list (SYSTEM menu on home) — command keys read green */
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { margin: 0; }
.menu-list a {
  display: flex; gap: 0.8ch; align-items: baseline;
  padding: 0.28rem 0.5rem;
  color: var(--fg);
}
.menu-list a:hover { color: var(--fg); }
.menu-list a:hover .d { color: var(--fg-dim); }
.menu-list .k { color: var(--green); width: 14ch; flex: none; }
.menu-list .d { color: var(--fg-dim); }

/* ---- SHARED LOCK-ON HOVER (one rule block => identical timing everywhere)
   instant-on (no transition on :hover), 120ms ease-out fade-off ------------ */
.cli tbody tr, .who tbody tr, .menu-list a, .adm-card, .mail-row,
.ed-list .ed-reg, .ed-entry-list .ed-entry, .ed-pal-list .ed-pal, .charmenu-item {
  transition: background-color 120ms ease-out, box-shadow 120ms ease-out;
}
.cli tbody tr:hover, .who tbody tr:hover, .menu-list a:hover, .adm-card:hover, .mail-row:hover,
.ed-list .ed-reg:hover, .ed-entry-list .ed-entry:hover, .ed-pal-list .ed-pal:hover, .charmenu-item:hover {
  transition: none;
  background: var(--lock-wash);
  box-shadow: inset 2px 0 0 var(--lock);
}

/* who's-online roster */
.who { font-family: var(--mono); width: 100%; border-collapse: collapse; }
/* scroll container for a bare .who table (home SIGNALS DETECTED) — same
   edge-fade scroll cue as .cli-wrap, on the pane surface instead of the well */
.who-wrap {
  overflow-x: auto;
  background:
    linear-gradient(90deg,  var(--bg-pane) 45%, rgba(6,9,8,0)) left  / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--bg-pane) 45%, rgba(6,9,8,0)) right / 32px 100% no-repeat local,
    linear-gradient(90deg,  rgba(77,242,162,0.28), rgba(77,242,162,0)) left  / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(77,242,162,0.28), rgba(77,242,162,0)) right / 14px 100% no-repeat scroll;
}
.who th, .who td { text-align: left; padding: 0.18rem 0.8rem 0.18rem 0; white-space: nowrap; }
.who th {
  color: var(--fg-faint); border-bottom: 1px solid var(--line);
  font-family: var(--ui); font-weight: 600; text-transform: uppercase;
  font-size: max(0.74em, 10px); letter-spacing: 0.16em; /* 10px floor: phone legibility */
}
.who td.name { color: var(--gold); }
.who td.pl { color: var(--green); text-align: right; }
.who th.pl { text-align: right; }
.who .dot { color: var(--green); }
.who-empty { color: var(--fg-dim); }
/* home WHO column: no portrait above it — stretch the box to fill the column height */
.home-who-col { display: flex; flex-direction: column; }
.who-stretch { flex: 1 1 auto; display: flex; flex-direction: column; }
.who-stretch > .box-bd { flex: 1 1 auto; overflow-y: auto; }

/* target-lock name brackets — reserved (transparent) so hover shifts nothing */
.cli td.name::before, .who td.name::before { content: '['; color: transparent; }
.cli td.name::after,  .who td.name::after  { content: ']'; color: transparent; }
.cli td.name::before, .cli td.name::after,
.who td.name::before, .who td.name::after { transition: color 120ms ease-out; }
.cli tbody tr:hover td.name::before, .cli tbody tr:hover td.name::after,
.who tbody tr:hover td.name::before, .who tbody tr:hover td.name::after {
  color: var(--lock); transition: none;
}
/* permanent lock (leaderboard row #1) */
.cli tr.lock td.name::before, .cli tr.lock td.name::after { color: var(--green); }
.cli tr.lock td { background: rgba(255,194,75,0.04); }

/* home title-bar portrait frame */
.portrait {
  border: 1px solid var(--line-hot); background: #000;
  padding: 4px; max-width: 220px; align-self: flex-start;
}
.portrait img { display: block; width: 100%; height: auto; image-rendering: auto; filter: saturate(1.05) contrast(1.05); }
.portrait figcaption { color: var(--fg-faint); font-size: 0.78em; text-align: center; padding-top: 4px; letter-spacing: 0.06em; }

/* stub / standby panes */
.standby { color: var(--fg-dim); }
.standby .ascii { color: var(--fg-faint); text-shadow: none; }

/* ---- noscript ------------------------------------------------------------ */
.noscript {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-content: center; gap: 1rem; text-align: center;
  background: var(--bg); color: var(--fg); padding: 2rem;
}
.noscript code { color: var(--green); }

/* ============================================================================
   HOME HERO — the boot of the lens
   ========================================================================= */
.home-page { max-width: 1180px; margin: 0 auto; }
.box.hero { background: #080d0b; border-color: var(--line-lock); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.hero-bd {
  display: block;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  position: relative;
  overflow: hidden;
}

.hero-l { max-width: 54rem; min-width: 0; position: relative; z-index: 1; }
.hero-kicker, .home-eyebrow {
  display: block; margin-bottom: .55rem; color: var(--green);
  font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.hero-word {
  margin: 0;
  font-family: 'Anton', var(--ui); font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 4.4rem);
  line-height: 1.04;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--fg);
  text-shadow: none;
  white-space: nowrap;
}
.hero-word .star { color: var(--gold); }
.hero-sub {
  font-family: var(--ui); font-weight: 600;
  font-size: 0.9rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--amber);
  margin: 0.3rem 0 1rem;
}
.hero-copy { max-width: 60ch; margin: 0 0 1.2rem; color: var(--fg-dim); font-size: 1.02rem; line-height: 1.65; }
.hero-stats { display: flex; gap: clamp(1.2rem, 3vw, 2.6rem); flex-wrap: wrap; margin: 0.9rem 0 1.1rem; }
.hstat { display: flex; flex-direction: column; gap: 0.15rem; }
.hstat-k {
  font-family: var(--ui); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint);
}
.hstat-v { font-family: var(--mono); font-size: 1.4em; color: var(--green); text-shadow: var(--glow-grn); }
.hstat-v .sfx { font-size: 0.68em; letter-spacing: 0.12em; color: var(--amber); margin-left: 0.4ch; }
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }

.home-lower { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, .65fr); gap: clamp(1rem, 2.4vw, 1.6rem); align-items: stretch; }
.home-lower > .home-journey { min-width: 0; }
.home-lower > .home-links { align-content: stretch; }
.home-lower > .home-links .home-link { min-height: 4.4rem; }
.home-main { display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.4rem); }
.home-section { border: 1px solid var(--line); background: var(--bg-pane); padding: clamp(1rem, 2.2vw, 1.5rem); }
.home-section-hd h2, .home-online-hd h2 { margin: 0; color: var(--fg); font-family: var(--ui); font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: .015em; }
.home-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 1.2rem; border-top: 1px solid var(--line); }
.home-step { min-width: 0; padding: 1rem 1rem .25rem 0; }
.home-step + .home-step { border-left: 1px solid var(--line); padding-left: 1rem; }
.home-step > b { display: block; margin-bottom: .7rem; color: var(--amber); font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; }
.home-step h3 { margin: 0 0 .45rem; color: var(--fg); font-family: var(--ui); font-size: .98rem; font-weight: 600; }
.home-step p { margin: 0; color: var(--fg-dim); font-size: .84rem; line-height: 1.55; }
.home-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--line); background: var(--bg-pane); }
.home-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; padding: .85rem 1rem; color: inherit; border-bottom: 1px solid var(--line); }
.home-link:nth-child(odd) { border-right: 1px solid var(--line); }
.home-link:nth-last-child(-n+2) { border-bottom: 0; }
.home-link:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.home-link:hover { background: rgba(77,242,162,.035); }
.home-link span { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.home-link b { color: var(--fg); font-family: var(--ui); font-size: .9rem; font-weight: 600; }
.home-link small { color: var(--fg-faint); font-size: .75rem; }
.home-link i { color: var(--green); font-family: var(--mono); font-style: normal; }
.home-online { position: sticky; top: 1rem; }
.home-online-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
.home-online-hd .home-eyebrow { margin-bottom: .35rem; }
.home-online-hd .hd-r { color: var(--green); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; white-space: nowrap; }
.home-online .who { font-size: .82rem; }
.home-online .who-wrap { overflow-x: hidden; background: none; }
.home-online .who { table-layout: fixed; }
.home-online .who th:nth-child(1), .home-online .who td:nth-child(1) { width: 46%; }
.home-online .who th:nth-child(2), .home-online .who td:nth-child(2) { width: 25%; }
.home-online .who th:nth-child(3), .home-online .who td:nth-child(3) { width: 29%; }
.home-online .who th, .home-online .who td { overflow: hidden; text-overflow: ellipsis; padding-right: .45rem; }
.home-online .who td:last-child, .home-online .who th:last-child { padding-right: 0; }
.home-who-link { display: block; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--green); font-family: var(--mono); font-size: .76rem; text-align: right; }
@media (max-width: 860px) {
  .home-lower { grid-template-columns: 1fr; }
  .home-online { position: static; }
}
@media (max-width: 620px) {
  .home-steps { grid-template-columns: 1fr; }
  .home-step { padding: .85rem 0; }
  .home-step + .home-step { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .home-links { grid-template-columns: 1fr; }
  .home-link, .home-link:nth-child(odd), .home-link:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .home-link:last-child { grid-column: auto; border-bottom: 0; }
}


/* ============================================================================
   Shared view primitives (CLI tables, forms, cards, play terminal)
   ========================================================================= */

/* ---- intro line above a view's content ----------------------------------- */
.view-intro { color: var(--fg-dim); margin: 0 0 var(--pad); max-width: 78ch; }
.view-intro b { color: var(--gold); font-weight: 400; }

/* ---- monospace CLI table (RACES / FORMS / WHO / TOP / ADMIN) -------------- */
.cli {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 0.9em;
  white-space: nowrap;
}
/* .cli-wrap — horizontal scroll container with an automatic edge-fade scroll cue:
   the two `local` layers ride WITH the content and mask the `scroll` glow layers
   when that edge has nothing hidden; when columns are clipped, a green fade shows
   at that edge so clipping reads as "scrollable", not "broken". */
.cli-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  background:
    linear-gradient(90deg,  var(--bg-well) 45%, rgba(2,4,3,0)) left  / 32px 100% no-repeat local,
    linear-gradient(270deg, var(--bg-well) 45%, rgba(2,4,3,0)) right / 32px 100% no-repeat local,
    linear-gradient(90deg,  rgba(77,242,162,0.28), rgba(77,242,162,0)) left  / 14px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(77,242,162,0.28), rgba(77,242,162,0)) right / 14px 100% no-repeat scroll,
    var(--bg-well);
}
/* a wide prose column (FORMS "UNLOCK", RACES "STARTING SKILLS"): absorb the
   table's leftover width and WRAP instead of widening past the viewport.
   width:100% + max-width:0 = take all slack, ignore content min-width;
   min-width keeps a readable floor (it wins over max-width per spec). */
.cli td.wide {
  white-space: normal; width: 100%; max-width: 0; min-width: 24ch;
  overflow-wrap: anywhere; /* giant unbreakable tokens (SSJ/SSJ2/... lists) must not widen the table */
}
.cli th, .cli td { padding: 0.22rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.cli thead th {
  color: var(--fg-faint);
  font-family: var(--ui); font-weight: 600; text-transform: uppercase;
  font-size: max(0.74em, 10px); letter-spacing: 0.16em; /* 10px floor: phone legibility */
  border-bottom: 1px solid var(--line-hot);
  background: var(--bg-bar);
  position: sticky; top: 0; z-index: 2;
}
.cli thead th.primary { color: var(--amber); }
.cli td.r, .cli th.r { text-align: right; }
.cli .name { color: var(--gold); }
.cli .pos { color: var(--green); }    /* positive bonus */
.cli .neg { color: var(--red); }      /* negative / drain */
.cli .zero { color: var(--fg-faint); }
.cli .pl { color: var(--green); text-align: right; }
.cli .tag {
  display: inline-block; color: var(--fg-dim); border: 1px solid var(--line-hot);
  padding: 0 0.4ch; margin-right: 0.3ch; font-size: 0.78em; border-radius: 0;
}
.cli .skill { color: var(--fg-dim); }
.cli .legend td { color: var(--amber); background: rgba(255,180,84,0.05); }
.cli caption { caption-side: top; text-align: left; color: var(--fg-faint); padding: 0.3rem 0; }

/* race channel — name color + 3px left tick on the race row */
.race-saiyan     { --race-c: var(--race-saiyan); }
.race-human      { --race-c: var(--race-human); }
.race-halfbreed  { --race-c: var(--race-halfbreed); }
.race-namekian   { --race-c: var(--race-namekian); }
.race-android    { --race-c: var(--race-android); }
.race-icer       { --race-c: var(--race-icer); }
.race-demon      { --race-c: var(--race-demon); }
.race-kaio       { --race-c: var(--race-kaio); }
.race-genie      { --race-c: var(--race-genie); }
.race-spirit     { --race-c: var(--race-spirit); }
.race-alien      { --race-c: var(--race-alien); }
.race-yardratian { --race-c: var(--race-yardratian); }
.race-immortal   { --race-c: var(--race-immortal); }
.race-bioandroid { --race-c: var(--race-bioandroid); }
.race-mutant     { --race-c: var(--race-mutant); }
.race-saibaman   { --race-c: var(--race-saibaman); }
.race-arlian     { --race-c: var(--race-arlian); }
.race-shinjin    { --race-c: var(--race-shinjin); }
.race-god        { --race-c: var(--race-god); }
.race-makyan     { --race-c: var(--race-makyan); }
.race-kanassan   { --race-c: var(--race-kanassan); }
.race-diety      { --race-c: var(--race-diety); }
.race-deity      { --race-c: var(--race-deity); }
.race-angel      { --race-c: var(--race-angel); }
.race-c { color: var(--race-c, inherit); }
.cli td.race-tick { box-shadow: inset 3px 0 0 var(--race-c, var(--line-hot)); }
.cli td.race-tick .race-c { color: var(--race-c, var(--gold)); }

/* group header rows (FORMS grouped by race) — 2px race-color band */
.cli .grp th {
  color: var(--race-c, var(--green)); background: var(--bg-bar); text-transform: none;
  font-family: var(--mono); font-weight: 400;
  letter-spacing: 0.04em; font-size: 0.86em; border-bottom: 1px solid var(--line-hot);
  box-shadow: inset 2px 0 0 var(--race-c, var(--green));
  position: static;
}
.cli .grp .gx { color: var(--fg-faint); }

/* FORMS tier climb — each tree reads as a power ascent (ki-1..ki-5) */
.cli td.tf { box-shadow: inset 3px 0 0 var(--tf-c, var(--line)); }
.cli td.tf .tno { color: var(--tf-c, var(--fg-faint)); font-size: 0.86em; margin-right: 0.6ch; }
.tf-1 { --tf-c: var(--ki-1); }
.tf-2 { --tf-c: var(--ki-2); }
.tf-3 { --tf-c: var(--ki-3); }
.tf-4 { --tf-c: var(--ki-4); }
.tf-5 { --tf-c: var(--ki-5); }

/* ---- PL magnitude meter (.plm) — 5 hard-stop segments -------------------- */
.plm {
  display: inline-block; width: 2.4ch; height: 0.55em;
  margin-right: 0.6ch;
  --p1: var(--line); --p2: var(--line); --p3: var(--line); --p4: var(--line); --p5: var(--line);
  background: linear-gradient(90deg,
    var(--p1) 0,                 var(--p1) calc(20% - 1px), var(--bg-well) calc(20% - 1px), var(--bg-well) 20%,
    var(--p2) 20%,               var(--p2) calc(40% - 1px), var(--bg-well) calc(40% - 1px), var(--bg-well) 40%,
    var(--p3) 40%,               var(--p3) calc(60% - 1px), var(--bg-well) calc(60% - 1px), var(--bg-well) 60%,
    var(--p4) 60%,               var(--p4) calc(80% - 1px), var(--bg-well) calc(80% - 1px), var(--bg-well) 80%,
    var(--p5) 80%,               var(--p5) 100%);
}
.plm.b1 { --p1: var(--ki-1); }
.plm.b2 { --p1: var(--ki-1); --p2: var(--ki-2); }
.plm.b3 { --p1: var(--ki-1); --p2: var(--ki-2); --p3: var(--ki-3); }
.plm.b4 { --p1: var(--ki-1); --p2: var(--ki-2); --p3: var(--ki-3); --p4: var(--ki-4); }
.plm.b5 { --p1: var(--ki-1); --p2: var(--ki-2); --p3: var(--ki-3); --p4: var(--ki-4); --p5: var(--ki-5); }

/* magnitude suffix span (SEPT / QUINT / ...) trailing a big PL readout —
   the band is load-bearing info in a 1e63-PL world: floor it at 10px so it
   never dips below phone legibility inside 0.9em table cells */
.pl-sfx { font-size: max(0.68em, 10px); letter-spacing: 0.12em; color: var(--amber); margin-left: 0.4ch; }

/* leaderboard podium metals */
.cli td.rk { text-align: right; color: var(--fg-faint); }
.cli td.rk-1 { color: var(--rank-1); }
.cli td.rk-2 { color: var(--rank-2); }
.cli td.rk-3 { color: var(--rank-3); }

/* WHO status channel */
.st-fight { color: var(--red); }
.st-afk { color: var(--fg-faint); }
.st-train { color: var(--amber); }
.st-pip {
  display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--red); margin-right: 0.55ch; vertical-align: baseline;
}
@media (prefers-reduced-motion: no-preference) {
  .st-pip { animation: pip-pulse 1.6s ease-in-out infinite; }
}
@keyframes pip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* a small key/legend strip under a table */
.legendbar { color: var(--fg-faint); font-size: 0.82em; margin-top: 0.5rem; }
.legendbar b { color: var(--fg-dim); font-weight: 400; }

/* ---- GUIDE step list ------------------------------------------------------ */
.steps { display: flex; flex-direction: column; gap: var(--pad); }
.step .step-hd { color: var(--gold); letter-spacing: 0.06em; }
.step .step-hd .no { color: var(--amber); margin-right: 0.6ch; letter-spacing: 0.1em; }
.step .step-intro { color: var(--fg-dim); margin: 0.15rem 0 0.5rem; }
.cmdtable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.9em; }
.cmdtable td { padding: 0.18rem 0.9rem 0.18rem 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmdtable td.c { color: var(--green); white-space: normal; word-break: break-word; width: 22ch; min-width: 14ch; }
.cmdtable td.d { color: var(--fg-dim); white-space: normal; }
.planet-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 0 1.2rem; font-family: var(--mono); font-size: 0.9em; }
.planet-grid .ph {
  color: var(--fg-faint); font-family: var(--ui); font-weight: 600;
  text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.16em;
  border-bottom: 1px solid var(--line-hot); padding-bottom: 0.2rem;
}
.planet-grid .gv { color: var(--green); text-align: right; }
.planet-grid .am { color: var(--fg-faint); text-align: right; }
.planet-grid > div { padding: 0.12rem 0; border-bottom: 1px solid var(--line); }

/* ---- forms (LOGIN / ADMIN edit) ------------------------------------------- */
.term-form { display: flex; flex-direction: column; gap: 0.7rem; max-width: 42ch; }
.field { display: flex; flex-direction: column; gap: 0.25rem; }
.field > label {
  color: var(--green);
  font-family: var(--ui); font-weight: 600;
  font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase;
}
.field > label::before { content: '> '; color: var(--green); }
.field:focus-within > label { color: var(--amber); }
.inp {
  font-family: var(--mono); font-size: 0.95em;
  background: var(--bg-well); color: var(--fg);
  border: 1px solid var(--line-hot); border-radius: 0;
  padding: 0.45rem 0.6rem;
  caret-color: var(--green);
}
.inp:focus {
  outline: none; border-color: var(--green);
  box-shadow: inset 0 0 0 1px rgba(77,242,162,0.25), var(--glow-grn);
}
.inp::placeholder { color: var(--fg-faint); }
select.inp { cursor: pointer; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green); }
.form-msg { font-size: 0.9em; min-height: 1.2em; }
.form-msg.err { color: var(--red); }
.form-msg.ok { color: var(--green); }
.form-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.form-row .inp[type="search"] { flex: 1 1 18rem; min-width: 0; max-width: 34rem; }

/* ---- account / admin cards ------------------------------------------------ */
.cards { display: flex; flex-wrap: wrap; gap: var(--pad); }
.card {
  border: 1px solid var(--line-hot); background: var(--bg-pane);
  padding: 0.7rem 0.9rem; min-width: 16rem; flex: 1 1 16rem;
}
.card .cname { color: var(--gold); font-size: 1.05em; }
.card .crow { display: flex; justify-content: space-between; gap: 1ch; color: var(--fg-dim); font-size: 0.9em; padding: 0.1rem 0; }
.card .crow b { color: var(--fg); font-weight: 400; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1.2rem; font-family: var(--mono); font-size: 0.92em; }
.kv dt { color: var(--fg-faint); }
.kv dd { margin: 0; color: var(--fg); }
.kv dd.hot { color: var(--orange); }
.kv dd.grn { color: var(--green); }
/* quiet bracket chips */
.badge { display: inline-block; border: 1px solid var(--line-hot); padding: 0 0.5ch; font-size: 0.8em; color: var(--fg-dim); border-radius: 0; }
.badge.on { color: var(--green); border-color: var(--green-dim); }
.badge.off { color: var(--fg-faint); }
.badge.wiz { color: var(--red); border-color: var(--red); }

/* live-vs-saved indicator (admin) — LIVE green / SAVED amber (real states) */
.livesaved { font-size: 0.82em; letter-spacing: 0.05em; }
.livesaved .live { color: var(--green); }
.livesaved .saved { color: var(--amber); }
.badge.saved { color: var(--amber); border-color: var(--amber); }

/* ============================================================================
   ADMIN console — red-channel scoped via .pane-admin custom-property overrides
   ========================================================================= */
.pane-admin {
  --tick: #8f2c2c;
  --tick-hot: var(--red);
  --hd-tick: var(--red);
  --lock: var(--red);
  --lock-wash: rgba(255,77,77,0.05);
}

/* ---- filter bar ------------------------------------------------------------ */
.adm-filters {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin-bottom: 0.9rem; padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}
.adm-search { position: relative; flex: 1 1 18rem; display: flex; min-width: 0; }
.adm-search .inp { flex: 1 1 auto; min-width: 0; padding-left: 2.2ch; }
.adm-search::before {
  content: '>'; position: absolute; left: 0.7ch; top: 50%; transform: translateY(-50%);
  color: var(--green); pointer-events: none; font-weight: bold;
}
.inp.slim { flex: 0 0 auto; padding: 0.45rem 0.55rem; font-size: 0.86em; }
.tog {
  display: inline-flex; align-items: center; gap: 0.5ch; user-select: none; cursor: pointer;
  color: var(--fg-dim); font-size: 0.84em; letter-spacing: 0.04em;
  border: 1px solid var(--line-hot); padding: 0.38rem 0.65rem; background: var(--bg-pane);
  transition: color 120ms ease, border-color 120ms ease;
}
.tog:hover { color: var(--gold); border-color: var(--line-lock); }
.tog input { accent-color: var(--green); cursor: pointer; margin: 0; }

/* online pip (cards + detail) */
.pip { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: 0 0 auto; display: inline-block; background: var(--fg-faint); }
.pip.on { background: var(--green); box-shadow: 0 0 0.45em var(--green); }
.pip.off { background: var(--fg-faint); }

/* ---- fighter card grid ------------------------------------------------------ */
.adm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--pad); }
.adm-grid > .who-empty { grid-column: 1 / -1; padding: 0.6rem 0; }
.adm-card {
  display: flex; flex-direction: column; gap: 0.5rem; cursor: pointer; position: relative;
  border: 1px solid var(--line-hot); background: var(--bg-pane);
  padding: 0.7rem 0.8rem;
}
.adm-card:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }
.adm-card-top { display: flex; align-items: center; gap: 0.6ch; }
.adm-card-nm { flex: 1 1 auto; min-width: 0; color: var(--gold); font-size: 1.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-card-top .badge { flex: 0 0 auto; }
.adm-card-race { color: var(--fg-dim); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-card-pl {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1ch;
  padding: 0.35rem 0; margin-top: 0.05rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.adm-card-k {
  color: var(--fg-faint); font-family: var(--ui); font-weight: 600;
  font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase;
}
.adm-card-v { color: var(--green); font-size: 1.12em; }
.adm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1ch; margin-top: auto; }
.adm-card-foot .btn { padding: 0.28rem 0.7rem; font-size: 0.82em; }
.adm-live { font-size: 0.74em; letter-spacing: 0.1em; text-transform: uppercase; }
.adm-live.on { color: var(--green); text-shadow: var(--glow-grn); }
.adm-live.off { color: var(--amber); }

/* ---- pager ------------------------------------------------------------------ */
.adm-pager { display: flex; align-items: center; justify-content: space-between; gap: 1ch; flex-wrap: wrap; margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.adm-pager-l { display: flex; align-items: center; gap: 0.9ch; }
.adm-pager .btn { padding: 0.28rem 0.7rem; font-size: 0.85em; }
.adm-pager .btn:disabled { opacity: 0.32; cursor: not-allowed; }
.adm-pager .btn:disabled:hover { background: transparent; color: var(--fg-dim); box-shadow: none; }
.adm-pager .btn:disabled:hover::before, .adm-pager .btn:disabled:hover::after { color: var(--fg-faint); }
.adm-pageind { color: var(--fg-dim); font-size: 0.88em; letter-spacing: 0.06em; }
.adm-pageind b { color: var(--amber); font-weight: 400; }
.adm-count { color: var(--fg-faint); font-size: 0.8em; }

/* ---- modal editor — a locked target (full-brightness green ticks) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.5rem, 3vw, 2rem);
  background: rgba(2, 4, 3, 0.72); backdrop-filter: blur(2px);
  animation: modal-fade 140ms ease both;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-win {
  width: min(580px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--bg-pane); border: 1px solid var(--line-lock);
  box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,0.7);
  position: relative;
  animation: modal-pop 160ms ease both;
}
/* modals are appended to <body> — always green-channel, even from ADMIN */
.modal-win { --tick-hot: var(--green); }
@keyframes modal-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.modal-bar {
  display: flex; align-items: center; gap: 0.7ch;
  padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-bar), var(--bg-pane));
}
.modal-dot { width: 0.55rem; height: 0.55rem; border-radius: 1px; flex: 0 0 auto; background: var(--green); box-shadow: var(--glow-grn); }
.modal-title { flex: 1 1 auto; min-width: 0; color: var(--gold); letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-x {
  appearance: none; flex: 0 0 auto; cursor: pointer; line-height: 1;
  background: transparent; border: 1px solid var(--line-hot); color: var(--fg-dim);
  font-family: var(--mono); padding: 0.2rem 0.55rem;
  transition: color 120ms ease, border-color 120ms ease;
}
.modal-x:hover { color: var(--red); border-color: var(--red); }
.modal-x:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }
.modal-bd { padding: var(--pad); overflow-y: auto; }
.modal-flash { padding: 0.4rem 0.65rem; margin-bottom: 0.85rem; border-left: 2px solid; font-size: 0.88em; }
.modal-flash.ok { color: var(--green); border-color: var(--green); background: rgba(77,242,162,0.06); }
.modal-flash.err { color: var(--red); border-color: var(--red); background: rgba(255,77,77,0.06); }
.modal-state { margin-bottom: 0.85rem; }
.modal-sec {
  color: var(--amber);
  font-family: var(--ui); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.76em;
  margin: 0.95rem 0 0.55rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line);
}
.adm-kv { grid-template-columns: auto 1fr; gap: 0.2rem 1.4rem; }
body.modal-open { overflow: hidden; }

/* ---- polished shared modal shell ------------------------------------------
   Every body-level dialog (profiles, item stats, mail compose, editor and
   confirmations) inherits this treatment without changing its view logic. */
.modal-backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(77, 242, 162, 0.07), transparent 34rem),
    rgba(1, 4, 3, 0.78);
  backdrop-filter: blur(4px);
}
.modal-win {
  isolation: isolate; overflow: hidden; border-color: rgba(110, 235, 176, 0.32);
  border-radius: 8px;
  background: var(--bg-pane);
  box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 24px 68px rgba(0,0,0,.76), inset 0 1px rgba(172,255,217,.04);
}
.modal-win::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(147,255,204,.035) 48%, transparent 72%);
}
.modal-bar {
  position: sticky; top: 0; z-index: 5; min-height: 2.7rem; padding: .58rem .72rem;
  border-bottom-color: rgba(108, 226, 168, .2);
  background: linear-gradient(180deg, rgba(22, 42, 33, .98), rgba(8, 17, 13, .98));
  box-shadow: 0 8px 22px rgba(0,0,0,.2); user-select: none;
}
.modal-dot { border-radius: 50%; box-shadow: 0 0 0 3px rgba(77,242,162,.09), 0 0 12px rgba(77,242,162,.7); }
.modal-title { font-family: var(--mono); font-size: .84em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.modal-x {
  width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border-radius: 5px;
  background: rgba(255,255,255,.025);
}
.modal-x:hover { background: rgba(255,77,77,.1); box-shadow: 0 0 16px rgba(255,77,77,.08); }
.modal-bd { scrollbar-width: thin; scrollbar-color: rgba(77,242,162,.34) rgba(0,0,0,.16); overscroll-behavior: contain; }
.modal-bd::-webkit-scrollbar { width: 9px; }
.modal-bd::-webkit-scrollbar-track { background: rgba(0,0,0,.16); }
.modal-bd::-webkit-scrollbar-thumb { background: rgba(77,242,162,.28); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
.modal-bd::-webkit-scrollbar-thumb:hover { background-color: rgba(77,242,162,.5); }
.modal-sec { position: relative; padding-left: .75rem; }
.modal-sec::before { content: ''; position: absolute; left: 0; top: .08rem; bottom: .38rem; width: 2px; background: var(--amber); box-shadow: 0 0 8px rgba(255,194,75,.35); }
.modal-flash { border-radius: 4px; box-shadow: inset 0 0 20px rgba(255,255,255,.015); }

@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: .35rem; }
  .modal-win { width: 100%; max-height: 94dvh; border-radius: 9px 9px 3px 3px; }
  .modal-bd { padding: clamp(.65rem, 3.5vw, 1rem); }
}

/* profile modal — target card: race band + PL hero readout */
.modal-win.race-band { border-top: 2px solid var(--race-c, var(--line-lock)); }
.pl-hero {
  font-family: var(--mono); font-size: 1.4em;
  color: var(--green); text-shadow: var(--glow-grn);
  margin: 0.2rem 0 0.7rem;
}
.pl-hero .pl-sfx { font-size: 0.68em; letter-spacing: 0.12em; color: var(--amber); }
.pl-hero .plm { height: 0.5em; margin-right: 0.8ch; }
.pl-hero-k {
  display: block;
  font-family: var(--ui); font-weight: 600;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 0.6rem;
}

/* ---- shared field editors (modal) ------------------------------------------ */
.adm-edit { display: flex; flex-direction: column; gap: 0.75rem; }
.adm-field { display: flex; flex-direction: column; gap: 0.25rem; }
.adm-flab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1ch;
  color: var(--green);
  font-family: var(--ui); font-weight: 600;
  font-size: 0.8em; letter-spacing: 0.12em; text-transform: uppercase;
}
.adm-flab .adm-cur { color: var(--fg-faint); font-family: var(--mono); font-weight: 400; font-size: 0.92em; letter-spacing: 0; text-transform: none; }
.adm-frow { display: flex; gap: 0.5rem; align-items: center; }
.adm-frow .inp { flex: 1 1 auto; min-width: 0; }
.adm-frow .btn { flex: 0 0 auto; }
/* #424 delete-character danger zone (button + inline confirm/feedback) */
.adm-danger { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.15rem; }
.adm-fb { display: block; min-height: 1em; margin-top: 0.1rem; font-size: 0.8em; color: var(--fg-faint); }
.adm-fb.ok { color: var(--green); }
.adm-fb.err { color: var(--red); }
/* ban manager — active-bans list with per-row unban buttons */
.adm-banlist { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: 360px; overflow-y: auto; }
.adm-ban-group { border: 1px solid var(--border, rgba(255,255,255,0.1)); border-radius: 6px; overflow: hidden; }
.adm-ban-head { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.3rem 0.55rem; background: rgba(255,255,255,0.04); color: var(--fg-faint); }
.adm-ban-empty { padding: 0.35rem 0.55rem; font-size: 0.8em; font-style: italic; }
.adm-ban-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; border-top: 1px solid rgba(255,255,255,0.05); }
.adm-ban-lab { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.adm-ban-val { font-size: 0.86em; word-break: break-all; }
.adm-ban-reason { font-size: 0.76em; color: var(--fg-faint); font-style: italic; }
.adm-ban-row .btn { flex: 0 0 auto; }
.adm-ban-row .adm-fb { display: inline; margin: 0; }
.inp.bad { border-color: var(--red); box-shadow: 0 0 0.3em rgba(255,77,77,0.4); }
.adm-wiz { border-top: 1px dashed var(--line-hot); padding-top: 0.8rem; margin-top: 0.1rem; }

/* ---- danger button tone (disconnect / ban / wizlock) ------------------------ */
.btn.danger { color: var(--red); border-color: var(--red); }
.btn.danger::before, .btn.danger::after { color: var(--red); }
.btn.danger:hover { background: var(--red); color: #1a0000; box-shadow: var(--glow-red); }
.btn.danger:hover::before, .btn.danger:hover::after { color: #1a0000; }

/* ---- ONLINE card action row (disconnect / ban) ------------------------------ */
.adm-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5ch; margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed var(--line); }
.adm-card-actions .btn { padding: 0.22rem 0.6rem; font-size: 0.78em; }
.adm-card-actions .adm-fb { flex: 1 1 100%; margin-top: 0.05rem; }

/* ---- SERVER CONTROL pane (MOTD / TLS / wizlock / ban) ------------------------ */
.adm-sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--pad); }
.adm-sc-card { border: 1px solid var(--line-hot); background: var(--bg-well); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; }
.adm-sc-hd {
  color: var(--amber); font-family: var(--ui); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78em;
  border-bottom: 1px solid var(--line); padding-bottom: 0.3rem;
}
.adm-sc-bd { display: flex; flex-direction: column; gap: 0.5rem; }
.adm-sc-bd p.muted { margin: 0; font-size: 0.82em; }
.adm-motd { width: 100%; resize: vertical; min-height: 24rem; box-sizing: border-box; font-family: var(--mono); font-size: 0.92rem; line-height: 1.5; color: var(--fg); background: var(--bg-well); padding: 0.5rem 0.7rem; white-space: pre; overflow: auto; }
/* button rows must wrap (never push a button outside its card/box) */
.adm-sc-bd, .adm-card-actions, .adm-tls-row, .adm-frow, .adm-filters { flex-wrap: wrap; }
.adm-sc-wide { grid-column: 1 / -1; }  /* full-width card (MOTD editor) */
.adm-tls-body { display: flex; flex-direction: column; gap: 0.3rem; }
.adm-tls-row { display: flex; align-items: center; gap: 1ch; }
.adm-tls-exp { color: var(--fg-dim); font-size: 0.86em; }

/* ---- player reports card (the in-game `report` command) --------------------- */
.adm-reports { display: flex; flex-direction: column; gap: 0.45rem; max-height: 22rem; overflow-y: auto; }
.adm-report { border: 1px solid var(--line); background: var(--bg-well); padding: 0.4rem 0.55rem; }
.adm-report-hd { display: flex; justify-content: space-between; gap: 1ch; flex-wrap: wrap; font-size: 0.8em; }
.adm-report-who { color: var(--gold); }
.adm-report-when { font-size: 0.92em; }
.adm-report-txt { color: var(--fg); white-space: pre-wrap; word-break: break-word; margin-top: 0.25rem; font-size: 0.9em; }

/* ---- admin internal tab bar --------------------------------------------------- */
.adm-console { display: flex; flex-direction: column; }
.adm-tabbar {
  display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: stretch;
  margin: 0.4rem 0 1rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line-hot);
}
.adm-tab {
  flex: 0 0 auto; appearance: none; cursor: pointer;
  font-family: var(--ui); font-weight: 600;
  font-size: 0.84em; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim); background: transparent;
  border: 1px solid var(--line); border-bottom: none;
  padding: 0.4rem 1rem; white-space: nowrap;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.adm-tab:hover { color: var(--green); border-color: var(--line-hot); }
/* the active sub-tab stays ORANGE even inside the red admin channel */
.adm-tab.active {
  color: var(--orange); border-color: var(--orange);
  background: rgba(255,138,0,0.08); text-shadow: var(--glow);
}
.adm-tab:focus-visible { outline: 1px dashed var(--green); outline-offset: -3px; }
.adm-tabpane { display: block; }
.adm-ships-tabbar {
  position: sticky; top: 0; z-index: 6;
  margin-top: 0; padding: 0.55rem 0.45rem 0.45rem;
  background: var(--bg);
  box-shadow: 0 0.45rem 0.8rem rgba(0,0,0,0.22);
}
.adm-ships-tab { font-size: 0.76em; letter-spacing: 0.08em; padding-inline: 0.7rem; }
.adm-ships-pane { min-height: 18rem; }
.adm-ships-savebar {
  position: sticky; bottom: 0; z-index: 6;
  align-items: center; margin-top: 0.7rem; padding: 0.55rem;
  border: 1px solid var(--line-hot); background: var(--bg-pane, var(--bg));
  box-shadow: 0 -0.45rem 0.8rem rgba(0,0,0,0.28);
}

/* ---- changelog tab ------------------------------------------------------------ */
.adm-change-ta { width: 100%; resize: vertical; min-height: 5rem; box-sizing: border-box; font-family: var(--mono); }
.adm-changes { display: flex; flex-direction: column; gap: 0.45rem; max-height: 30rem; overflow-y: auto; margin-top: 0.4rem; }
.adm-change { border: 1px solid var(--line); background: var(--bg-well); padding: 0.4rem 0.55rem; }
.adm-change-hd { display: flex; justify-content: space-between; gap: 1ch; flex-wrap: wrap; font-size: 0.8em; }
.adm-change-cid { color: var(--gold); }
.adm-change-date { font-size: 0.92em; }
.adm-change-txt { color: var(--fg); white-space: pre-wrap; word-break: break-word; margin-top: 0.25rem; font-size: 0.9em; }

/* ---- admin responsive ---------------------------------------------------------- */
@media (max-width: 32rem) {
  .adm-grid { grid-template-columns: 1fr; }
  .adm-sc-grid { grid-template-columns: 1fr; }
  .adm-search { flex: 1 1 100%; }
  .modal-win { width: 100%; max-height: 94vh; }
  .adm-tab { flex: 1 1 auto; text-align: center; padding: 0.4rem 0.5rem; }
}

/* access-denied pane */
.denied { color: var(--red); }
.denied .ascii { color: var(--red); text-shadow: var(--glow-red); }

/* ---- PLAY: live websocket terminal — the strongest instrument --------------- */
.play {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0;
  /* Zhayl: `minmax(0,1fr)` (not bare `1fr`) gives the OUTPUT row a 0 floor so a growing text stream
     SCROLLS inside `.play-out` instead of expanding the row + pushing the whole layout down; `overflow:
     hidden` is the belt-and-suspenders guard so nothing can ever push the outer `.viewport` to scroll. */
  overflow: hidden;
  border: 1px solid var(--line-lock); background: var(--bg-well);
  /* Zhayl report: a FIXED `calc(100dvh - <chrome>)` height is fragile — when the real chrome above
     (titlebar + menubar + command line + viewport padding + margins) is TALLER than the guessed value
     (e.g. a narrow screen wraps the menubar), `.play` grows past its `.viewport` row and the viewport
     SCROLLS, pushing the cockpit's own top bar (the options/[cockpit] control) out of view. `.viewport`
     is already the `1fr` row of the viewport-fixed `#app` grid, so simply FILL it: robust to any chrome
     height, no page/viewport scroll, the top bar always visible. (Fullscreen overrides this to 100vh.) */
  height: 100%;
  min-height: 0;
  position: relative;
}
.play-bar {
  display: flex; align-items: center; gap: 0.8ch;
  padding: 0.3rem 0.7rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-bar), var(--bg-pane));
  color: var(--fg-faint); font-size: 0.82em; letter-spacing: 0.06em;
}
/* the link pip — real connection state (green / red) */
.play-bar .lamp { width: 0.55rem; height: 0.55rem; border-radius: 1px; background: var(--fg-faint); display: inline-block; }
.play-bar.connected .lamp { background: var(--green); box-shadow: 0 0 0.5em var(--green); }
.play-bar.error .lamp { background: var(--red); box-shadow: 0 0 0.5em var(--red); }
.play-bar .grow { flex: 1; }
.play-bar .x { color: var(--fg-dim); cursor: pointer; }
.play-bar .x:hover { color: var(--orange); }
.play-out {
  overflow-y: auto; padding: 0.7rem 0.9rem;
  /* bigger low-vision-friendly default terminal text (Cockpit v2 #388); client.css
     var(--term-size) overrides this when the DISPLAY > size slider is customized. */
  font-family: var(--mono); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.5;
  /* DEFAULT (no-ANSI-color) game text reads BRIGHT WHITE — term.js palette untouched */
  white-space: pre-wrap; word-break: break-word; color: #f4f7fb;
}
.play-out .sysline { color: var(--fg-dim); font-style: italic; }

/* ---- interactive @MENTIONS (window.DBZMentions) — used by the cockpit CHAT
   pane. A live @online-player name reads in that
   fighter's race color (--mention-c), underlined, with a faint scouter glow that
   brightens on hover/focus. Offline/non-player @names never become a chip. ---- */
.chat-mention {
  color: var(--mention-c, var(--green));
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--mention-c, var(--green)) 55%, transparent);
  border-radius: 2px;
  padding: 0 1px;
  transition: color 120ms ease, text-shadow 140ms ease, background 140ms ease;
}
.chat-mention:hover,
.chat-mention:focus-visible {
  color: color-mix(in srgb, var(--mention-c, var(--green)) 80%, #ffffff);
  text-decoration-color: currentColor;
  text-shadow: 0 0 7px color-mix(in srgb, var(--mention-c, var(--green)) 60%, transparent);
  background: color-mix(in srgb, var(--mention-c, var(--green)) 14%, transparent);
  outline: none;
}
.chat-mention:focus-visible { box-shadow: 0 0 0 1px color-mix(in srgb, var(--mention-c, var(--green)) 55%, transparent); }
/* optimistic (feed-down) mentions read a touch muted until hover verifies them */
.chat-mention.pending { text-decoration-style: dotted; opacity: 0.9; }

/* the desktop hover popover — a small scouter target card floated over the page */
.mention-pop {
  position: fixed; z-index: 60; min-width: 11rem; max-width: 17rem;
  background: var(--bg-win); border: 1px solid var(--line-lock);
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(77, 242, 162, 0.05);
  padding: 0.5rem 0.6rem; font-family: var(--mono); font-size: 0.8em;
  animation: dbzMentionPop 120ms ease-out;
}
@keyframes dbzMentionPop { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.mention-pop .mp-hd { display: flex; align-items: center; gap: 0.5ch; margin-bottom: 0.2rem; }
.mention-pop .mp-name { font-weight: 600; letter-spacing: 0.03em; color: var(--green); }
.mention-pop .mp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--fg-faint); }
.mention-pop .mp-dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.mention-pop .mp-dot.off { background: var(--fg-faint); }
.mention-pop .mp-meta { color: var(--fg-dim); font-size: 0.92em; margin-bottom: 0.45rem; }
.mention-pop .mp-mail {
  display: inline-block; width: 100%; font-family: var(--mono); font-size: 0.95em;
  letter-spacing: 0.06em; color: var(--amber); background: transparent;
  border: 1px solid var(--line-lock); border-radius: 0; padding: 0.24rem 0.6rem; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.mention-pop .mp-mail:hover { background: var(--amber); color: #1a0e00; }
@media (prefers-reduced-motion: reduce) { .mention-pop { animation: none; } }

/* in-place mail COMPOSE overlay (window.openMailCompose) — a small modal on top of
   the current page so mailing never changes route (leaving /play kills the game session). */
.mc-form { max-width: none; }
.mc-form .inp { width: 100%; box-sizing: border-box; }
/* the recipient is display-only + LOCKED to the mention/profile target */
.mc-to {
  color: var(--gold); background: var(--bg-well); cursor: default;
  display: flex; align-items: center; gap: 0.5ch; letter-spacing: 0.02em;
}
.mc-to::after { content: 'locked'; margin-left: auto; color: var(--fg-faint); font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; }
/* ============================================================================
   interactive ENTITY LINKS (window.DBZEntityLinks) — items / mobs / locations,
   the DRY sibling of @mentions. Two births, one look: a server-tagged name in the
   /play scrollback (.ent-link span) and a `[item:id|Name]` chat token chip
   (.ent-link.chip). Type-tinted underline + a scouter glow on hover/focus.
   ========================================================================= */
.ent-link {
  --el-c: var(--green);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--el-c) 50%, transparent);
  border-radius: 2px; padding: 0 1px;
  transition: color 120ms ease, text-shadow 140ms ease, background 140ms ease;
}
.item-link { --el-c: #ffc24b; }   /* gold — gear */
.mob-link  { --el-c: #6fe9f0; }   /* cyan — creatures */
.loc-link  { --el-c: #5b8cff; }   /* blue — worlds */
.ent-link:hover, .ent-link:focus-visible {
  text-decoration-color: currentColor;
  text-shadow: 0 0 7px color-mix(in srgb, var(--el-c) 60%, transparent);
  background: color-mix(in srgb, var(--el-c) 14%, transparent);
  outline: none;
}
.ent-link:focus-visible { box-shadow: 0 0 0 1px color-mix(in srgb, var(--el-c) 55%, transparent); }
/* chat-token chip: a compact bracketed pill so a shared link reads as an object, not prose */
.ent-link.chip {
  color: var(--el-c);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--el-c) 40%, transparent);
  border-radius: 3px; padding: 0 0.4ch; margin: 0 0.1ch;
  background: color-mix(in srgb, var(--el-c) 10%, transparent);
  white-space: nowrap;
}
.ent-link.chip::before { content: ''; }
.ent-link.chip:hover, .ent-link.chip:focus-visible {
  background: color-mix(in srgb, var(--el-c) 20%, transparent);
  border-color: color-mix(in srgb, var(--el-c) 70%, transparent);
}

/* the hover STATS popover + the VIEW modal share these card internals */
.el-pop {
  position: fixed; z-index: 62; min-width: 12rem; max-width: min(92vw, 26rem); width: max-content;
  background: var(--bg-win); border: 1px solid var(--line-lock);
  box-shadow: 0 0.5em 1.4em rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(111, 233, 240, 0.05);
  padding: 0.55rem 0.65rem; font-family: var(--mono); font-size: 0.8em;
  animation: dbzMentionPop 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) { .el-pop { animation: none; } }
/* header + rows stay on ONE line each (a long value ellipsizes rather than wrapping the card). */
.el-card .el-hd { display: flex; align-items: baseline; gap: 0.6ch; flex-wrap: nowrap; white-space: nowrap; margin-bottom: 0.35rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.el-card .el-name { font-weight: 600; letter-spacing: 0.03em; color: var(--gold, #ffc24b); }
.mob-card .el-name { color: #6fe9f0; }
.loc-card .el-name { color: #5b8cff; }
.el-card .el-sub { color: var(--fg-faint); font-size: 0.86em; letter-spacing: 0.04em; text-transform: uppercase; }
.el-card .el-scan { color: var(--fg-faint); font-style: italic; }
.el-card .el-scan.muted { opacity: 0.85; }
.el-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.el-tag {
  font-size: 0.86em; letter-spacing: 0.03em; padding: 0.05rem 0.42rem;
  border: 1px solid var(--line-lock); border-radius: 2px; color: var(--fg-dim); white-space: nowrap;
}
.el-tag.str { color: #ff8f8f; border-color: color-mix(in srgb, #ff8f8f 45%, transparent); }
.el-tag.ki  { color: #6fe9f0; border-color: color-mix(in srgb, #6fe9f0 45%, transparent); }
.el-tag.sta { color: #46f5b8; border-color: color-mix(in srgb, #46f5b8 45%, transparent); }
.el-tag.arm { color: #5b8cff; border-color: color-mix(in srgb, #5b8cff 45%, transparent); }
.el-tag.mf  { color: #ffc24b; border-color: color-mix(in srgb, #ffc24b 45%, transparent); }
.el-tag.neg { color: #ff6b6b; border-color: color-mix(in srgb, #ff6b6b 45%, transparent); }
.el-row { display: flex; gap: 0.6ch; line-height: 1.5; flex-wrap: nowrap; white-space: nowrap; }
.el-row .el-k { color: var(--fg-faint); min-width: 5.5rem; letter-spacing: 0.03em; flex: none; }
.el-row .el-v { color: var(--fg-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.el-desc { color: var(--fg-faint); margin-top: 0.4rem; font-style: italic; line-height: 1.45; }
/* item drop-rate values in the link card/modal: loot (blue) vs world drop (gold) */
.el-drop-loot  { color: #8fb8ff; font-weight: 600; }
.el-drop-world { color: var(--gold); font-weight: 600; }
/* VIEW modal body: reuse .modal-* chrome; keep the card comfortable */
.el-modal .el-card.full { font-family: var(--mono); font-size: 0.92em; }
.el-modal .el-card.full .el-name { font-size: 1.1em; }

/* the click MENU (Link + View) — mirrors the nearby .qmenu look */
.el-menu {
  position: fixed; z-index: 64; min-width: 12rem;
  background: var(--bg-win); border: 1px solid var(--line-lock);
  box-shadow: 0 0.5em 1.2em rgba(0, 0, 0, 0.55); font-family: var(--mono); font-size: 0.82em;
}
.el-menu .el-menu-nm { padding: 0.3rem 0.6rem; color: var(--amber); border-bottom: 1px solid var(--line); letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-menu .el-menu-it { padding: 0.3rem 0.6rem; color: var(--fg-faint); cursor: pointer; }
.el-menu .el-menu-it:hover { background: var(--bg-raise); color: var(--fg-dim); }
.el-menu .el-menu-it b { color: var(--term-accent, var(--green)); font-weight: 400; }

/* ---- SELF-MENTION highlight — "someone is addressing YOU" (amber scouter tone).
   Applies to a chat line (cockpit .tline / front-page .feed-line) that @-mentions
   my own character (and isn't my own outgoing echo). ---- */
.chat-mention-me {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--amber);
  padding-left: 0.4rem !important;
  border-radius: 2px;
}
.chat-mention-me { text-shadow: 0 0 6px color-mix(in srgb, var(--amber) 22%, transparent); }
.chat-mention-me.mm-flash { animation: dbzMentionMe 1.4s ease-out 1; }
@keyframes dbzMentionMe {
  0%   { background: color-mix(in srgb, var(--amber) 55%, transparent); box-shadow: inset 3px 0 0 var(--amber), 0 0 14px color-mix(in srgb, var(--amber) 45%, transparent); }
  100% { background: color-mix(in srgb, var(--amber) 12%, transparent); box-shadow: inset 3px 0 0 var(--amber); }
}
@media (prefers-reduced-motion: reduce) { .chat-mention-me.mm-flash { animation: none; } }

/* ---- leaderboards: category chips (scan language) + pager --------------------- */
.lb-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lb-tab {
  font-family: var(--mono); font-size: 0.8em; letter-spacing: 0.05em;
  padding: 0.28rem 0.7rem; cursor: pointer;
  color: var(--green); background: transparent;
  border: 1px solid var(--line-lock); border-radius: 0;
  transition: background 120ms ease, color 120ms ease;
}
.lb-tab:hover { color: #03170d; background: var(--green); border-color: var(--green); }
.lb-tab.on { color: #1a0e00; background: var(--orange); border-color: var(--orange); }
.lb-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0; margin-top: 0.6rem; }
.lb-page { white-space: nowrap; } /* "page 1 / 20" reads as ONE token — never breaks mid-phrase */
.lb-page b { color: var(--amber); font-weight: 400; }
.play-in { display: flex; align-items: baseline; gap: 0.6ch; border-top: 1px solid var(--line); padding: 0.4rem 0.7rem; }
.play-in .ps { color: var(--green); }
.play-in input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--mono); font-size: 0.95em; color: var(--fg); caret-color: var(--green);
}

/* ============================================================================
   PLAYER DIRECTORY / PROFILE / MAIL / ACTIVE-CHARACTER
   ========================================================================= */
/* clickable player names (directory / who / home / mail) */
.name-link { color: inherit; text-decoration: none; cursor: pointer; border-bottom: 1px dotted transparent; }
.name-link:hover { border-bottom-color: var(--green); }
.name-link:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }

/* nav unread-mail badge — small orange square count */
.navbadge {
  display: inline-block; min-width: 1.4em; padding: 0 0.4ch; margin-left: 0.2ch;
  background: var(--orange); color: #1a0e00; font-size: 0.72em; font-weight: bold;
  border-radius: 0; text-align: center; vertical-align: middle;
}

/* active-character nav chooser (button + popup pick list) */
.charwrap { position: relative; display: inline-flex; align-items: center; }
.tab.tab-char { color: var(--green); }
.tab.tab-char .br { color: var(--fg-faint); }
.charmenu {
  position: fixed; z-index: 200; min-width: 12rem;
  background: var(--bg-win); border: 1px solid var(--line-lock);
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.6); padding: 0.3rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.charmenu[hidden] { display: none; }
.charmenu-item {
  background: none; border: 0; color: var(--fg);
  text-align: left; padding: 0.3rem 0.6rem; cursor: pointer; font: inherit;
}
.charmenu-item.current { color: var(--green); }

/* ---- #430 grouped nav: category dropdowns (WIKI / COMMUNITY / ACCOUNT) ------
   The flat ~15-tab row now compacts into a few CATEGORY buttons, each a
   .tab-cat that pops a FIXED .navmenu panel — the SAME mechanism as the
   active-character chooser above (fixed so it escapes the .menubar overflow-x
   clip). Boxy amber/phosphor terminal look to match the bar. */
.navwrap { position: relative; display: inline-flex; align-items: center; }

/* PLAY — the accented primary CTA in the bar (Saiyan orange, always warm) */
.tab.tab-play { color: var(--orange); }
.tab.tab-play .br { color: var(--orange-dk); }
.tab.tab-play:hover, .tab.tab-play:hover .br { color: var(--orange); text-shadow: var(--glow); }

/* an open category button glows phosphor-green while its panel is down */
.tab.tab-cat[aria-expanded="true"] { color: var(--green); }
.tab.tab-cat[aria-expanded="true"] .br { color: var(--green-dim); }

/* the popover panel — mirrors .charmenu: fixed, boxy, hard-cornered, bordered */
.navmenu {
  position: fixed; z-index: 200; min-width: 11rem;
  background: var(--bg-win); border: 1px solid var(--line-lock);
  box-shadow: 0 0.5em 1.5em rgba(0,0,0,0.6); padding: 0.3rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.navmenu[hidden] { display: none; }
.navmenu-item {
  appearance: none; background: none; border: 0; color: var(--fg-dim);
  font-family: var(--mono); font-size: 0.9em; letter-spacing: 0.06em;
  text-align: left; padding: 0.45rem 0.7rem; cursor: pointer; white-space: nowrap;
  transition: color 120ms ease, background 120ms ease;
}
.navmenu-item:hover { color: var(--green); background: var(--bg-bar); }
.navmenu-item.current { color: var(--orange); }
.navmenu-item.current::before { content: '> '; color: var(--orange); }
.navmenu-item:focus-visible { outline: 1px dashed var(--green); outline-offset: -2px; }
/* ADMIN keeps its distinct red channel styling inside the dropdown */
.navmenu-item.item-admin { color: var(--red); }
.navmenu-item.item-admin:hover { color: var(--red); background: rgba(255,77,77,0.09); }
.navmenu-item.item-admin.current, .navmenu-item.item-admin.current::before { color: var(--red); }

/* active-character card highlight (account page) */
.card.card-on { border-color: var(--green-dim); box-shadow: inset 0 0 0 1px rgba(77,242,162,0.25); }

/* mail view — TRANSMISSIONS */
.mail-list { display: flex; flex-direction: column; }
.mail-row {
  display: grid; grid-template-columns: 9rem 1fr auto; gap: 0.8rem; align-items: baseline;
  padding: 0.35rem 0.5rem; color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
/* unread rows carry the green inset edge permanently */
.mail-row.unread { color: var(--gold); box-shadow: inset 2px 0 0 var(--green); }
.mail-row .mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row .mail-when { font-size: 0.78em; }
.mail-body {
  white-space: pre-wrap; word-break: break-word; margin-top: 0.6rem;
  padding: 0.6rem; background: var(--bg-well); border: 1px solid var(--line);
}

/* ---- UPDATES — firmware log cards -------------------------------------------- */
.fw-log { display: flex; flex-direction: column; gap: 0.6rem; }
.fw-entry { border: 1px solid var(--line); background: var(--bg-well); padding: 0.5rem 0.75rem; }
.fw-date {
  font-family: var(--ui); font-weight: 600;
  font-size: 0.76em; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.25rem;
}
.fw-date .fw-cid { color: var(--fg-faint); margin-left: 0.8ch; letter-spacing: 0.08em; }
.fw-body { color: var(--fg-dim); white-space: pre-wrap; word-break: break-word; font-size: 0.92em; }
/* (updates) changelog filter toolbar: free-text search + a from/to date range */
.upd-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.9rem; margin-bottom: 0.9rem; }
.upd-lbl { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--ui);
  font-size: 0.68em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.upd-in { font-family: var(--mono); font-size: 0.9rem; color: var(--fg); background: var(--bg-well);
  border: 1px solid var(--line); border-radius: 3px; padding: 0.35rem 0.5rem; }
.upd-in:focus { outline: none; border-color: var(--amber); }
.upd-search { min-width: 16rem; }
.upd-clear { align-self: flex-end; font-family: var(--ui); font-size: 0.72em; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fg-dim); background: var(--bg-well); border: 1px solid var(--line);
  border-radius: 3px; padding: 0.4rem 0.7rem; cursor: pointer; }
.upd-clear:hover { color: var(--fg); border-color: var(--amber); }

/* ============================================================================
   AUTHORING SUITE — "the calibration bench" editor chrome
   ========================================================================= */
/* two-pane shell: catalog rail (~20rem) + inspector */
.ed-shell { align-items: flex-start; }
.ed-rail-col { flex: 1 1 20rem; max-width: 27rem; }
.ed-insp-col { flex: 2.6 1 30rem; }

/* filter well ("filter catalogs..." / "filter entries...") + live counter */
.ed-filterwrap { position: relative; display: flex; min-width: 0; }
.ed-filterwrap::before {
  content: '>'; position: absolute; left: 0.7ch; top: 50%; transform: translateY(-50%);
  color: var(--green); pointer-events: none; font-weight: bold;
}
.ed-filterwrap .inp { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; padding-left: 2.2ch; }
.ed-shown { font-family: var(--mono); font-size: 0.76em; color: var(--fg-faint); margin: 0.25rem 0 0.45rem 0.2ch; }

/* CATALOG rail rows: status pip + name + one-line description + real entry count */
.ed-list .ed-reg {
  display: flex; gap: 0.8ch; align-items: flex-start; width: 100%;
  padding: 0.38rem 0.5rem; border: 0;
  background: transparent; color: var(--fg); text-align: left; cursor: pointer; font: inherit;
}
.ed-list .ed-reg.active { background: var(--bg-raise); box-shadow: inset 2px 0 0 var(--green); }
.ed-list .ed-reg.disabled { color: var(--fg-dim); cursor: not-allowed; opacity: 0.55; }
.ed-pip {
  flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 1px; margin-top: 0.45em;
  background: var(--green-dim);
}
.ed-pip[data-state="dirty"] { background: var(--amber); box-shadow: 0 0 0.35em rgba(255,180,84,0.55); }
.ed-pip[data-state="error"] { background: var(--red); box-shadow: var(--glow-red); }
.ed-reg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.06rem; }
.ed-reg-main .k { color: var(--gold); width: auto; } /* release the .menu-list 14ch column */
.ed-reg-desc { color: var(--fg-dim); font-size: 0.85em; line-height: 1.3; }
.ed-reg-n { flex: 0 0 auto; font-family: var(--mono); color: var(--green); font-size: 0.85em; margin-top: 0.2em; }

/* INSPECTOR breadcrumb header ("TURFS ▸ grass_plains") — lives in the .box-hd */
.ed-crumb { display: inline-flex; gap: 0.5ch; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.ed-crumb-seg {
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.ed-crumb-seg:hover { color: var(--gold); text-decoration: underline; }
.ed-crumb-sep { color: var(--fg-faint); }
.ed-crumb-cur { color: var(--gold); text-transform: none; letter-spacing: 0.04em; font-family: var(--mono); font-weight: 400; }
/* idle crumb ("INSPECTOR" with nothing selected) keeps the standard amber
   panel-title voice — the empty-state BODY carries the inactive cue instead */
.ed-crumb-none { color: inherit; font-weight: inherit; }

/* the never-a-dead-end empty states */
.ed-nosel { padding: 2.2rem 0.6rem; text-align: center; }
.ed-nosel-hd {
  font-family: var(--ui); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--amber); font-size: 1.02em; margin-bottom: 0.55rem;
}
.ed-nosel-p { font-family: var(--mono); color: var(--fg-dim); font-size: 0.92em; }
.ed-nosel-act { margin-top: 1.1rem; }
/* the initial auto-select orientation banner (dismissed by any deliberate pick) */
.ed-autonote {
  font-family: var(--mono); font-size: 0.82em; color: var(--fg-dim);
  border: 1px solid var(--line); border-left: 2px solid var(--green-dim);
  background: var(--bg-bar);
  padding: 0.3rem 0.6rem; margin-bottom: 0.5rem;
}
.ed-nosel-entry { padding: 1.4rem 0.4rem; }

/* the MAP EDITOR (canvas glyph-grid) */
.ed-reg-map .k { color: var(--gold); }
.ed-map { display: flex; flex-direction: column; gap: 0.5rem; }
.ed-bar {
  display: flex; align-items: center; gap: 0.4ch; flex-wrap: wrap;
  padding: 0.3rem 0.4rem; background: var(--bg-bar); border: 1px solid var(--line-hot);
}
.ed-bar-k { color: var(--amber); font-weight: 700; padding: 0 0.4ch; }
.ed-bar-sp { width: 0.8ch; }
.ed-bar-grow { flex: 1 1 auto; }
.ed-z { background: var(--bg-raise); color: var(--fg); border: 1px solid var(--line-hot); font: inherit; padding: 0.1rem 0.3rem; }
.ed-tool {
  background: var(--bg-raise); color: var(--green); border: 1px solid var(--line-lock);
  font: inherit; padding: 0.12rem 0.7ch; cursor: pointer; min-width: 2.2ch;
  transition: background 120ms ease, color 120ms ease;
}
.ed-tool:hover { color: #03170d; background: var(--green); border-color: var(--green); }
.ed-tool.active { color: #1a0e00; background: var(--orange); border-color: var(--orange); }
.ed-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.ed-galaxy-nav {
  display: inline-flex; align-items: center; gap: 0.45ch; flex-wrap: wrap;
  padding: 0.22rem 0.45rem; border: 1px solid var(--line-hot); background: var(--bg-well);
}
.ed-galaxy-extent { color: var(--gold); font-size: 0.82em; margin-right: 0.5ch; white-space: nowrap; }
.ed-galaxy-select { max-width: 22ch; height: 27px; }
.ed-galaxy-locations { max-width: 32ch; }
.ed-galaxy-coordinate-label { color: var(--fg-dim); font-size: 0.82em; margin-left: 0.5ch; }
.ed-galaxy-coord { width: 72px; height: 27px; padding: 2px 5px; }
.ed-loc { color: var(--green); font-size: 0.85em; padding: 0 0.6ch; white-space: nowrap; }
.ed-save { font-size: 0.85em; padding: 0 0.6ch; color: var(--fg-faint); }
.ed-save.saving { color: var(--amber); }
.ed-save.saved { color: var(--green); }
.ed-save.error { color: var(--red); }
.ed-hint { color: var(--fg-faint); font-size: 0.82em; }
/* LIVE overlay (read-only): green when active (LIVE = green rule) */
.ed-live-toggle { color: var(--green); }
.ed-live-toggle.active { color: #06170d; background: var(--green); border-color: var(--green); }
.ed-live-legend { display: inline-flex; align-items: center; gap: 0.4ch; font-size: 0.8em; padding: 0 0.6ch; }
.ed-live-dot { font-size: 1.05em; line-height: 1; }
.ed-live-dot.ed-live-player { color: #3ad07a; }
.ed-live-dot.ed-live-mob { color: #ef4444; }
.ed-live-lk { color: var(--fg-dim); margin-right: 0.6ch; }
.ed-live-ro { color: var(--fg-faint); border: 1px solid var(--line-hot); padding: 0 0.5ch; border-radius: 0; }
.ed-layout { display: flex; gap: 0.6rem; align-items: stretch; }
.ed-col-pal { flex: 0 0 16ch; min-width: 14ch; }
.ed-col-cv { flex: 1 1 auto; min-width: 0; }
.ed-pal-box { height: 72vh; display: flex; flex-direction: column; }
.ed-pal-box > .box-bd { flex: 1 1 auto; overflow-y: auto; padding: 0.2rem; }
.ed-pal-list .ed-pal {
  display: flex; gap: 0.7ch; align-items: center; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--fg-dim);
  font: inherit; padding: 0.16rem 0.4rem; cursor: pointer;
}
.ed-pal-list .ed-pal.active { background: var(--bg-raise); box-shadow: inset 2px 0 0 var(--gold); color: var(--gold); }
.ed-sw { display: inline-block; width: 1.4ch; text-align: center; font-weight: 700; }
.ed-pal-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86em; }
.ed-canvas-box { height: 72vh; display: flex; flex-direction: column; }
/* the paint canvas keeps a PURE near-black backdrop for glyph legibility */
.ed-canvas-wrap { flex: 1 1 auto; min-height: 0; position: relative; background: #020403; overflow: hidden; }
.ed-canvas { display: block; image-rendering: pixelated; }

/* --- AREA panel (right column) — palette + property editor --- */
.ed-col-area { flex: 0 0 24ch; min-width: 20ch; }
.ed-area-panel { height: 72vh; display: flex; flex-direction: column; gap: 0.5rem; }
.ed-area-pal-box { flex: 0 0 auto; max-height: 34%; display: flex; flex-direction: column; }
.ed-area-pal-box > .box-bd { overflow-y: auto; padding: 0.2rem; }
.ed-area-prop-box { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ed-area-props { flex: 1 1 auto; overflow-y: auto; padding: 0.3rem 0.4rem; }
.ed-area-path { font-size: 0.82em; color: var(--gold); word-break: break-all; margin-bottom: 0.3rem; }
.ed-area-unknown { font-size: 0.78em; margin-bottom: 0.3rem; }
.ed-area-row { display: flex; align-items: center; gap: 0.5ch; padding: 0.12rem 0; font-size: 0.84em; }
.ed-area-row.overridden { background: rgba(255,180,84,0.10); border-left: 2px solid var(--amber); padding-left: 0.4ch; }
.ed-area-lk { flex: 0 0 9ch; color: var(--fg-dim); }
.ed-area-in { flex: 1 1 auto; min-width: 0; background: var(--bg-well); border: 1px solid var(--line-hot); color: var(--fg); font: inherit; padding: 0 0.3ch; caret-color: var(--green); }
.ed-area-in[type="checkbox"] { flex: 0 0 auto; }
.ed-area-reset { flex: 0 0 auto; background: transparent; border: 0; color: var(--gold); cursor: pointer; font: inherit; }
.ed-area-sp { flex: 0 0 1.4ch; }
.ed-area-list .ed-pal.active { color: var(--race-android); box-shadow: inset 2px 0 0 var(--race-android); }
/* '+ Add area' control + its picker modal */
.ed-area-add { display: block; width: 100%; margin: 0.3rem 0 0.1rem; }
.ed-area-add-list { margin: 0; }
.ed-area-add-list .ed-pal { width: 100%; }
.ed-area-add-list .ed-pal.active { color: var(--race-android); box-shadow: inset 2px 0 0 var(--race-android); }
.ed-area-add-ov { color: var(--fg-dim); font-size: 0.78em; margin-left: 0.4ch; }
.ed-area-add-dlg .ed-area-in { width: 100%; padding: 0.15rem 0.4ch; }

/* --- SPAWN panel (right column) — NPC palette --- */
.ed-spawn-panel { height: 72vh; display: flex; flex-direction: column; gap: 0.5rem; }
.ed-npc-pal-box { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ed-npc-pal-box > .box-bd { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: 0.3rem 0.4rem; gap: 0.3rem; }
.ed-npc-filter { flex: 0 0 auto; }
.ed-npc-hint { flex: 0 0 auto; }
.ed-npc-list { flex: 1 1 auto; overflow-y: auto; }
.ed-npc-list .ed-pal.active { color: #ec4899; box-shadow: inset 2px 0 0 #ec4899; }
.ed-npc-list .ed-pal[draggable="true"] { cursor: grab; }
.ed-npc-h { color: var(--red); font-size: 0.8em; }
/* placed-spawn inspector: per-NPC delete rows + Remove-all */
.ed-spawn-cell-box { flex: 0 0 auto; }
.ed-spawn-cell-bd { padding: 0.3rem 0.4rem; }
.ed-spawn-cell-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 22vh; overflow-y: auto; }
.ed-spawn-cell-row { display: flex; align-items: center; gap: 0.4rem; }
.ed-spawn-cell-n { flex: 1 1 auto; }
.ed-spawn-del { flex: 0 0 auto; padding: 0 0.5ch; line-height: 1.4; color: var(--red); }
.ed-spawn-del:hover { color: #1a0000; background: var(--red); border-color: var(--red); }
.ed-spawn-del-all { margin-top: 0.2rem; align-self: flex-start; }

/* --- TELEPORTER panel (right column) — destination form --- */
.ed-tele-panel { height: 72vh; display: flex; flex-direction: column; gap: 0.5rem; }
.ed-tele-box { flex: 0 0 auto; display: flex; flex-direction: column; }
.ed-tele-box > .box-bd { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.4rem; }
.ed-tele-row { display: flex; align-items: center; gap: 4px; }
.ed-tele-in { flex: 1 1 auto; min-width: 0; text-align: center; }
.ed-tele-msg { flex: 0 0 auto; width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.6em; }
.ed-tele-status { flex: 0 0 auto; font-size: 0.8em; color: var(--fg-dim); }

/* --- DEF CRUD editors ("the calibration bench": entry rail + grouped form) --- */
.ed-defs { display: flex; gap: var(--pad); align-items: flex-start; flex-wrap: wrap; }
.ed-entries-col { flex: 1 1 17rem; max-width: 23rem; min-width: 0; display: flex; flex-direction: column; }
.ed-form-col { flex: 2.4 1 24rem; min-width: 0; }
.ed-newrow { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.ed-new-btn { flex: 1 1 auto; }
.ed-dup-btn { flex: 0 0 auto; }

/* the inline NEW ENTRY strip (id well + live uniqueness check) */
.ed-create {
  border: 1px solid var(--line-hot); border-left: 3px solid var(--orange);
  background: var(--bg-bar); padding: 0.55rem 0.6rem; margin: 0 0 0.55rem;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.ed-create-hd {
  color: var(--orange); font-family: var(--ui); font-weight: 600;
  font-size: 0.74em; letter-spacing: 0.2em; text-transform: uppercase;
}
.ed-create .inp { width: 100%; box-sizing: border-box; }
.ed-create-check { font-family: var(--mono); font-size: 0.78em; min-height: 1.15em; color: var(--fg-faint); }
.ed-create-check.ok { color: var(--green); }
.ed-create-check.err { color: var(--red); }
.ed-create-check.warn { color: var(--amber); }
.ed-create-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* entry rows: id (gold) + display name (dim) + the amber unsaved dot */
.ed-entry-list { max-height: 64vh; overflow-y: auto; }
.ed-entry-list .ed-entry {
  display: flex; gap: 0.7ch; align-items: baseline; width: 100%; min-width: 0;
  text-align: left; background: transparent; border: 0; color: var(--fg-dim);
  font: inherit; padding: 0.18rem 0.5rem; cursor: pointer;
}
.ed-entry-list .ed-entry.active { background: var(--bg-raise); box-shadow: inset 2px 0 0 var(--green); }
.ed-entry .ed-e-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ed-entry .ed-e-id { color: var(--gold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* named entries: the friendly name is the PRIMARY line — a whisper of gold
   phosphor lifts it above the dim raw-path line beneath (no layout shift) */
.ed-entry .ed-e-pri { text-shadow: 0 0 0.35em rgba(255,194,75,0.3); }
/* the raw type path under a named entry: dim, TAIL-preserving truncation —
   direction:rtl puts the ellipsis on the LEFT so the distinctive end survives
   ('…/arlia/Arlian_Gladiator'); the JS prepends an LRM so the leading '/'
   stays put inside the RTL box */
.ed-entry .ed-e-path {
  color: var(--fg-faint); font-size: 0.78em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  direction: rtl; text-align: left;
}
.ed-entry .ed-e-name { color: var(--fg-dim); font-size: 0.85em; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-entry .ed-e-dot { color: var(--amber); display: none; flex: 0 0 auto; margin-left: auto; }
.ed-entry.dirty .ed-e-dot { display: inline; }
.ed-list-empty { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start; }

/* the form: grouped sub-boxes + flash + sticky save bar */
.ed-form { display: flex; flex-direction: column; gap: 0.6rem; }
.ed-fields { display: flex; flex-direction: column; gap: 0.6rem; }
.ed-field {
  gap: 0.2rem; padding: 0.1rem 0 0.3rem 0.5ch;
  border-left: 2px solid transparent;
  min-width: 0; /* grid cell: allow shrink instead of overflow */
}
.ed-field.edited { border-left-color: var(--amber); background: rgba(255,180,84,0.04); }
.ed-field.invalid { border-left-color: var(--red); background: rgba(255,77,77,0.04); }
.ed-field.flash { animation: ed-row-flash 900ms ease; }
@keyframes ed-row-flash { 0% { background: rgba(255,180,84,0.28); } 100% { background: rgba(255,180,84,0.04); } }
.ed-field > .ed-lblrow > label {
  word-break: break-word;
  color: var(--green); font-family: var(--ui); font-weight: 600;
  font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase;
}
.ed-field .inp { width: 100%; min-width: 0; box-sizing: border-box; padding: 0.3rem 0.55rem; }
.ed-field select.inp { min-width: 0; max-width: 100%; }
/* the label row: plain-language label + the "?" help toggle + the raw JSON key in faint mono */
.ed-lblrow { display: flex; align-items: baseline; gap: 1ch; flex-wrap: wrap; }
.ed-key {
  margin-left: auto; font-family: var(--mono); font-size: 0.68em;
  color: var(--fg-faint); letter-spacing: 0.04em; white-space: nowrap;
}
/* the one-line "what this does" help + the number-range hint beneath a field */
.ed-help { font-size: 0.78em; color: var(--fg-dim); line-height: 1.3; }
/* field help is folded behind the "?" button: hover = native tooltip, click = this inline line */
.ed-help-inline { display: none; }
.ed-help-inline.open { display: block; }
.ed-helpq {
  flex: 0 0 auto; background: transparent; border: 1px solid var(--line-hot);
  color: var(--fg-faint); font-family: var(--mono); font-size: 0.72em;
  line-height: 1.3; padding: 0 0.6ch; cursor: help;
}
.ed-helpq:hover, .ed-helpq:focus-visible { color: var(--green); border-color: var(--line-lock); }
.adm-lw-helpfield { min-width: 0; }
.adm-lw-labelrow { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.adm-lw-labelrow .tog { flex: 1 1 auto; }
.adm-lw-helpfield > .ed-help-inline.open { margin: 0.3rem 0 0.55rem; }
.ed-range { font-family: var(--mono); font-size: 0.74em; color: var(--fg-faint); }
/* the live edit feedback: old -> new diff + the human validation verdict */
.ed-diff { font-family: var(--mono); font-size: 0.8em; line-height: 1.35; word-break: break-word; }
.ed-diff-old { color: var(--fg-faint); text-decoration: line-through; }
.ed-diff-arrow { color: var(--fg-faint); }
.ed-diff-new { color: var(--amber); }
.ed-diff-tick { color: var(--green); }
.ed-verdict { font-family: var(--mono); font-size: 0.8em; line-height: 1.35; }
.ed-verdict.err { color: var(--red); }
.ed-verdict.ok { color: var(--green); }
.ed-verdict.warn { color: var(--amber); } /* advisory (out-of-usual-range) — APPLY stays live */

/* labeled field-group sub-boxes (schema `group` sections) — bordered, collapsible, compact */
.ed-group { border: 1px solid var(--line-hot); background: var(--bg-pane); scroll-margin-top: 3rem; }
.ed-group-hd {
  color: var(--amber);
  font-family: var(--ui); font-weight: 600;
  font-size: 0.76em; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; margin: 0;
  background: var(--bg-bar); border-bottom: 1px solid var(--line);
}
/* the collapsible header variant is a real <button>: [-]/[+] mark + group name + field count */
button.ed-group-hd.ed-group-tgl {
  width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 0.8ch;
}
.ed-group-tgl:hover .ed-group-name { color: var(--gold); }
.ed-group-mark { flex: 0 0 auto; color: var(--green-dim); font-family: var(--mono); letter-spacing: 0; }
.ed-group-n {
  margin-left: auto; color: var(--fg-faint); font-family: var(--mono);
  font-weight: 400; letter-spacing: 0.04em; text-transform: none;
}
.ed-group.closed > .ed-group-bd { display: none; }
.ed-group.closed > .ed-group-hd { border-bottom: 0; }
.ed-group-bd { display: flex; flex-direction: column; gap: 0.8rem; padding: 0.6rem 0.65rem 0.5rem; }
/* the compact responsive field grid: two-up on a wide inspector, one column when narrow;
   long/structured controls carry .ed-span2 and take the full row */
.ed-grid {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 0.3rem 1.2rem;
}
.ed-group-bd.ed-grid { padding: 0.45rem 0.6rem 0.5rem; }
.ed-span2 { grid-column: 1 / -1; }
/* the bottom "Legacy / not wired" box — stored 1:1 but never read by the engine */
.ed-group-noop { border-style: dashed; }
.ed-group-noop > .ed-group-hd { color: var(--fg-dim); }
.ed-noop-note {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 0.76em;
  color: var(--fg-faint); line-height: 1.35;
  border-bottom: 1px dashed var(--line); padding-bottom: 0.3rem;
}

/* the sticky JUMP bar at the top of an open entry — one small button per group box */
.ed-jumpbar {
  position: sticky; top: calc(-1 * var(--pad)); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem;
  padding: 0.3rem 0.5rem; background: var(--bg-bar);
  border: 1px solid var(--line-hot);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.ed-jump-lbl {
  color: var(--fg-faint); font-family: var(--ui); font-weight: 600;
  font-size: 0.7em; letter-spacing: 0.22em; text-transform: uppercase; margin-right: 0.3ch;
}
.ed-jump {
  background: transparent; border: 1px solid var(--line-hot); color: var(--green);
  font-family: var(--mono); font-size: 0.74em; padding: 0.08rem 0.7ch; cursor: pointer;
}
.ed-jump:hover { color: var(--gold); border-color: var(--line-lock); background: var(--bg-raise); }

/* WIRING-STATUS strip: one slim dim line; hover shows the full text, click wraps it open */
.ed-wire {
  font-family: var(--mono); font-size: 0.74em; color: var(--fg-faint); line-height: 1.4;
  border-left: 2px solid var(--line-hot); padding: 0.05rem 0.8ch;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.ed-wire:hover { color: var(--fg-dim); }
.ed-wire.open { white-space: normal; overflow: visible; text-overflow: clip; color: var(--fg-dim); }

/* checkbox fields read as "[x] label" */
.ed-field-check .ed-check { display: flex; flex-direction: row; align-items: center; gap: 0.7ch; cursor: pointer; color: var(--fg); }
.ed-field-check .ed-check::before { content: ''; }
.ed-field-check .ed-check > span { color: var(--green); }
.ed-field-check input[type="checkbox"] { width: 1.05em; height: 1.05em; accent-color: var(--green); flex: 0 0 auto; }

/* the STICKY SAVE BAR — docks at the inspector bottom only when dirty.
   bottom: -pad — sticky pins to the scroller's CONTENT-box bottom, which left a
   pad-high strip beneath the bar where scrolled form text peeked half-cropped;
   offsetting by the viewport padding docks the bar flush with the visible edge */
.ed-savebar {
  display: none; position: sticky; bottom: calc(-1 * var(--pad)); z-index: 6;
  padding: 0.55rem 0.7rem;
  background: var(--bg-bar); border: 1px solid var(--line-hot); border-left: 3px solid var(--amber);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.5);
  gap: 0.8rem 1.2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.ed-savebar.on { display: flex; }
.ed-sb-l { flex: 1 1 14rem; min-width: 0; }
.ed-sb-count {
  color: var(--amber); font-family: var(--ui); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.8em;
  margin-bottom: 0.3rem;
}
.ed-sb-count.err { color: var(--red); }
.ed-sb-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ed-sb-chip {
  background: transparent; border: 1px solid var(--line-hot); color: var(--amber);
  font-family: var(--mono); font-size: 0.76em; padding: 0.12rem 0.7ch; cursor: pointer;
}
.ed-sb-chip:hover { border-color: var(--amber); background: rgba(255,180,84,0.08); }
.ed-sb-chip.err { color: var(--red); border-color: rgba(255,77,77,0.6); }
.ed-sb-chip.err:hover { border-color: var(--red); background: rgba(255,77,77,0.08); }
.ed-sb-r { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.ed-sb-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ed-sb-tier {
  font-family: var(--mono); font-size: 0.74em; color: var(--fg-dim); text-align: left;
  max-width: 46ch; padding-right: 0.45rem; /* wrap long tier captions; never flush to the bar edge */
}

/* the SAVED / FAILED flash rule */
.ed-flash {
  padding: 0.45rem 0.7rem; font-family: var(--mono); font-size: 0.88em;
  border-left: 3px solid var(--green); background: rgba(77,242,162,0.06); color: var(--green);
}
.ed-flash.warn { border-left-color: var(--amber); background: rgba(255,180,84,0.07); color: var(--amber); }
.ed-flash.err { border-left-color: var(--red); background: rgba(255,77,77,0.06); color: var(--red); }

/* the npcs "apply to live mobs" tool row + the wiring-status strips */
.ed-ltools { border-top: 1px dashed var(--line-hot); padding-top: 0.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.ed-ltools-row { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }

/* the DANGER sub-box: retype the id to unlock DELETE */
.ed-danger {
  border: 1px solid rgba(255,77,77,0.55); background: rgba(255,77,77,0.03);
  padding: 0.55rem 0.7rem 0.65rem;
}
.ed-danger-hd {
  color: var(--red); font-family: var(--ui); font-weight: 600;
  font-size: 0.74em; letter-spacing: 0.26em; text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.ed-danger-row { display: flex; gap: 0.5rem; margin-top: 0.45rem; flex-wrap: wrap; align-items: center; }
.ed-danger-in { flex: 1 1 12rem; min-width: 0; border-color: var(--red) !important; }

/* conflict modal: your changed fields, old -> new */
.ed-conf-list {
  display: flex; flex-direction: column; gap: 0.25rem;
  font-family: var(--mono); font-size: 0.85em;
  border: 1px solid var(--line); background: var(--bg-well);
  padding: 0.5rem 0.6rem; margin: 0.6rem 0 0.8rem; max-height: 40vh; overflow-y: auto;
}
.ed-conf-row { display: flex; gap: 0.6ch; flex-wrap: wrap; align-items: baseline; }
.ed-conf-k { color: var(--green); flex: 0 0 auto; }
.ed-conf-k::after { content: ':'; color: var(--fg-faint); }
.ed-conf-btns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
/* live color / glyph preview beside a text field */
.ed-ctl-row { display: flex; align-items: stretch; gap: 0.5ch; }
.ed-ctl-row .inp { flex: 1 1 auto; width: auto; }
.ed-preview {
  flex: 0 0 auto; min-width: 3.2ch; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.6ch; background: var(--bg-well); border: 1px solid var(--line-hot);
  font-family: var(--mono); white-space: pre;
}
/* extended color picker (legacy 16 swatches + xterm-256 grid + truecolor hex) */
.ed-colorpicker { display: flex; flex-direction: column; gap: 0.4rem; }
.ed-cp-top { align-items: center; }
.ed-cp-token { font-family: var(--mono); font-size: 0.82em; color: var(--fg-faint); }
.ed-cp-tabs { display: flex; gap: 0; }
.ed-cp-tab {
  background: transparent; border: 1px solid var(--line-hot); border-bottom: none;
  color: var(--fg-dim); font: inherit; font-size: 0.8em; letter-spacing: 0.05em;
  padding: 0.18rem 0.9ch; cursor: pointer; margin-right: 2px;
}
.ed-cp-tab:hover { color: var(--green); border-color: var(--line-lock); }
.ed-cp-tab.active { color: var(--gold); border-color: var(--orange); background: var(--bg-raise); }
.ed-cp-body { border: 1px solid var(--line-hot); padding: 0.4rem; background: var(--bg-well); }
.ed-256-grid {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px;
  max-height: 9.5rem; overflow-y: auto;
}
.ed-256-sw {
  width: 14px; height: 14px; border: 1px solid var(--line-hot); border-radius: 0;
  padding: 0; cursor: pointer;
}
.ed-cp-hex { display: flex; align-items: center; gap: 0.6ch; }
.ed-cp-color { width: 2.4rem; height: 1.9rem; padding: 0; border: 1px solid var(--line-hot); background: none; cursor: pointer; }
.ed-ta { resize: vertical; width: 100%; min-height: 2.8em; font-size: 0.9em; line-height: 1.4; padding: 0.35rem 0.55rem; }
.ed-field .inp.bad, .ed-ta.bad { border-color: var(--red); }
.ed-status { font-size: 0.85em; color: var(--fg-faint); min-height: 1.2em; }
.ed-status.ok { color: var(--green); }
.ed-status.err { color: var(--red); }

/* ---- REUSABLE BLOCK-LIST widget (window.DBZBlockList) ------------------------ */
.ed-blocklist-host { width: 100%; }
.ed-blocklist-host.bad .dbz-bl { outline: 1px solid var(--red); }
.dbz-bl { display: flex; flex-direction: column; gap: 0.5rem; }
/* advisory lines (empty/override note + DSL hint) */
.dbz-bl-note { font-size: 0.8em; color: var(--amber); line-height: 1.35; background: var(--bg-bar);
  border: 1px solid var(--line-hot); border-left: 3px solid var(--amber); padding: 0.45rem 0.6rem; }
.dbz-bl-note.dbz-bl-override { color: var(--green); border-left-color: var(--green); }
.dbz-bl-hint { font-size: 0.76em; color: var(--fg-faint); line-height: 1.35;
  border-top: 1px dashed var(--line); padding-top: 0.4rem; }
.dbz-bl-list { display: flex; flex-direction: column; gap: 0.55rem; }
/* one block: header + a param sub-form */
.dbz-bl-block { border: 1px solid var(--line-hot); background: var(--bg-pane); padding: 0.4rem 0.5rem 0.45rem;
  display: flex; flex-direction: column; gap: 0.35rem; }
.dbz-bl-hd { display: flex; align-items: center; justify-content: space-between; gap: 0.6ch; }
.dbz-bl-type { color: var(--amber); font-size: 0.82em; letter-spacing: 0.04em; font-weight: 600; }
.dbz-bl-ctrls { display: inline-flex; gap: 0.3ch; flex: 0 0 auto; }
.dbz-bl-icon { background: transparent; border: 1px solid var(--line-hot); color: var(--fg-dim);
  font: inherit; font-size: 0.8em; line-height: 1; padding: 0.25rem 0.55ch; cursor: pointer; min-width: 2.2ch; }
.dbz-bl-icon:hover:not(:disabled) { color: var(--green); border-color: var(--line-lock); }
.dbz-bl-icon:disabled { opacity: 0.3; cursor: default; }
.dbz-bl-typehelp { margin-top: -0.2rem; }
/* a param field inside a block (tightened: small label, slim input, faint help) */
.dbz-bl-field { display: flex; flex-direction: column; gap: 0.15rem; }
.dbz-bl-field > label { font-size: 0.8em; color: var(--fg-dim); word-break: break-word; }
.dbz-bl-field .inp { width: 100%; min-width: 0; box-sizing: border-box; padding: 0.25rem 0.5rem; }
.dbz-bl-field > .ed-help { font-size: 0.72em; color: var(--fg-faint); }
.dbz-bl-inp[data-dsl] { font-family: var(--mono); }
/* the message-triad rows (self / obs / tgt) */
.dbz-bl-triad-row { display: flex; gap: 0.5ch; align-items: flex-start; }
.dbz-bl-triad-tag { flex: 0 0 3ch; color: var(--fg-faint); font-size: 0.72em; padding-top: 0.35rem;
  text-transform: uppercase; letter-spacing: 0.06em; }
.dbz-bl-triad-row .dbz-bl-ta { flex: 1 1 auto; min-height: 2.6em; }
/* a nested block-list (e.g. Multi-Hit's per-hit effects) */
.dbz-bl-nested { border-left: 2px solid var(--line-hot); padding-left: 0.55rem; margin-top: 0.1rem; }
/* the "+ Add" dropdown */
.dbz-bl-add { margin-top: 0.1rem; }
.dbz-bl-addsel { min-width: 14rem; padding: 0.4rem 0.6rem; }

/* ============================================================================
   Responsive + reduced motion
   ========================================================================= */
@media (max-width: 640px) {
  /* corner ticks shrink to 6px arms */
  .box::before, .box::after, .modal-win::before, .play::before {
    background-size:
      6px 1px, 1px 6px, 6px 1px, 1px 6px,
      6px 1px, 1px 6px, 6px 1px, 1px 6px;
  }
  .cli .plm, .who .plm { display: none; }
  /* the 1px refraction shadows tint thin strokes at small sizes — drop them */
  .hero-word { font-size: 2.2rem; white-space: normal; text-shadow: none; }
  .hero-sub { letter-spacing: 0.35em; }
  .hero-bd { flex-direction: column; }
  .hero-stats { gap: 0.9rem 1.6rem; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}
/* tablets — the wide CLI tables (RACES: 8 columns) overflow their scroller by
   only a ~36px sliver at 768; shave the cell gutters and let trait chips wrap
   so the table FITS instead of demanding a swipe for a sliver of tags */
@media (max-width: 52rem) {
  .cli th, .cli td { padding-left: 0.55rem; padding-right: 0.55rem; }
  /* the cell wraps BETWEEN chips; a chip itself never breaks mid-token */
  .cli td:has(> .tag) { white-space: normal; }
  .cli .tag { white-space: nowrap; }
}
/* phones — keep the deliberate full brand whole: the titlebar online stat
   yields (it is duplicated by the hero FIGHTERS ONLINE figure + WHO counts) */
@media (max-width: 30rem) {
  .titlebar .stat { display: none; }
  /* the full deliberate brand string always renders whole */
  .titlebar { gap: 0.55rem; }
  .titlebar .title { font-size: 0.85em; }
  /* leaderboards: drop the FORM column so POWER — the point of the board —
     stays on-screen without a swipe; tighter cell gutters buy the suffix room */
  .cli .hide-nrw { display: none; }
  .cli th, .cli td { padding-left: 0.5rem; padding-right: 0.5rem; }
  /* pager: the box footer already prints "total: N ranked · page x/y" — drop
     the duplicate count so the pager keeps to one tight row */
  .lb-total { display: none; }
}

/* touch devices — grow tap targets toward the ~44px guideline via padding
   only (identical visual style on desktop pointers) */
@media (pointer: coarse) {
  .tab { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  /* grow dropdown rows toward the ~44px tap guideline (visual style unchanged) */
  .navmenu-item, .charmenu-item { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .btn { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  /* leaderboard category chips are the page's MAIN interaction — grow them */
  .lb-tab { padding-top: 0.62rem; padding-bottom: 0.62rem; }
  /* fighter-name links: expand the hit area without moving a pixel of layout */
  .name-link { display: inline-block; padding: 0.55em 0.25em; margin: -0.55em -0.25em; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .boot-line::after { animation: none; }
  .cursor { opacity: 1; }
  .scan-sweep { display: none; }
  .pane { animation: pane-fade 120ms ease both; }
  .modal-backdrop, .modal-win { animation: none; }
  .st-pip { animation: none; }
  .ed-field.flash { animation: none; }
  /* state feedback appears instantly — no fades */
  .box::after, .tab, .btn,
  .cli tbody tr, .who tbody tr, .menu-list a, .adm-card, .mail-row,
  .ed-list .ed-reg, .ed-entry-list .ed-entry, .ed-pal-list .ed-pal, .charmenu-item, .navmenu-item,
  .cli td.name::before, .cli td.name::after, .who td.name::before, .who td.name::after { transition: none; }
}
@keyframes pane-fade { from { opacity: 0; } to { opacity: 1; } }

/* Mobile: pin the identity column while a .cli table h-scrolls (QA: swiping the RACES table right lost
   the race name + color tick, making rows anonymous). Sticky first column rides the viewport; the colspan
   descriptor/legend rows pin too so no stray text fragments drift at the left edge. Small screens only —
   desktop tables don't scroll. */
@media (max-width: 700px) {
  .cli th:first-child, .cli td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg-well);
  }
  .cli thead th:first-child { z-index: 3; }
  .cli td[colspan] { position: sticky; left: 0; z-index: 1; background: var(--bg-well); }
}

/* MAP EDITOR zoom fix: the layout div is `row ed-layout` and .row brings flex-wrap:wrap — when text is
   enlarged the ch-based side columns (16ch palette / 24ch context panel) outgrow the row and the RIGHT
   panel wrapped underneath the map. Desktop: never wrap — the canvas column (flex:1 1 auto, min-width:0,
   internally scrollable) absorbs the squeeze. Genuinely narrow screens still stack (wrap is correct there). */
.ed-layout { flex-wrap: nowrap; }
@media (max-width: 900px) { .ed-layout { flex-wrap: wrap; } }

/* ============================================================================
   #378 ADMIN ACCOUNT DOSSIER — rendered in the shared char-editor modal shell,
   so it inherits the green-channel .modal-win chrome. A touch wider than the
   editor to fit the identity / characters / connection-log / activity stack.
   ========================================================================= */
.modal-win.modal-dossier { width: min(760px, 96vw); }

/* header: online badge row + current-IP readout + identity kv */
.dsr-head { display: flex; flex-direction: column; gap: 0.55rem; }
.dsr-idrow { display: flex; align-items: center; gap: 0.9ch; flex-wrap: wrap; }
.dsr-ip { font-family: var(--mono); font-size: 0.9em; color: var(--amber); }
.dsr-ip .k {
  color: var(--fg-faint); text-transform: uppercase;
  font-size: 0.76em; letter-spacing: 0.12em; margin-right: 0.7ch;
}
.dsr-secsec { color: var(--red); border-bottom-color: var(--red); }

/* characters — compact clickable rows (each opens the existing char editor) */
.dsr-chars { display: flex; flex-direction: column; gap: 0.4rem; }
.dsr-char {
  display: flex; align-items: center; gap: 0.8ch;
  border: 1px solid var(--line); background: var(--bg-well);
  padding: 0.4rem 0.55rem; cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.dsr-char:hover { background: var(--bg-raise); border-color: var(--line-hot); }
.dsr-char:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }
.dsr-char-nm { flex: 1 1 auto; min-width: 0; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr-char-race { flex: 0 0 auto; color: var(--fg-dim); font-size: 0.76em; letter-spacing: 0.06em; text-transform: uppercase; }
.dsr-char-pl { flex: 0 0 auto; color: var(--green); font-family: var(--mono); font-size: 0.86em; }

/* connection log — monospace ledger, newest first */
.dsr-conn { display: flex; flex-direction: column; max-height: 16rem; overflow-y: auto; font-family: var(--mono); font-size: 0.84em; }
.dsr-conn-row { display: flex; align-items: center; gap: 1ch; padding: 0.22rem 0; border-bottom: 1px solid var(--line); }
.dsr-conn-row:last-child { border-bottom: 0; }
.dsr-conn-when { flex: 0 0 auto; color: var(--fg-dim); }
.dsr-conn-ip { flex: 1 1 auto; min-width: 0; color: var(--amber); overflow: hidden; text-overflow: ellipsis; }
.dsr-conn-char { flex: 0 0 auto; color: var(--gold); }
.dsr-transport {
  flex: 0 0 auto; font-family: var(--ui); font-size: 0.72em;
  padding: 0 0.5ch; border: 1px solid var(--line-hot); color: var(--fg-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.dsr-transport.web { color: var(--green); border-color: var(--green-dim); }
.dsr-transport.telnet { color: var(--amber); border-color: var(--amber); }
.dsr-note { color: var(--fg-faint); font-size: 0.78em; font-style: italic; margin-top: 0.4rem; }

/* activity — mini sub-tabs over a report-style list */
.dsr-acttabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.dsr-acttab {
  appearance: none; cursor: pointer; font-family: var(--mono);
  background: transparent; border: 1px solid var(--line-hot); color: var(--fg-dim);
  padding: 0.2rem 0.7rem; font-size: 0.8em;
  transition: color 120ms ease, border-color 120ms ease;
}
.dsr-acttab:hover { color: var(--green); border-color: var(--line-lock); }
.dsr-acttab.active { color: var(--amber); border-color: var(--amber); background: rgba(255,180,84,0.06); }
.dsr-acttab:focus-visible { outline: 1px dashed var(--green); outline-offset: 2px; }
.dsr-actlist { display: flex; flex-direction: column; gap: 0.45rem; max-height: 20rem; overflow-y: auto; }

@media (max-width: 32rem) {
  .modal-win.modal-dossier { width: 100%; }
  .dsr-char { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   SEO / no-JS landing (#app initial content, replaced by app.js on boot). Kept
   on-brand so the brief pre-boot paint + the no-JavaScript view read cleanly.
   --------------------------------------------------------------------------- */
.seo-landing {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.4rem 1.4rem 3rem;
  color: var(--fg-dim);
  line-height: 1.55;
}
.seo-landing .seo-logo {
  display: block;
  width: min(20rem, 70%);
  height: auto;
  margin: 0 0 1rem;
}
.seo-landing h1 {
  color: var(--orange);
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  margin: 0 0 0.4rem;
  text-shadow: var(--glow);
}
.seo-landing h2 {
  color: var(--amber);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1.6rem 0 0.5rem;
}
.seo-landing p { margin: 0 0 0.8rem; }
.seo-landing .seo-tag { color: var(--fg); font-size: 1.05rem; }
.seo-landing strong { color: var(--fg); }
.seo-landing .seo-features { margin: 0 0 0.8rem; padding-left: 1.1rem; }
.seo-landing .seo-features li { margin: 0 0 0.4rem; }
.seo-landing a { color: var(--gold); text-decoration: none; }
.seo-landing a:hover { text-decoration: underline; }
.seo-landing .seo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin: 1.4rem 0 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.seo-landing .boot-line { color: var(--green-dim); margin-top: 1.2rem; }