/* ============================================================================
   Drag(*)nBall Z: Fighter's Edition — TUI design system (app.css)
   ----------------------------------------------------------------------------
   The WHOLE site is one full-screen terminal application: a terminal window
   filling the viewport, a title bar, a menu bar of tabs, and content rendered
   in framed terminal PANES. Monospace, boxy, CRT scanlines, blinking cursor.

   Palette: near-black bg + DBZ orange / gold / scouter-green.
   Built from scratch (no reuse of the old site). Reduced-motion safe.
   ========================================================================= */

/* ---- design tokens ----------------------------------------------------- */
:root {
  /* surfaces */
  --bg:        #0a0a0c;   /* viewport / outside the window */
  --bg-win:    #0d0e11;   /* terminal window body */
  --bg-pane:   #0b0d10;   /* framed content pane */
  --bg-bar:    #121419;   /* title bar / menu bar */
  --bg-raise:  #16191f;   /* hovered / raised chips */

  /* brand */
  --orange:    #ff8c1a;   /* DBZ orange — primary accent */
  --orange-dk: #c96a0f;
  --gold:      #ffc24b;   /* gold — highlights, the dragonball */
  --green:     #46f5b8;   /* scouter green — data / online */
  --red:       #ff5a5a;   /* alerts / pvp */

  /* text */
  --fg:        #eef1f6;   /* primary text — near-white for readability */
  --fg-dim:    #a7afbc;   /* secondary (brightened) */
  --fg-faint:  #6b7280;   /* tertiary / lines (brightened) */

  /* structure */
  --line:      #242a33;   /* borders */
  --line-hot:  #3a4150;   /* emphasized borders */
  --glow:      0 0 0.4em rgba(255,140,26,0.45);

  --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.15vw + 0.5vh, 17px);
  line-height: 1.55;
  -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(--orange); color: #1a0e00; }

/* 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-track { background: transparent; }

/* ---- CRT overlay ------------------------------------------------------- */
.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.16) 3px,
      rgba(0,0,0,0) 4px
    ),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,0.55) 100%);
  mix-blend-mode: multiply;
  animation: crt-flicker 6s steps(60) infinite;
}
@keyframes crt-flicker { 0%,100% { opacity: 0.9; } 50% { opacity: 0.78; } }

/* ============================================================================
   Terminal window
   ========================================================================= */
#app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  margin: clamp(0px, 1.2vmin, 14px);
  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.55);
  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: linear-gradient(180deg, var(--bg-bar), #0e1014);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.dots { display: flex; gap: 0.4rem; }
.dots i {
  width: 0.72rem; height: 0.72rem; border-radius: 50%;
  display: inline-block; border: 1px solid rgba(0,0,0,0.4);
}
.dots i:nth-child(1) { background: #ff5f57; }
.dots i:nth-child(2) { background: #febc2e; }
.dots i:nth-child(3) { background: #28c840; }

.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) --------------------------------------------------- */
.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);
  overflow-x: auto;
}
.tab {
  appearance: none; background: none; border: none;
  font-family: var(--mono); font-size: 0.92em; color: var(--fg-dim);
  letter-spacing: 0.06em;
  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(--gold); }
.tab:hover .br { color: var(--orange); }
.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.active { text-shadow: 0 0 0.4em rgba(255,90,90,0.5); }
.tab.spacer-tab { flex: 1; cursor: default; }
.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); }
.tab:focus-visible { outline: 1px dashed var(--gold); outline-offset: -3px; }

/* ============================================================================
   Terminal body: command line + scrolling pane
   ========================================================================= */
.term-body {
  display: grid; grid-template-rows: auto 1fr;
  min-height: 0;
  background:
    radial-gradient(140% 100% at 50% -10%, rgba(255,140,26,0.05), transparent 60%),
    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(--orange); }
.cmdline .prompt .path { color: var(--gold); }
.cmdline .cmd { color: var(--fg); }

