/* ───────────────────────── CRT TERMINAL THEME ───────────────────────── */

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* ── WebMCP Co-DM ─────────────────────────────────────────────── */
.co-dm-panel {
  order: -1;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--panel-bg, #07110d) 92%, var(--accent) 8%);
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--accent) 7%, transparent);
}

.co-dm-header,
.co-dm-card-heading,
.co-dm-message-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.co-dm-header h2,
.co-dm-card h3,
.co-dm-scene-card h4 {
  margin: 0;
}

.co-dm-player-controls {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.co-dm-player-controls label,
.co-dm-message-form > label {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.co-dm-player-controls select,
.co-dm-message-row select,
.co-dm-message-form textarea {
  min-width: 0;
}

.co-dm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .85fr);
  gap: 10px;
  margin-top: 12px;
}

.co-dm-card {
  min-width: 0;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg, #020805) 78%, transparent);
  padding: 10px;
}

.co-dm-card h3 {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.co-dm-card-body {
  font-size: 12px;
  line-height: 1.45;
}

.co-dm-scroll {
  max-height: 250px;
  overflow: auto;
}

.co-dm-scene-card .co-dm-card-body {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.co-dm-scene-heading,
.co-dm-stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.co-dm-scene-heading strong {
  color: var(--text-bright, var(--text));
  font-size: 16px;
}

.co-dm-stat-row span,
.co-dm-status-badge {
  border: 1px solid var(--border);
  padding: 2px 6px;
}

.co-dm-hold-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 10px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.co-dm-hold-state > div { display: grid; gap: 2px; }
.co-dm-hold-state strong { color: var(--success, #70d98b); font-size: 11px; letter-spacing: .08em; }
.co-dm-hold-state span { color: var(--text-dim); }
.co-dm-hold-state.is-held { border-color: color-mix(in srgb, var(--warning, #d7a84b) 60%, transparent); background: color-mix(in srgb, var(--warning, #d7a84b) 8%, transparent); }
.co-dm-hold-state.is-held strong { color: var(--warning, #d7a84b); }

.co-dm-live-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.co-dm-live-heading > div { display: grid; gap: 2px; }
.co-dm-live-heading strong { color: var(--accent); letter-spacing: .08em; }
.co-dm-live-heading span { color: var(--text-dim); font-size: 11px; }

.co-dm-player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.co-dm-player-card {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.co-dm-player-card.is-held { border-color: color-mix(in srgb, var(--warning, #d7a84b) 60%, transparent); }
.co-dm-player-card > code { display: block; margin: 2px 0 7px; color: var(--text-dim); }
.co-dm-player-card p { min-height: 2.8em; margin: 7px 0; color: var(--text-dim); }
.co-dm-player-vitals { display: flex; flex-wrap: wrap; gap: 5px; }
.co-dm-player-vitals span { padding: 1px 5px; border: 1px solid var(--border); }
.co-dm-player-location { margin-top: 6px; color: var(--text-dim); overflow-wrap: anywhere; }

.co-dm-presence {
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.co-dm-presence.live { color: var(--success, #70d98b); }
.co-dm-presence.held { color: var(--warning, #d7a84b); }

.co-dm-live-timeline { margin-top: 12px; }
.co-dm-live-entry {
  display: grid;
  grid-template-columns: 54px minmax(90px, .35fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px dotted var(--border);
}
.co-dm-live-entry time { color: var(--text-dim); }
.co-dm-live-entry button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.co-dm-live-entry button:hover,
.co-dm-live-entry button:focus-visible { text-decoration: underline; }
.co-dm-live-entry strong { display: block; color: var(--text-bright, var(--text)); }
.co-dm-live-entry p { margin: 2px 0 0; color: var(--text-dim); }

.co-dm-preview {
  padding: 7px 8px;
  border-left: 2px solid var(--accent);
  color: var(--text-bright, var(--text));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.co-dm-scene-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.co-dm-scene-columns > div {
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding-left: 8px;
}

.co-dm-scene-columns ul,
.co-dm-card details ul,
.co-dm-story {
  margin: 4px 0;
  padding-left: 18px;
}

.co-dm-story li {
  margin-bottom: 6px;
}

.co-dm-story li span {
  display: block;
  color: var(--text-dim);
}

.co-dm-interaction,
.co-dm-limitations {
  margin: 8px 0;
  padding: 6px 8px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.co-dm-limitations {
  border-left-color: var(--warning, #d7a84b);
  color: var(--text-dim);
}

.co-dm-receipt {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--border);
}

.co-dm-receipt time,
.co-dm-proposal-meta,
.muted {
  color: var(--text-dim);
}

.co-dm-receipt-success span { color: var(--success, #70d98b); }
.co-dm-receipt-failure span,
.co-dm-registration-error { color: var(--danger, #ff6b6b); }

.co-dm-proposal {
  margin-bottom: 10px;
  padding: 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning, #d7a84b);
}

.co-dm-proposal.status-approved { border-left-color: var(--success, #70d98b); }
.co-dm-proposal.status-rejected,
.co-dm-proposal.status-failed { border-left-color: var(--danger, #ff6b6b); }

.co-dm-proposal p { margin: 6px 0; }
.co-dm-proposal pre {
  max-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.co-dm-proposal-actions {
  display: flex;
  gap: 7px;
  margin: 7px 0;
}

.co-dm-proposal-result {
  margin-top: 7px;
  color: var(--text-dim);
}

.co-dm-diagnostic {
  display: grid;
  grid-template-columns: minmax(130px, .7fr) minmax(0, 1.3fr);
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--border);
}

.co-dm-diagnostic span { color: var(--text-dim); }
.co-dm-diagnostic strong { overflow-wrap: anywhere; }

.co-dm-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.co-dm-message-form,
.co-dm-prompt-block {
  border: 1px solid var(--border);
  padding: 10px;
}

.co-dm-message-form > label { display: block; margin-bottom: 6px; }
.co-dm-message-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, .72fr) auto;
  align-items: stretch;
}
.co-dm-message-row textarea {
  width: 100%;
  min-height: 52px;
  resize: vertical;
}
.co-dm-message-row select { width: 100%; }
.co-dm-message-row .btn { white-space: nowrap; }
.co-dm-prompt-block p { margin: 8px 0 0; color: var(--text-dim); font-size: 11px; line-height: 1.45; }

@media (min-width: 1100px) {
  .co-dm-grid {
    height: 380px;
    grid-template-columns: minmax(0, 1.35fr) minmax(240px, .85fr) minmax(240px, .85fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "scene activity proposals"
      "scene status status";
  }

  .co-dm-grid > .co-dm-card {
    display: flex;
    min-height: 0;
    overflow: hidden;
    flex-direction: column;
  }

  .co-dm-grid > .co-dm-card .co-dm-card-body {
    min-height: 0;
    overflow: auto;
  }

  .co-dm-scene-card { grid-area: scene; }
  .co-dm-grid > .co-dm-card:nth-child(2) { grid-area: activity; }
  .co-dm-grid > .co-dm-card:nth-child(3) { grid-area: proposals; }
  .co-dm-grid > .co-dm-card:nth-child(4) { grid-area: status; }
  .co-dm-scene-card .co-dm-card-body,
  .co-dm-scroll { max-height: none; }
}

@media (max-width: 900px) {
  .co-dm-header,
  .co-dm-message-row {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
  .co-dm-player-controls,
  .co-dm-grid,
  .co-dm-actions { grid-template-columns: 1fr; }
  .co-dm-scene-columns,
  .co-dm-player-grid { grid-template-columns: 1fr; }
  .co-dm-live-entry { grid-template-columns: 48px minmax(0, 1fr); }
  .co-dm-live-entry > div { grid-column: 1 / -1; }
}

.command-hold-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 12px;
  margin: 0 12px 8px;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--gold) 9%, var(--bg));
}

.command-hold-banner strong { grid-row: 1 / span 2; align-self: center; color: var(--gold); letter-spacing: .12em; }
.command-hold-banner span { color: var(--text); }
.command-hold-banner small { color: var(--dim); }

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #050505;
  --bg-panel: #0a0a0a;
  --bg-input: #060606;
  --border: #1a2a1a;
  --border-hi: #2a3a2a;
  --text: #88cc88;
  --dim: #447744;
  --accent: #33ff66;
  --accent-bg: rgba(51,255,102,0.06);
  --gold: #ccaa33;
  --hp: #ff4444;
  --hp-bg: #1a0808;
  --mp: #44aaff;
  --mp-bg: #081018;
  --xp: #ccaa33;
  --xp-bg: #181008;
  --ok: #33ff66;
  --warn: #ccaa33;
  --bad: #ff3333;
  --r: 2px;
  --font: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --glow: rgba(51,255,102,0.4);
  --glow-strong: rgba(51,255,102,0.7);
  --scanline-alpha: 0.08;
  --crt-vignette: 0.35;

  /* ── Aliases (these were referenced across the CSS but never defined,
        so they silently fell back — e.g. error text never turned red) ── */
  --fg: var(--text);
  --danger: var(--bad);
  --text-muted: var(--dim);
  --card: var(--bg-input);
  --font-mono: var(--font);

  /* ── Derived phosphor tokens (reusable bloom / focus / surfaces) ── */
  --r-lg: 4px;
  --bg-raise: #101410;            /* one step above panel — for elevated surfaces */
  --accent-soft: rgba(51,255,102,0.12);
  --bloom: 0 0 6px var(--glow);
  --bloom-strong: 0 0 14px var(--glow-strong), 0 0 28px var(--glow);
  --text-bloom: 0 0 4px var(--glow);
  --focus-ring: 0 0 0 1px var(--accent), 0 0 8px var(--glow);
  --arcane: var(--mp);            /* cool accent already in the palette — use instead of stray blues */
  --arcane-soft: rgba(68,170,255,0.12);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ── Co-DM tokens (were referenced but never defined, so dim text rendered
        full-brightness and status colours fell back to off-palette hex) ── */
  --text-dim: var(--dim);
  --text-bright: var(--accent);
  --success: var(--ok);
  --warning: var(--warn);
  --panel-bg: var(--bg-panel);
}

[data-theme="amber"] {
  --bg-raise: #15110a;
  --accent-soft: rgba(255,170,51,0.12);
  --text: #ccaa66;
  --dim: #776633;
  --accent: #ffaa33;
  --accent-bg: rgba(255,170,51,0.06);
  --border: #2a2210;
  --border-hi: #3a3218;
  --glow: rgba(255,170,51,0.4);
  --glow-strong: rgba(255,170,51,0.7);
  --ok: #ffaa33;
  --gold: #ffcc44;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.45;
  text-shadow: 0 0 3px var(--glow);
}

/* ── CRT scanline overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: -4px 0 0;
  z-index: 10000;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0,0,0,var(--scanline-alpha)) 1px,
    rgba(0,0,0,var(--scanline-alpha)) 2px
  );
}

/* ── CRT vignette ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,var(--crt-vignette)) 100%);
}

.hidden { display: none !important; }

/* Themed text selection — phosphor, not browser-blue */
::selection { background: var(--accent); color: #000; text-shadow: none; }

/* Keyboard focus ring (mouse clicks stay clean via :focus-visible) */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r);
}

/* Respect reduced-motion: keep the interface calm for those who ask for it.
   Individual decorative effects also gate on this, but this is the backstop. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────── PORTAL / LOGIN OVERLAY ───────────────────────── */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  padding: 1.2rem 1rem;
  background: var(--bg);
}

.overlay-shell {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.hero-card {
  padding: 1.1rem 1.2rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.logo {
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

.subtitle {
  color: var(--dim);
  font-size: 12px;
  max-width: 60ch;
}

.panel-subsection {
  margin-top: 0.7rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-input);
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.compact-heading { margin-bottom: 0.6rem; }

.hero-auth { display: grid; gap: 0.7rem; }

.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 28px;
  padding: 0.25rem 0.5rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--dim);
  font-size: 12px;
}

.login-hints { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.login-hint {
  display: inline-flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 130px;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-input);
}

.hint-role {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.hint-user { font-size: 12px; }

.auth-form { display: grid; gap: 0.6rem; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.auth-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.auth-helpers { margin-top: 0; }

.remember-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dim);
  font-size: 12px;
}

.remember-toggle input { accent-color: var(--accent); }

.role-selector,
.hero-actions,
.stack-buttons,
.quick-commands,
.command-reference,
.status-effects,
.char-resources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.role-selector { margin-top: 0.8rem; }

.role-chip, .mode-btn {
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  border-radius: var(--r);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}

.role-chip.active, .mode-btn.active,
.role-chip:hover, .mode-btn:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}

.hero-actions { margin-top: 0.8rem; }

.portal-grid {
  display: grid;
  grid-template-columns: 1.5fr 1.3fr 1fr;
  gap: 1rem;
}

.portal-grid > .panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.7rem 0.8rem;
}

.portal-grid > .panel > h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 0.5rem;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.search-bar input {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}
.search-bar input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 4px var(--glow);
}
.search-bar input::placeholder { color: var(--dim); }
.search-count {
  color: var(--dim);
  font-size: 13px;
  white-space: nowrap;
}

.portal-player-list {
  display: grid;
  gap: 0.6rem;
  max-height: 60vh;
  overflow-y: auto;
}

.player-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.7rem 0.8rem;
  display: grid;
  gap: 0.55rem;
}

.player-card-main, .player-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.player-card-name { font-weight: 700; }
.player-card-meta { color: var(--dim); font-size: 11px; }
.player-card-actions { justify-content: flex-start; }

.empty-state, .inv-empty, .no-effects {
  color: var(--dim);
  font-size: 12px;
  font-style: italic;
}

.inline-message {
  margin-top: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--dim);
}

.inline-message.success { border-color: var(--ok); color: var(--ok); }
.inline-message.error { border-color: var(--bad); color: var(--bad); }
.inline-message.info { border-color: var(--accent); color: var(--accent); }

.workflow-reference { display: grid; gap: 0.6rem; }
.workflow-reference.compact { gap: 0.5rem; }
.reference-step { display: grid; gap: 0.15rem; }
.reference-step strong { font-size: 13px; }
.reference-step span { font-size: 12px; color: var(--dim); }

.command-reference span {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.35rem;
  border-radius: var(--r);
  background: var(--bg-input);
  border: 1px solid var(--border);
  font-size: 11px;
}

.command-reference.compact { margin-top: 0.8rem; }

/* ───────────────────────── FORM ELEMENTS ───────────────────────── */

.form-group { display: grid; gap: 0.25rem; margin-bottom: 0.6rem; }
.form-group label, .field-label { font-size: 13px; }
.optional { font-size: 11px; color: var(--dim); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-input);
  color: var(--text);
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23447744'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 10px 6px;
  padding-right: 2rem;
  cursor: pointer;
}

select option {
  background: var(--bg-panel);
  color: var(--text);
  padding: 0.3rem 0.5rem;
}

select option:checked {
  background: var(--accent-bg);
  color: var(--accent);
}

textarea { resize: vertical; min-height: 80px; }

.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

.btn {
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text);
  padding: 0.3rem 0.55rem;
  border-radius: var(--r);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}

.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:active:not(:disabled) { opacity: 0.8; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.btn-primary:hover:not(:disabled) { background: var(--accent); color: #000; }
.btn-secondary { background: transparent; }
.btn-sm { padding: 0.25rem 0.45rem; font-size: 11px; }

/* ───────────────────────── DASHBOARD SHELL ───────────────────────── */

#dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 34px;
}

.brand-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 0 6px var(--glow-strong);
}

.brand-subtitle { font-size: 11px; display: none; }

.mode-switch, .header-actions, .status-cluster {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-actions { margin-left: auto; }

.player-badge, .session-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.2rem 0.45rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-input);
  font-size: 11px;
}

.session-badge.admin { border-color: var(--gold); color: var(--gold); }

.status-dot, .health-dot {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  display: inline-block;
}

.status-dot.connected, .health-dot.ok { background: var(--ok); }
.status-dot.polling, .health-dot.degraded { background: var(--warn); }
.status-dot.disconnected, .health-dot.down { background: var(--bad); }

/* ───────────────────────── MAIN WORKSPACE ───────────────────────── */

.dashboard-shell {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.workspace { height: 100%; }

.workspace-grid {
  display: flex;
  height: 100%;
}

/* ── Terminal column (main content) ── */

.terminal-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.terminal-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.7rem;
  background: var(--accent-bg);
  border-bottom: 1px solid var(--accent);
  font-size: 11px;
  color: var(--accent);
  text-shadow: 0 0 6px var(--glow-strong);
  letter-spacing: 0.04em;
}

.terminal-titlebar .terminal-room { font-weight: 700; }
.terminal-titlebar .terminal-spacer { flex: 1; }

.terminal-titlebar .terminal-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--dim);
  font: inherit;
  font-size: 10px;
  padding: 0.15rem 0.4rem;
  border-radius: var(--r);
  cursor: pointer;
}

.terminal-titlebar .terminal-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.terminal-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.terminal-output {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* ── Player selection panel (shown when no character active) ── */

.player-select-panel {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.player-select-panel h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg);
  margin: 0;
}

.player-select-panel .panel-hint {
  color: var(--dim);
  font-size: 12px;
  margin: 0;
}

.resume-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  max-width: 480px;
}

.resume-row select {
  flex: 1;
  min-width: 0;
}

.create-form-inline {
  width: 100%;
  max-width: 480px;
  text-align: left;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.player-select-panel.hidden { display: none; }

/* ── Room panel (inside terminal output) ── */

.room-panel {
  flex-shrink: 0;
  max-height: 28%;
  overflow-y: auto;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

.room-panel-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.room-panel-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.room-panel h2 {
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 0.2rem;
  text-shadow: 0 0 6px var(--glow-strong);
}

.room-description {
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 0.4rem;
  max-height: 4.8em;
  overflow: hidden;
}

.room-map-container {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.2rem;
  display: inline-flex;
  line-height: 1;
}

.room-map-container canvas {
  display: block;
  image-rendering: pixelated;
}

.ascii-art {
  font-size: 10px;
  line-height: 1.1;
  color: var(--dim);
  white-space: pre;
  margin-bottom: 0.4rem;
}

.room-summary {
  display: grid;
  gap: 0.35rem;
  padding-top: 0.45rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--border);
}

.room-summary-line {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
}

.room-summary-label {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.room-summary-value {
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

/* ── Story log ── */

.narrative-log {
  flex: 1;
  min-height: 80px;
  overflow-y: auto;
  padding: 0.3rem 0.8rem;
  scroll-behavior: smooth;
}

.story-entry {
  padding: 0.4rem 0;
  font-size: 12px;
}

.story-entry + .story-entry::before {
  content: '───────────────────────────────────';
  display: block;
  color: var(--border-hi);
  padding-bottom: 0.4rem;
  font-size: 10px;
  opacity: 0.5;
}

.story-entry.success { border-left: 2px solid var(--ok); padding-left: 0.5rem; }
.story-entry.failure { border-left: 2px solid var(--bad); padding-left: 0.5rem; }
.story-entry.command { color: var(--accent); font-weight: 700; }

.story-command-line {
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
  opacity: 0.9;
}

.story-narration {
  color: var(--accent);
  line-height: 1.65;
  border-left: 2px solid var(--glow);
  padding-left: 0.6rem;
  margin-bottom: 0.25rem;
  text-shadow: 0 0 4px var(--glow);
}

/* ── Streaming text cursor ── */

.cursor-blink {
  animation: cursorBlink 0.7s step-end infinite;
  color: inherit;
  margin-left: 1px;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

.streaming-text {
  white-space: pre-wrap;
}

.story-metadata {
  color: var(--dim);
  opacity: 0.6;
  font-size: 12px;
  line-height: 1.2;
  padding-left: 1em;
  white-space: pre-wrap;
}

.story-mechanical {
  color: var(--dim);
  font-size: 12px;
  white-space: pre-wrap;
}

.story-mechanical code { color: var(--accent); }
.story-mechanical strong { color: var(--text); font-weight: 700; }

.story-dice {
  color: var(--gold);
  font-size: 12px;
  margin-top: 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dice-roll {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 2px 8px;
  border: 1px solid rgba(255,255,255,0.08);
}

.dice-roll.outcome-criticalhit { border-color: #f59e0b; background: rgba(245,158,11,0.1); }
.dice-roll.outcome-hit { border-color: #22c55e; background: rgba(34,197,94,0.08); }
.dice-roll.outcome-glancinghit { border-color: #f97316; background: rgba(249,115,22,0.08); }
.dice-roll.outcome-miss { border-color: #ef4444; background: rgba(239,68,68,0.08); }
.dice-roll.outcome-criticalmiss { border-color: #dc2626; background: rgba(220,38,38,0.15); }

.outcome-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
}
.outcome-badge.crit { color: #f59e0b; }
.outcome-badge.hit { color: #22c55e; }
.outcome-badge.glancing { color: #f97316; }
.outcome-badge.miss { color: #ef4444; }
.outcome-badge.fumble { color: #dc2626; }

/* ── Stat bar (block characters) ── */

.stat-bar {
  flex-shrink: 0;
  padding: 0.3rem 0.8rem;
  border-top: 1px solid var(--glow);
  border-bottom: 1px solid var(--border);
  background: #0c0c0c;
  font-size: 11px;
  white-space: nowrap;
  overflow-x: auto;
  color: var(--dim);
  letter-spacing: 0.02em;
}

.stat-bar .stat-hp { color: #ff4444; }
.stat-bar .stat-mp { color: #4488ff; }
.stat-bar .stat-xp { color: #ffd700; }
.stat-bar .stat-gold { color: var(--gold); }
.stat-bar .stat-level { color: var(--accent); }
.stat-bar .stat-sep { color: var(--border-hi); }
.stat-bar .stat-label { color: var(--dim); margin-right: 0.3em; }
.stat-bar .stat-filled { opacity: 1; }
.stat-bar .stat-empty { opacity: 0.3; }
.stat-bar .stat-bar-track { display: inline-block; }

/* ── Command bar ── */

.command-bar {
  flex-shrink: 0;
  padding: 0.4rem 0.8rem;
  background: var(--bg-panel);
}

.command-bar form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.4rem;
  align-items: center;
}

.prompt {
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 0 6px var(--glow-strong);
}

#command-input {
  font-size: 13px;
  padding: 0.35rem 0.5rem;
  background: var(--bg);
  border-color: var(--border);
  color: var(--accent);
  caret-color: var(--accent);
}

#command-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 4px var(--glow);
}

.quick-commands { margin-top: 0.3rem; }
.quick-commands .btn { font-size: 10px; padding: 0.15rem 0.35rem; }

.exit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}

.exit-chip {
  font-size: 10px;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  border-color: var(--glow);
  color: var(--accent);
}

.exit-chip:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

/* ── Interaction mode styling ── */

.interaction-chip {
  border-color: var(--glow);
}

.interaction-chip:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.prompt-mode {
  font-weight: bold;
  margin-right: 0.3em;
}

.prompt-mode.conversation {
  color: #44cc88;
}

.prompt-mode.combat {
  color: #ff4444;
  animation: combatPulse 1.5s ease-in-out infinite;
}

.stat-mode-badge {
  font-weight: bold;
  margin-right: 0.5em;
  padding: 0 0.3em;
  border-radius: 2px;
}

.stat-mode-badge.mode-conversation {
  color: #000;
  background: #44cc88;
}

.stat-mode-badge.mode-combat {
  color: #000;
  background: #ff4444;
  animation: combatPulse 1.5s ease-in-out infinite;
}

@keyframes combatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Fade-slide animation ── */

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-slide-in {
  animation: fadeSlideIn 0.3s ease-out;
}

/* ── Info drawer (right sidebar) ── */

.info-drawer {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-panel);
  transition: margin-right 0.2s ease;
}

.info-drawer.collapsed {
  display: none;
}

#workspace-user .info-drawer {
  width: 280px;
}

#workspace-user .info-drawer.collapsed {
  display: none;
}

.info-drawer .sidebar-section {
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border);
}

.info-drawer .sidebar-section:last-child { border-bottom: none; }

.info-drawer h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 0.35rem;
}

.admin-character-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(220px, 1fr));
  gap: 0.75rem;
}

.admin-character-panel .sidebar-section {
  padding: 0.65rem;
  border: 1px solid var(--border);
  background: var(--bg-input);
  min-height: 0;
}

.admin-character-panel .status-panel {
  grid-column: 1 / -1;
}

.admin-character-panel .sidebar-section h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-bottom: 0.35rem;
}

/* Character */
.char-identity {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.char-identity span {
  color: var(--dim);
  font-weight: 400;
  font-size: 11px;
}

.char-meta { color: var(--dim); font-size: 11px; }

.resource-bars { display: grid; gap: 0.25rem; margin-bottom: 0.3rem; }

.bar-group {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.3rem;
  align-items: center;
}

.bar-group label { font-size: 10px; color: var(--dim); text-transform: uppercase; }

.bar {
  position: relative;
  height: 14px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
}

.bar-hp { background: var(--hp-bg); }
.bar-mp { background: var(--mp-bg); }
.bar-xp { background: var(--xp-bg); }

.bar-fill {
  height: 100%;
  width: 0;
  transition: width 0.25s ease;
}

.bar-hp .bar-fill { background: var(--hp); }
.bar-mp .bar-fill { background: var(--mp); }
.bar-xp .bar-fill { background: var(--xp); }

.bar-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #f0f0f0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.3rem;
}

.stat-box {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.3rem 0.2rem;
  text-align: center;
}

.stat-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-transform: uppercase;
}

.stat-value { font-size: 13px; font-weight: 700; }
.stat-mod { font-size: 10px; color: var(--accent); }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.detail-card {
  padding: 0.3rem 0.4rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.detail-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.detail-value {
  font-size: 12px;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.char-resources {
  font-size: 11px;
  margin-top: 0.3rem;
  gap: 0.4rem;
}

.char-resources span {
  padding: 0.15rem 0.3rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

/* Equipment & Inventory */

.equipment-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.equip-slot {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.3rem 0.4rem;
}

.slot-name {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.slot-item { font-size: 12px; font-weight: 600; }
.slot-empty { font-size: 11px; font-style: italic; color: var(--dim); }

.inventory-list { display: grid; gap: 0.2rem; }

.inv-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.25rem 0.4rem;
  display: grid;
  gap: 0.1rem;
}

.inv-item strong { font-size: 12px; }

.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.3rem;
  border-radius: var(--r);
  border: 1px solid var(--gold);
  background: var(--bg-input);
  font-size: 11px;
  color: var(--gold);
}

.no-effects { font-style: italic; font-size: 11px; color: var(--dim); }

/* Health */

.system-health {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.3rem 0.4rem;
}

.health-label { font-size: 11px; font-weight: 600; }
.health-note { font-size: 10px; color: var(--dim); }

/* Players list */

.players-list { display: grid; gap: 0.2rem; max-height: 180px; overflow-y: auto; }



.player-row {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.25rem 0.4rem;
  display: grid;
  gap: 0.1rem;
}

.player-row strong { font-size: 12px; }

/* ───────────────────────── ADMIN WORKSPACE ───────────────────────── */

#workspace-admin {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Admin toolbar / tab bar ── */

.admin-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0.6rem;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  min-height: 36px;
}

.admin-toolbar .admin-tab {
  position: relative;
  border: none;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.admin-toolbar .admin-tab:hover {
  color: var(--text);
  background: var(--accent-bg);
}

.admin-toolbar .admin-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 6px var(--glow);
}

.admin-toolbar-spacer {
  flex: 1;
}

.admin-toolbar .btn {
  margin-left: 0.4rem;
}

/* ── Tab content panels ── */

.admin-tab-content {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.admin-tab-content.active {
  display: block;
}

.admin-tab-body {
  padding: 0.8rem;
  display: grid;
  gap: 0.8rem;
}

.admin-tab-body > .panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.7rem;
}

.admin-tab-body > .panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 0.4rem;
}

.panel-hint {
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

/* ── Overview tab grid ── */

.admin-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.admin-overview-grid > .panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.7rem;
}

.admin-overview-grid > .panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 0.4rem;
}

/* ── LLM tab ── */

.llm-active-model {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
}

.llm-model-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 6px var(--glow);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-models-list {
  display: grid;
  gap: 0.4rem;
}

.llm-model-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color 0.12s;
}

.llm-model-card:hover {
  border-color: var(--accent);
}

.llm-model-card.active {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.llm-model-card .model-id {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-model-card .model-badge {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  white-space: nowrap;
}

/* Legacy compat */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  padding: 0.8rem;
  overflow-y: auto;
  height: 100%;
}

.admin-grid .panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.7rem;
}

.admin-grid .panel h3 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 0.4rem;
}

.span-2 { grid-column: span 2; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.summary-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.4rem 0.5rem;
  text-align: center;
}

.summary-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.summary-value { font-size: 1.1rem; font-weight: 700; }
.summary-metric { margin-top: 0.25rem; }

.admin-command-form {
  display: grid;
  grid-template-columns: minmax(0, 150px) 1fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.activity-log {
  max-height: 200px;
  overflow-y: auto;
  display: grid;
  gap: 0.3rem;
}

.activity-item {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.35rem 0.5rem;
  display: grid;
  gap: 0.15rem;
}

.activity-item.success { border-left: 2px solid var(--ok); }
.activity-item.failure { border-left: 2px solid var(--bad); }
.activity-item.info { border-left: 2px solid var(--accent); }
.activity-meta { font-size: 10px; color: var(--dim); }
.activity-text { font-size: 12px; white-space: pre-wrap; color: var(--dim); }

.mutation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.mutation-form {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg-input);
}

.mutation-form h4 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.mutation-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.mutation-row-4 { grid-template-columns: repeat(4, 1fr); }
.mutation-form-wide { grid-column: span 2; }

/* ── World Actions tab ── */
.world-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.world-action-form {
  display: grid;
  gap: 0.6rem;
}
.world-action-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.world-action-result {
  font-size: 13px;
  color: var(--accent);
  min-height: 1.4em;
}
.world-action-result.error { color: var(--danger, #f55); }

/* ── World Browser ── */
.panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.panel-header-row h3 { margin: 0; }

.world-list { display: grid; gap: 0.4rem; }

.world-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.world-card:hover { border-color: var(--accent); }
.world-card.selected { border-color: var(--accent); background: rgba(97,175,239,0.08); }

.world-card-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.world-card-name { font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.world-card-meta { font-size: 11px; color: var(--dim); }
.world-card-badges { display: flex; gap: 0.3rem; flex-shrink: 0; }

.world-badge {
  font-size: 10px;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
}
.world-badge.active { background: rgba(80,200,120,0.15); color: #50c878; }
.world-badge.inactive { background: rgba(200,80,80,0.15); color: #c85050; }
.world-badge.default { background: rgba(97,175,239,0.15); color: var(--accent); }
.world-badge.players { background: rgba(200,170,80,0.15); color: #c8aa50; }
.world-badge.portals { background: rgba(170,80,200,0.15); color: #aa50c8; }

.world-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.world-stat-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.4rem 0.5rem;
  text-align: center;
}
.world-stat-value { font-size: 18px; font-weight: 700; color: var(--accent); }
.world-stat-label { font-size: 10px; color: var(--dim); text-transform: uppercase; }

.world-detail-section { margin-top: 0.5rem; }
.world-detail-section h4 { font-size: 12px; margin: 0 0 0.3rem; color: var(--dim); text-transform: uppercase; }
.world-detail-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.world-tag {
  font-size: 10px;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(97,175,239,0.1);
  color: var(--accent);
  border: 1px solid rgba(97,175,239,0.2);
}

/* ── Portal List ── */
.portal-list { display: grid; gap: 0.4rem; }

.portal-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.portal-card-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.portal-card-route { font-weight: 700; font-size: 12px; }
.portal-card-meta { font-size: 11px; color: var(--dim); }
.portal-card-actions { display: flex; gap: 0.3rem; flex-shrink: 0; }

.panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.75rem 0;
}

.panel-danger {
  border-color: #662222;
}
.panel-danger h3 { color: #f77; }
.btn-warning {
  background: transparent;
  border: 1px solid #cc8800;
  color: #cc8800;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  padding: 0.5rem 1rem;
  border-radius: var(--r);
}
.btn-warning:hover { background: rgba(204,136,0,0.15); }
.btn-danger {
  background: transparent;
  border: 1px solid #cc3333;
  color: #cc3333;
  cursor: pointer;
  font-family: var(--font);
  font-size: 13px;
  padding: 0.5rem 1rem;
  border-radius: var(--r);
}
.btn-danger:hover { background: rgba(204,51,51,0.15); }

/* ── World Toolbar ── */
.world-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.toolbar-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Admin Tools collapsible section ── */
.admin-tools-section {
  margin-top: 0.25rem;
}
.admin-tools-header {
  font-size: 13px;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.admin-tools-header::-webkit-details-marker { display: none; }
.admin-tools-header::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
.admin-tools-section[open] > .admin-tools-header::before {
  transform: rotate(90deg);
}

.registry-table { display: grid; gap: 0.4rem; }

.registry-row {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.registry-meta { display: flex; flex-direction: column; gap: 0.1rem; }
.registry-name { font-weight: 700; font-size: 12px; }
.registry-subtext { font-size: 11px; color: var(--dim); }
.registry-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.room-catalogue { display: grid; gap: 0.4rem; }

.room-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem 0.6rem;
  display: grid;
  gap: 0.25rem;
}

.room-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.room-card-title { font-weight: 700; font-size: 12px; }
.room-card-meta { font-size: 11px; color: var(--dim); }
.room-card-description { font-size: 11px; color: var(--dim); white-space: pre-wrap; }

.payload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.payload-block { display: grid; gap: 0.3rem; }

.payload-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.payload-view {
  min-height: 120px;
  max-height: 200px;
  overflow: auto;
  padding: 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--dim);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.dashboard-shell .workspace.hidden { display: none; }

/* ───────────────────────── SCROLLBAR ───────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 1px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ───────────────────────── RESPONSIVE ───────────────────────── */

@media (max-width: 1100px) {
  .portal-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-overview-grid { grid-template-columns: 1fr; }
  .admin-character-panel-grid { grid-template-columns: 1fr 1fr; }
  .admin-character-panel .char-panel,
  .admin-character-panel .status-panel { grid-column: 1 / -1; }
  .span-2, .mutation-form-wide { grid-column: auto; }
  .summary-cards { grid-template-columns: repeat(3, 1fr); }
  .app-header { flex-wrap: wrap; }
  .info-drawer { width: 240px; }
}

@media (max-width: 700px) {
  .form-row, .auth-grid, .stats-grid, .detail-grid, .payload-grid,
  .equipment-slots, .mutation-grid, .mutation-row, .mutation-row-4 {
    grid-template-columns: 1fr;
  }
  .admin-character-panel-grid { grid-template-columns: 1fr; }
  .admin-overview-grid { grid-template-columns: 1fr; }
  .summary-cards, .system-health { grid-template-columns: 1fr 1fr; }
  .stat-bar { font-size: 10px; }
  .room-panel-shell { grid-template-columns: 1fr; }
  .info-drawer { display: none !important; }
  .admin-toolbar { flex-wrap: wrap; gap: 0; padding: 0 0.3rem; }
  .admin-toolbar .admin-tab { padding: 0.4rem 0.5rem; font-size: 10px; }
  .logs-toolbar { flex-direction: column; }
}

/* ───────────────────────── AI LOGS TAB ───────────────────────── */

.logs-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.logs-filters {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.logs-filters select,
.logs-filters input {
  font-family: var(--font);
  font-size: 12px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
}

.logs-filters select:focus,
.logs-filters input:focus {
  border-color: var(--accent);
  outline: none;
}

.logs-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.logs-count {
  font-size: 11px;
  color: var(--text-muted);
}

.logs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.logs-stat-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.6rem 0.8rem;
  text-align: center;
}

.logs-stat-card .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  display: block;
}

.logs-stat-card .stat-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logs-list {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.log-entry {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.log-entry:hover {
  border-color: var(--accent);
}

.log-entry.expanded {
  border-color: var(--accent);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.log-operation {
  font-weight: 700;
  color: var(--accent);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.log-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 11px;
  color: var(--text-muted);
}

.log-meta .log-error {
  color: #f44;
}

.log-preview {
  margin-top: 0.4rem;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-detail {
  display: none;
  margin-top: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.log-entry.expanded .log-detail {
  display: block;
}

.log-entry.expanded .log-preview {
  display: none;
}

.log-prompt-section {
  margin-bottom: 0.75rem;
}

.log-prompt-section h4 {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.3rem;
}

.log-prompt-section pre {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.5rem;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text);
}

/* ───────────────────── EVENT LOG ───────────────────── */

.event-log-list {
  max-height: 70vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 12px;
}

.event-log-entry {
  display: grid;
  grid-template-columns: 80px 2em 100px 1fr;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.3rem 0.5rem;
  border-radius: 3px;
  border-left: 3px solid transparent;
  transition: background 0.15s;
}

.event-log-entry:hover {
  background: var(--bg-panel);
}

.event-log-entry[data-event-type="PlayerMoved"]    { border-left-color: #5b9bd5; }
.event-log-entry[data-event-type="CombatStarted"]  { border-left-color: #e74c3c; }
.event-log-entry[data-event-type="PlayerDied"]      { border-left-color: #9b59b6; }
.event-log-entry[data-event-type="PlayerTalked"]    { border-left-color: #2ecc71; }
.event-log-entry[data-event-type="QuestUpdated"]    { border-left-color: #f39c12; }
.event-log-entry[data-event-type="RoomUpdated"]     { border-left-color: #95a5a6; }
.event-log-entry[data-event-type="StoryAdvanced"]   { border-left-color: #7f8fa6; }

.event-log-time {
  color: var(--dim);
  white-space: nowrap;
}

.event-log-icon {
  text-align: center;
}

.event-log-player {
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-log-summary {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-log-entry.fade-in {
  animation: eventFadeIn 0.3s ease-out;
}

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

/* ───────────────────── DM CONSOLE ───────────────────── */

.dm-console-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-height: 520px;
}

.dm-console-main { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; overflow: hidden; }
.dm-detail-panel { min-width: 0; }

.dm-search-bar {
  display: flex;
  gap: 0.4rem;
}
.dm-search-bar select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.6rem;
  color: var(--dim);
  font-family: var(--font);
  font-size: 13px;
  cursor: pointer;
  min-width: 100px;
  max-width: 160px;
  flex-shrink: 0;
}
.dm-search-bar select:focus { border-color: var(--accent); outline: none; color: var(--accent); }
.dm-search-bar input {
  flex: 1 1 0;
  min-width: 200px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.8rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
}
.dm-search-bar input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 6px var(--glow); }
.dm-search-bar input::placeholder { color: var(--dim); }

.dm-results {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 550px;
  padding-right: 2px;
}

.dm-welcome { padding: 1.5rem 1rem; text-align: center; }
.dm-welcome h3 { color: var(--accent); margin-bottom: 0.5rem; font-size: 15px; text-shadow: 0 0 12px var(--glow); }
.dm-welcome p { color: var(--dim); font-size: 12px; margin-bottom: 1rem; }

.dm-quick-links { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.dm-quick-btn {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.35rem 0.7rem;
  color: var(--dim);
  font-family: var(--font);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.dm-quick-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* Result cards */
.dm-result-card {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r);
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  transition: all 0.15s;
}
.dm-result-card:hover { border-left-color: var(--accent); background: rgba(51,255,102,0.02); }
.dm-result-card.selected { border-color: var(--accent); border-left-color: var(--accent); background: var(--accent-bg); box-shadow: 0 0 8px rgba(51,255,102,0.1); }
.dm-result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.15rem; }
.dm-result-name { color: var(--accent); font-weight: bold; font-size: 12px; }
.dm-result-type {
  border-radius: 3px;
  padding: 0.1rem 0.45rem;
  font-size: 9px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Type-specific colors for badges */
.dm-type-spell  { background: rgba(138, 43, 226, 0.15); border: 1px solid rgba(138, 43, 226, 0.35); color: #b388ff; }
.dm-type-item   { background: rgba(255, 193, 7, 0.12); border: 1px solid rgba(255, 193, 7, 0.3); color: #ffd54f; }
.dm-type-class  { background: rgba(0, 150, 255, 0.12); border: 1px solid rgba(0, 150, 255, 0.3); color: #64b5f6; }
.dm-type-race   { background: rgba(0, 200, 150, 0.12); border: 1px solid rgba(0, 200, 150, 0.3); color: #80cbc4; }
.dm-type-room   { background: rgba(255, 152, 0, 0.12); border: 1px solid rgba(255, 152, 0, 0.3); color: #ffb74d; }
.dm-type-player { background: rgba(0, 255, 65, 0.1); border: 1px solid rgba(0, 255, 65, 0.25); color: var(--accent); }
.dm-type-npc    { background: rgba(255, 82, 82, 0.12); border: 1px solid rgba(255, 82, 82, 0.3); color: #ff8a80; }

.dm-result-meta { color: var(--dim); font-size: 10px; margin-bottom: 0.1rem; letter-spacing: 0.2px; }
.dm-result-desc { color: var(--text); font-size: 11px; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-result-count { color: var(--dim); font-size: 11px; padding: 0.3rem 0; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; }
.dm-no-results { color: var(--dim); font-size: 12px; padding: 1rem; text-align: center; }
.dm-create-prompt {
  background: rgba(0, 180, 255, 0.06);
  border: 1px solid rgba(0, 180, 255, 0.2);
  border-radius: var(--r);
  padding: 0.75rem;
  text-align: center;
  margin-top: 0.5rem;
}
.dm-create-prompt p { color: var(--dim); font-size: 12px; margin-bottom: 0.5rem; }
.dm-create-prompt .btn { margin: 0.2rem; }

/* ── Detail panel (right side) ── */
.dm-detail-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 680px;
}
.dm-detail-empty { padding: 2.5rem 1rem; text-align: center; color: var(--dim); font-size: 12px; }

.dm-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(51,255,102,0.04) 0%, transparent 100%);
}
.dm-detail-header-left { display: flex; align-items: center; gap: 0.6rem; }
.dm-detail-actions-top { display: flex; gap: 0.3rem; }
.dm-detail-title { color: var(--accent); font-weight: bold; font-size: 15px; text-shadow: 0 0 10px var(--glow); }
.dm-detail-type-badge { font-size: 9px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; }

.dm-icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--dim);
  font-family: var(--font);
  font-size: 11px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
}
.dm-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.dm-icon-btn.dm-icon-danger:hover { border-color: var(--bad); color: var(--bad); }

.dm-detail-desc {
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 11px;
  font-style: italic;
  opacity: 0.75;
  border-bottom: 1px solid var(--border);
  background: rgba(51,255,102,0.02);
}

/* Card (property table) */
.dm-detail-card {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  overflow-y: auto;
  max-height: 220px;
}
.dm-detail-card-empty { min-height: 40px; display: flex; align-items: center; justify-content: center; }
.dm-card-placeholder { color: var(--dim); font-size: 11px; font-style: italic; padding: 0.5rem; }
.dm-detail-card table { width: 100%; border-collapse: collapse; font-size: 11px; }
.dm-detail-card tr { border-bottom: 1px solid rgba(26, 42, 26, 0.5); }
.dm-detail-card tr:last-child { border-bottom: none; }
.dm-detail-card td { padding: 0.3rem 0.5rem; vertical-align: top; }
.dm-detail-card .dm-card-label { color: var(--dim); white-space: nowrap; width: 110px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; }
.dm-detail-card td:last-child { color: var(--text); font-weight: 500; }
.dm-inline-item-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dm-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.15rem 0.35rem;
  border: 1px solid rgba(0, 255, 65, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.16);
}
.dm-inline-slot {
  color: var(--dim);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.dm-inline-item-label { color: var(--text); font-size: 10px; }
.dm-inline-item-qty { color: var(--dim); font-size: 9px; }
.dm-inline-action {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 80, 80, 0.4);
  border-radius: 999px;
  background: transparent;
  color: #ff8a80;
  cursor: pointer;
  font-family: var(--font);
  font-size: 11px;
  line-height: 1;
  padding: 0;
}
.dm-inline-action:hover {
  background: rgba(255, 80, 80, 0.12);
  border-color: rgba(255, 120, 120, 0.6);
}

/* Value color classes */
.dm-val-hp { color: var(--hp) !important; }
.dm-val-mp { color: var(--mp) !important; }
.dm-val-gold { color: var(--gold) !important; }
.dm-val-xp { color: var(--xp) !important; }
.dm-val-accent { color: var(--accent) !important; }
.dm-val-heal { color: #4caf50 !important; }

/* Inline stat grid for players */
.dm-stats-inline { border-collapse: collapse; }
.dm-stats-inline td { padding: 0.1rem 0.4rem 0.1rem 0; }
.dm-stat-label { color: var(--dim); font-size: 9px; text-transform: uppercase; margin-right: 0.25rem; letter-spacing: 0.3px; }
.dm-stat-val { color: var(--accent); font-weight: bold; font-size: 12px; }

/* ── Chat section ── */
.dm-detail-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  border-top: 1px solid var(--border);
}
.dm-detail-chat-label {
  padding: 0.35rem 0.75rem;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--dim);
  background: rgba(51,255,102,0.03);
  border-bottom: 1px solid var(--border);
}
.dm-detail-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 160px;
}
.dm-detail-chat-input-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
}
.dm-detail-chat-input-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.45rem 0.6rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
}
.dm-detail-chat-input-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 4px var(--glow); }

/* ── Action bar ── */
.dm-detail-actions {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.1);
}
.dm-detail-actions .btn { flex: 1; padding: 0.45rem 1rem; font-size: 12px; }

/* ── JSON editor ── */
.dm-detail-json {
  display: none;
  padding: 0.5rem 0.6rem;
  overflow-y: auto;
  max-height: 280px;
  border-bottom: 1px solid var(--border);
}
.dm-detail-json.visible { display: block; }
.dm-detail-json textarea {
  width: 100%;
  min-height: 180px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem;
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  resize: vertical;
  line-height: 1.5;
}
.dm-detail-json .btn { margin-top: 0.4rem; width: 100%; }

/* ── Player action bar ── */
.dm-player-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: rgba(0,255,65,0.03);
  flex-wrap: wrap;
}
.dm-player-actions .btn { font-size: 11px; padding: 0.3rem 0.55rem; }
.dm-player-actions .btn-icon { margin-right: 0.25rem; }
.dm-player-actions .btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Impersonate panel (inline chat as player in DM console) ── */
.dm-impersonate-panel {
  border: 1px solid var(--accent);
  border-radius: var(--r);
  margin: 0.4rem 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}
.dm-impersonate-panel.hidden { display: none; }
.dm-impersonate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0.5rem;
  background: rgba(100,149,237,0.15);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--accent);
}
.dm-impersonate-log {
  max-height: 250px;
  overflow-y: auto;
  padding: 0.3rem 0.5rem;
  font-size: 11px;
  line-height: 1.5;
}
.imp-msg { margin: 2px 0; padding: 2px 0; }
.imp-msg.player { color: var(--accent); font-weight: 600; }
.imp-msg.mech { color: var(--fg); opacity: 0.8; }
.imp-msg.narr { color: var(--fg); font-style: italic; }
.imp-msg.error { color: var(--danger); }
.dm-impersonate-input-row {
  display: flex;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border-top: 1px solid var(--border);
}
.dm-impersonate-input-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--fg);
  padding: 0.25rem 0.4rem;
  font-family: var(--font);
  font-size: 11px;
}
.dm-impersonate-input-row input:focus { border-color: var(--accent); outline: none; }
.dm-impersonate-quick {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem 0.5rem 0.3rem;
  flex-wrap: wrap;
}
.btn-xs { font-size: 9px; padding: 1px 5px; }

/* ── Item picker (inline under action bar) ── */
.dm-item-picker {
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  background: rgba(0,0,0,0.15);
}
.dm-item-picker.hidden { display: none; }
.dm-item-picker-row {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}
.dm-item-picker-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.35rem 0.5rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
}
.dm-item-picker-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 4px var(--glow); }
.dm-item-picker-row select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.35rem 0.5rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  min-width: 90px;
}
.dm-item-picker-list {
  max-height: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-item-picker-loading { font-size: 10px; color: var(--dim); padding: 0.3rem; font-style: italic; }
.dm-item-pick {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.4rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  transition: background 0.1s;
}
.dm-item-pick:hover { background: rgba(0,255,65,0.08); }
.dm-item-pick-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.dm-item-pick-name { color: var(--accent); flex: 1; }
.dm-item-pick-meta { color: var(--dim); font-size: 10px; white-space: nowrap; }

/* ── Inline quick-action forms (player/room detail panel) ── */
.dm-inline-section {
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
}
.dm-inline-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.dm-inline-header::-webkit-details-marker { display: none; }
.dm-inline-header::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
.dm-inline-section[open] > .dm-inline-header::before { transform: rotate(90deg); }
.dm-inline-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0 0.6rem 0.5rem;
}
.dm-inline-form {}
.dm-inline-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}
.dm-inline-row {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.dm-inline-row input[type="text"],
.dm-inline-row input[type="number"] {
  flex: 1;
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.3rem 0.5rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
}
.dm-inline-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 4px var(--glow); }
.dm-inline-row select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.3rem 0.4rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
}
.dm-resource-row {
  flex-wrap: wrap;
}
.dm-res-field {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.dm-res-field span {
  font-size: 10px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}
.dm-res-field input[type="number"] {
  width: 3.5rem;
  flex: none;
}

/* ── Inline AI edit bar (replaces old chat section) ── */
.dm-detail-ai {
  border-top: 1px solid var(--border);
  padding: 0.45rem 0.6rem;
  background: rgba(0,0,0,0.12);
}
.dm-ai-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.dm-ai-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.4rem 0.6rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
}
.dm-ai-row input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 4px var(--glow); }
.dm-ai-row input::placeholder { color: var(--dim); opacity: 0.6; }
.dm-ai-messages {
  max-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.dm-ai-messages.hidden { display: none; }
.dm-ai-msg { font-size: 10px; padding: 0.25rem 0.45rem; border-radius: 3px; line-height: 1.4; }
.dm-ai-msg.user { background: rgba(0,120,255,0.12); color: #90caf9; }
.dm-ai-msg.ai { background: rgba(0,255,65,0.08); color: var(--accent); }
.dm-ai-msg.system { color: var(--dim); font-style: italic; }
.dm-ai-msg.loading { opacity: 0.6; font-style: italic; }

/* ───────────────────── CONTENT REGISTRY TAB ───────────────────── */

.registry-browse-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  min-height: 520px;
}
.registry-browse-layout:has(.registry-editor-col:not(.hidden)) {
  grid-template-columns: 1fr 1fr;
}

.registry-browse-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.registry-search-bar {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.registry-search-bar select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.6rem;
  color: var(--dim);
  font-family: var(--font);
  font-size: 12px;
}
.registry-search-bar select:focus { border-color: var(--accent); outline: none; color: var(--accent); }
.registry-search-bar input {
  flex: 1 1 0;
  min-width: 150px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.6rem 0.6rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
}
.registry-search-bar input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 6px var(--glow); }
.registry-search-bar input::placeholder { color: var(--dim); }
.registry-count { color: var(--dim); font-size: 11px; white-space: nowrap; }

.registry-list-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.registry-list-actions .btn { white-space: nowrap; }

/* Quest generation dialog */
.quest-gen-dialog {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.quest-gen-dialog h4 { margin: 0 0 0.3rem 0; color: var(--accent); }
.quest-gen-dialog label { font-size: 11px; color: var(--dim); }
.quest-gen-dialog textarea, .quest-gen-dialog select, .quest-gen-dialog input[type="number"] {
  background: var(--bg); color: var(--fg); border: 1px solid var(--border);
  border-radius: 4px; padding: 0.3rem 0.5rem; font-size: 12px; width: 100%;
}
.quest-gen-dialog select[multiple] { min-height: 5em; }
.quest-gen-level-row { display: flex; gap: 0.5rem; align-items: center; }
.quest-gen-level-row input[type="number"] { width: 4rem !important; }
.quest-gen-actions { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.quest-gen-status { font-size: 11px; color: var(--dim); min-height: 1.2em; }
.btn-accent { background: #7c4dff; color: #fff; border: none; cursor: pointer; }
.btn-accent:hover { background: #651fff; }

.registry-entries {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: calc(100vh - 220px);
  min-height: 200px;
}

.registry-entry {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.5rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.registry-entry:hover { border-color: var(--accent); }
.registry-entry-name { color: var(--accent); font-weight: bold; font-size: 13px; }
.registry-entry-meta { color: var(--dim); font-size: 11px; }
.registry-world-tag {
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
  background: rgba(0,150,255,0.1);
  border: 1px solid rgba(0,150,255,0.25);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.registry-entry-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.registry-entry-tag {
  background: rgba(0, 255, 65, 0.08);
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  font-size: 10px;
  color: var(--dim);
}
.registry-entry-actions { display: flex; gap: 0.3rem; }

/* Editor column */
.registry-editor-col {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
}
.registry-editor-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  flex: 1;
}

.registry-ai-chat {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.registry-chat-messages {
  max-height: 200px;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
}
.chat-msg {
  padding: 0.45rem 0.65rem;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.45;
  max-width: 88%;
}
.chat-msg.system {
  background: rgba(0, 255, 65, 0.04);
  border: 1px solid rgba(0, 255, 65, 0.1);
  color: var(--dim);
  align-self: center;
  max-width: 100%;
  text-align: center;
  font-size: 10px;
  font-style: italic;
}
.chat-msg.user {
  background: rgba(0, 150, 255, 0.1);
  border: 1px solid rgba(0, 150, 255, 0.25);
  color: var(--text);
  align-self: flex-end;
  border-radius: 4px 4px 0 4px;
}
.chat-msg.ai {
  background: rgba(138, 43, 226, 0.08);
  border: 1px solid rgba(138, 43, 226, 0.2);
  color: var(--text);
  align-self: flex-start;
  border-radius: 4px 4px 4px 0;
}
.chat-msg.loading { color: var(--dim); font-style: italic; opacity: 0.7; }

.registry-chat-input-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
.registry-chat-input-row input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.4rem 0.6rem;
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
}
.registry-chat-input-row input:focus {
  border-color: var(--accent);
  outline: none;
}

.registry-json-editor {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.registry-json-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--dim);
  font-size: 11px;
}
.registry-json-area {
  flex: 1;
  background: var(--bg-input);
  border: none;
  padding: 0.75rem;
  color: var(--accent);
  font-family: var(--font);
  font-size: 11px;
  resize: none;
  min-height: 280px;
}
.registry-json-area:focus { outline: none; }

.registry-editor-actions {
  display: flex;
  gap: 0.5rem;
}
.btn-danger {
  background: rgba(255, 50, 50, 0.15);
  border-color: rgba(255, 50, 50, 0.4);
  color: #ff5555;
}
.btn-danger:hover {
  background: rgba(255, 50, 50, 0.25);
  border-color: rgba(255, 50, 50, 0.6);
}
.registry-editor-actions .btn-danger { margin-left: auto; }

/* Inline delete buttons in list rows */
.admin-row-delete, .dm-result-delete, .room-card-delete {
  background: transparent;
  border: 1px solid transparent;
  color: var(--dim);
  font-size: 11px;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  border-radius: var(--r);
  transition: all 0.15s;
}
.admin-row-delete:hover, .dm-result-delete:hover, .room-card-delete:hover {
  border-color: var(--bad);
  color: var(--bad);
}

/* Inline spinner for buttons */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════
   UX POLISH PASS — "make the CRT come alive"
   Appended so it layers over the base rules. All motion respects the
   prefers-reduced-motion backstop defined near the top of this file.
   ════════════════════════════════════════════════════════════════════════ */

/* ─────────────── Living screen: gentle scanline drift ─────────────── */
/* The scanlines slowly creep — just enough to read as a powered tube,
   not enough to distract. (One-time power-on lives in the boot screen.) */
body::after { animation: scanDrift 8s linear infinite; will-change: transform; }
@keyframes scanDrift { to { transform: translateY(4px); } }

/* ─────────────────────────── BOOT SCREEN ─────────────────────────── */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
}
.boot-screen.boot-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease);
}
/* Power-on flash: a bright horizontal line snaps open into the screen. */
.boot-screen::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--bloom-strong);
  animation: bootPowerOn 0.65s var(--ease) forwards;
}
@keyframes bootPowerOn {
  0%   { transform: scaleY(0.4) scaleX(0.05); opacity: 0; }
  18%  { transform: scaleY(1) scaleX(1); opacity: 1; }
  40%  { transform: scaleY(180) scaleX(1); opacity: 0.18; }
  100% { transform: scaleY(180) scaleX(1); opacity: 0; }
}
.boot-inner {
  position: relative;
  width: min(560px, 86vw);
  padding: 0 0.5rem;
  opacity: 0;
  animation: bootContentIn 0.5s var(--ease) 0.42s forwards;
}
@keyframes bootContentIn { from { opacity: 0; } to { opacity: 1; } }
.boot-logo {
  font-size: clamp(1.25rem, 4.2vw, 2rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: var(--bloom-strong);
  line-height: 1.1;
}
.boot-sub {
  margin-top: 0.35rem;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
}
.boot-log {
  margin-top: 1.4rem;
  min-height: 9.5em;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}
.boot-line { display: block; opacity: 0; animation: bootLineIn 0.18s var(--ease) forwards; }
.boot-line .ok   { color: var(--ok); text-shadow: var(--text-bloom); float: right; }
.boot-line .ready { display: inline-block; margin-top: 0.7rem; color: var(--accent); font-weight: 700; letter-spacing: 0.2em; text-shadow: var(--bloom); }
.boot-dots { color: var(--dim); }
@keyframes bootLineIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.boot-skip {
  position: absolute;
  bottom: 1.4rem;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.6;
}

/* ─────────────────────── PORTAL / LOGIN CONSOLE ─────────────────────── */
/* Center it — kill the top-floating void — and frame it like a viewport. */
#portal-overlay.overlay {
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}
#portal-overlay .overlay-shell {
  width: 100%;
  max-width: 640px;
  margin: 0;
}
#portal-overlay .hero-card {
  position: relative;
  padding: 1.6rem 1.7rem 1.4rem;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-soft), transparent 60%),
    var(--bg-panel);
  border: 1px solid var(--border-hi);
  box-shadow: var(--bloom), inset 0 0 60px rgba(0,0,0,0.6);
}
/* Corner brackets — the card reads as a screen bezel. */
#portal-overlay .hero-card::before,
#portal-overlay .hero-card::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
  opacity: 0.7;
  box-shadow: var(--bloom);
}
#portal-overlay .hero-card::before { top: 7px; left: 7px; border-right: none; border-bottom: none; }
#portal-overlay .hero-card::after  { bottom: 7px; right: 7px; border-left: none; border-top: none; }

#portal-overlay .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
#portal-overlay .eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
  box-shadow: var(--bloom);
  animation: portalPulse 2s var(--ease) infinite;
}
@keyframes portalPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

#portal-overlay .logo {
  font-size: clamp(1.5rem, 4.6vw, 2.25rem);
  letter-spacing: 0.08em;
  text-shadow: var(--bloom-strong);
  margin-bottom: 0.45rem;
}
#portal-overlay .subtitle { font-size: 12.5px; line-height: 1.6; color: var(--dim); }

#portal-overlay .panel-subsection {
  margin-top: 1.1rem;
  padding: 1rem 1.05rem 1.1rem;
  background: var(--bg-input);
  border-color: var(--border-hi);
}
#portal-overlay .panel-heading h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--text-bloom);
}
/* Login hint chips: from cramped boxes to clear, tappable credential cards. */
#portal-overlay .login-hints { gap: 0.6rem; margin-bottom: 0.2rem; }
#portal-overlay .login-hint {
  gap: 0.2rem;
  padding: 0.5rem 0.7rem;
  border-color: var(--border-hi);
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}
#portal-overlay .login-hint .hint-user { font-size: 13px; color: var(--text); }

/* Bigger, calmer inputs with a real glow on focus. */
#portal-overlay .auth-form input[type="text"],
#portal-overlay .auth-form input[type="password"] {
  padding: 0.65rem 0.7rem;
  font-size: 14px;
  background: var(--bg);
}
#portal-overlay .auth-form input:focus { box-shadow: var(--focus-ring); }

/* The sign-in button as the obvious primary action — a lit terminal key. */
#portal-overlay #auth-submit {
  padding: 0.6rem 1.5rem;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Ambient status footer — fills the lower space with "alive terminal" detail. */
.portal-statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.portal-statusline .ps-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.portal-statusline .ps-dot {
  width: 6px; height: 6px;
  background: var(--ok);
  box-shadow: var(--bloom);
}
.portal-statusline .ps-cursor {
  display: inline-block;
  width: 7px; height: 1em;
  background: var(--accent);
  box-shadow: var(--bloom);
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

/* ───────────────────── Focal phosphor bloom (selective) ───────────────────── */
/* The few elements that should feel "lit" rather than merely drawn. */
.btn-primary { text-shadow: var(--text-bloom); }
.btn-primary:hover:not(:disabled) { box-shadow: var(--bloom-strong); text-shadow: none; }
.mode-btn.active { box-shadow: inset 0 0 12px var(--accent-soft); }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* Don't run the boot power-on / pulses for people who asked for calm. */
@media (prefers-reduced-motion: reduce) {
  .boot-screen { display: none !important; }
  body::after { animation: none !important; }
  #portal-overlay .eyebrow::before,
  .portal-statusline .ps-cursor { animation: none !important; }
}

/* ══════════════════ PLAYER WORKSPACE — the core loop ══════════════════ */

/* ───────────────── Stat HUD: real game gauges, not text ───────────────── */
.stat-bar {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(180deg, #0d0f0d 0%, #060706 100%);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--accent-soft), 0 -6px 16px rgba(0,0,0,0.55);
  overflow-x: auto;
}
.hud-gauge { display: inline-flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.hud-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.hud-track {
  position: relative;
  width: 120px;
  height: 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--border-hi);
  border-radius: 1px;
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.8);
}
.hud-fill {
  display: block;
  height: 100%;
  width: 0;
  transition: width 0.5s var(--ease);
}
/* Segment ticks drawn over the fill so the gauge reads as a meter. */
.hud-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 11px, rgba(0,0,0,0.55) 11px 12px);
  pointer-events: none;
}
.hud-num { font-size: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.hud-hp .hud-fill { background: linear-gradient(180deg, #ff8a8a, #ff3b3b); box-shadow: 0 0 9px rgba(255,68,68,0.65); }
.hud-hp .hud-num { color: var(--hp); }
.hud-mp .hud-fill { background: linear-gradient(180deg, #8fd0ff, #3b9bff); box-shadow: 0 0 9px rgba(68,170,255,0.6); }
.hud-mp .hud-num { color: var(--mp); }
.hud-xp .hud-fill { background: linear-gradient(180deg, #ffe79a, #e6b800); box-shadow: 0 0 9px rgba(230,184,0,0.5); }
.hud-xp .hud-num { color: var(--xp); }

.hud-chip {
  flex-shrink: 0;
  font-size: 11px;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  background: var(--bg-input);
  letter-spacing: 0.04em;
}
.hud-gold { color: var(--gold); margin-left: auto; }
.hud-level {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 10px var(--accent-soft);
  text-shadow: var(--text-bloom);
  font-weight: 700;
}
/* Low HP: the gauge breathes red — felt tension without a popup. */
.hud-hp.is-low .hud-fill,
.hud-hp.is-low .hud-num { animation: hpLow 1.1s ease-in-out infinite; }
@keyframes hpLow { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* The combat/conversation mode badge sits inline at the head of the HUD. */
.stat-bar .stat-mode-badge { align-self: center; }

/* ───────────────────── Narration: treat it as the star ───────────────────── */
.narrative-log { padding: 0.5rem 1.1rem 0.8rem; }
.story-entry { padding: 0.6rem 0; }
.story-command-line {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.85;
  text-shadow: var(--text-bloom);
}
.story-command-line::before { content: ''; }
.story-narration {
  font-size: 13.5px;
  line-height: 1.75;
  color: #a9e6b6;                 /* a brighter screen-green, easy to read at length */
  border-left: 2px solid var(--accent);
  padding-left: 0.85rem;
  margin: 0.2rem 0 0.3rem;
  text-shadow: 0 0 5px var(--glow);
}
.story-entry + .story-entry::before {
  content: '';
  display: block;
  height: 1px;
  margin: 0 0 0.7rem;
  background: linear-gradient(90deg, var(--border-hi), transparent 70%);
  opacity: 0.7;
}
#story-log .empty-state {
  padding: 1.4rem 1rem;
  text-align: center;
  border: 1px dashed var(--border-hi);
  border-radius: var(--r);
  margin: 0.5rem 0;
}

/* "Narrator is writing" indicator — keeps the screen alive during the wait. */
.story-entry.pending { padding: 0.6rem 0; }
.story-pending {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-left: 0.85rem;
  margin-top: 0.25rem;
  color: var(--dim);
  font-size: 12.5px;
  font-style: italic;
}
.pending-dots { display: inline-flex; gap: 4px; }
.pending-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--bloom);
  opacity: 0.25;
  animation: pendingDot 1.25s var(--ease) infinite;
}
.pending-dots i:nth-child(2) { animation-delay: 0.18s; }
.pending-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pendingDot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40%      { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .pending-dots i { opacity: 0.7; }
}

/* ───────────────────────── Room panel: framed ───────────────────────── */
.room-panel {
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 45%);
  padding: 0.7rem 1.1rem;
}
.terminal-titlebar {
  padding: 0.4rem 1rem;
  box-shadow: 0 0 12px var(--accent-soft);
}
.room-map-container {
  border-color: var(--border-hi);
  box-shadow: var(--bloom), inset 0 0 18px rgba(0,0,0,0.6);
  padding: 0.35rem;
}
.room-description { color: var(--text); opacity: 0.82; font-size: 12.5px; }
.room-summary-label { color: var(--accent); opacity: 0.8; }
.room-summary-value { font-size: 12px; }

/* ───────────────────── Command bar: the hero input ───────────────────── */
.command-bar {
  padding: 0.6rem 1.1rem 0.75rem;
  background: linear-gradient(180deg, var(--bg-panel), #070807);
  border-top: 1px solid var(--border);
}
.command-bar .prompt {
  font-size: 16px;
  text-shadow: var(--bloom);
}
#command-input {
  font-size: 14px;
  padding: 0.5rem 0.65rem;
}
#command-input:focus { box-shadow: var(--focus-ring); }
#command-submit {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
}
/* Quick-commands & exits as little lit terminal keys. */
.quick-commands .btn,
.exit-chip {
  border-color: var(--border-hi);
  transition: border-color 0.12s, color 0.12s, box-shadow 0.12s, background 0.12s;
}
.quick-commands .btn::before { content: '/'; color: var(--dim); margin-right: 0.15em; }
.quick-commands .btn-spark {
  color: var(--gold);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: linear-gradient(135deg, rgba(204,170,51,0.10), transparent 65%);
  letter-spacing: 0.04em;
  box-shadow: inset 0 0 12px rgba(204,170,51,0.04);
}
.quick-commands .btn-spark::before { content: ''; margin: 0; }
.quick-commands .btn-spark:hover:not(:disabled) {
  color: #ffe282;
  border-color: var(--gold);
  background: rgba(204,170,51,0.13);
  box-shadow: 0 0 14px rgba(204,170,51,0.22), inset 0 0 10px rgba(204,170,51,0.08);
}
.quick-commands .btn:hover:not(:disabled),
.exit-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--bloom);
}
.exit-chip { color: var(--accent); border-color: var(--glow); }

/* ──────────────── Character select: an inviting first run ──────────────── */
/* While choosing a character there's no room or story yet — collapse those
   empty panels and center the chooser so the screen isn't a black void. */
.terminal-output:has(#player-select-panel:not(.hidden)) { justify-content: center; }
.terminal-output:has(#player-select-panel:not(.hidden)) .room-panel,
.terminal-output:has(#player-select-panel:not(.hidden)) #story-log { display: none; }

.player-select-panel { padding: 2.4rem 1.5rem; gap: 1rem; }
.player-select-panel::before {
  content: '◇ ◈ ◇';
  letter-spacing: 0.6em;
  color: var(--accent);
  opacity: 0.55;
  text-shadow: var(--bloom);
  font-size: 13px;
}
.player-select-panel h3 {
  font-size: 18px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-shadow: var(--bloom-strong);
}
.player-select-panel .panel-hint { font-size: 13px; }
.resume-row select { padding: 0.55rem 2rem 0.55rem 0.7rem; font-size: 14px; }
.resume-row select:focus { box-shadow: var(--focus-ring); }

/* ───────────────────────── App header polish ───────────────────────── */
.app-header { box-shadow: 0 1px 0 var(--accent-soft); }
.status-dot.connected { box-shadow: 0 0 7px var(--ok); }
.player-badge, .session-badge { border-color: var(--border-hi); }

/* ───────────────────────── Mobile workspace ───────────────────────── */
@media (max-width: 700px) {
  /* Wrap the HUD so every gauge stays visible instead of scrolling off. */
  .stat-bar { flex-wrap: wrap; gap: 0.45rem 0.8rem; padding: 0.5rem 0.7rem; }
  .hud-track { width: 70px; }
  .hud-gold { margin-left: 0; }
  /* The realtime label eats width on a phone — the dot already says it. */
  #connection-status { display: none; }
  .player-badge, .session-badge { max-width: 150px; }
}

/* ══════════════════ ADMIN CONSOLE — crisp operator surface ══════════════════ */

/* Summary cards: a quick-glance dashboard that actually reads as one. */
.summary-cards { gap: 0.6rem; }
.summary-card {
  position: relative;
  padding: 0.65rem 0.6rem 0.6rem;
  background: linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--bg-input);
  border-color: var(--border-hi);
  overflow: hidden;
}
.summary-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: var(--bloom);
  opacity: 0.85;
}
.summary-label { margin-bottom: 0.15rem; }
.summary-value { font-size: 1.55rem; color: var(--accent); text-shadow: var(--bloom); line-height: 1.1; }

/* Health pills */
.system-health { gap: 0.5rem; }
.health-item { padding: 0.5rem 0.6rem; border-color: var(--border-hi); }
.health-dot.ok { box-shadow: 0 0 6px var(--ok); }
.health-dot.down { box-shadow: 0 0 6px var(--bad); }

/* Tab hover/active with a touch more presence. */
.admin-toolbar .admin-tab.active { background: var(--accent-soft); }

/* Admin controls: make the operator surface feel like a command deck. */
.admin-toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  min-height: 48px;
  background:
    linear-gradient(180deg, rgba(51,255,102,0.08), transparent 80%),
    var(--bg-panel);
  box-shadow: 0 1px 0 var(--border-hi), 0 8px 18px rgba(0,0,0,0.4);
}
.admin-toolbar .admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 34px;
  padding: 0.45rem 0.7rem;
  border: 1px solid transparent;
  border-bottom-color: transparent;
  border-radius: var(--r);
  margin-bottom: 0;
}
.admin-toolbar .admin-tab::before {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 1px solid var(--border-hi);
  color: var(--dim);
  background: rgba(0,0,0,0.35);
  font-size: 10px;
  line-height: 1;
}
.admin-toolbar .admin-tab[data-admin-tab="overview"]::before { content: 'DM'; }
.admin-toolbar .admin-tab[data-admin-tab="worlds"]::before { content: 'W'; }
.admin-toolbar .admin-tab[data-admin-tab="tools"]::before { content: 'T'; }
.admin-toolbar .admin-tab[data-admin-tab="llm"]::before { content: 'AI'; }
.admin-toolbar .admin-tab[data-admin-tab="registry"]::before { content: 'R'; }
.admin-toolbar .admin-tab[data-admin-tab="events"]::before { content: 'E'; }
.admin-toolbar .admin-tab[data-admin-tab="logs"]::before { content: 'L'; }
.admin-toolbar .admin-tab:hover {
  border-color: var(--border-hi);
  box-shadow: inset 0 0 12px var(--accent-soft);
}
.admin-toolbar .admin-tab.active {
  border-color: var(--accent);
  border-bottom-color: var(--accent);
  box-shadow: var(--bloom), inset 0 0 14px var(--accent-soft);
}
.admin-toolbar .admin-tab.active::before {
  color: #000;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--bloom);
  text-shadow: none;
}
.admin-toolbar-spacer { min-width: 0.25rem; }
#btn-seed-demo-admin {
  min-height: 34px;
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(230,184,0,0.08);
}
#btn-seed-demo-admin::before {
  content: '+';
  margin-right: 0.35rem;
  color: var(--gold);
}
#btn-seed-demo-admin:hover:not(:disabled) {
  color: #000;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(230,184,0,0.45);
}

.admin-tab-body > .panel,
.admin-tools-section {
  border-color: var(--border-hi);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.35);
}
.admin-tab-body > .panel h3 {
  color: var(--accent);
  text-shadow: var(--text-bloom);
}
.admin-tools-section {
  padding: 0.25rem 0.7rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
}
.admin-tools-section + .admin-tools-section { margin-top: 0.5rem; }
.admin-tools-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  text-shadow: var(--text-bloom);
}
.admin-tools-header::before {
  color: var(--accent);
  text-shadow: var(--text-bloom);
}
.admin-tools-section[open] {
  box-shadow: var(--bloom), inset 0 0 24px rgba(0,0,0,0.45);
}

#workspace-admin .world-action-form,
#workspace-admin .mutation-form {
  display: grid;
  gap: 0.7rem;
}
#workspace-admin .world-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
#workspace-admin .mutation-row {
  align-items: end;
}
#workspace-admin select,
#workspace-admin input,
#workspace-admin textarea {
  min-height: 38px;
}
.admin-command-form {
  gap: 0.55rem;
}
.admin-command-form select {
  max-width: 240px;
}
.admin-command-form button[type="submit"],
#btn-send-msg {
  min-width: 96px;
}
.logs-toolbar {
  align-items: end;
  gap: 0.7rem;
}
.logs-filters {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(180px, 320px) auto;
  gap: 0.55rem;
}
.logs-actions {
  margin-left: auto;
}