/* the live blinking cursor */
.cursor {
  display: inline-block; width: 0.62ch; height: 1.05em;
  margin-left: 0.1ch; transform: translateY(0.15em);
  background: var(--orange); box-shadow: var(--glow);
  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);
}

/* ---- framed panes ------------------------------------------------------ */
.pane { animation: pane-in 220ms ease both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.box {
  border: 1px solid var(--line-hot);
  background: var(--bg-pane);
  margin: 0 0 var(--pad);
}
.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(180deg, #14171d, #0e1014);
  color: var(--gold); letter-spacing: 0.08em; font-size: 0.86em;
  text-transform: uppercase;
}
.box > .box-hd::before { content: '┤ '; color: var(--orange); }
.box > .box-hd::after  { content: ' ├'; color: var(--orange); margin-left: auto; }
.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: 0 0 0.4em rgba(70,245,184,0.35); }

/* 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 button — boxy [ LABEL ] terminal style */
.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:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.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; }

/* simple menu list (SYSTEM menu on home) */
.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;
  border-left: 2px solid transparent;
  color: var(--fg);
}
.menu-list a:hover { background: var(--bg-raise); border-left-color: var(--orange); color: var(--gold); }
.menu-list .k { color: var(--orange); width: 9ch; flex: none; }
.menu-list .d { color: var(--fg-dim); }

/* who's-online roster */
.who { font-family: var(--mono); width: 100%; border-collapse: collapse; }
.who th, .who td { text-align: left; padding: 0.18rem 0.8rem 0.18rem 0; white-space: nowrap; }
.who th { color: var(--fg-faint); font-weight: 400; border-bottom: 1px solid var(--line); text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.08em; }
.who td.name { color: var(--gold); }
.who td.pl { color: var(--green); text-align: right; }
.who .dot { color: var(--green); }
.who-empty { color: var(--fg-dim); }

/* 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 (placeholder views replaced in later phases) */
.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); }

/* ============================================================================
   PHASE 2 — 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 / ADMIN) ----------------- */
.cli {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: 0.9em;
  white-space: nowrap;
}
.cli-wrap { overflow-x: auto; border: 1px solid var(--line); background: #090b0e; }
.cli th, .cli td { padding: 0.22rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.cli thead th {
  color: var(--orange); font-weight: 400; text-transform: uppercase;
  font-size: 0.78em; letter-spacing: 0.1em;
  border-bottom: 1px solid var(--line-hot);
  background: linear-gradient(180deg, #14171d, #0e1014);
  position: sticky; top: 0;
}
.cli tbody tr:hover { background: var(--bg-raise); }
.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(--orange); border: 1px solid var(--line-hot);
  padding: 0 0.4ch; margin-right: 0.3ch; font-size: 0.86em; border-radius: 2px;
}
.cli .skill { color: var(--fg-dim); }
.cli .legend td { color: var(--gold); background: rgba(255,194,75,0.04); }
.cli caption { caption-side: top; text-align: left; color: var(--fg-faint); padding: 0.3rem 0; }

/* group header rows (FORMS grouped by race) */
.cli .grp th {
  color: var(--green); background: #0c1014; text-transform: none;
  letter-spacing: 0.04em; font-size: 0.86em; border-bottom: 1px solid var(--line-hot);
  position: static;
}
.cli .grp .gx { color: var(--fg-faint); }

/* 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(--orange); margin-right: 0.6ch; }
.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 #14171d; }
.cmdtable td.c { color: var(--orange); white-space: nowrap; width: 16ch; }
.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(--orange); text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.1em; 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 #121419; }

/* ---- 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-size: 0.86em; letter-spacing: 0.05em; }
.field > label::before { content: '> '; color: var(--orange); }
.inp {
  font-family: var(--mono); font-size: 0.95em;
  background: #06080a; color: var(--fg);
  border: 1px solid var(--line-hot); padding: 0.45rem 0.6rem;
  caret-color: var(--orange);
}
.inp:focus { outline: none; border-color: var(--orange); box-shadow: var(--glow); }
.inp::placeholder { color: var(--fg-faint); }
select.inp { cursor: pointer; }
.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; }

/* ---- 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); }
.badge { display:inline-block; border:1px solid var(--line-hot); padding:0 0.5ch; font-size:0.8em; color:var(--fg-dim); }
.badge.on { color: var(--green); border-color: var(--green); }
.badge.off { color: var(--fg-faint); }
.badge.wiz { color: var(--red); border-color: var(--red); }

/* live-vs-saved indicator (admin) */
.livesaved { font-size: 0.82em; letter-spacing: 0.05em; }
.livesaved .live { color: var(--green); }
.livesaved .saved { color: var(--gold); }

/* ============================================================================
   ADMIN console — filter bar + paginated card registry + modal editor
   ========================================================================= */

/* ---- 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(--orange); 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(--gold); }
.tog input { accent-color: var(--orange); 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: linear-gradient(180deg, #0e1115, #0a0c0f);
  padding: 0.7rem 0.8rem;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.adm-card:hover { border-color: var(--orange); box-shadow: var(--glow); transform: translateY(-1px); }
.adm-card:focus-visible { outline: 1px dashed var(--gold); 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-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: 0 0 0.4em rgba(70,245,184,0.4); }
.adm-live.off { color: var(--fg-faint); }

/* ---- 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(--orange); font-weight: 400; }
.adm-count { color: var(--fg-faint); font-size: 0.8em; }

/* ---- modal editor ------------------------------------------------------ */
.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(3, 4, 6, 0.78); 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-win); border: 1px solid var(--line-hot);
  box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,0.7), var(--glow);
  animation: modal-pop 160ms ease both;
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(0.985); } 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), #0e1014);
}
.modal-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto; background: var(--orange); box-shadow: var(--glow); }
.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(--gold); 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(70,245,184,0.06); }
.modal-flash.err { color: var(--red); border-color: var(--red); background: rgba(255,90,90,0.06); }
.modal-state { margin-bottom: 0.85rem; }
.modal-sec {
  color: var(--orange); letter-spacing: 0.1em; 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; }