@media (max-width: 900px) {
  .admin-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .admin-toolbar .admin-tab {
    flex: 0 0 auto;
  }
  .admin-toolbar-spacer { display: none; }
  #btn-seed-demo-admin { flex: 0 0 auto; }
  .logs-filters { grid-template-columns: 1fr; }
  .admin-command-form { grid-template-columns: 1fr; }
  .admin-command-form select { max-width: none; }
}

/* DM detail empty state: a little ASCII viewport instead of a bare sentence. */
.dm-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 3rem 1.5rem;
}
.dm-detail-empty::before {
  content: '┌───┐\A│ ? │\A└───┘';
  white-space: pre;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--accent);
  opacity: 0.5;
  text-shadow: var(--bloom);
}

/* DM detail panel header title bloom + result selection glow. */
.dm-detail-title { text-shadow: var(--bloom-strong); }

/* ── Bring stray off-theme blues/purples back into the phosphor palette ── */
/* The "AI" actions were a hard purple (#7c4dff) that broke the whole look. */
.btn-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  text-shadow: var(--text-bloom);
}
.btn-accent:hover { background: var(--accent); color: #000; box-shadow: var(--bloom-strong); }

/* Chat bubbles: user reads as cool "arcane" (already a palette blue=MP),
   AI reads as phosphor — no more random purple. */
.chat-msg.user { background: var(--arcane-soft); border-color: rgba(68,170,255,0.3); }
.chat-msg.ai { background: var(--accent-soft); border-color: rgba(51,255,102,0.25); }
.dm-ai-msg.user { background: var(--arcane-soft); color: #bfe2ff; }
.registry-chat-input-row input:focus,
.dm-detail-chat-input-row input:focus { box-shadow: var(--focus-ring); }

/* Selections / tags that were blue → phosphor. */
.world-card.selected { background: var(--accent-soft); }
.world-tag { background: var(--accent-soft); border-color: rgba(51,255,102,0.2); }
.registry-world-tag { background: var(--arcane-soft); border-color: rgba(68,170,255,0.25); }
.dm-create-prompt { background: var(--accent-soft); border-color: rgba(51,255,102,0.2); }

/* Search inputs get the same focus bloom as everything else. */
.dm-search-bar input:focus,
.registry-search-bar input:focus,
.overview-search-input:focus { box-shadow: var(--focus-ring); }

/* Mobile admin: stack the two-column consoles so nothing gets squeezed. */
@media (max-width: 700px) {
  .dm-console-layout,
  .registry-browse-layout,
  .registry-browse-layout:has(.registry-editor-col:not(.hidden)),
  .registry-editor-layout { grid-template-columns: 1fr; }
  .dm-console-layout { min-height: 0; }
  .dm-search-bar, .registry-search-bar { flex-wrap: wrap; }
  .dm-search-bar select { max-width: none; flex: 1 1 40%; }
}

/* ========================================================================== */
/* Gameplay UX tightening                                                     */
/* Keep long-form narration in a comfortable reading lane on wide displays.   */
/* ========================================================================== */

.story-entry {
  width: min(100%, 1040px);
  margin-right: auto;
}

.story-narration {
  padding-right: 1rem;
  text-wrap: pretty;
}

.room-panel-copy {
  max-width: 1100px;
}

@media (max-width: 700px) {
  /* Give every primary header action a real place instead of clipping it. */
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
  }

  .header-brand {
    text-align: center;
  }

  .mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    width: 100%;
  }

  .mode-btn {
    min-width: 0;
    padding: 0.38rem 0.45rem;
  }

  .header-actions {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .player-badge {
    grid-column: 1 / -1;
    justify-content: center;
    max-width: none;
    min-width: 0;
  }

  .session-badge {
    display: none;
  }

  .status-cluster {
    justify-content: center;
    min-width: 28px;
  }

  #btn-refresh,
  #btn-logout-header,
  #btn-open-portal {
    min-width: 0;
    padding: 0.35rem 0.25rem;
    white-space: nowrap;
  }

  /* Preserve room context beside a compact map rather than hiding it below. */
  .room-panel {
    max-height: 34%;
    padding: 0.55rem 0.65rem;
  }

  .room-panel-shell {
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 0.6rem;
  }

  .room-map-container {
    width: 108px;
    max-width: 100%;
    overflow: hidden;
  }

  .room-map-container canvas {
    width: 100%;
    height: auto;
  }

  .room-panel-copy {
    gap: 0.2rem;
  }

  .room-description {
    max-height: 3.25em;
    margin-bottom: 0.2rem;
    font-size: 11.5px;
    line-height: 1.45;
  }

  .room-summary {
    gap: 0.2rem;
    padding-top: 0.3rem;
    margin-top: 0;
  }

  .room-summary-line {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.35rem;
  }

  .room-summary-label {
    font-size: 9px;
  }

  .room-summary-value {
    max-height: 2.7em;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.35;
  }

  /* Put the contextual prompt above the input so the field stays usable. */
  .command-bar {
    padding: 0.55rem 0.65rem 0.65rem;
  }

  .command-bar form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.4rem;
  }

  .command-bar .prompt {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }

  #command-input {
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }

  #command-submit {
    padding-inline: 0.8rem;
    min-height: 38px;
  }

  .quick-commands .btn,
  .exit-chip {
    min-height: 32px;
    padding: 0.3rem 0.45rem;
  }

  .narrative-log {
    padding: 0.45rem 0.65rem 0.65rem;
  }

  .story-entry {
    padding: 0.5rem 0;
  }

  .story-narration {
    padding-left: 0.65rem;
    padding-right: 0.25rem;
    font-size: 12.5px;
    line-height: 1.65;
  }
}

#btn-reset-demo-admin {
  min-height: 34px;
  border-color: var(--danger);
  color: #ff8b8b;
  background: rgba(255, 59, 59, 0.14);
  box-shadow: inset 0 0 12px rgba(255, 59, 59, 0.08);
  font-weight: 700;
  letter-spacing: 0.04em;
}
#btn-reset-demo-admin::before {
  content: '\21BB';
  margin-right: 0.35rem;
  color: #ff8b8b;
}
#btn-reset-demo-admin:hover:not(:disabled),
#btn-reset-demo-admin:focus-visible {
  color: #080808;
  background: #ff7070;
  border-color: #ff9c9c;
  box-shadow: 0 0 16px rgba(255, 59, 59, 0.62);
}

/* ── Awaiting deferred narration ──────────────────────────────────────
   The turn's mechanics have landed but the prose is still being written. The entry
   pulses gently so the player can see the narrator is still working rather than
   assuming the moment simply had nothing to say. */
.story-entry.awaiting-narration .story-narration {
  opacity: 0.72;
  font-style: italic;
  animation: narration-waiting 1.8s ease-in-out infinite;
}

.story-entry.awaiting-narration .story-narration::after {
  content: ' ‚6';
  animation: narration-waiting 1.2s ease-in-out infinite;
}