/* ---- 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; font-size: 0.84em; color: var(--green); letter-spacing: 0.04em; }
.adm-flab .adm-cur { color: var(--fg-faint); font-size: 0.92em; letter-spacing: 0; }
.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; }
.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); }
.inp.bad { border-color: var(--red); box-shadow: 0 0 0.3em rgba(255,90,90,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: 0 0 0.5em rgba(255,90,90,0.5); }
.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: #07090c; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.55rem; }
.adm-sc-hd { color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82em; 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: #06080a; 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; }

/* ---- 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; }
}

/* access-denied pane */
.denied { color: var(--red); }
.denied .ascii { color: var(--red); text-shadow: 0 0 0.4em rgba(255,90,90,0.4); }

/* ---- PLAY: live websocket terminal ------------------------------------ */
.play {
  display: grid; grid-template-rows: auto 1fr auto; gap: 0;
  border: 1px solid var(--line-hot); background: #06080a;
  height: min(70vh, 640px); min-height: 18rem;
}
.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, #14171d, #0e1014);
  color: var(--fg-faint); font-size: 0.82em; letter-spacing: 0.06em;
}
.play-bar .lamp { width: 0.6rem; height: 0.6rem; border-radius: 50%; 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); }
.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;
  font-family: var(--mono); font-size: clamp(14px, 1.15vw, 16px); line-height: 1.5;
  /* DEFAULT (no-ANSI-color) game text reads BRIGHT WHITE, not the dim body grey */
  white-space: pre-wrap; word-break: break-word; color: #f4f7fb;
}
.play-out .sysline { color: var(--fg-dim); font-style: italic; }
.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(--orange);
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .crt { animation: none; }
  .cursor, .boot-line::after { animation: none; }
  .pane { animation: none; }
  .cursor { opacity: 1; }
  .modal-backdrop, .modal-win { animation: none; }
  .adm-card { transition: none; }
  .adm-card:hover { transform: none; }
}