.story-narration.narration-arrived {
  animation: narration-settle 0.5s ease-out;
}

@keyframes narration-waiting {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

@keyframes narration-settle {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* Respect a reduced-motion preference: keep the cue, drop the pulsing. */
@media (prefers-reduced-motion: reduce) {
  .story-entry.awaiting-narration .story-narration,
  .story-entry.awaiting-narration .story-narration::after,
  .story-narration.narration-arrived {
    animation: none;
  }
}

/* ═══════════════════════ QA POLISH PASS (2026-09-03) ═══════════════════════
   Fixes observed in a full desktop + mobile screenshot sweep. Every rule below
   stays inside the phosphor palette; nothing here introduces a new colour.  */

/* Extra-small buttons were 9px text on a 1px pad: unreadable and a poor tap target. */
.btn-xs {
  font-size: 10.5px;
  padding: 2px 7px;
  min-height: 22px;
  letter-spacing: 0.02em;
}

/* Form groups stretched to their row's tallest control, so a select's label sat
   a line lower than the textarea label beside it. Pin content to the top. */
.form-group { align-content: start; }

/* Room description clipped mid-line at 4.8em. Clamp on whole lines instead. */
.room-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-height: none;
  line-height: 1.55;
}

/* Character chooser: the dropdown truncated "Ari Quickstep — Lv.1 Human Ranger". */
.resume-row { max-width: 640px; }
.resume-row select { flex: 1 1 320px; }

/* The global `select { width: 100% }` let the two Registry filters each take a
   third of the bar and squeezed the search box to 150px. Size them to content. */
.registry-search-bar { flex-wrap: wrap; }
.registry-search-bar select {
  width: auto;
  flex: 0 0 auto;
  min-width: 130px;
  max-width: 200px;
  padding-right: 2rem;
}
.registry-search-bar input { flex: 1 1 260px; }
.registry-count { margin-left: 0.25rem; }

/* Panel header controls (Events filter + Clear) stacked because the select was
   full-width. Lay the header's right-hand cluster out as a row. */
.panel-header-row > div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.panel-header-row select { width: auto; min-width: 150px; }

/* Command Harness: 150px was too narrow to show a character name. */
.admin-command-form { grid-template-columns: minmax(180px, 260px) 1fr auto; }
.admin-command-form select { max-width: none; }

/* Admin tabs overflowed off-screen on phones; let the deck scroll sideways. */
.admin-toolbar {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.admin-toolbar .admin-tab { white-space: nowrap; flex-shrink: 0; }

/* Admin form rows bottom-aligned their controls, so a select beside a tall
   textarea had its label pushed a line lower. Align labels along the top. */
#workspace-admin .mutation-row { align-items: start; }

/* ── Co-DM orientation (2026-09-03): explain the loop, hide dead controls ── */
.co-dm-howto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.co-dm-howto li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.co-dm-howto li > span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-shadow: var(--text-bloom);
}
.co-dm-howto strong { display: block; font-size: 12px; color: var(--text); }
.co-dm-howto small { display: block; font-size: 11px; line-height: 1.4; color: var(--dim); }

.co-dm-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--dim); }
.co-dm-hint-inline { display: block; margin: 2px 0 0; }

/* A resolved proposal has nothing left to click; its result line says what happened. */
.co-dm-proposal:not(.status-pending) .co-dm-proposal-actions { display: none; }

/* Keep a freshly-scrolled proposal's heading clear of the card's top edge. */
.co-dm-scroll { scroll-padding-top: 8px; }
.co-dm-proposal { scroll-margin-top: 8px; }

@media (max-width: 900px) { .co-dm-howto { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .co-dm-howto { grid-template-columns: 1fr; } }

/* ── Co-DM hot-swap (2026-09-03): cards open a player, chips switch between them ── */
.co-dm-player-card[data-co-dm-focus] {
  cursor: pointer;
  transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.12s var(--ease);
}
.co-dm-player-card[data-co-dm-focus]:hover,
.co-dm-player-card[data-co-dm-focus]:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: var(--bloom);
}
.co-dm-card-cta {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.co-dm-player-card:hover .co-dm-card-cta { text-shadow: var(--text-bloom); }

.co-dm-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--border);
}
.co-dm-chip {
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 11px;
  line-height: 1.2;
  padding: 3px 9px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.co-dm-chip:hover:not(.co-dm-chip-more),
.co-dm-chip:focus-visible { outline: none; border-color: var(--accent); color: var(--accent); }
.co-dm-chip.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  text-shadow: var(--text-bloom);
}
.co-dm-chip-back { color: var(--dim); }
.co-dm-chip-more { color: var(--dim); border-style: dashed; cursor: default; }

/* The message form lights up for a moment when its target changes. */
.co-dm-message-form { transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.co-dm-message-form.is-armed { border-color: var(--accent); box-shadow: var(--bloom); }
@media (prefers-reduced-motion: reduce) {
  .co-dm-message-form, .co-dm-player-card[data-co-dm-focus], .co-dm-chip { transition: none; }
}

/* ── Co-DM player sheet (2026-09-03): the fourth card shows the focused player ── */
.co-dm-sheet-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 8px;
}
.co-dm-sheet-heading strong { font-size: 15px; color: var(--text-bright); text-shadow: var(--text-bloom); }
.co-dm-sheet-heading > span:not(.co-dm-presence) { color: var(--dim); }
.co-dm-sheet-heading .co-dm-presence { margin-left: auto; }

.co-dm-bars { display: grid; gap: 5px; margin-bottom: 8px; }
.co-dm-bar {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.co-dm-bar-label { color: var(--dim); letter-spacing: 0.08em; }
.co-dm-bar-track { height: 8px; border: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.co-dm-bar-fill { display: block; height: 100%; transition: width 0.3s var(--ease); }
.co-dm-bar-hp .co-dm-bar-fill { background: var(--hp); box-shadow: 0 0 6px var(--hp); }
.co-dm-bar-mp .co-dm-bar-fill { background: var(--mp); box-shadow: 0 0 6px var(--mp); }
.co-dm-bar-hp .co-dm-bar-num { color: var(--hp); }
.co-dm-bar-mp .co-dm-bar-num { color: var(--mp); }

.co-dm-attrs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 8px;
}
.co-dm-attr {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 4px 2px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.co-dm-attr span { font-size: 9.5px; letter-spacing: 0.08em; color: var(--dim); }
.co-dm-attr strong { font-size: 14px; color: var(--accent); text-shadow: var(--text-bloom); }

.co-dm-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 10px;
}
.co-dm-fact { display: grid; gap: 1px; min-width: 0; padding: 3px 0; border-bottom: 1px dotted var(--border); }
.co-dm-fact span { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.co-dm-fact strong { font-size: 11.5px; color: var(--text); overflow-wrap: anywhere; }

.co-dm-sheet-diag { margin-top: 10px; font-size: 11px; }
.co-dm-sheet-diag > summary { cursor: pointer; color: var(--dim); letter-spacing: 0.04em; padding: 4px 0; list-style: none; }
.co-dm-sheet-diag > summary::before { content: '▸ '; color: var(--accent); }
.co-dm-sheet-diag[open] > summary::before { content: '▾ '; }
.co-dm-sheet-diag > summary::-webkit-details-marker { display: none; }
.co-dm-sheet-diag > summary:hover { color: var(--text); }

@media (max-width: 900px) {
  .co-dm-attrs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .co-dm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Wide layout: the sheet card must not crush Activity and Queue above it. Give the
   grid room, cap the sheet, and let its body scroll if a player has a lot of gear. */
@media (min-width: 1100px) {
  .co-dm-grid {
    height: 500px;
    grid-template-rows: minmax(150px, 1fr) minmax(0, auto);
  }
  .co-dm-grid > .co-dm-card:nth-child(4) { max-height: 330px; }
}