:root{
  /* Fluid type + space tokens (Utopia-style): sizes glide 1100->1920px CSS
     viewport instead of jumping at breakpoints. rem floor/ceiling + a rem
     term in the preferred value keep browser zoom + user font prefs working
     (web.dev/articles/baseline-in-action-fluid-type, utopia.fyi/blog/clamp). */
  --fs-story:clamp(1.0625rem, 0.612rem + 0.61vw, 1.344rem); /* 17 -> 21.5px */
  --fs-story-lg:calc(var(--fs-story) * 1.025);               /* dialogue lines */
  --fs-ui:clamp(0.6875rem, 0.52rem + 0.244vw, 0.8125rem);   /* 11 -> 13px mono */
  --fs-panel-t:clamp(0.75rem, 0.5825rem + 0.244vw, 0.875rem); /* 12 -> 14px */
  --sp-1:clamp(0.5rem, 0.25rem + 0.35vw, 1rem);             /*  8 -> 16px */
  --sp-2:clamp(0.625rem, 0.27rem + 0.5vw, 1.25rem);         /* 10 -> 20px */
  --sp-3:clamp(1rem, -0.51rem + 2.2vw, 2.125rem);           /* 16 -> 34px */
  --sp-4:clamp(1.25rem, -0.93rem + 3.17vw, 2.875rem);       /* 20 -> 46px */
}

:root {
  /* Ember (default) — copper lamplight on scorched umber, warm parchment ink.
     Palette sampled from the Ember gameplay-screen design. This default flows to
     the main menu, settings, and new/continue menus (no data-theme there). */
  --bg: #100b06;
  --panel: #1a130b;
  --panel-2: #221910;
  --panel-3: #2a2015;
  --border: #322818;
  --border-strong: #43371f;
  --text: #efe4cd;
  --text-dim: #b4a68b;
  --text-faint: #7d715c;
  --accent: #c98a3e;
  --accent-hover: #e3a955;
  --user: #7aa0c8;
  --danger: #c25c5c;
  --danger-hover: #d97070;
}

/* ---------- Themes (override the palette; default :root = Ember) ---------- */
html[data-theme="arcane"] {
  --bg: #13101b; --panel: #1b1726; --panel-2: #231d31; --panel-3: #2b2440;
  --border: #2c2640; --border-strong: #3d3458;
  --text: #ddd4ec; --text-dim: #9889b6; --text-faint: #615579;
  --accent: #a884d8; --accent-hover: #c6a8ee;
  --user: #7aa0c8; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="verdant"] {
  --bg: #0e130f; --panel: #151c16; --panel-2: #1b241c; --panel-3: #222d23;
  --border: #233025; --border-strong: #324633;
  --text: #d2e2cb; --text-dim: #8aa57e; --text-faint: #566b4f;
  --accent: #6cae57; --accent-hover: #90cd7b;
  --user: #7aa0c8; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="frost"] {
  --bg: #0d1217; --panel: #141b21; --panel-2: #1a242b; --panel-3: #212d35;
  --border: #233039; --border-strong: #324451;
  --text: #cee0ec; --text-dim: #84a1b4; --text-faint: #4f6575;
  --accent: #56a6cc; --accent-hover: #7fc9ec;
  --user: #c89b5a; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="crimson"] {
  --bg: #160f0e; --panel: #1f1513; --panel-2: #281a17; --panel-3: #31201c;
  --border: #341f1b; --border-strong: #48302a;
  --text: #e8cfc7; --text-dim: #b3887d; --text-faint: #6f5249;
  --accent: #c4524b; --accent-hover: #e2746b;
  --user: #7aa0c8; --danger: #d06a6a; --danger-hover: #e08585;
}
html[data-theme="abyss"] {  /* deep sea / eldritch teal */
  --bg: #0a1417; --panel: #0f1d21; --panel-2: #13262b; --panel-3: #193037;
  --border: #16313a; --border-strong: #22454f;
  --text: #cfe6e6; --text-dim: #7da3a6; --text-faint: #4d6e72;
  --accent: #3fb5b0; --accent-hover: #5fe0d8;
  --user: #7aa0c8; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="royal"] {  /* gold on deep indigo */
  --bg: #0f1020; --panel: #16182e; --panel-2: #1d203a; --panel-3: #262a47;
  --border: #262a48; --border-strong: #373c63;
  --text: #e4e0f0; --text-dim: #9a98c0; --text-faint: #5f5e84;
  --accent: #d8b34a; --accent-hover: #f0d070;
  --user: #8aa0d8; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="necrotic"] {  /* toxic lime on murky dark */
  --bg: #0e120c; --panel: #151b10; --panel-2: #1b2315; --panel-3: #222c1a;
  --border: #23301a; --border-strong: #34461f;
  --text: #d6e6c2; --text-dim: #90a674; --text-faint: #586b46;
  --accent: #9fd13f; --accent-hover: #c4f06a;
  --user: #7aa0c8; --danger: #c2825c; --danger-hover: #d99a70;
}
html[data-theme="sakura"] {  /* rose-pink on dark plum */
  --bg: #161014; --panel: #1f161d; --panel-2: #281c26; --panel-3: #31242e;
  --border: #321f2b; --border-strong: #48303f;
  --text: #ecd6e4; --text-dim: #b389a3; --text-faint: #6e526a;
  --accent: #e07ba8; --accent-hover: #f5a3c6;
  --user: #7aa0c8; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="obsidian"] {  /* cool graphite, silver accent */
  --bg: #0e0f11; --panel: #15171a; --panel-2: #1c1f23; --panel-3: #24282d;
  --border: #262a30; --border-strong: #39404a;
  --text: #dde3ea; --text-dim: #9aa3ad; --text-faint: #5e6670;
  --accent: #9fb3c8; --accent-hover: #cdd9e6;
  --user: #7aa0c8; --danger: #c25c5c; --danger-hover: #d97070;
}
html[data-theme="parchment"] {  /* light — ink on parchment */
  --bg: #ece2cc; --panel: #e3d8bd; --panel-2: #dccfae; --panel-3: #d2c39c;
  --border: #c8b88f; --border-strong: #ab9468;
  --text: #382e1c; --text-dim: #6b5a3c; --text-faint: #9a8a68;
  --accent: #9c6326; --accent-hover: #7c4d18;
  --user: #3a5a8a; --danger: #a23232; --danger-hover: #852828;
}
html[data-theme="sakura-spring"] {  /* light — soft milk & sakura, for cozy romance */
  --bg: #d9c3cc; --panel: #d1b9c4; --panel-2: #c9b0bd; --panel-3: #c1a6b5;
  --border: #b596a8; --border-strong: #a4788f;
  --text: #422c38; --text-dim: #755769; --text-faint: #9a7c8f;
  --accent: #bf567f; --accent-hover: #9e3c63;
  --user: #64669e; --danger: #b8434a; --danger-hover: #973338;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- App layout ---------- */

.app {
  display: grid;
  grid-template-columns: 1fr;
  height: 100vh;
  height: 100dvh;   /* the true VISIBLE viewport — avoids the app running past the screen edge */
}

/* ---------- Memory panel ----------
   An off-canvas drawer at EVERY width: opened from the
   in-adventure settings sheet (desktop) or the mobile bar. The mobile media
   query below only adjusts its top offset for the mobile top bar. */

.memory-panel {
  background: var(--panel);
  border-right: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(86vw, 360px);
  z-index: 70;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
html[data-mdrawer="memory"] .memory-panel { transform: translateX(0); }

/* Dim backdrop while a drawer is open; click closes (wired in JS). */
html[data-mdrawer="memory"] .m-backdrop,
html[data-mdrawer="party"] .m-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.5);
}

.memory-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 12px 20px;
}
.memory-header h2 {
  margin: 0;
  font-size: clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
}
.add-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.add-btn:hover { background: var(--accent); color: var(--bg); }

.memory-hint {
  margin: 0 20px 12px 20px;
  font-size: var(--fs-ui);
  color: var(--text-faint);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.4;
}
.halluc-btn {
  display: block;
  margin: 0 20px 12px 20px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  letter-spacing: 0.03em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.halluc-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Hallucination-check modal body */
.halluc-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  font-size: 16px;
  padding: 8px 0;
}
.halluc-clean {
  color: var(--text);
  font-size: 16px;
  padding: 6px 0;
}
.halluc-intro { color: var(--text-dim); font-size: 15px; margin: 0 0 12px 0; }
.halluc-issue {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--panel-2);
}
.halluc-issue .hi-summary { color: var(--text); font-weight: 600; font-size: 16px; }
.halluc-issue .hi-detail { color: var(--text-dim); font-size: 14.5px; margin-top: 4px; line-height: 1.45; }
.halluc-issue .hi-fix { color: var(--accent); font-size: 14.5px; margin-top: 6px; }
.halluc-issue .hi-files { color: var(--text-faint); font-size: 13px; margin-top: 6px; font-family: 'Cormorant Garamond', Georgia, serif; }
/* Clickable candidate values for a numeric contradiction — the player picks one. */
.hi-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hi-opt {
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.hi-opt:hover { border-color: var(--accent); color: var(--accent); }
.hi-opt.active { background: var(--accent); color: #1a140a; border-color: var(--accent); font-weight: 600; }
.halluc-option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  transition: border-color 0.15s;
}
.halluc-option:hover { border-color: var(--accent); }
.halluc-option .ho-title { display: block; color: var(--text); font-weight: 600; font-size: 16px; }
.halluc-option .ho-desc { display: block; color: var(--text-dim); font-size: 14.5px; margin-top: 4px; line-height: 1.45; }
.halluc-option .ho-warn { display: block; color: var(--text-faint); font-size: 14px; margin-top: 8px; }
.halluc-option .ho-warn.caution { color: var(--accent); }
.halluc-option .ho-warn.heavy { color: var(--danger); }
.halluc-error { color: var(--danger); font-size: 15px; padding: 6px 0; }
.halluc-changed { color: var(--text); font-size: 15px; }
.halluc-changed code { color: var(--accent); }

.memory-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0 16px 0;
}

.memory-hint code {
  background: var(--panel-3);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12.5px;
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
}

.memory-empty {
  padding: 40px 20px;
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
  font-size: 15px;
}

.folder-section {
  padding: 4px 0 6px 0;
}
.folder-section + .folder-section { margin-top: 6px; }

.folder-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px 4px 18px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
}
.folder-header.seed { color: var(--accent); opacity: 0.85; }
.folder-header.hidden-cat { color: var(--ink-dim, #7d715c); opacity: 0.9; }
.folder-header.hidden-cat .name { font-style: italic; display: flex; align-items: center; gap: 8px; }
.hidden-tag { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-style: normal; color: var(--ink-dim, #7d715c); border: 1px solid rgba(227,169,85,.22); border-radius: 5px; padding: 2px 6px; }
.file-readonly-note { margin: 8px 0 0; padding: 8px 11px; border: 1px solid rgba(227,169,85,.18); border-radius: 7px; background: rgba(227,169,85,.04); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; font-style: italic; color: var(--ink-mute, #b4a68b); }
.file-readonly-note.hidden { display: none; }
.folder-header .caret {
  font-size: 11px;
  color: var(--text-faint);
  transition: transform 0.15s;
  user-select: none;
}
.folder-header.collapsed .caret { transform: rotate(-90deg); }
.folder-header .name { flex: 1; cursor: pointer; }
.folder-header .count {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.folder-children { padding: 0 0 2px 0; }
.folder-children.collapsed { display: none; }
.folder-children.empty-folder {
  padding: 4px 18px 6px 30px;
  font-size: 13px;
  color: var(--text-faint);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.file-entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 18px;
  margin: 0 8px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  transition: background 0.12s, border-color 0.12s;
}
.file-entry.in-folder { padding-left: 30px; }
.file-entry:hover {
  background: var(--panel-2);
  border-color: var(--border);
}
.file-entry .icon {
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.file-entry .icon svg { width: 14px; height: 14px; }
.file-entry.auto .icon { color: var(--accent); }
.file-entry .name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-entry.auto .name { color: var(--accent); }
.file-entry .size {
  font-size: 12.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.folder-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.folder-row > div > label { margin-top: 0; }
.modal-content select {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 7px 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  border-radius: 4px;
}

.file-error {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(194, 92, 92, 0.1);
  border: 1px solid var(--danger);
  color: var(--danger);
  border-radius: 4px;
  font-size: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.file-modal-content { width: min(640px, calc(100vw - 2*var(--sp-2))); }
.file-modal-content input[type="text"] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
}
.file-modal-content textarea {
  min-height: 280px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14.5px;
  line-height: 1.55;
}

/* ---------- Story panel ---------- */

.story-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.story-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.story-header h1 {
  margin: 0;
  font-size: clamp(0.8125rem, 0.4771rem + 0.4878vw, 1.0625rem);
  color: var(--accent);
  letter-spacing: 0.02em;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
}
.ctx-meter {
  font-size: 12px;
  color: var(--text-faint);
  opacity: 0.7;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.story-log {
  flex: 1;
  overflow-y: auto;
  padding: 32px 0;
}
.story-log .turn {
  max-width: var(--read-width, 760px);
  margin: 0 auto 22px auto;
  padding: 0 48px;
  white-space: pre-wrap;
  font-size: 18.5px;
  line-height: var(--read-line, 1.9);
  font-family: var(--read-font, 'Literata', Georgia, serif);
  font-weight: var(--read-weight, 430);
  letter-spacing: 0.004em;
}
.story-log .turn.user {
  color: var(--user);
  font-style: italic;
  border-left: 2px solid var(--user);
  /* Centered in the same 760px reading column as the narration (base .turn
     sets margin: 0 auto + padding: 0 48px); the accent bar replaces the left
     padding so the text still lines up with the narration's left edge. */
  padding-left: 48px;
}
.story-log .turn.assistant { color: var(--text); }

/* Book-style AI output: narration paragraphs + labeled dialogue blocks. */
.story-log .turn.assistant.formatted { white-space: normal; }
.story-log .narr { margin: 0 0 var(--read-para, 15px) 0; }
.story-log .narr:last-child { margin-bottom: 0; }
.story-log .quote { color: var(--accent); }
.story-log .dia {
  margin: 0 0 15px 0;
  padding-left: 16px;
  border-left: 2px solid var(--accent-soft, var(--border-strong));
}
.story-log .dia:last-child { margin-bottom: 0; }
.story-log .dia-name {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.story-log .dia-line { display: block; }
/* Inside a labeled line the whole thing is speech, so don't double-tint it. */
.story-log .dia .quote { color: inherit; }
.story-log .turn.continue-turn {
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
  font-size: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 4px auto 22px auto;
  border: none;
}

/* Controls row at the end of an AI output (walk-back + token allocation). */
.turn-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.turn-controls button {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-faint);
  border-radius: 12px;
  padding: 3px 12px;
  font-size: 13px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.03em;
  transition: border-color 0.15s, color 0.15s;
}
.turn-controls button:hover { border-color: var(--accent); color: var(--accent); }
.turn-controls button .tc-ic { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }

/* Token-allocation modal */
/* Token allocation — an ember ledger of where the turn's context is spent. */
.tok-summary { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-strong); }
.tok-sum-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px;
}
.tok-bar {
  height: 9px; background: var(--panel-2);
  border: 1px solid var(--border-strong); border-radius: 5px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
}
.tok-bar-fill {
  height: 100%; background: linear-gradient(90deg, #8a5f28, var(--accent));
  box-shadow: 0 0 8px rgba(201,138,62,.55);
}
.tok-sum-val {
  font-size: 15px; color: var(--text); margin-top: 7px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.tok-cats { display: flex; flex-direction: column; }
.tok-cat {
  display: grid; grid-template-columns: 138px 1fr 80px;
  align-items: center; gap: 12px; padding: 5px 0;
  border-bottom: 1px dashed var(--border);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px;
}
.tok-cat:last-child { border-bottom: none; }
.tok-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-cbar { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.tok-cbar-fill { height: 100%; background: var(--accent); opacity: 0.85; }
.tok-val {
  text-align: right; color: var(--text-dim);
  font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums;
}
/* Grand total — the ledger's closing line. */
.tok-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--border-strong);
}
.tok-total-label {
  font-family: 'Cinzel', Georgia, serif; font-size: 15px;
  letter-spacing: .08em; color: var(--accent);
}
.tok-total-val {
  font-family: var(--mono); font-size: 16px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.story-log .turn.error {
  color: var(--danger);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-style: italic;
}
.story-log .empty {
  padding: 80px 48px;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
  font-size: 17px;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- RPG panel (right) ---------- */

/* Party panel — an off-canvas drawer at EVERY width (mirror of the memory
   drawer): opened from the Party button in the story header (desktop) or the
   mobile bar. Slides in from the right. */
.rpg-panel {
  background: var(--panel);
  border-left: 1px solid var(--border-strong);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: min(86vw, 340px);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
html[data-mdrawer="party"] .rpg-panel { transform: translateX(0); }
/* Non-Party-RPG adventures: keep the side column but leave it empty for now. */
.rpg-panel.empty-panel > * { display: none; }
.rpg-header {
  padding: 16px 18px 12px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rpg-header h2 {
  margin: 0;
  font-size: clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.rpg-edit-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 3px 12px;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rpg-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
.rpg-panel.editing .rpg-edit-btn {
  background: var(--accent);
  color: #1a140a;
  border-color: var(--accent);
}
/* The + add buttons only show while editing. */
.rpg-panel:not(.editing) .rpg-section-head .add-btn { display: none; }

/* Read-only rows (display mode) */
.rpg-read {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);
}
.rpg-read:last-child { border-bottom: none; }
.rpg-read .rpg-name { flex: 1; color: var(--text); }
.rpg-read .stat-label { flex: 1; color: var(--text); }
.rpg-read .stat-value { color: var(--text-dim); }
.rpg-read .item-name { flex: 1; color: var(--text); }
.rpg-read .status-badge {
  font-size: 13px;
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
/* Injury tiers tint the text label to match the dot. */
.rpg-read .status-badge.injured { color: #d9c24b; }
.rpg-read .status-badge.wounded { color: #d68f3a; }
.rpg-read .status-badge.critical { color: #cf5f33; }
.rpg-read .status-badge.dead { color: var(--danger); }
.rpg-read .status-badge.recovery { color: #5fa98f; }

.rpg-hint {
  font-size: 13px;
  color: var(--text-faint);
  margin: 0 0 8px 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Per-character expandable block */
.party-member {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--panel-2);
  overflow: hidden;
}
.party-member.expanded { border-color: var(--accent); }
.pm-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  cursor: pointer;
}
.pm-head:hover { background: var(--panel-3); }
.pm-caret {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 12px;
  width: 10px;
}
.pm-name { color: var(--text); font-size: 15px; }
.pm-head .grow { flex: 1; min-width: 0; }
.pm-head input,
.pm-head select {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  padding: 2px 0;
  min-width: 0;
}
.pm-head input:focus { outline: none; }
.pm-head select {
  flex: 0 0 auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-dim);
  font-size: 14px;
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9 L12 16 L18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 24px 4px 9px;
  transition: border-color 0.15s, color 0.15s;
}
.pm-head select:hover { border-color: var(--accent); color: var(--text); }
.pm-head select:focus { outline: none; border-color: var(--accent); }
.pm-head select option { background: var(--panel-2); color: var(--text); }

.pm-sub {
  padding: 4px 10px 8px 26px;
  border-top: 1px solid var(--border);
}
.pm-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.pm-sub-head .add-btn { width: 18px; height: 18px; font-size: 14px; }
.pm-sub .rpg-row { margin-bottom: 5px; }

.rpg-scroll { overflow-y: auto; padding: 8px 14px 18px 14px; }
.rpg-section { margin-top: 14px; }
.rpg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.rpg-section-head h3 {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.rpg-section-head .add-btn { width: 22px; height: 22px; font-size: 16px; }
.rpg-list { display: flex; flex-direction: column; gap: 6px; }
.rpg-empty {
  font-size: 14px;
  color: var(--text-faint);
  font-style: italic;
  padding: 2px 2px 4px 2px;
}

/* a generic editable row */
.rpg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 6px 8px;
}
.rpg-row input,
.rpg-row select {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);
  padding: 2px 0;
  min-width: 0;
}
.rpg-row input:focus { outline: none; }
.rpg-row .grow { flex: 1; }
.rpg-row select {
  flex: 0 0 auto;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color: var(--text-dim);
  font-size: 14px;
  background-color: var(--panel-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a8f78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9 L12 16 L18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 11px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 4px 24px 4px 9px;
  transition: border-color 0.15s, color 0.15s;
}
.rpg-row select:hover { border-color: var(--accent); color: var(--text); }
.rpg-row select:focus { outline: none; border-color: var(--accent); }
.rpg-row select option { background: var(--panel-2); color: var(--text); }
.rpg-row .stat-label { flex: 1; font-weight: 600; }
.rpg-row .stat-value { flex: 1; text-align: right; color: var(--text-dim); }
.rpg-del {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
}
.rpg-del:hover { color: var(--danger); }

/* status dot for party members */
.status-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}
.status-dot.active { background: #6f9f5b; }
/* Injury severity: yellow -> dark yellow/orange -> orange-red -> red. */
.status-dot.injured { background: #d9c24b; }
.status-dot.wounded { background: #d68f3a; }
.status-dot.critical { background: #cf5f33; }
.status-dot.dead { background: var(--danger); }
.status-dot.recovery { background: #5fa98f; }  /* healing back up */
.status-dot.traveling { background: #6f8fc8; }
.status-dot.working { background: #b58fc8; }
.status-dot.away { background: var(--text-faint); }

/* ---------- Input area ---------- */

.input-area {
  /* No panel chrome: the controls float directly in the dark room (the
     textarea/buttons keep their own backgrounds and borders). */
  padding: 14px 24px 18px 24px;
  background: transparent;
}
.input-bar {
  max-width: 856px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: end;
}
#input-box { min-width: 0; align-self: stretch; }
/* Continue / Action / Talk stacked (1-2-3) with a tall Roll spanning all three. */
.send-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  width: clamp(200px, 120px + 7.5vw, 264px);
  align-items: stretch;
}
#continue-btn { grid-column: 1; grid-row: 1; }
#send-btn     { grid-column: 1; grid-row: 2; }
#talk-btn     { grid-column: 1; grid-row: 3; }
#roll-btn {
  grid-column: 2;
  grid-row: 1 / 4;          /* span all three rows */
  height: auto;
  width: clamp(96px, 55.76px + 3.6585vw, 126px);  /* ~square against the 3-row height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#roll-btn .dice-icon {
  width: 66px;
  height: 66px;
  margin-right: 0;
  vertical-align: 0;
}
/* Narrow phones: compact the Continue/Action/Talk + Roll group so the composer
   textarea keeps a usable width (the group is 264px by default). */
@media (max-width: 600px) {
  .send-group { width: 188px; gap: 5px; }
  #roll-btn { width: 80px; }
  #roll-btn .dice-icon { width: 44px; height: 44px; }
  .send-btn, .roll-btn, .mode-btn { font-size: 13px; letter-spacing: 0.06em; padding: 8px 6px; }
}

.model-chip {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 0 14px;
  border-radius: 18px;
  cursor: pointer;
  font-size: clamp(0.6875rem, 0.436rem + 0.3659vw, 0.875rem);
  font-family: 'Cormorant Garamond', Georgia, serif;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  transition: border-color 0.15s, color 0.15s;
}
.model-chip:hover { border-color: var(--accent); color: var(--accent); }
.model-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.model-chip .caret {
  font-size: 11px;
  color: var(--text-faint);
}

/* Cadence chip (left of the model chip) + its menu's heaviness dots */
.chip-group { display: flex; gap: 8px; align-items: end; }
.cadence-glyph { color: var(--accent); font-size: 14px; line-height: 1; }
.model-menu .sub .load-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.load-dot.light { background: #6fae6f; }
.load-dot.medium { background: var(--accent); }
.load-dot.heavy { background: var(--danger); }
.load-dot.off { background: var(--text-faint); }
.cadence-now {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  text-align: left;
}
.cadence-now:hover { background: var(--panel-3); }

#input-box {
  background: transparent;  /* floats in the dark room like the buttons */
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text);
  /* `inherit` used to mean Cormorant from the page body. The composer belongs
     with the narration it answers, so it follows the same reading face. */
  font-family: var(--read-font, 'Literata', Georgia, serif);
  font-size: clamp(0.8125rem, 0.4771rem + 0.4878vw, 1.0625rem);
  padding: 9px 12px;
  resize: vertical;
  min-height: 38px;
  max-height: 200px;
  line-height: 1.5;
}
#input-box:focus { outline: none; border-color: var(--accent); }
#input-box:disabled { opacity: 0.5; }

/* Action / Talk / Continue / Roll are one matched set — same size and colour. */
.send-btn, .roll-btn, .mode-btn {
  height: 38px;
  min-width: 80px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: clamp(0.6875rem, 0.436rem + 0.3659vw, 0.875rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  /* Same treatment as the settings gear: no fill, the dark room shows through. */
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.send-btn:hover:not(:disabled),
.roll-btn:hover:not(:disabled),
.mode-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.send-btn:disabled, .roll-btn:disabled, .mode-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* "required": the DM has mandated a roll that hasn't been made yet — pulse. */
.roll-btn.required {
  color: var(--accent);
  border-color: var(--accent);
  animation: roll-required-pulse 1.4s ease-in-out infinite;
}
@keyframes roll-required-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--accent); }
  50%      { box-shadow: inset 0 0 0 1px var(--accent), 0 0 9px rgba(200, 155, 90, 0.7); }
}

/* ---------- Animated D20 die (Roll button) ---------- */
.dice-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 5px;
  color: inherit;            /* matches the button's text colour */
  transform-origin: 50% 50%;
}
/* Banner shown when the DM requires a roll to resolve a specific action. */
.roll-required {
  max-width: 856px;
  width: fit-content;
  margin: 0 auto 10px auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(200, 155, 90, 0.08);
  border: 1px solid var(--accent);
  border-radius: 18px;
  font-size: 15px;
  color: var(--text);
}
.roll-required .rr-die { font-size: 17px; }
.roll-required .rr-text b { color: var(--accent); }
.roll-required .rr-note { color: var(--text-faint); }

/* ---------- Modal ---------- */

.hidden { display: none !important; }

.modal {
  position: fixed; inset: 0;
  background: rgba(10, 8, 5, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fade-in 0.12s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal-content {
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: clamp(1.125rem, 0.622rem + 0.7317vw, 1.5rem);
  width: min(480px, calc(100vw - 2*var(--sp-2)));
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.modal-content h3 {
  margin: 0 0 16px 0;
  color: var(--accent);
  font-size: clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.modal-content label {
  display: block;
  margin: 12px 0 5px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
}
.modal-content input[type="text"],
.modal-content select,
.modal-content textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);
  border-radius: 4px;
}
.modal-content input[type="text"]:focus,
.modal-content select:focus,
.modal-content textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.modal-content textarea { resize: vertical; min-height: 100px; font-family: inherit; font-size: 16px; line-height: 1.5; }
.modal-content .check {
  margin: 14px 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: none;
  font-size: 15px;
  color: var(--text);
  letter-spacing: 0;
  font-weight: normal;
  cursor: pointer;
}

/* ---------- Checkbox squares (gold square + checkmark, themed) ---------- */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--panel-2);
  cursor: pointer;
  position: relative;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent);
}
/* CSS checkmark, dark on the accent fill */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.modal-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}
.modal-actions .spacer { flex: 1; }
.modal-actions button {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-panel-t);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.modal-actions button:hover { border-color: var(--accent); color: var(--accent); }
.modal-actions button.primary {
  background: var(--accent);
  color: #1a140a;
  border-color: var(--accent);
  font-weight: 600;
}
.modal-actions button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #1a140a; }
.modal-actions button.danger {
  border-color: var(--danger);
  color: var(--danger);
}
.modal-actions button.danger:hover { background: var(--danger); color: var(--bg); }

/* ---------- Model menu ---------- */

.model-menu {
  position: fixed;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 6px;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
  z-index: 50;
  min-width: 240px;
}
.model-menu button {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 9px 12px 9px 30px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  border-radius: 2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.model-menu button:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-hover);
}
.model-menu button.active { color: var(--accent); }
/* Checkmark on the current selection (left gutter is reserved on every item). */
.model-menu button.active::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 4px;
  height: 8px;
  margin-top: -6px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.model-menu .label { font-weight: 600; }
.model-menu .sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.model-menu button:hover .sub { color: var(--text); }

/* Context-budget control inside the model menu */
.ctx-budget {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding: 10px 12px 4px 12px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.ctx-budget .cb-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--text-dim);
}
.ctx-budget .cb-val {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ctx-budget .cb-range {
  width: 100%;
  margin: 6px 0 2px 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ctx-budget .cb-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.ctx-budget .cb-mode { color: var(--danger); }

/* ---------- Back button (memory header) ---------- */

.back-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.back-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Adventure selector ---------- */

.selector {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(200, 155, 90, 0.12), transparent 60%),
    radial-gradient(1100px 760px at 50% 118%, rgba(0, 0, 0, 0.55), transparent 55%),
    var(--bg);
  display: flex;
  justify-content: center;
}
.selector-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 920px;
  padding: 44px 32px 28px 32px;
}

/* Brass wall-sconce candles flanking the title (decorative art assets).
   The PNGs are opaque with a near-black backing, so ::after paints the art
   under a soft radial mask that feathers the edges into any theme background,
   and ::before overlays a screen-blended glow so the painted flame flickers. */
.candle {
  position: fixed;
  top: 60px;
  width: 84px;
  height: 174px;
  z-index: 0;
  pointer-events: none;
}
.candle::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  /* screen blend drops the art's near-black backing on ANY theme background,
     leaving only the lit candle + brass; the soft mask trims the far corners. */
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(130% 100% at 50% 42%, #000 70%, transparent 96%);
          mask-image: radial-gradient(130% 100% at 50% 42%, #000 70%, transparent 96%);
}
.candle::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 30px;
  height: 46px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 62%, rgba(255, 216, 150, 0.5) 0%, rgba(212, 168, 87, 0.3) 46%, transparent 78%);
  box-shadow: 0 0 26px 8px rgba(212, 168, 87, 0.28);
  mix-blend-mode: screen;
  animation: flicker 2.4s ease-in-out infinite;
}
.candle-tl { left: 6%; }
.candle-tr { right: 6%; }
.candle-tl::after { background-image: url("/static/candles/candle-left.png"); }
.candle-tr::after { background-image: url("/static/candles/candle-right.png"); }
.candle-tr::before { animation-delay: -1.2s; }
@keyframes flicker {
  0%, 100% { transform: translateX(-50%) scale(1, 1); opacity: 1; }
  50%      { transform: translateX(-50%) scale(0.9, 1.1); opacity: 0.72; }
}
html[data-reduce-motion="1"] .candle::before { animation: none; }
@media (max-width: 860px) { .candle { display: none; } }

.selector-head { text-align: center; margin-bottom: 8px; flex: 0 0 auto; }

.title-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--text-faint));
}
.title-mark { margin-top: 18px; display: flex; justify-content: center; }
.title-sigil {
  position: relative;
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  color: var(--accent);
  box-shadow: 0 0 40px -8px rgba(212, 168, 87, 0.42);
}
.title-sigil::before, .title-sigil::after {
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  width: 78px;
}
.title-sigil::before {
  right: 100%; margin-right: 18px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 50%, transparent));
}
.title-sigil::after {
  left: 100%; margin-left: 18px;
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--accent) 50%, transparent));
}
.title-name {
  margin: 8px 0 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 68px;
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.title-name .amp { color: var(--accent); font-weight: 400; font-style: italic; margin: 0 8px; }
.title-tagline {
  margin-top: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  color: var(--text-dim);
}
.title-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 18px 0 4px;
}
.orn-line {
  flex: 0 0 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 50%, transparent), transparent);
}
.orn-mark { color: var(--accent); font-size: 14px; }

/* Settings gear (top-right of the menu) */
.settings-btn {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  z-index: 5;
  transition: border-color 0.15s, color 0.15s, transform 0.3s;
}
.settings-btn:hover { border-color: var(--accent); color: var(--accent); transform: rotate(50deg); }

/* Continue hero — resume the most recent adventure */
.continue-hero {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 30px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.continue-hero:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,0.4); }
.continue-hero .ch-label {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.continue-hero .ch-title { display: block; font-size: 24px; color: var(--text); margin-top: 4px; }
.continue-hero .ch-meta {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  color: var(--text-faint);
  margin-top: 4px;
}

/* Section heading with inline search */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 14px 0;
}
.section-head .sh-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.adv-search {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 16px;
  padding: 6px 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  width: 180px;
  transition: border-color 0.15s;
}
.adv-search:focus { outline: none; border-color: var(--accent); }
.adv-search::placeholder { color: var(--text-faint); }
.adventure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem);
  margin-bottom: 32px;
}
.adv-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem) clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem) clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.adv-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.adv-card-title {
  font-size: clamp(1.0313rem, 0.654rem + 0.5488vw, 1.3125rem);
  color: var(--text);
  margin: 0 0 10px 0;
  padding-right: 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.adv-card-meta {
  font-size: var(--fs-panel-t);
  color: var(--text-faint);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.adv-del {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.adv-card:hover .adv-del { opacity: 1; }
.adv-del:hover { color: var(--danger); }
.selector-empty {
  text-align: center;
  color: var(--text-faint);
  padding: 24px;
  font-style: italic;
}
.selector-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 540px;
  margin: auto;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 18px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 2px;
  color: var(--text);
  transition: background 0.18s, border-color 0.18s;
}
.menu-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.menu-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 2px;
  color: var(--accent);
}
.menu-text { flex: 1; line-height: 1.5; }
.menu-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  color: var(--text);
}
.menu-sub {
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.menu-chev { display: flex; color: var(--text-faint); opacity: 0.5; }
.menu-item:hover .menu-chev { opacity: 0.9; color: var(--accent); }
.exit-item:hover {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.exit-item:hover .menu-icon,
.exit-item:hover .menu-chev { color: var(--danger); }

/* Library sub-view (revealed from the menu) */
/* ===== Library — ornate center-panel view (matches library-standalone) ===== */
/* Fills .hv-main edge-to-edge (which is position:relative) with its own scroll. */
.library-view { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; margin: 0; width: auto; background: #0a0705; z-index: 3; }
.library-view.hidden { display: none; }
.library-view .lib-flex { flex: 1; }

.lib-head { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: clamp(1rem, 0.6646rem + 0.4878vw, 1.25rem) clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem) 0; flex-wrap: wrap; }
.lib-back { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid rgba(227,169,85,.3); border-radius: 8px; background: rgba(227,169,85,.05); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c98a3e; transition: border-color .15s, color .15s; }
.lib-back:hover { border-color: rgba(227,169,85,.6); color: #e3a955; }
.lib-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem); letter-spacing: .24em; color: #efe4cd; }
.lib-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; color: #7d715c; text-transform: uppercase; border: 1px solid rgba(227,169,85,.22); border-radius: 6px; padding: 4px 8px; }
.lib-search-wrap { position: relative; flex: 0 1 280px; display: flex; align-items: center; }
.lib-search-ic { position: absolute; left: 13px; width: 13px; height: 13px; color: #7d715c; pointer-events: none; }
.lib-search { width: 100%; padding: 9px 14px 9px 36px; background: rgba(10,7,5,.6); border: 1px solid rgba(227,169,85,.22); border-radius: 9px; color: #efe4cd; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(0.8438rem, 0.5503rem + 0.4268vw, 1.0625rem); outline: none; }
.lib-search:focus { border-color: rgba(227,169,85,.55); box-shadow: 0 0 22px -10px rgba(227,169,85,.45); }
.lib-search::placeholder { color: #7d715c; font-style: italic; }
.lib-new { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid #8a5f28; border-radius: 9px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #1e1206; background: linear-gradient(180deg, #e3a955, #8a5f28); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 22px -8px rgba(227,169,85,.28); transition: box-shadow .15s; }
.lib-new:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 30px -8px rgba(227,169,85,.5); }

.lib-tagrow { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 13px clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem) 0; flex-wrap: wrap; }
.lib-tags { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.lib-chip { padding: 7px 13px; border: 1px solid rgba(227,169,85,.22); border-radius: 8px; background: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #7d715c; transition: border-color .15s, color .15s, background .15s; }
.lib-chip:hover { border-color: rgba(227,169,85,.55); }
.lib-chip.on { border-color: rgba(227,169,85,.55); background: rgba(227,169,85,.08); color: #e3a955; }
.lib-sortlbl { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #7d715c; }

.lib-shelf { flex: 1; min-height: 0; overflow-y: auto; padding: clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem) clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem) clamp(1.1563rem, 0.6951rem + 0.6707vw, 1.5rem); scrollbar-width: thin; scrollbar-color: #8a5f28 transparent; }
.lib-shelf::-webkit-scrollbar { width: 8px; }
.lib-shelf::-webkit-scrollbar-thumb { background: #8a5f28; border-radius: 4px; }
.lib-shelf::-webkit-scrollbar-track { background: transparent; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: var(--sp-2); }

.lib-hero-card { position: relative; display: flex; align-items: stretch; margin-bottom: 18px; border: 1px solid rgba(227,169,85,.4); background: linear-gradient(120deg, rgba(36,20,7,.85), rgba(16,10,6,.6) 55%); box-shadow: inset 0 0 0 4px #0a0705, inset 0 0 0 5px rgba(227,169,85,.13); overflow: hidden; cursor: pointer; animation: fadeUp .5s ease both; }
.lib-hero-card:hover { border-color: rgba(227,169,85,.7); box-shadow: inset 0 0 0 4px #0a0705, inset 0 0 0 5px rgba(227,169,85,.13), 0 0 40px -12px rgba(227,169,85,.35); }
.lib-pip { position: absolute; width: 8px; height: 8px; transform: rotate(45deg); background: #0a0705; border: 1px solid rgba(227,169,85,.6); }
.lib-pip.tl { left: -4px; top: -4px; } .lib-pip.tr { right: -4px; top: -4px; } .lib-pip.br { right: -4px; bottom: -4px; } .lib-pip.bl { left: -4px; bottom: -4px; }
.lib-hero-body { flex: 1; min-width: 0; padding: clamp(1.0625rem, 0.6433rem + 0.6098vw, 1.375rem) clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem) clamp(1rem, 0.6646rem + 0.4878vw, 1.25rem); }
.lib-hero-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.lib-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: #1e1206; background: linear-gradient(180deg, #e3a955, #c98a3e); border-radius: 5px; padding: 3px 8px; }
.lib-lang { flex: 0 0 auto; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .2em; color: var(--ember-br, #e3a955); border: 1px solid var(--line-strong, rgba(227,169,85,0.45)); border-radius: 4px; padding: 2px 6px; opacity: .85; }
.lib-metatxt { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #7d715c; }
.lib-hero-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(1.3125rem, 0.7256rem + 0.8537vw, 1.75rem); letter-spacing: .06em; color: #efe4cd; text-shadow: 0 1px 22px rgba(227,169,85,.25); }
.lib-hero-excerpt { font-size: clamp(0.9063rem, 0.5709rem + 0.4878vw, 1.1563rem); font-style: italic; color: #b4a68b; line-height: 1.55; margin-top: 7px; max-width: 620px; }
.lib-hero-foot { display: flex; align-items: center; gap: 16px; margin-top: 13px; flex-wrap: wrap; }
.lib-hero-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-kv { display: inline-flex; align-items: center; gap: 8px; }
.lib-k { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #7d715c; }
.lib-v { font-size: 17.5px; color: #ddcfae; }
.lib-tier { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 14.5px; letter-spacing: .1em; }
.lib-resume { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 0 clamp(1.4375rem, 0.8506rem + 0.8537vw, 1.875rem); border-left: 1px solid rgba(227,169,85,.22); background: rgba(227,169,85,.04); }
.lib-resume-arw { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem); color: #e3a955; text-shadow: 0 0 18px rgba(227,169,85,.5); }
.lib-resume-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: #c98a3e; }

.lib-tag { padding: 4px 10px; border: 1px solid rgba(227,169,85,.3); border-radius: 20px; background: rgba(227,169,85,.05); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c98a3e; transition: border-color .15s, color .15s; }
.lib-tag:hover { border-color: rgba(227,169,85,.6); color: #e3a955; }

.lib-card { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(227,169,85,.26); background: rgba(16,10,6,.55); box-shadow: inset 0 0 0 3px #0a0705, inset 0 0 0 4px rgba(227,169,85,.1); padding: clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem) clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem) 14px; cursor: pointer; animation: fadeUp .5s ease both; }
.lib-card:hover { border-color: rgba(227,169,85,.6); box-shadow: inset 0 0 0 3px #0a0705, inset 0 0 0 4px rgba(227,169,85,.1), 0 0 32px -12px rgba(227,169,85,.4); }
.lib-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; opacity: .75; }
.lib-card-top { display: flex; align-items: baseline; gap: 10px; }
.lib-card-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(0.9375rem, 0.5602rem + 0.5488vw, 1.2188rem); letter-spacing: .04em; color: #efe4cd; flex: 1; min-width: 0; }
.lib-card-when { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #7d715c; flex: 0 0 auto; }
.lib-card-tags { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.lib-card .lib-tag { padding: 3.5px 10px; font-size: 9.5px; }
.lib-card-excerpt { font-size: clamp(0.8438rem, 0.5503rem + 0.4268vw, 1.0625rem); font-style: italic; color: #b4a68b; line-height: 1.5; margin-top: 8px; min-height: 42px; }
.lib-card-stats { display: flex; align-items: center; gap: 11px; margin-top: 11px; }
.lib-card-tier { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 12.5px; letter-spacing: .1em; }
.lib-sep { width: 1px; height: 12px; background: rgba(227,169,85,.2); }
.lib-turns { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #7d715c; }
.lib-ink { display: flex; gap: 4px; margin-left: auto; }
.lib-ink span { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid rgba(227,169,85,.4); }
.lib-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding-top: 10px; border-top: 1px solid rgba(227,169,85,.14); }
.lib-card-act { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c98a3e; }
.lib-card-cont { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #7d715c; margin-left: auto; }
.lib-card:hover .lib-card-cont { color: #e3a955; }

.lib-newcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 170px; border: 1px dashed rgba(227,169,85,.3); background: rgba(227,169,85,.02); cursor: pointer; animation: fadeUp .5s ease both; }
.lib-newcard:hover { border-color: rgba(227,169,85,.6); background: rgba(227,169,85,.05); }
.lib-newcard-ic { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(227,169,85,.35); border-radius: 50%; font-size: 19px; color: #e3a955; }
.lib-newcard-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: #7d715c; }

.lib-empty { text-align: center; padding: 50px 20px 24px; }
.lib-empty-h { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: .2em; color: #c98a3e; }
.lib-empty-d { font-size: 17.5px; font-style: italic; color: #7d715c; margin-top: 8px; }

.lib-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 11px clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem); border-top: 1px solid rgba(227,169,85,.18); background: rgba(10,7,5,.6); }
.lib-footer span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .28em; color: #7d715c; }

@keyframes panelIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes panelOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(46px); } }
/* Recently-deleted, inside the shelf */
.library-view .recently-deleted { margin-top: 22px; }
.back-link {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--text-dim);
  border-radius: 2px;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.back-link:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Settings: theme + interface size ---------- */
.theme-picker {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0 6px 0;
}
.scale-picker { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 6px 0; }
.scale-opt {
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.scale-opt:hover { border-color: var(--accent); color: var(--accent); }
.scale-opt.active { background: var(--accent); color: #1a140a; border-color: var(--accent); font-weight: 600; }

/* Multi-select tag picker (AI-generated new adventures) */
.tag-picker { margin: 4px 0 10px 0; }
.tag-cat-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 11px 0 5px 0; }
.tag-cat-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-chip {
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13.5px;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.tag-chip.active { background: var(--accent); color: #1a140a; border-color: var(--accent); font-weight: 600; }

/* Token allocation — cached vs uncached grouping */
.tok-group { display: flex; align-items: baseline; justify-content: space-between;
  margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.tok-group-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em; }
.tok-group-sum { font-size: 13px; color: var(--text-dim); }
.tok-group.cached .tok-group-label { color: #6fbf87; }
.tok-group.uncached .tok-group-label { color: #d98a4f; }
.tok-cats.uncached .tok-cbar-fill { background: #c9743e; }

/* ===================== Adventure cost (admin) ===================== */
.cost-modal-content { width: 560px; }
.cost-sub { color: var(--text-dim); font-size: 14.5px; margin: -6px 0 16px 0; line-height: 1.45; }
.cost-empty { color: var(--text-dim); font-size: 15px; padding: 12px 0; text-align: center; }
.cost-total-card {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 16px; margin-bottom: 16px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: linear-gradient(180deg, rgba(216,138,79,0.10), rgba(216,138,79,0.02));
}
.cost-total-usd {
  font-family: 'Cinzel', Georgia, serif; font-size: 32px; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1;
}
.cost-total-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.cost-table-wrap { overflow-x: auto; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cost-table th {
  text-align: left; padding: 6px 8px; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-dim); border-bottom: 1px solid var(--border-strong);
  font-weight: 600; white-space: nowrap;
}
.cost-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
.cost-table .cost-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-table .cost-model { color: var(--text); font-weight: 500; }
.cost-table .cost-usd { color: var(--accent); font-weight: 600; }
.cost-table tfoot td {
  border-top: 1px solid var(--border-strong); border-bottom: none;
  font-weight: 600; color: var(--text); padding-top: 9px;
}

/* ===================== AI terminal (backtick popup) ===================== */
.ai-term {
  position: fixed; top: 64px; right: 24px; z-index: 9999;
  width: 470px; height: 300px; min-width: 300px; min-height: 140px;
  max-width: 96vw; max-height: 88vh;
  display: flex; flex-direction: column;
  background: #000; border: 1px solid #1f7a1f; border-radius: 6px;
  box-shadow: 0 14px 44px -12px rgba(0,0,0,0.95), 0 0 0 1px rgba(51,255,102,0.07);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: #33ff66;
  resize: both; overflow: hidden;   /* overflow!=visible is required for resize */
}
.ait-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; cursor: move; user-select: none;
  background: #071407; border-bottom: 1px solid #1f7a1f;
}
.ait-dot { width: 7px; height: 7px; border-radius: 50%; background: #1f7a1f; flex: 0 0 auto; }
.ait-dot.live { background: #33ff66; box-shadow: 0 0 8px #33ff66; }
.ait-title { color: #33ff66; letter-spacing: 0.16em; font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.ait-model { color: #1f9a3f; margin-left: auto; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ait-close { background: none; border: none; color: #1f7a1f; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; flex: 0 0 auto; }
.ait-close:hover { color: #33ff66; }
.ait-body { flex: 1 1 auto; overflow-y: auto; padding: 8px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; }
.ait-body::-webkit-scrollbar { width: 8px; }
.ait-body::-webkit-scrollbar-thumb { background: #1f7a1f; border-radius: 4px; }
.ait-ev { margin-bottom: 7px; }
.ait-ts { color: #1f7a1f; }
.ait-task { color: #9dffb8; font-weight: 600; }
.ait-run { color: #ffd166; }
.ait-ok { color: #33ff66; }
.ait-err { color: #ff6b5f; }
.ait-dim { color: #1f9a3f; }
.ait-empty { color: #1f7a1f; }

/* ===================== Ember full-screen adventure creation ===================== */
#create-screen {
  --abyss:#0a0705; --ember:#c98a3e; --ember-br:#e3a955; --ember-dp:#8a5f28;
  --cink:#efe4cd; --cink-dim:#b4a68b; --cink-mute:#7d715c;
  --cline:rgba(227,169,85,0.22); --cline-br:rgba(227,169,85,0.45);
  --cglass:rgba(18,11,6,0.58); --cglow:rgba(227,169,85,0.28);
  --disp:'Cinzel',Georgia,serif; --cserif:'Cormorant Garamond',Georgia,serif; --cmono:'JetBrains Mono',monospace;
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  background: var(--abyss); color: var(--cink);
  font-family: var(--cserif); -webkit-font-smoothing: antialiased;
}
#create-screen .cs-bg { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 62% 66% at 50% 46%, #241507, var(--abyss) 78%); }
#create-screen .cs-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(8,5,3,0.72) 100%); }
#create-screen .cs-focus-band { position: absolute; left: 0; right: 0; top: 50%; height: clamp(145px, 84.63px + 5.488vw, 190px); z-index: 1;
  transform: translateY(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(227,169,85,0.05) 30%, rgba(227,169,85,0.05) 70%, transparent); }

#create-screen .cs-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: center; gap: clamp(12px, 6.63px + 0.488vw, 16px); padding: clamp(17px, 10.29px + 0.61vw, 22px) clamp(23px, 13.61px + 0.854vw, 30px);
  background: linear-gradient(180deg, rgba(8,5,3,0.85), transparent); pointer-events: none; }
#create-screen .cs-topbar > * { pointer-events: auto; }
#create-screen .cs-back { width: clamp(32px, 18.59px + 1.22vw, 42px); height: clamp(32px, 18.59px + 1.22vw, 42px); border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--cline); background: var(--cglass); color: var(--cink-dim);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.16s ease; }
#create-screen .cs-back svg { width: 16px; height: 16px; }
#create-screen .cs-back:hover { color: var(--ember-br); border-color: var(--cline-br); }
#create-screen .cs-title { font-family: var(--disp); font-weight: 600; font-size: clamp(1rem, 0.5808rem + 0.6098vw, 1.3125rem); letter-spacing: 0.1em;
  color: var(--ember-br); margin: 0; text-shadow: 0 1px 16px var(--cglow); }

#create-screen .cs-runes { position: absolute; left: clamp(23px, 13.61px + 0.854vw, 30px); top: 50%; transform: translateY(-50%); z-index: 6;
  display: flex; flex-direction: column; gap: clamp(11px, 6.98px + 0.366vw, 14px); }
#create-screen .cs-rune { width: 10px; height: 10px; transform: rotate(45deg); cursor: pointer;
  border: 1px solid var(--cink-mute); background: transparent; padding: 0; transition: all 0.2s ease; }
#create-screen .cs-rune.done { background: var(--ember-dp); border-color: var(--ember-dp); }
#create-screen .cs-rune.now { background: var(--ember-br); border-color: var(--ember-br); box-shadow: 0 0 12px var(--cglow); }
@media (max-width: 700px) { #create-screen .cs-runes { display: none; } }

#create-screen .cs-viewport { position: absolute; inset: 0; z-index: 5; overflow: hidden; }
#create-screen .cs-rail { position: absolute; left: 50%; top: 50%; width: min(clamp(430px, 255.61px + 15.854vw, 560px), calc(100vw - 110px));
  transform: translate(-50%, 0); will-change: transform;
  transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.24, 1); }

#create-screen .cs-step { min-height: clamp(115px, 68.05px + 4.268vw, 150px); display: flex; flex-direction: column; justify-content: center;
  gap: clamp(11px, 6.98px + 0.366vw, 14px); padding: clamp(14px, 8.63px + 0.488vw, 18px) clamp(26px, 15.27px + 0.976vw, 34px); margin: 6px 0; border-radius: 14px; border: 1px solid transparent;
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, filter 0.45s ease; }
#create-screen .cs-q { font-family: var(--cmono); font-size: var(--fs-ui); letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--cink-mute); margin: 0; transition: color 0.3s ease; }
#create-screen .cs-q b { color: inherit; font-weight: 500; }

#create-screen .cs-step[data-dist="0"] { opacity: 1; transform: scale(1); filter: blur(0);
  background: var(--cglass); border-color: var(--cline-br);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: 0 24px 70px -30px rgba(0,0,0,0.9), 0 0 50px -22px var(--cglow); }
#create-screen .cs-step[data-dist="0"] .cs-q { color: var(--ember-br); }
#create-screen .cs-step[data-dist="1"] { opacity: 0.42; transform: scale(0.94); filter: blur(0.4px); cursor: pointer; }
#create-screen .cs-step[data-dist="2"] { opacity: 0.16; transform: scale(0.9); filter: blur(1px); cursor: pointer; }
#create-screen .cs-step:not([data-dist="0"]):not([data-dist="1"]):not([data-dist="2"]) { opacity: 0.05; transform: scale(0.88); filter: blur(1.6px); }
#create-screen .cs-step:not([data-dist="0"]):hover {
  opacity: 0.72; cursor: pointer;
  border-color: var(--cline-br);
  box-shadow: 0 0 0 1px var(--cline-br), 0 0 26px -14px var(--cglow);
}

#create-screen .cs-input { width: 100%; padding: clamp(11px, 6.98px + 0.366vw, 14px) clamp(12px, 6.63px + 0.488vw, 16px); border-radius: 9px;
  background: rgba(10,7,5,0.6); border: 1px solid var(--cline); outline: none;
  font-family: var(--cserif); font-size: clamp(1.125rem, 0.7058rem + 0.6098vw, 1.4375rem); color: var(--cink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease; }
#create-screen .cs-input::placeholder { color: var(--cink-mute); font-style: italic; }
#create-screen .cs-step[data-dist="0"] .cs-input:focus { border-color: var(--cline-br);
  box-shadow: 0 0 0 3px rgba(227,169,85,0.14), 0 0 30px -10px var(--cglow); }
#create-screen .cs-hint { font-family: var(--cmono); font-size: clamp(0.625rem, 0.4573rem + 0.2439vw, 0.75rem); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cink-mute); margin: 0; }

#create-screen .cs-pills { display: flex; gap: 10px; flex-wrap: wrap; }
#create-screen .cs-pill { font-family: var(--cmono); font-size: var(--fs-panel-t); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cink-dim); padding: clamp(9px, 4.98px + 0.366vw, 12px) clamp(15px, 8.29px + 0.61vw, 20px); border-radius: 100px; cursor: pointer;
  border: 1px solid var(--cline); background: rgba(10,7,5,0.4); transition: all 0.16s ease; }
#create-screen .cs-pill.sm { padding: 7px clamp(10px, 5.98px + 0.366vw, 13px); font-size: clamp(0.625rem, 0.4154rem + 0.3049vw, 0.7813rem); letter-spacing: 0.08em; }
#create-screen .cs-pill:hover { color: var(--ember-br); border-color: var(--cline-br); }
#create-screen .cs-pill.sel { color: #1e1206; border-color: var(--ember-dp);
  background: linear-gradient(180deg, var(--ember-br), var(--ember-dp));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 18px -8px var(--cglow); }

#create-screen .cs-tags { max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 6px; }
#create-screen .cs-tags::-webkit-scrollbar { width: 7px; }
#create-screen .cs-tags::-webkit-scrollbar-thumb { background: var(--cline-br); border-radius: 4px; }
#create-screen .cs-tagcat { font-family: var(--cmono); font-size: clamp(0.625rem, 0.4573rem + 0.2439vw, 0.75rem); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--cink-mute); margin: 8px 0 3px; }

#create-screen .cs-begin { display: inline-flex; align-items: center; justify-content: center; gap: clamp(9px, 4.98px + 0.366vw, 12px);
  padding: clamp(12px, 6.63px + 0.488vw, 16px) clamp(20px, 11.95px + 0.732vw, 26px); border-radius: 9px; cursor: pointer; align-self: flex-start;
  font-family: var(--cmono); font-size: var(--fs-panel-t); letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--ember-dp); color: #1e1206;
  background: linear-gradient(180deg, var(--ember-br), var(--ember-dp));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 22px -8px var(--cglow); transition: all 0.16s ease; }
#create-screen .cs-begin:hover { filter: brightness(1.07); transform: translateY(-1px); }
#create-screen .cs-begin:disabled { opacity: 0.6; cursor: default; filter: none; transform: none; }
#create-screen .cs-begin svg { width: 18px; height: 18px; }

#create-screen .cs-foot { position: absolute; left: 0; right: 0; bottom: clamp(11px, 6.98px + 0.366vw, 14px); z-index: 6; text-align: center;
  font-family: var(--cmono); font-size: clamp(0.625rem, 0.4573rem + 0.2439vw, 0.75rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cink-mute); pointer-events: none; }

@media (prefers-reduced-motion: reduce) { #create-screen .cs-rail, #create-screen .cs-step { transition: none; } }
.theme-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }

/* ---------- Recently Deleted ---------- */

.recently-deleted {
  margin-top: 36px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.rd-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 4px 0;
  margin-bottom: 12px;
}
.rd-toggle:hover { color: var(--accent); }
.rd-toggle .rd-caret { display: inline-block; transition: transform 0.15s; }
.rd-toggle.open .rd-caret { transform: rotate(90deg); }
.rd-count { color: var(--text-faint); }
.deleted-grid { margin-bottom: 0; }

/* ---- Library: Select button + multi-select bar ---- */
.lib-select { flex: 0 0 auto; padding: 10px 15px; border: 1px solid rgba(227,169,85,.32); border-radius: 9px; cursor: pointer; background: rgba(227,169,85,.05); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #c98a3e; transition: border-color .15s, color .15s; }
.lib-select:hover { border-color: rgba(227,169,85,.6); color: #e3a955; }
.lib-select.on { background: linear-gradient(180deg, rgba(227,169,85,.16), rgba(227,169,85,.05)); border-color: #e3a955; color: #efe4cd; }
.lib-selbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 16px; border: 1px solid rgba(227,169,85,.28); border-radius: 10px; background: rgba(227,169,85,.05); animation: fadeUp .2s ease both; }
.lib-selbar.hidden { display: none; }
.lib-selcount { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #ddcfae; }
.lib-selall, .lib-selcancel { padding: 7px 13px; border: 1px solid rgba(227,169,85,.28); border-radius: 7px; background: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #b4a68b; }
.lib-selall:hover, .lib-selcancel:hover { border-color: rgba(227,169,85,.55); color: #e3a955; }
.lib-seldelete { padding: 8px 16px; border: 1px solid rgba(201,84,62,.5); border-radius: 8px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #e0806f; background: rgba(201,84,62,.08); }
.lib-seldelete:hover:not(:disabled) { border-color: #c9543e; color: #f0a493; background: rgba(201,84,62,.16); }
.lib-seldelete:disabled { opacity: .4; cursor: default; }

/* ---- Selection checkboxes on cards ---- */
.lib-check { position: absolute; top: 12px; left: 12px; z-index: 4; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid rgba(227,169,85,.55); background: rgba(10,7,5,.75); display: none; place-items: center; }
.lib-check::after { content: "✓"; font-size: 15px; color: #100a05; opacity: 0; }
.library-view.selecting .lib-check { display: grid; }
.library-view.selecting .lib-card, .library-view.selecting .lib-hero-card { cursor: pointer; }
.library-view.selecting .lib-card:not(.sel), .library-view.selecting .lib-hero-card:not(.sel) { opacity: .82; }
.lib-card.sel, .lib-hero-card.sel { border-color: #e3a955 !important; box-shadow: 0 0 0 2px rgba(227,169,85,.5), 0 0 26px -10px rgba(227,169,85,.5) !important; opacity: 1 !important; }
.lib-card.sel .lib-check, .lib-hero-card.sel .lib-check { background: #e3a955; border-color: #e3a955; }
.lib-card.sel .lib-check::after, .lib-hero-card.sel .lib-check::after { opacity: 1; }

/* ---- Recently Deleted: header + actions ---- */
.rd-head { display: flex; align-items: center; gap: 12px; }
.rd-empty { flex: 0 0 auto; padding: 6px 12px; border: 1px solid rgba(201,84,62,.4); border-radius: 7px; background: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #c07a6c; }
.rd-empty:hover { border-color: #c9543e; color: #e0806f; background: rgba(201,84,62,.1); }
.rd-empty.hidden { display: none; }
.rd-note { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 16px; color: var(--text-faint, #7d715c); margin: 0 0 12px; }
.rd-note.hidden { display: none; }
.adv-card.deleted { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px dashed rgba(227,169,85,.28); background: rgba(16,10,6,.4); opacity: .92; }
.adv-card.deleted .adv-card-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 17.5px; color: #cdbfa0; }
.adv-card.deleted .adv-card-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7d715c; }
.rd-actions { display: flex; gap: 8px; margin-top: 8px; }
.rd-restore { padding: 6px 13px; border: 1px solid rgba(157,180,124,.45); border-radius: 7px; background: rgba(157,180,124,.08); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #a7c088; }
.rd-restore:hover { border-color: #9db47c; color: #c3d6a6; }
.rd-forever { padding: 6px 13px; border: 1px solid rgba(201,84,62,.4); border-radius: 7px; background: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #c07a6c; }
.rd-forever:hover { border-color: #c9543e; color: #e0806f; background: rgba(201,84,62,.1); }

/* ---- Reusable confirm dialog ---- */
.confirm-content { max-width: 440px; }
.confirm-msg { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(0.9375rem, 0.6021rem + 0.4878vw, 1.1875rem); line-height: 1.5; color: var(--ink-soft, #ddcfae); margin: 10px 0 20px; }

/* ---- Testers admin modal ---- */
.testers-content { max-width: 520px; }
.testers-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17.5px; font-style: italic; line-height: 1.5; color: var(--ink-mute, #b4a68b); margin: 6px 0 18px; }
.testers-grant { display: flex; gap: 10px; }
.testers-grant input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid rgba(227,169,85,.28); border-radius: 9px; background: rgba(10,7,5,.7); color: #efe4cd; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; outline: none; }
.testers-grant input:focus { border-color: rgba(227,169,85,.6); }
.testers-msg { margin: 12px 0 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #9db47c; }
.testers-msg.err { color: #d99; }
.testers-msg.hidden { display: none; }
.testers-list-lbl { margin: 20px 0 8px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim, #7d715c); }
.testers-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #8a5f28 transparent; }
.testers-empty { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; color: var(--ink-dim, #7d715c); padding: 8px 2px; }
.tester-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid rgba(227,169,85,.16); border-radius: 8px; background: rgba(255,255,255,.02); }
.tester-who { flex: 1; min-width: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; color: #ddcfae; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tester-revoke { flex: 0 0 auto; padding: 6px 12px; border: 1px solid rgba(201,84,62,.4); border-radius: 7px; background: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #c07a6c; }
.tester-revoke:hover { border-color: #c9543e; color: #e0806f; background: rgba(201,84,62,.1); }

/* Footer */
.selector-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.selector-footer .version { opacity: 0.9; }
.selector-footer .dim { color: color-mix(in srgb, var(--accent) 55%, var(--text-faint)); }
.adv-card.deleted {
  opacity: 0.72;
  cursor: default;
}
.adv-card.deleted:hover {
  transform: none;
  border-color: var(--border-strong);
  box-shadow: none;
}
.rd-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.rd-actions button {
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  border: 1px solid var(--border-strong);
  background: var(--panel-2);
  color: var(--text);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rd-actions .rd-restore:hover { border-color: var(--accent); color: var(--accent); }
.rd-actions .rd-forever { color: var(--text-dim); }
.rd-actions .rd-forever:hover { border-color: var(--danger); color: var(--danger); }

/* ---------- New-adventure modal extras ---------- */

.optional { color: var(--text-faint); text-transform: none; letter-spacing: 0; font-weight: normal; }
.ai-note { font-size: 14px; color: var(--text-dim); margin: 10px 0 0 0; line-height: 1.5; }
.type-desc { font-size: 14px; color: var(--text-dim); margin: 8px 0 0 0; min-height: 14px; font-style: italic; }

/* New-adventure: player character (name/gender/age + per-field randomize) */
.char-fields { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px 0; }
.char-row { display: flex; align-items: center; gap: 10px; }
.char-row .char-label {
  flex: 0 0 64px;
  font-size: 14px;
  color: var(--text-dim);
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.char-row input[type="text"],
.char-row input[type="number"] {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 15px;
}
.char-row input:focus { outline: none; border-color: var(--accent); }
.char-row input:disabled { opacity: 0.4; }
.char-row .rand-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
/* Reroll die icon beside each randomize checkbox (tumbles on hover). */
.rand-die {
  width: 17px;
  height: 17px;
  color: var(--text-dim);
  transform-origin: 50% 50%;
  transition: color 0.15s;
}
.rand-toggle:hover .rand-die { color: var(--accent); animation: rand-tumble 0.8s cubic-bezier(.5,.05,.5,.95); }
.rand-toggle input:checked ~ .rand-die { color: var(--accent); }
@keyframes rand-tumble {
  0% { transform: rotate(0); }
  50% { transform: rotate(200deg) scale(1.12); }
  100% { transform: rotate(360deg); }
}
html[data-reduce-motion="1"] .rand-toggle:hover .rand-die { animation: none; }
.char-hint { font-size: 13px; color: var(--text-faint); margin: 2px 0 0 0; font-style: italic; }
.new-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--accent);
  font-size: 16px;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Right-click context menu (adventure cards) ---------- */

.ctx-menu {
  position: fixed;
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 6px;
  box-shadow: 0 20px 48px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.3);
  z-index: 200;
  min-width: 180px;
}
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  padding: 9px 12px;
  cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  border-radius: 2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ctx-menu button:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-hover);
}
.ctx-menu button:disabled { opacity: 0.5; cursor: not-allowed; }
.ctx-menu button:disabled:hover { background: transparent; border-color: transparent; color: var(--text); }
.ctx-menu button.danger { color: var(--danger); }
.ctx-menu button.danger:hover {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger-hover);
}
.ctx-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);
  z-index: 300;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: fade-in 0.15s ease;
}

/* ---------- Scrollbars (subtle) ---------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ===================== Loading screen (enter / exit / create) ===================== */
.loading {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  pointer-events: none;            /* never block clicks, even mid-fade */
  color: var(--accent);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(200, 155, 90, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
  /* Fade in/out instead of snapping. Hidden by default; .visible fades it in.
     On hide, opacity fades over .45s, then visibility flips (delayed) so it
     leaves cleanly without a snap. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.loading.visible {
  opacity: 1;
  visibility: visible;
  /* Appear INSTANTLY (no fade-in) so it fully covers the screen before the
     adventure view is revealed underneath — otherwise a fast load flashes the
     adventure through the still-fading-in overlay. Hide still fades (base rule). */
  transition: none;
}
html[data-reduce-motion="1"] .loading { transition: none; }
/* ---------- Loading: "The Dice Oracle" ---------- */
#loading .lo-scene { position:absolute; inset:0; pointer-events:none; }
#loading .lo-bg { position:absolute; inset:0; background:radial-gradient(ellipse 90% 80% at 50% 100%,#2a1808,#150d06 55%,#0a0705 82%); }
#loading .lo-hearth { position:absolute; left:0; right:0; bottom:-14%; height:55%; background:radial-gradient(ellipse at 50% 90%,rgba(227,169,85,0.14),transparent 62%); animation:breathe 5.5s ease-in-out infinite; }
#loading .lo-embers span { position:absolute; bottom:-8px; border-radius:50%; opacity:0; animation:emberUp linear infinite; }
#loading .lo-stars span { position:absolute; border-radius:50%; animation:starTwinkle 3.5s ease-in-out infinite; }
#loading .lo-center { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(14px,4vh,34px); padding:16px 40px; box-sizing:border-box; }
#loading .lo-ring { position:relative; width:min(340px,46vmin); aspect-ratio:1; min-height:150px; animation:fadeUp .6s ease both; }
#loading .lo-r { position:absolute; inset:0; width:100%; height:100%; }
#loading .lo-r-outer { animation:spinSlow 46s linear infinite; }
#loading .lo-r-inner { inset:9%; width:82%; height:82%; animation:spinRev 30s linear infinite; }
#loading #lo-prog-ring { transition:stroke-dashoffset .3s ease; }
#loading .lo-core-wrap { position:absolute; inset:0; display:grid; place-items:center; }
#loading .lo-core { width:46%; height:46%; animation:corePulse 2.6s ease-in-out infinite; }
#loading .lo-pct { position:absolute; left:50%; top:50%; transform:translate(-50%,86px); font-family:'Cinzel',Georgia,serif; font-weight:700; font-size:17px; letter-spacing:.1em; color:#e3a955; text-shadow:0 0 18px rgba(227,169,85,.5); }
#loading .lo-eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:#c98a3e; }
#loading .lo-tasks { width:min(430px,86vw); display:flex; flex-direction:column; animation:fadeUp .6s ease .15s both; }
#loading .lo-task { display:flex; align-items:center; gap:11px; padding:clamp(2px,0.6vh,5px) 0; font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:#3d3527; }
#loading .lo-task .lo-mark { width:8px; text-align:center; color:#3d3527; }
#loading .lo-task .lo-label { flex:1; }
#loading .lo-task .lo-right { color:#7d715c; }
#loading .lo-status { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.3em; text-transform:uppercase; color:#7d715c; animation:breathe 2.2s ease-in-out infinite; transition:opacity .3s ease; }
@keyframes spinSlow { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes spinRev { from{transform:rotate(360deg)} to{transform:rotate(0)} }
@keyframes corePulse { 0%,100%{filter:drop-shadow(0 0 10px rgba(227,169,85,.45))} 50%{filter:drop-shadow(0 0 26px rgba(227,169,85,.9))} }
@keyframes starTwinkle { 0%,100%{opacity:.25} 50%{opacity:.9} }
/* Status dots (appended by the app's status cycler) */
.lc-dot { display:inline-block; width:4px; height:4px; background:var(--accent); border-radius:50%; margin:0 3px 3px; animation:lc-dots 1.4s ease-in-out infinite; }
.lc-dot:nth-child(2) { animation-delay:.15s; }
.lc-dot:nth-child(3) { animation-delay:.3s; }
@keyframes lc-dots { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }
html[data-reduce-motion="1"] #loading .lo-r-outer,
html[data-reduce-motion="1"] #loading .lo-r-inner,
html[data-reduce-motion="1"] #loading .lo-hearth,
html[data-reduce-motion="1"] #loading .lo-embers span,
html[data-reduce-motion="1"] #loading .lo-stars span,
html[data-reduce-motion="1"] #loading .lo-core,
html[data-reduce-motion="1"] #loading .lo-status,
html[data-reduce-motion="1"] .lc-dot { animation:none !important; }

/* ===================== Combat battle map ===================== */
/* Story body: text fills the panel; in combat it splits with the map on the right. */
.story-body { flex: 1; display: flex; min-height: 0; }
.story-body .story-log { flex: 1; min-width: 0; }
.combat-map {
  --cm-ally: #6892c8; --cm-ally-br: #9bb6d4;
  --cm-enemy: #c8543e; --cm-enemy-br: #e89a8a;
  flex: 0 0 40%;
  min-width: 280px;
  max-width: 460px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  background: var(--panel);
  padding: 16px 16px 20px;
}
.cm-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.cm-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 55%, var(--text-faint));
}
.cm-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 22px; color: var(--text); margin-top: 3px;
}
.cm-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cm-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: var(--bg); border-radius: 2px; white-space: nowrap;
}
.cm-chip.turn { color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.cm-board {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 3px; overflow: hidden;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, rgba(212,168,87,0.05), transparent 70%), #0f0b07;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.6);
}
.cm-grid, .cm-terrain-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cm-terrain {
  position: absolute; width: 14%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); pointer-events: none;
}
.cm-terrain svg { width: 100%; height: 100%; display: block; }
.cm-token {
  position: absolute; width: 8.5%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
.cm-disc {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid; background: var(--bg);
}
.cm-glyph { width: 52%; height: 52%; }
.cm-token.ally .cm-disc {
  border-color: var(--cm-ally);
  background: radial-gradient(circle at 50% 35%, rgba(104,146,200,0.28), rgba(15,11,7,0.95));
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 8px rgba(104,146,200,0.2);
}
.cm-token.ally .cm-glyph { color: var(--cm-ally-br); }
.cm-token.enemy .cm-disc {
  border-color: var(--cm-enemy);
  background: radial-gradient(circle at 50% 35%, rgba(200,84,62,0.28), rgba(15,11,7,0.95));
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 8px rgba(200,84,62,0.2);
}
.cm-token.enemy .cm-glyph { color: var(--cm-enemy-br); }
.cm-token.active .cm-disc {
  border-color: var(--accent-hover);
  box-shadow: 0 0 0 3px rgba(212,168,87,0.25), 0 2px 8px rgba(0,0,0,0.6), 0 0 16px rgba(240,200,120,0.4);
}
.cm-token.active .cm-glyph { color: var(--accent-hover); }
.cm-active-ring {
  position: absolute; inset: -22%;
  border: 1px dashed var(--accent); border-radius: 50%; opacity: 0.6;
}
.cm-token.down { opacity: 0.4; }
.cm-token.down .cm-disc { border-style: dashed; }
.cm-token.down .cm-glyph { filter: grayscale(1); }
.cm-tlabel { position: absolute; top: 104%; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; }
.cm-tname {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1;
}
.cm-token.active .cm-tname { color: var(--accent-hover); }
.cm-token.enemy .cm-tname { color: var(--cm-enemy-br); }
.cm-token.ally .cm-tname { color: var(--cm-ally-br); }
.cm-hp { margin: 3px auto 0; width: 28px; height: 3px; background: rgba(0,0,0,0.6); border: 0.5px solid color-mix(in srgb, var(--accent) 16%, transparent); position: relative; }
.cm-hp-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.cm-token.ally .cm-hp-fill { background: var(--cm-ally); }
.cm-token.enemy .cm-hp-fill { background: var(--cm-enemy); }
.cm-token.active .cm-hp-fill { background: var(--accent); }
.cm-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: var(--bg); border-radius: 2px;
}
.cm-leg {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim);
}
.cm-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid; background: var(--bg); }
.cm-dot.ally { border-color: var(--cm-ally); background: radial-gradient(circle, rgba(104,146,200,0.4), transparent); }
.cm-dot.enemy { border-color: var(--cm-enemy); background: radial-gradient(circle, rgba(200,84,62,0.4), transparent); }
.cm-dot.active { border-color: var(--accent-hover); box-shadow: 0 0 6px rgba(240,200,120,0.5); }

/* ============================================================
   MOBILE + PLATFORM-ADAPTIVE LAYOUT  (added for phones/tablets)
   Everything here is additive and scoped to small screens or to
   html[data-platform=...]; desktop layout is unchanged.
   ============================================================ */

/* The mobile top bar + drawer backdrop are hidden on desktop. */
#mobile-bar { display: none; }
.m-backdrop { display: none; }

@media (max-width: 860px) {
  /* App becomes a single column: Story is the base; Memory (left) and
     Party (right) slide in as drawers over it. */
  .app {
    display: block;
    height: 100vh;
    height: 100dvh;            /* tracks the shrinking mobile URL bar */
  }

  /* ---- Mobile top bar with drawer toggles ---- */
  #mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 80;
    height: calc(52px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 10px 0 10px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  #mobile-bar .mbar-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 21px;
    color: var(--accent);
    letter-spacing: 0.3px;
    white-space: nowrap;
  }
  .mbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 13px;
    background: var(--panel-2);
    color: var(--text-dim);
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
  }
  .mbar-btn:active { background: var(--panel-3); }
  .mbar-btn.active { color: var(--accent); border-color: var(--accent); }
  .mbar-btn.hidden { display: none; }

  /* ---- Story is the base layer, full width ---- */
  .story-panel {
    height: calc(100dvh - 52px - env(safe-area-inset-top));
  }
  .story-header { flex-wrap: wrap; }

  /* ---- Memory + Party become off-canvas drawers ---- */
  .memory-panel,
  .rpg-panel {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top));
    bottom: 0;
    width: min(86vw, 360px);
    z-index: 70;
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    will-change: transform;
  }
  .memory-panel { left: 0;  transform: translateX(-100%); border-right: 1px solid var(--border-strong); }
  .rpg-panel    { right: 0; transform: translateX(100%);  border-left: 1px solid var(--border-strong); }

  html[data-mdrawer="memory"] .memory-panel { transform: translateX(0); }
  html[data-mdrawer="party"]  .rpg-panel    { transform: translateX(0); }

  /* Dim backdrop while a drawer is open; tap it to close (wired in JS). */
  html[data-mdrawer="memory"] .m-backdrop,
  html[data-mdrawer="party"]  .m-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.5);
  }

  /* Sticky input keeps clear of the iOS/Android home indicator. */
  .input-bar { padding-bottom: max(env(safe-area-inset-bottom), 8px); }

  /* Modals go near-full-screen and scroll on small devices. */
  .modal-content {
    max-width: 94vw;
    max-height: 88dvh;
    overflow-y: auto;
  }

  /* Comfortable menu padding on narrow screens. */
  .selector-inner { padding-left: 16px; padding-right: 16px; }
}

/* ---- Touch niceties for any detected phone, any width ---- */
html[data-platform="ios"] body,
html[data-platform="android"] body {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html[data-platform="ios"] button,
html[data-platform="android"] button { touch-action: manipulation; }

/* ---- iOS skin: SF system font on CONTROLS only (story keeps its serif) ---- */
html[data-platform="ios"] button,
html[data-platform="ios"] input,
html[data-platform="ios"] textarea,
html[data-platform="ios"] select,
html[data-platform="ios"] .mbar-btn,
html[data-platform="ios"] .menu-sub,
html[data-platform="ios"] .ctx-menu,
html[data-platform="ios"] .model-menu {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
html[data-platform="ios"] .mbar-btn,
html[data-platform="ios"] .send-btn,
html[data-platform="ios"] .roll-btn,
html[data-platform="ios"] .mode-btn,
html[data-platform="ios"] textarea,
html[data-platform="ios"] input[type="text"],
html[data-platform="ios"] input[type="number"] { border-radius: 11px; }
html[data-platform="ios"] .story-log,
html[data-platform="ios"] .memory-panel,
html[data-platform="ios"] .rpg-panel { -webkit-overflow-scrolling: touch; }

/* ---- Android / Material skin: crisper corners on controls ---- */
html[data-platform="android"] button,
html[data-platform="android"] input,
html[data-platform="android"] textarea,
html[data-platform="android"] select,
html[data-platform="android"] .mbar-btn,
html[data-platform="android"] .menu-sub,
html[data-platform="android"] .ctx-menu,
html[data-platform="android"] .model-menu {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
html[data-platform="android"] .mbar-btn,
html[data-platform="android"] .send-btn,
html[data-platform="android"] .roll-btn,
html[data-platform="android"] .mode-btn,
html[data-platform="android"] textarea,
html[data-platform="android"] input[type="text"],
html[data-platform="android"] input[type="number"] { border-radius: 4px; }

/* ---- iOS zoom guard: Safari zooms the page when a text field with a sub-16px
   font gains focus. Keep every entry field at >=16px on phones so focusing an
   input never yanks the viewport. Scoped to <=860px so desktop layouts (where
   the small type is intentional) are untouched. Selects/native pickers don't
   zoom, so they're left alone. ---- */
@media (max-width: 860px) {
  input:not([type]),
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"],
  input[type="url"], input[type="date"], textarea {
    font-size: 18px;
  }
  /* Fields whose own selectors are more specific than the catch-all above and
     set a sub-16px size — matched here at equal/greater specificity so the
     iOS zoom guard actually reaches them. */
  #input-box { font-size: 18px; }
  .modal-content input[type="text"], .modal-content input[type="email"],
  .modal-content input[type="password"], .modal-content input[type="number"],
  .modal-content textarea { font-size: 18px; }
  #db-screen .dbs-search input { font-size: 18px; }
  #home-v4 .hvf-search input, #home-v4 .hvf-add input { font-size: 18px; }
}

/* Plan/tier hint text in Settings */
.tier-hint { font-size: 13px; color: var(--text-faint); font-weight: 400; }

/* Read-aloud (TTS) — play button + Settings narration section */
.play-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; padding: 2px 9px;
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--border-strong); border-radius: 6px;
  cursor: pointer;
}
.play-btn:hover { color: var(--accent); border-color: var(--accent); }
.play-btn.playing { color: var(--accent); border-color: var(--accent); }
#tts-section { margin-top: 4px; }
.tts-hint, .tts-empty { font-size: 13px; color: var(--text-faint); margin: 2px 0 8px; }
.tts-subhead { font-size: 14px; color: var(--text-dim); margin: 10px 0 4px; }
.tts-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.tts-cname { min-width: 92px; font-size: 15px; color: var(--text); }
.tts-row select { flex: 1; min-width: 0; }
.tts-row input[type="range"] { flex: 1; }
.tts-preview {
  font-size: 13px; padding: 2px 8px; border-radius: 6px;
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--border-strong); cursor: pointer;
}
.tts-preview:hover { color: var(--accent); border-color: var(--accent); }

/* Fixed (non-dropdown) narrator label in Settings */
.tts-fixed { flex: 1; font-size: 15px; color: var(--text); }

/* Read-aloud karaoke word highlight */
.tts-w { border-radius: 3px; transition: background-color 0.08s ease, color 0.08s ease; }
.tts-w.tts-speaking {
  color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Settings gear inside an adventure (story header) */
.app-settings-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-strong); border-radius: 7px; cursor: pointer;
}
.app-settings-btn:hover { color: var(--accent); border-color: var(--accent); }
.app-settings-btn svg { transition: transform 0.4s ease; }
.app-settings-btn:hover svg { transform: rotate(40deg); }

/* ---------- In-adventure settings sheet ---------- */

/* Back button + title share the header line; title takes the slack. */
.story-header { gap: 10px; }
.story-header h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Memory (left) / Party (right) drawer toggles in the story header. */
.hdr-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: clamp(0.7188rem, 0.4672rem + 0.3659vw, 0.9062rem);
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.hdr-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,255,255,0.02); }
.hdr-btn .hdr-ic { font-size: 15px; opacity: 0.85; }
.hdr-btn.hidden { display: none; }

/* The gear sits in the input bar's first grid column, next to the prompt. */
.input-bar .app-settings-btn { width: 40px; height: 40px; align-self: end; }

.game-settings-content { width: min(440px, 92vw); }

.gs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  margin-top: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.gs-row:hover { border-color: var(--accent); }
.gs-row .gs-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--panel-3, rgba(255,255,255,0.05));
  color: var(--accent);
  font-size: 17px;
}
.gs-row .gs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gs-row .gs-name { font-weight: 600; font-size: clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem); }
.gs-row .gs-sub  { font-size: 13.5px; color: var(--text-dim); }
.gs-row .gs-value {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 14.5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.gs-row:hover .gs-value { color: var(--accent); }

/* The floating pickers must sit above the settings sheet (modal z-index 100). */
.model-menu { z-index: 130; }

@media (max-width: 860px) {
  /* Mobile keeps its own top-bar drawer toggles; hide the desktop header ones. */
  .hdr-btn { display: none; }
}

/* ---------- "Dark room" story backdrop ----------
   The reading area is a near-black room, not a UI panel: a tinted black per
   theme, a faint accent "candle glow" above the reading line, and a vignette
   pressing the corners into darkness. Parchment (light theme) opts out. */
:root { --story-bg: #080604; }            /* ember: warm black */
html[data-theme="arcane"]    { --story-bg: #07050d; }
html[data-theme="verdant"]   { --story-bg: #050804; }
html[data-theme="frost"]     { --story-bg: #04070a; }
html[data-theme="crimson"]   { --story-bg: #0a0504; }
html[data-theme="abyss"]     { --story-bg: #030a0c; }
html[data-theme="royal"]     { --story-bg: #060612; }
html[data-theme="necrotic"]  { --story-bg: #060802; }
html[data-theme="sakura"]    { --story-bg: #0a050a; }
html[data-theme="obsidian"]  { --story-bg: #060708; }
html[data-theme="parchment"] { --story-bg: var(--bg); }
html[data-theme="sakura-spring"]     { --story-bg: var(--bg); }

/* One continuous room surface across the story AND the input row — painting
   the glow/vignette on the panel (not the log) avoids a visible seam where
   the input area begins. */
.story-panel {
  background:
    radial-gradient(ellipse 72% 55% at 50% 28%,
      color-mix(in srgb, var(--accent) 4%, transparent), transparent 62%),
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.5) 100%),
    var(--story-bg);
}
html[data-theme="parchment"] .story-panel,
html[data-theme="sakura-spring"]     .story-panel { background: var(--story-bg); }
/* Novel: the header floats (transparent) so falling petals behind the story content
   are not clipped by an opaque header rectangle. */
html[data-theme="sakura-spring"] .story-header { background: transparent; border-bottom: none; }

/* ===== ROOM DEPTH (revertable block) — layered parallax "empty room" =====
   Delete this whole block + the matching block in app.js to revert. */
.story-panel { position: relative; }
.story-panel > .story-header,
.story-panel > .story-body,
.story-panel > .input-area { position: relative; z-index: 1; }

.room-depth { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.room-depth > * { position: absolute; inset: -16%; will-change: transform; }
.room-depth .rd-motes { inset: 0; width: 100%; height: 100%; will-change: auto; }

/* far wall receding into black, with a distant warm light high-center */
.rd-far {
  background:
    radial-gradient(ellipse 62% 48% at 50% 13%,
      color-mix(in srgb, var(--accent) 26%, transparent),
      color-mix(in srgb, var(--accent) 7%, transparent) 42%, transparent 66%),
    var(--story-bg);
  transform: translateY(calc(var(--rd-scroll, 0) * -0.05px));
}
/* mid haze — air between you and the wall, drifting slowly */
.rd-mid {
  opacity: 0.9;
  background:
    radial-gradient(ellipse 44% 32% at 28% 34%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse 48% 36% at 74% 66%, rgba(255,255,255,0.05), transparent 62%),
    radial-gradient(ellipse 40% 46% at 50% 12%,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  animation: rd-drift 30s ease-in-out infinite alternate;
}
/* foreground vignette — you're standing in the dark, looking in */
.rd-near {
  background: radial-gradient(ellipse 76% 60% at 50% 42%, transparent 38%, rgba(0,0,0,0.86) 100%);
  transform: translateY(calc(var(--rd-scroll, 0) * 0.09px));
}
@keyframes rd-drift {
  from { transform: translate3d(-2.4%, 1.8%, 0) scale(1.06); }
  to   { transform: translate3d(2.6%, -2.0%, 0) scale(1.12); }
}

/* light theme keeps its paper; motion prefs disable drift/parallax/motes */
html[data-theme="parchment"] .room-depth,
html[data-theme="sakura-spring"]     .room-depth { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rd-mid { animation: none; }
  .rd-far, .rd-near { transform: none; }
  .rd-motes { display: none; }
}
html[data-reduce-motion="1"] .rd-mid { animation: none; }
html[data-reduce-motion="1"] .rd-far,
html[data-reduce-motion="1"] .rd-near { transform: none; }
html[data-reduce-motion="1"] .rd-motes { display: none; }
/* ===== END ROOM DEPTH ===================================================== */


/* ===== Adventure story background — looping lich idle animation ==========
   The lich breathes behind the story text (dark themes only; the light Novel/
   Parchment themes keep their own look). A dark scrim + vignette over the GIF
   keep the text readable. Story content is z-index 1 (set above), so it sits
   on top. Delete this block + the .adv-bg div in index.html to revert. */
.adv-bg {
  position: absolute;
  inset: 0;
  z-index: 0;                 /* behind story content (z1), over the panel bg */
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,6,4,0.50), rgba(8,6,4,0.66)),
    radial-gradient(ellipse 78% 62% at 50% 42%, transparent 38%, rgba(0,0,0,0.74) 100%),
    url("/static/fx/lich-idle-hd.gif") center / cover no-repeat;
  background-color: var(--story-bg);
}
/* Light themes opt out (romance petals / parchment stay as they are). */
html[data-theme="sakura-spring"] .adv-bg,
html[data-theme="parchment"] .adv-bg { display: none; }
/* ===== END Adventure story background ==================================== */


/* ===== Ember Cabin motes + Party RPG lich ================================
   The ember-cabin THEME shows the room-depth's drifting dust motes over the
   warm-dark backdrop, with the reading + chrome lifted above them. The large
   lich scribe is added ONLY on Party RPG adventures (data-adv-type) — it is not
   part of the theme. Delete this block (+ the <img> in index.html + app.js
   hooks for the lich) to revert. */

/* Motes over the ember backdrop: lift the room-depth above the backdrop (below
   the text) and keep ONLY its motes — the wall/haze/vignette layers stay hidden
   so the ember backdrop shows through. */
html[data-theme="ember-cabin"] .room-depth { z-index: 2; }
html[data-theme="ember-cabin"] .rd-far,
html[data-theme="ember-cabin"] .rd-mid,
html[data-theme="ember-cabin"] .rd-near { display: none; }
/* Reading + chrome sit above the motes. */
html[data-theme="ember-cabin"] .story-body { position: relative; z-index: 5; }
html[data-theme="ember-cabin"] .story-header,
html[data-theme="ember-cabin"] .input-area { position: relative; z-index: 6; }

/* ---- Party RPG only: the large lich scribe (not part of the theme) ---- */
.lich-scribe {
  display: none;
  position: fixed;
  left: -2vw;
  bottom: -16vh;               /* lowered — the figure sits deeper, feet below the edge */
  /* Scale with BOTH viewport dims so it's big on tall/wide screens but never
     overruns a short or narrow window (the art is square, so height == width). */
  height: min(115vh, 54vw);
  width: auto;
  z-index: 1;                  /* behind the reading (z5), above the backdrop */
  pointer-events: none;
  image-rendering: pixelated;  /* keep the pixel art crisp when scaled up */
  filter: drop-shadow(-26px 14px 30px rgba(4, 2, 1, 0.85))
          drop-shadow(-10px 6px 10px rgba(4, 2, 1, 0.7));
}
@media (min-width: 900px) {
  html[data-adv-type="party-rpg"] .lich-scribe { display: block; }
  /* text-shadow keeps the centered prose legible over the lich. */
  html[data-adv-type="party-rpg"] .story-log .turn { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); }
}
/* ===== END Ember Cabin / Party RPG scribe ================================= */

/* ===== NOVEL SAKURA PETALS (revertable) — owner's CSS-animated petal fall ===
   Shows only on the Novel theme, behind the story text (z0 under content z1),
   sides-only (middle band clear). Delete this block + the app.js block +
   the #sakura-fx div to revert. */
.sakura-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
}
html[data-theme="sakura-spring"] .sakura-fx { display: block; }
.sakura-fx .petal { position: absolute; top: -6vh; will-change: transform, opacity; opacity: 0; }
.sakura-fx .petal img { width: 100%; height: 100%; display: block; }
.sakura-fx .petal .sway { display: block; animation: skSway var(--sd) ease-in-out var(--del) infinite alternate; }
@keyframes skFall {
  0%   { transform: translate3d(0, -6vh, 0); opacity: 0; }
  7%   { opacity: var(--o); }
  72%  { opacity: var(--o); }
  100% { transform: translate3d(var(--dx), 108vh, 0); opacity: 0; }
}
@keyframes skSway {
  from { transform: rotate(calc(var(--r) * -1)) translateX(-7px); }
  to   { transform: rotate(var(--r)) translateX(7px); }
}
@media (prefers-reduced-motion: reduce) { .sakura-fx { display: none !important; } }
html[data-reduce-motion="1"] .sakura-fx { display: none !important; }
/* ===== END NOVEL SAKURA PETALS ========================================== */

/* ===== EMBER FORGE — Party RPG gameplay skin (revertable) ==================
   The "Ember" gameplay-screen design, applied to Party RPG adventures via
   TYPE_THEME["Party RPG"] = "emberforge" (app.js). A rich copper/bone ember
   palette + Cinzel/Cormorant serif chrome + warm glass topbar & composer,
   floating over the shared lich art background (.adv-bg, already shown on dark
   themes — emberforge is a dark theme, so it inherits the art automatically).
   Delete this block + the TYPE_THEME entry + the Cinzel font in index.html to
   revert. */
html[data-theme="ember-cabin"] {
  --story-bg: #0a0705;                    /* deepest umber, for drama */
  --accent: #c98a3e;
  --accent-hover: #e3a955;
  --text: #efe4cd;
  --text-dim: #b4a68b;
  --text-faint: #7d715c;
  --border: rgba(227,169,85,0.20);        /* ember hairlines */
  --border-strong: rgba(227,169,85,0.42);
}
/* Serif chrome: a display face for titles, a book serif for the story prose. */
html[data-theme="ember-cabin"] .story-panel {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
html[data-theme="ember-cabin"] .story-header h1 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}
html[data-theme="ember-cabin"] .story-log {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.14em;                      /* Cormorant runs small — bump it */
  line-height: 1.62;
}
/* Warm glass topbar + composer, floating over the art (mockup "glass" chrome). */
html[data-theme="ember-cabin"] .story-header {
  background: rgba(18,11,6,0.58);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--border-strong);
}
html[data-theme="ember-cabin"] #input-box {
  background: rgba(18,11,6,0.62);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-color: var(--border-strong);
}
/* Ember Cabin backdrop: a warm-dark room (NO animated lich) — the drifting
   motes float over this; the Party RPG lich (if any) sits on top. */
html[data-theme="ember-cabin"] .adv-bg {
  background:
    radial-gradient(ellipse 60% 64% at 50% 42%, rgba(40, 23, 8, 0.55), transparent 60%),
    radial-gradient(ellipse at center, transparent 44%, rgba(8, 5, 3, 0.76) 100%);
  background-color: var(--story-bg);
}
/* Dock (mockup): mono verb labels, a filled-ember primary, a glowing d20 tile
   and a warm composer focus ring. */
html[data-theme="ember-cabin"] .mode-btn,
html[data-theme="ember-cabin"] .send-btn,
html[data-theme="ember-cabin"] .roll-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
html[data-theme="ember-cabin"] #continue-btn {           /* primary = filled ember */
  color: #1e1206;
  font-weight: 600;
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-hover), #8a5f28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 6px 22px -8px rgba(227, 169, 85, 0.30);
}
html[data-theme="ember-cabin"] #continue-btn:hover:not(:disabled) {
  color: #1e1206;
  border-color: var(--accent);
  filter: brightness(1.07);
}
html[data-theme="ember-cabin"] .roll-btn { color: var(--accent-hover); border-color: var(--border-strong); }
html[data-theme="ember-cabin"] .roll-btn .dice-icon { filter: drop-shadow(0 0 10px rgba(227, 169, 85, 0.30)); }
html[data-theme="ember-cabin"] #input-box:focus {
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(227, 169, 85, 0.14), 0 0 34px -8px rgba(227, 169, 85, 0.28);
  outline: none;
}
html[data-theme="ember-cabin"] .story-log .turn { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
/* ===== END EMBER FORGE ==================================================== */

/* ===== Account chip + account modal ===== */
.account-chip{
  position:absolute; top:16px; right:18px; z-index:20;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px 7px 11px; border-radius:22px;
  background:var(--panel); border:1px solid var(--border);
  color:var(--text); font-size:15px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, color .15s;
}
.account-chip:hover{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 20px -8px var(--accent); }
.account-chip .account-sigil{ color:var(--accent); font-size:16px; line-height:1; }
.account-chip .account-name{ font-weight:600; letter-spacing:.02em; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px){ .account-chip{ top:12px; right:12px; } .account-chip .account-name{ max-width:92px; } }

.account-modal{ max-width:420px; }
.account-id{ display:flex; align-items:center; gap:14px; margin:4px 0 18px; }
.account-avatar{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--accent); color:var(--accent); font-size:23px;
  background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
}
.account-username{ font-size:clamp(1.0625rem, 0.6433rem + 0.6098vw, 1.375rem); font-weight:700; color:var(--text); line-height:1.1; }
.account-email{ font-size:15px; color:var(--text-dim,#9c8f76); margin-top:3px; }
.account-anima{
  display:flex; align-items:center; gap:9px; padding:12px 15px; margin-bottom:20px; border-radius:10px;
  border:1px solid var(--border); background:var(--panel);
}
.account-anima .anima-coin{ font-size:20px; line-height:1; }
.account-anima .anima-amount{ font-size:clamp(1.0625rem, 0.6433rem + 0.6098vw, 1.375rem); font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.account-anima .anima-label{ font-size:14px; color:var(--text-dim,#9c8f76); letter-spacing:.04em; margin-left:auto; }
.account-pw{ display:flex; flex-direction:column; gap:9px; margin-bottom:8px; }
.account-pw > label{ font-size:15px; color:var(--text-dim,#9c8f76); }
.account-pw input{
  width:100%; padding:10px 12px; border-radius:8px; background:var(--bg);
  border:1px solid var(--border); color:var(--text); font-size:16px; outline:none; transition:border-color .15s;
}
.account-pw input:focus{ border-color:var(--accent); }
.account-pw-btn{ align-self:flex-start; margin-top:2px; }
.account-google-note{ margin:0; font-size:15.5px; line-height:1.45; color:var(--text-dim,#9c8f76); }
.account-danger{ margin:14px 0 6px; padding-top:12px; border-top:1px solid var(--line,rgba(227,169,85,0.18)); }
.danger-link{ background:none; border:none; padding:0; cursor:pointer; font-size:15px; color:#c96a4e; }
.danger-link:hover{ color:#e08a6a; text-decoration:underline; }
.danger-confirm{ display:flex; flex-direction:column; gap:9px; margin-top:10px; }
.danger-note{ margin:0; font-size:15.5px; line-height:1.45; color:#c96a4e; }
.danger-confirm input{ padding:9px 12px; border-radius:8px; background:rgba(10,7,5,0.5);
  border:1px solid rgba(201,106,78,0.45); color:var(--text,#efe4cd); outline:none; font-size:16px; }
.danger-confirm input:focus{ border-color:#c96a4e; }
.danger-btn{ align-self:flex-start; padding:9px 16px; border-radius:8px; cursor:pointer; font-size:15px;
  color:#1e0d08; background:linear-gradient(180deg,#d98a6a,#a04a30); border:1px solid #7c3a26; }
.danger-btn:hover:not(:disabled){ filter:brightness(1.08); }
.danger-btn:disabled{ opacity:.6; cursor:default; }
.account-msg{ font-size:15px; min-height:1em; }
.account-msg.ok{ color:#7bbf8a; }
.account-msg.err{ color:var(--danger,#c25c5c); }
.logout-btn{
  padding:9px 16px; border-radius:8px; cursor:pointer; background:transparent;
  border:1px solid color-mix(in srgb, var(--danger,#c25c5c) 55%, transparent);
  color:var(--danger,#c25c5c); font-size:15px; font-weight:600; transition:background .15s, box-shadow .15s;
}
.logout-btn:hover{ background:color-mix(in srgb, var(--danger,#c25c5c) 14%, transparent); box-shadow:0 0 18px -8px var(--danger,#c25c5c); }

/* ===== Database browser (admin, read-only) ===== */
/* the base .modal-content is a fixed 480px column — widen it for the grid */
.db-modal{ width:min(1080px, 94vw); max-width:min(1080px, 94vw); }
.db-layout{ display:flex; gap:14px; align-items:stretch; margin:6px 0 10px; }
.db-tables{ flex:0 0 190px; display:flex; flex-direction:column; gap:5px;
  max-height:56vh; overflow-y:auto; padding-right:4px; }
.db-table-btn{ display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:9px 11px; border-radius:8px; cursor:pointer; text-align:left;
  background:var(--panel); border:1px solid var(--border); color:var(--text);
  font-size:15px; transition:border-color .14s, color .14s; }
.db-table-btn:hover{ border-color:var(--accent); color:var(--accent); }
.db-table-btn.active{ border-color:var(--accent); color:var(--accent);
  box-shadow:0 0 16px -8px var(--accent); }
.db-table-btn .dbt-name{ font-family:'JetBrains Mono', monospace; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.db-table-btn .dbt-meta{ font-size:13px; color:var(--text-dim,#9c8f76); font-variant-numeric:tabular-nums; }
.db-view{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.db-view-head{ display:flex; align-items:baseline; gap:10px; }
.db-table-name{ font-family:'JetBrains Mono', monospace; font-size:17px;
  font-weight:600; color:var(--accent); }
.db-count{ font-size:14px; color:var(--text-dim,#9c8f76); font-variant-numeric:tabular-nums; }
.db-grid-wrap{ overflow:auto; max-height:52vh; border:1px solid var(--border); border-radius:9px; }
.db-grid{ border-collapse:collapse; width:max-content; min-width:100%;
  font-family:'JetBrains Mono', monospace; font-size:13.5px; }
.db-grid th{ position:sticky; top:0; z-index:1; text-align:left; white-space:nowrap;
  padding:7px 10px; background:var(--panel); color:var(--accent);
  border-bottom:1px solid var(--border); font-weight:600; }
.db-grid td{ padding:6px 10px; border-bottom:1px solid var(--border);
  color:var(--text); vertical-align:top; max-width:340px; overflow:hidden;
  text-overflow:ellipsis; white-space:pre-wrap; word-break:break-word; }
.db-grid tr:last-child td{ border-bottom:none; }
.db-grid td.null{ color:var(--text-faint,#6b6455); font-style:italic; }
.db-grid th.secret, .db-grid td.secret{ color:var(--danger,#c25c5c); opacity:.75; }
.db-pager{ display:flex; align-items:center; gap:12px; }
.db-pager .scale-opt:disabled{ opacity:.4; cursor:default; }
.db-range{ font-size:14px; color:var(--text-dim,#9c8f76); font-variant-numeric:tabular-nums; }
.db-loading{ padding:14px; font-size:15px; color:var(--text-dim,#9c8f76); }
.db-note{ font-size:14px; line-height:1.5; color:var(--text-dim,#9c8f76);
  border-left:2px solid var(--border); padding-left:10px; margin-bottom:4px; }
@media (max-width:760px){
  .db-layout{ flex-direction:column; }
  .db-tables{ flex:0 0 auto; flex-direction:row; overflow-x:auto; max-height:none; }
}

/* ============================================================================
   Home / title screen v4 — sidebar + main layout.
   Every rule is scoped under #home-v4 and uses hv- prefixed classes so nothing
   here leaks into (or is overridden by) the rest of the app. Colours reference
   the same Ember palette the auth pages use, hard-coded here because this screen
   is theme-independent (it predates the light "sakura" theme).
   ============================================================================ */
#home-v4{
  --hvab:#0a0705; --hvem:#c98a3e; --hvemb:#e3a955; --hvemd:#8a5f28;
  --hvink:#efe4cd; --hvdim:#b4a68b; --hvmut:#7d715c;
  --hvline:rgba(227,169,85,0.22); --hvlineb:rgba(227,169,85,0.45);
  --hvglass:rgba(18,11,6,0.58); --hvglow:rgba(227,169,85,0.28);
  --hvdisp:'Cinzel',Georgia,serif; --hvserif:'Cormorant Garamond',Georgia,serif; --hvmono:'JetBrains Mono',monospace;
  position:absolute; inset:0; z-index:5; display:grid; grid-template-columns:clamp(200px, 120px + 7.5vw, 264px) 1fr clamp(230px, 136px + 8.54vw, 300px);
  color:var(--hvink); font-family:var(--hvserif);
}
/* Below 1180px the friends rail collapses and the home returns to two columns. */
@media (max-width:1180px){ #home-v4{ grid-template-columns:clamp(200px, 120px + 7.5vw, 264px) 1fr } #home-v4 .hvf{ display:none } }
/* The ember bloom's centre follows the cursor via --lx/--ly (set on :root by
   initHomeLight, eased so it trails). Defaults 68%/30% = the resting position. */
#home-v4 .hv-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 80% at var(--lx,68%) var(--ly,30%),#221406,var(--hvab) 75%)}
#home-v4 .hv-vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(8,5,3,0.7) 100%)}
/* sidebar */
#home-v4 .hv-side{position:relative;z-index:2;display:flex;flex-direction:column;border-right:1px solid var(--hvline);background:rgba(12,8,5,0.72);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
#home-v4 .hv-brand{display:flex;align-items:center;gap:12px;padding:22px 22px 18px;border-bottom:1px solid var(--hvline)}
#home-v4 .hv-d20{width:42px;height:42px;color:var(--hvemb);flex:0 0 auto}
#home-v4 .hv-d20 canvas{width:100%;height:100%;display:block;animation:corePulse 2.6s ease-in-out infinite}
#home-v4 .hv-d20 svg{width:100%;height:100%;display:block}
#home-v4 .hv-nm{font-family:var(--hvdisp);font-weight:700;font-size:clamp(0.875rem, 0.5394rem + 0.4878vw, 1.125rem);letter-spacing:0.14em;color:var(--hvemb)}
#home-v4 .hv-sb{font-family:var(--hvmono);font-size:10.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--hvmut);margin-top:3px}
#home-v4 .hv-nav{padding:16px 12px;display:flex;flex-direction:column;gap:4px}
#home-v4 .hv-navlbl{font-family:var(--hvmono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:#b09e7c;padding:12px 12px 6px}
#home-v4 .hv-nav-it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;color:#e6dcc4;font-family:var(--hvserif);font-size:clamp(0.9688rem, 0.6334rem + 0.4878vw, 1.2188rem);transition:all .15s ease;background:none;text-align:left;width:100%}
#home-v4 .hv-nav-it svg{width:16px;height:16px;flex:0 0 auto;color:var(--hvmut);transition:color .15s ease}
#home-v4 .hv-nav-it:hover{color:var(--hvink);background:rgba(227,169,85,0.06)}
#home-v4 .hv-nav-it:hover svg{color:var(--hvemb)}
#home-v4 .hv-nav-it.act{color:var(--hvemb);background:rgba(227,169,85,0.1);border-color:var(--hvline)}
#home-v4 .hv-nav-it.act svg{color:var(--hvemb)}
#home-v4 .hv-nav-it .hv-k{margin-left:auto;font-family:var(--hvmono);font-size:11.5px;letter-spacing:0.1em;color:var(--hvmut)}
#home-v4 .hv-fill{flex:1}
/* account card */
#home-v4 .hv-acct{margin:12px;position:relative}
#home-v4 .hv-acct-btn{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--hvline);background:rgba(10,7,5,0.55);cursor:pointer;text-align:left;transition:all .15s ease;font-family:var(--hvserif)}
#home-v4 .hv-acct-btn:hover{border-color:var(--hvlineb);box-shadow:0 0 22px -10px var(--hvglow)}
#home-v4 .hv-ava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(180deg,var(--hvemb),var(--hvemd));color:#1e1206;font-family:var(--hvdisp);font-weight:700;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2);text-transform:uppercase}
#home-v4 .hv-who{min-width:0}
#home-v4 .hv-un{font-size:18.5px;color:var(--hvink);font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home-v4 .hv-tier{font-family:var(--hvmono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hvem);margin-top:3px}
#home-v4 .hv-chev{margin-left:auto;color:var(--hvmut);flex:0 0 auto;width:14px;height:14px;transition:transform .18s ease}
#home-v4 .hv-acct.open .hv-chev{transform:rotate(-180deg)}
#home-v4 .hv-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);border-radius:10px;padding:6px;background:rgba(20,13,7,0.97);border:1px solid var(--hvlineb);box-shadow:0 24px 60px -20px rgba(0,0,0,0.9),0 0 40px -20px var(--hvglow);opacity:0;transform:translateY(6px);pointer-events:none;transition:all .16s ease}
#home-v4 .hv-acct.open .hv-menu{opacity:1;transform:none;pointer-events:auto}
#home-v4 .hv-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:7px;font-family:var(--hvserif);font-size:18px;color:var(--hvdim);background:none;border:none;cursor:pointer;text-align:left}
#home-v4 .hv-menu button svg{width:14px;height:14px;color:var(--hvmut)}
#home-v4 .hv-menu button:hover{background:rgba(227,169,85,0.08);color:var(--hvink)}
#home-v4 .hv-menu button:hover svg{color:var(--hvemb)}
#home-v4 .hv-menu .hv-sep{height:1px;background:var(--hvline);margin:5px 8px}
#home-v4 .hv-menu .hv-danger{color:#c98a6a}
/* main */
#home-v4 .hv-main{position:relative;z-index:2;display:flex;flex-direction:column;min-width:0;overflow-y:auto;scrollbar-width:none}
#home-v4 .hv-main::-webkit-scrollbar{width:0;display:none}
#home-v4 .hv-top{display:flex;align-items:center;justify-content:space-between;padding:clamp(0.9375rem, 0.5183rem + 0.6098vw, 1.25rem) clamp(1.875rem, 1.0366rem + 1.2195vw, 2.5rem);border-bottom:1px solid var(--hvline)}
#home-v4 .hv-tag{font-family:var(--hvmono);font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:var(--hvmut)}
#home-v4 .hv-ver{font-family:var(--hvmono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--hvmut)}
#home-v4 .hv-right{display:flex;align-items:center;gap:16px}
#home-v4 .hv-lang{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--hvline);border-radius:6px;padding:4px 9px;cursor:pointer;font-family:var(--hvmono);font-size:11px;letter-spacing:0.18em;transition:border-color .15s ease}
#home-v4 .hv-lang:hover{border-color:var(--hvlineb)}
#home-v4 .hv-lang .hl{color:var(--hvmut);transition:color .15s ease}
#home-v4 .hv-lang .hl.act{color:var(--hvemb);text-shadow:0 0 8px var(--hvglow)}
#home-v4 .hv-lang .hl-sep{color:var(--hvmut);opacity:.5}
#home-v4 .hv-content{padding:clamp(1.875rem, 1.0366rem + 1.2195vw, 2.5rem) clamp(1.875rem, 1.0366rem + 1.2195vw, 2.5rem) clamp(1.5rem, 0.8293rem + 0.9756vw, 2rem);max-width:1060px;width:100%;margin:0 auto}
/* hero */
#home-v4 .hv-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(1.125rem, 0.622rem + 0.7317vw, 1.5rem);margin-bottom:clamp(1.625rem, 0.9543rem + 0.9756vw, 2.125rem)}
#home-v4 .hv-hero h1{font-family:var(--hvdisp);font-weight:700;font-size:clamp(1.75rem, 1.0793rem + 0.9756vw, 2.25rem);letter-spacing:0.05em;color:var(--hvink);margin:0 0 8px;text-shadow:0 1px 20px var(--hvglow)}
#home-v4 .hv-hero h1 em{font-style:normal;color:var(--hvemb)}
#home-v4 .hv-quote{font-family:var(--hvserif);font-style:italic;font-size:clamp(1rem, 0.6646rem + 0.4878vw, 1.25rem);color:var(--hvdim);margin:0}
#home-v4 .hv-cta{display:flex;gap:12px;flex:0 0 auto}
#home-v4 .hv-btn{display:inline-flex;align-items:center;gap:9px;padding:clamp(0.625rem, 0.3735rem + 0.3659vw, 0.8125rem) clamp(1.0625rem, 0.6433rem + 0.6098vw, 1.375rem);cursor:pointer;font-family:var(--hvmono);font-size:var(--fs-ui);letter-spacing:0.18em;text-transform:uppercase;transition:all .16s ease;white-space:nowrap;border:1px solid rgba(227,169,85,.32);background:rgba(227,169,85,.05);color:#c98a3e}
#home-v4 .hv-btn svg{width:14px;height:14px}
#home-v4 .hv-btn:hover{border-color:rgba(227,169,85,.6);color:#e3a955}
#home-v4 .hv-btn.primary{border:1px solid var(--hvemd);color:#1e1206;background:linear-gradient(180deg,var(--hvemb),var(--hvemd));box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 6px 22px -8px var(--hvglow)}
#home-v4 .hv-btn.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
#home-v4 .hv-btn.ghost{border:1px solid var(--hvline);background:rgba(10,7,5,0.4);color:var(--hvdim)}
#home-v4 .hv-btn.ghost:hover{color:var(--hvemb);border-color:var(--hvlineb);box-shadow:0 0 22px -8px var(--hvglow)}
/* sections */
#home-v4 .hv-sec{margin-bottom:clamp(1.625rem, 0.9543rem + 0.9756vw, 2.125rem)}
#home-v4 .hv-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
#home-v4 .hv-sec-h h2{font-family:var(--hvdisp);font-weight:600;font-size:clamp(0.8438rem, 0.5503rem + 0.4268vw, 1.0625rem);letter-spacing:0.16em;text-transform:uppercase;color:var(--hvem);margin:0}
#home-v4 .hv-sec-h a{font-family:var(--hvmono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hvmut);text-decoration:none}
#home-v4 .hv-sec-h a:hover{color:var(--hvemb)}
/* how-it-works strip */
#home-v4 .hv-how{display:flex;align-items:center;gap:clamp(1.25rem, 0.747rem + 0.7317vw, 1.625rem);padding:clamp(0.625rem, 0.3735rem + 0.3659vw, 0.8125rem) clamp(0.9375rem, 0.5183rem + 0.6098vw, 1.25rem);border:1px solid rgba(227,169,85,.26);background:rgba(227,169,85,0.03);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.08);margin-bottom:30px}
#home-v4 .hv-step{display:flex;align-items:center;gap:11px;font-family:var(--hvserif);font-size:clamp(0.9063rem, 0.5709rem + 0.4878vw, 1.1563rem);color:var(--hvdim)}
#home-v4 .hv-step b{width:23px;height:23px;flex:0 0 auto;border-radius:50%;border:1px solid var(--hvlineb);display:grid;place-items:center;font-family:var(--hvmono);font-size:12px;font-weight:500;color:var(--hvemb)}
#home-v4 .hv-x{margin-left:auto;font-family:var(--hvmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--hvmut);background:none;border:1px solid rgba(227,169,85,.32);padding:6px 11px;cursor:pointer;transition:all .15s ease}
#home-v4 .hv-x:hover{color:var(--hvemb);border-color:var(--hvlineb)}
/* continue duo */
#home-v4 .hv-duo{display:grid;grid-template-columns:1.55fr 1fr;gap:14px}
#home-v4 .hv-continue-card{display:flex;min-width:0}
#home-v4 .hv-continue-card .lib-hero-card{flex:1;margin-bottom:0}
#home-v4 .hv-continue-card .lib-hero-excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#home-v4 .hv-continue-card .lib-tag{pointer-events:none}
#home-v4 .hv-meta{font-family:var(--hvmono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--hvmut)}
#home-v4 .hv-libcard{border:1px solid rgba(227,169,85,.26);padding:clamp(1.0625rem, 0.6433rem + 0.6098vw, 1.375rem) clamp(1.125rem, 0.622rem + 0.7317vw, 1.5rem);background:rgba(16,10,6,.55);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.1);cursor:pointer;transition:all .16s ease;display:flex;flex-direction:column;gap:8px}
#home-v4 .hv-libcard:hover{border-color:rgba(227,169,85,.7);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.1),0 0 40px -12px rgba(227,169,85,.35)}
#home-v4 .hv-lbl{display:flex;align-items:center;gap:8px;font-family:var(--hvmono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--hvem)}
#home-v4 .hv-lbl svg{width:13px;height:13px}
#home-v4 .hv-libcard h3{font-family:var(--hvdisp);font-weight:600;font-size:clamp(1rem, 0.6646rem + 0.4878vw, 1.25rem);letter-spacing:0.04em;color:var(--hvink);margin:2px 0 0}
#home-v4 .hv-libcard p{font-family:var(--hvserif);font-style:italic;font-size:clamp(0.875rem, 0.5816rem + 0.4268vw, 1.0938rem);color:var(--hvdim);margin:0;line-height:1.35}
#home-v4 .hv-meta2{margin-top:auto;padding-top:10px;font-family:var(--hvmono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--hvmut)}
/* scenario tiles */
#home-v4 .hv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
#home-v4 .hv-tile{position:relative;border:1px solid rgba(227,169,85,.26);padding:clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem) clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem) clamp(0.6875rem, 0.436rem + 0.3659vw, 0.875rem);background:rgba(16,10,6,.55);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.1);cursor:pointer;transition:all .16s ease;overflow:hidden;text-align:left;font-family:var(--hvserif)}
#home-v4 .hv-tile:hover{border-color:rgba(227,169,85,.7);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.1),0 0 40px -12px rgba(227,169,85,.35)}
#home-v4 .hv-rn{font-family:var(--hvdisp);font-weight:700;font-size:clamp(1.5625rem, 0.9756rem + 0.8537vw, 2rem);color:var(--hvemb);text-shadow:0 0 18px var(--hvglow);line-height:1}
#home-v4 .hv-tile h3{font-family:var(--hvdisp);font-weight:600;font-size:clamp(0.75rem, 0.4566rem + 0.4268vw, 0.9688rem);letter-spacing:0.1em;text-transform:uppercase;color:var(--hvink);margin:10px 0 5px}
#home-v4 .hv-tile p{font-family:var(--hvserif);font-style:italic;font-size:clamp(0.8125rem, 0.5191rem + 0.4268vw, 1.0313rem);color:var(--hvdim);margin:0;line-height:1.35}
#home-v4 .hv-tile::after{content:"";position:absolute;inset:auto -20% -55% -20%;height:80%;background:radial-gradient(ellipse at center,var(--hvglow),transparent 70%);opacity:0;transition:opacity .2s ease;pointer-events:none}
#home-v4 .hv-tile:hover::after{opacity:0.5}
/* footer */
#home-v4 .hv-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:16px 40px;border-top:1px solid var(--hvline);font-family:var(--hvmono);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--hvmut)}
/* the library sub-view reuses the app's existing .library-view styles, but here
   it lives inside the padded main column, so drop its own outer padding. */
#home-v4 #library-view{margin-top:0}
/* narrow / mobile: collapse the sidebar to a top strip */
@media (max-width:860px){
  #home-v4{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  #home-v4 .hv-side{flex-direction:row;flex-wrap:wrap;align-items:center;border-right:none;border-bottom:1px solid var(--hvline);padding:0 8px}
  #home-v4 .hv-brand{border-bottom:none;padding:12px}
  #home-v4 .hv-nav{flex-direction:row;flex-wrap:wrap;padding:6px;gap:2px}
  #home-v4 .hv-navlbl{display:none}
  #home-v4 .hv-nav-it{font-size:16px;padding:8px 10px}
  #home-v4 .hv-nav-it span:not(.hv-k){display:none}
  #home-v4 .hv-fill{display:none}
  #home-v4 .hv-content{padding:24px 18px}
  #home-v4 .hv-hero{flex-direction:column;align-items:stretch;gap:16px}
  #home-v4 .hv-duo{grid-template-columns:1fr}
  #home-v4 .hv-tiles{grid-template-columns:repeat(2,1fr)}
  #home-v4 .hv-how{flex-wrap:wrap;gap:12px}
}

/* ============================================================================
   Settings — slide-in panel (v4). A global left drawer that replaces the old
   settings modal; opened from the home Settings nav and the in-adventure
   app-settings link. Ember palette to match the v4 home, scoped under #set-panel
   so the hv-/sp- classes never touch the rest of the app. The real controls
   inside (#theme-picker, #scale-picker, #tier-picker, #tts-section, …) keep
   their own themed styles; only the panel chrome is new.
   ============================================================================ */
#set-panel{
  --spem:#c98a3e; --spemb:#e3a955; --spemd:#8a5f28; --spink:#efe4cd;
  --spdim:#b4a68b; --spmut:#7d715c; --spline:rgba(227,169,85,0.22); --splineb:rgba(227,169,85,0.45);
  --spglow:rgba(227,169,85,0.28);
  --spdisp:'Cinzel',Georgia,serif; --spserif:'Cormorant Garamond',Georgia,serif; --spmono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:120;pointer-events:none;
}
/* Scrim only exists in full mode (in-adventure, no sidebar to keep visible). On
   the home the sidebar stays fully interactive, so there is no scrim there. */
#set-panel .sp-scrim{position:absolute;inset:0;background:rgba(6,4,2,0.55);opacity:0;transition:opacity .3s ease;pointer-events:none}
#set-panel.full.open .sp-scrim{opacity:1;pointer-events:auto}
/* The clip is the window the panel slides within: on the home it starts at the
   sidebar's right edge (264px) so the left banner stays visible; overflow:hidden
   masks the panel while it is parked off to the left. */
#set-panel .sp-clip{position:absolute;top:0;bottom:0;left:clamp(200px, 120px + 7.5vw, 264px);right:clamp(230px, 136px + 8.54vw, 300px);overflow:hidden;pointer-events:none}
#set-panel.full .sp-clip{left:0;right:0}   /* in-adventure: no sidebar, no friends rail */
#set-panel .sp{position:absolute;inset:0;display:flex;flex-direction:column;
  background:rgba(12,8,5,0.86);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
  pointer-events:auto;
  transform:translateX(-103%);transition:transform .42s cubic-bezier(.3,.75,.25,1)}
/* Shadow only when open — a parked (closed) panel was bleeding its box-shadow
   into the clip window (which starts at the 264px sidebar edge), showing as a
   dark band on every screen since the panel is a global position:fixed layer. */
#set-panel.open .sp{transform:none;box-shadow:24px 0 80px -40px rgba(0,0,0,0.9)}
/* Height matches the sidebar brand block (padding 22+18 + 34px logo = 74px) so
   the header divider lines up exactly with the line under SOFAVERSE. */
#set-panel .sp-top{display:flex;align-items:center;justify-content:space-between;padding:0 34px;box-sizing:border-box;min-height:75px;border-bottom:1px solid var(--spline);flex:0 0 auto}
#set-panel .sp-top h2{font-family:var(--spdisp);font-weight:700;font-size:clamp(1.0313rem, 0.654rem + 0.5488vw, 1.3125rem);letter-spacing:0.14em;text-transform:uppercase;color:var(--spemb);margin:0;text-shadow:0 1px 16px var(--spglow)}
#set-panel .sp-x{font-family:var(--spmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--spmut);background:none;border:1px solid var(--spline);border-radius:6px;padding:7px 12px;cursor:pointer;transition:all .15s ease}
#set-panel .sp-x:hover{color:var(--spemb);border-color:var(--splineb)}
#set-panel .sp-body{flex:1;overflow-y:auto;scrollbar-width:none;padding:26px var(--sp-3) 40px}
#set-panel .sp-body::-webkit-scrollbar{width:0;display:none}
#set-panel .sp-in{max-width:620px;margin:0 auto}
#set-panel .sp-g{margin-bottom:26px}
#set-panel .sp-h{font-family:var(--spdisp);font-weight:600;font-size:clamp(0.75rem, 0.4985rem + 0.3659vw, 0.9375rem);letter-spacing:0.18em;text-transform:uppercase;color:var(--spem);margin-bottom:10px}
#set-panel .sp-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 2px;border-bottom:1px solid rgba(227,169,85,0.1)}
#set-panel .sp-t{font-family:var(--spserif);font-size:clamp(0.9688rem, 0.6334rem + 0.4878vw, 1.2188rem);color:var(--spink)}
#set-panel .sp-d{display:block;font-style:italic;font-size:clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem);color:var(--spmut);margin-top:2px}
/* the reduce-motion checkbox rendered as the v4 pill switch */
#set-panel .sp-sw{appearance:none;-webkit-appearance:none;width:40px;height:23px;flex:0 0 auto;border-radius:999px;border:1px solid var(--splineb);background:rgba(10,7,5,0.6);position:relative;cursor:pointer;transition:all .18s ease;margin:0}
#set-panel .sp-sw::before{content:"";position:absolute;top:3px;left:4px;width:15px;height:15px;border-radius:50%;background:var(--spmut);transition:all .18s ease}
#set-panel .sp-sw:checked{background:linear-gradient(180deg,var(--spemb),var(--spemd));border-color:var(--spemd)}
#set-panel .sp-sw:checked::before{left:19px;background:#1e1206}
/* the panel hosts the app's existing pickers/tts block — give them breathing room */
#set-panel .tier-hint{display:block;font-family:var(--spmono);font-size:13px;color:var(--spmut);margin:-4px 0 8px}
#set-panel .tts-subhead{margin-top:14px}
/* Phones: the home sidebar is a top strip, so anchor the panel full-width. */
@media (max-width:1180px){ #set-panel .sp-clip{right:0} }
@media (max-width:860px){ #set-panel .sp-clip{left:0} #set-panel .sp-body{padding:22px 18px 40px} }

/* ============================================================================
   Database — full-screen admin browser (v4 house style). Everything is scoped
   under #db-screen and uses dbs- prefixed classes so the generic mockup names
   (.app, .top, .main, and especially bare table/th/td) never collide with the
   rest of the app. Ember palette, theme-independent like the home. Read-only;
   wired to /api/admin/tables + /api/admin/table by openDatabase().
   ============================================================================ */
#db-screen{
  --dbem:#c98a3e; --dbemb:#e3a955; --dbemd:#8a5f28; --dbink:#efe4cd;
  --dbdim:#b4a68b; --dbmut:#7d715c; --dbline:rgba(227,169,85,0.22); --dblineb:rgba(227,169,85,0.45);
  --dbglow:rgba(227,169,85,0.28);
  --dbdisp:'Cinzel',Georgia,serif; --dbserif:'Cormorant Garamond',Georgia,serif; --dbmono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:130;color:var(--dbink);font-family:var(--dbserif);
}
#db-screen.hidden{display:none}
#db-screen .dbs-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 80% at 60% 20%,#1d1206,#0a0705 75%)}
#db-screen .dbs-app{position:absolute;inset:0;z-index:1;display:grid;grid-template-rows:clamp(46px, 34px + 1.25vw, 58px) 1fr;grid-template-columns:clamp(200px, 120px + 7.5vw, 264px) 1fr}
/* top bar */
#db-screen .dbs-top{grid-column:1/3;display:flex;align-items:center;gap:clamp(12px, 6.63px + 0.4878vw, 16px);padding:0 clamp(17px, 10.29px + 0.6098vw, 22px);border-bottom:1px solid var(--dbline);background:rgba(12,8,5,0.72)}
#db-screen .dbs-backbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--dbmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dbdim);border:1px solid var(--dbline);border-radius:7px;padding:9px 14px 9px 11px;background:rgba(10,7,5,0.4);cursor:pointer;transition:all .15s ease}
#db-screen .dbs-backbtn svg{width:13px;height:13px;flex:0 0 auto}
#db-screen .dbs-backbtn:hover{color:var(--dbemb);border-color:var(--dblineb);box-shadow:0 0 18px -8px var(--dbglow)}
#db-screen .dbs-d20{width:26px;height:26px;color:var(--dbemb);filter:drop-shadow(0 0 8px var(--dbglow))}
#db-screen .dbs-d20 svg{width:100%;height:100%;display:block}
#db-screen .dbs-top h1{font-family:var(--dbdisp);font-weight:700;font-size:clamp(0.8438rem, 0.5503rem + 0.4268vw, 1.0625rem);letter-spacing:0.14em;color:var(--dbemb);margin:0}
#db-screen .dbs-crumb{font-family:var(--dbmono);font-size:clamp(0.625rem, 0.4573rem + 0.2439vw, 0.75rem);letter-spacing:0.16em;text-transform:uppercase;color:var(--dbmut)}
#db-screen .dbs-badge{font-family:var(--dbmono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dbem);border:1px solid var(--dbline);border-radius:5px;padding:4px 8px}
#db-screen .dbs-sp{flex:1}
#db-screen .dbs-search{display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid var(--dbline);border-radius:8px;background:rgba(10,7,5,0.55);min-width:clamp(210px, 116.1px + 8.5366vw, 280px)}
#db-screen .dbs-search svg{width:13px;height:13px;color:var(--dbmut);flex:0 0 auto}
#db-screen .dbs-search input{background:none;border:none;outline:none;color:var(--dbink);font-family:var(--dbmono);font-size:clamp(0.6563rem, 0.4047rem + 0.3659vw, 0.8438rem);letter-spacing:0.04em;width:100%}
#db-screen .dbs-search input::placeholder{color:var(--dbmut)}
#db-screen .dbs-xbtn{font-family:var(--dbmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dbmut);background:none;border:1px solid var(--dbline);border-radius:6px;padding:8px 13px;cursor:pointer;transition:all .15s ease}
#db-screen .dbs-xbtn:hover{color:var(--dbemb);border-color:var(--dblineb)}
/* rail */
#db-screen .dbs-rail{border-right:1px solid var(--dbline);background:rgba(12,8,5,0.6);padding:16px 12px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:4px}
#db-screen .dbs-rail::-webkit-scrollbar{width:0;display:none}
#db-screen .dbs-lbl{font-family:var(--dbmono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--dbmut);padding:4px 10px 8px}
#db-screen .dbs-tbl{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-family:var(--dbmono);font-size:var(--fs-panel-t);letter-spacing:0.03em;color:var(--dbdim);transition:all .15s ease}
#db-screen .dbs-tbl svg{width:13px;height:13px;flex:0 0 auto;color:var(--dbmut)}
#db-screen .dbs-tbl:hover{color:var(--dbink);background:rgba(227,169,85,0.06)}
#db-screen .dbs-tbl.act{color:var(--dbemb);background:rgba(227,169,85,0.1);border-color:var(--dbline)}
#db-screen .dbs-tbl.act svg{color:var(--dbemb)}
#db-screen .dbs-tbl .n{margin-left:auto;font-size:11.5px;color:var(--dbmut);border:1px solid var(--dbline);border-radius:99px;padding:2px 8px;min-width:26px;text-align:center}
#db-screen .dbs-note{margin-top:auto;padding:12px 10px 4px;border-top:1px solid var(--dbline);font-family:var(--dbserif);font-style:italic;font-size:clamp(0.75rem, 0.4566rem + 0.4268vw, 0.9688rem);color:var(--dbmut);line-height:1.45}
/* main */
#db-screen .dbs-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
#db-screen .dbs-head{display:flex;align-items:baseline;gap:clamp(11px, 6.98px + 0.3659vw, 14px);padding:clamp(15px, 8.29px + 0.6098vw, 20px) clamp(20px, 11.95px + 0.7317vw, 26px) clamp(11px, 6.98px + 0.3659vw, 14px)}
#db-screen .dbs-head h2{font-family:var(--dbmono);font-weight:500;font-size:clamp(0.9375rem, 0.6021rem + 0.4878vw, 1.1875rem);letter-spacing:0.03em;color:var(--dbemb);margin:0}
#db-screen .dbs-head .dbs-meta{font-family:var(--dbmono);font-size:clamp(0.625rem, 0.4573rem + 0.2439vw, 0.75rem);letter-spacing:0.14em;text-transform:uppercase;color:var(--dbmut)}
#db-screen .dbs-gridwrap{flex:1;margin:0 clamp(20px, 11.95px + 0.7317vw, 26px);border:1px solid var(--dbline);border-radius:10px;background:rgba(12,8,5,0.5);overflow:auto;scrollbar-width:none;position:relative}
#db-screen .dbs-gridwrap::-webkit-scrollbar{width:0;height:0;display:none}
#db-screen table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-family:var(--dbmono);font-size:clamp(0.6563rem, 0.4047rem + 0.3659vw, 0.8438rem)}
#db-screen thead th{position:sticky;top:0;z-index:2;text-align:left;font-weight:500;letter-spacing:0.06em;color:var(--dbem);background:#171009;border-bottom:1px solid var(--dblineb);padding:11px 16px;white-space:nowrap}
#db-screen tbody td{padding:10px 16px;border-bottom:1px solid rgba(227,169,85,0.09);color:var(--dbdim);white-space:nowrap;max-width:340px;overflow:hidden;text-overflow:ellipsis}
#db-screen tbody tr{transition:background .12s ease}
#db-screen tbody tr:hover td{background:rgba(227,169,85,0.05);color:var(--dbink)}
#db-screen td.null{color:var(--dbmut);font-style:italic}
#db-screen td.mask{color:var(--dbmut);letter-spacing:0.14em}
#db-screen td.key{color:var(--dbink)}
#db-screen .dbs-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
#db-screen .dbs-empty .in{max-width:320px}
#db-screen .dbs-empty svg{width:34px;height:34px;color:var(--dbmut);margin-bottom:10px}
#db-screen .dbs-empty p{font-family:var(--dbserif);font-style:italic;font-size:clamp(0.9375rem, 0.6021rem + 0.4878vw, 1.1875rem);color:var(--dbdim);margin:0}
#db-screen .dbs-empty .s{font-family:var(--dbmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dbmut);display:block;margin-top:8px}
/* horizontal slider — pans the grid so every column is reachable (the grid's own
   scrollbar is hidden by design). Shown only when the table overflows sideways. */
#db-screen .dbs-slider{display:flex;align-items:center;gap:14px;margin:10px 26px 0}
#db-screen .dbs-slider[hidden]{display:none}
#db-screen .dbs-slidercap{font-family:var(--dbmono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--dbmut);white-space:nowrap;flex:0 0 auto}
#db-screen .dbs-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:rgba(10,7,5,0.6);border:1px solid var(--dbline);outline:none;cursor:pointer;margin:0}
#db-screen .dbs-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:46px;height:14px;border-radius:99px;background:linear-gradient(180deg,var(--dbemb),var(--dbemd));border:1px solid var(--dbemd);box-shadow:0 0 12px -4px var(--dbglow),inset 0 1px 0 rgba(255,255,255,0.2);cursor:grab}
#db-screen .dbs-slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
#db-screen .dbs-slider input[type=range]::-moz-range-thumb{width:46px;height:14px;border:1px solid var(--dbemd);border-radius:99px;background:linear-gradient(180deg,var(--dbemb),var(--dbemd));cursor:grab}
/* footer */
#db-screen .dbs-footer{display:flex;align-items:center;gap:14px;padding:14px 26px 18px}
#db-screen .dbs-pgbtn{font-family:var(--dbmono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dbdim);background:rgba(10,7,5,0.4);border:1px solid var(--dbline);border-radius:7px;padding:8px 14px;cursor:pointer;transition:all .15s ease}
#db-screen .dbs-pgbtn:hover:not(:disabled){color:var(--dbemb);border-color:var(--dblineb)}
#db-screen .dbs-pgbtn:disabled{opacity:0.35;cursor:default}
#db-screen .dbs-pginfo{font-family:var(--dbmono);font-size:12px;letter-spacing:0.12em;color:var(--dbmut)}
#db-screen .dbs-ro{display:flex;align-items:center;gap:9px;font-family:var(--dbserif);font-style:italic;font-size:clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem);color:var(--dbmut)}
#db-screen .dbs-ro i{width:3px;height:26px;background:var(--dbemd);border-radius:2px;flex:0 0 auto}
@media (max-width:860px){
  #db-screen .dbs-app{grid-template-columns:1fr;grid-template-rows:58px auto 1fr}
  #db-screen .dbs-rail{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--dbline)}
  #db-screen .dbs-rail .dbs-note{display:none}
  #db-screen .dbs-search{min-width:0}
  #db-screen .dbs-crumb,#db-screen .dbs-badge{display:none}
}

/* ============================================================================
   Friends rail (v4 home, 3rd column). Scoped under #home-v4 with hvf- prefixed
   classes so nothing collides with the app. Wired to /api/friends by app.js.
   ============================================================================ */
#home-v4 .hvf{grid-column:3;grid-row:1;z-index:10;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--hvline);background:#100a06}
#home-v4 .hvf-me{display:flex;align-items:center;gap:11px;padding:16px 16px 14px;border-bottom:1px solid var(--hvline)}
/* Profile hub — the account menu lives on this top-right identity chip (the
   old bottom-left rail chip was removed). The chip is the .hv-acct anchor:
   identity button + presence row stack; the .hv-menu drops DOWN from it. */
#home-v4 .hvf-me.hv-acct{flex-wrap:wrap;position:relative;margin:0}
#home-v4 .hvf-me .hv-acct-btn{display:flex;align-items:center;gap:11px;flex:1 1 100%;padding:8px 9px;margin:-4px -5px 2px;border:1px solid transparent;border-radius:10px;background:none;cursor:pointer;text-align:left;font-family:var(--hvserif);transition:all .15s ease}
#home-v4 .hvf-me .hv-acct-btn:hover{border-color:var(--hvline);background:rgba(10,7,5,0.55)}
#home-v4 .hvf-me .hv-tier{font-family:var(--hvmono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--hvmut);margin-top:3px}
#home-v4 .hvf-me .hv-chev{width:15px;height:15px;flex:0 0 auto;color:var(--hvmut);transition:transform .18s ease}
#home-v4 .hvf-me.hv-acct.open .hv-chev{transform:rotate(-180deg)}
/* Presence lives INSIDE the profile dropdown: the status row reads like the
   other menu items; its own submenu opens below it, inside the panel. */
#home-v4 .hv-menu .hvf-statwrap{display:block;position:relative;margin:0}
#home-v4 .hv-menu .hvf-statbtn{width:100%;padding:9px 11px;border-radius:7px;gap:9px}
#home-v4 .hv-menu .hvf-statbtn:hover{background:rgba(227,169,85,0.08);filter:none}
#home-v4 .hv-menu .hvf-statbtn .scar{margin-left:auto}
#home-v4 .hv-menu .hvf-statmenu{position:static;min-width:0;margin:2px 0 0;padding:2px 0 2px 14px;border:none;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;display:none;opacity:1;visibility:visible;transform:none;transition:none}
#home-v4 .hv-menu .hvf-statwrap.open .hvf-statmenu{display:block}
#home-v4 .hvf-me .hv-menu{left:8px;right:8px;top:calc(100% + 4px);bottom:auto;transform:translateY(-6px);z-index:40}
#home-v4 .hvf-me.hv-acct.open .hv-menu{transform:none}
#home-v4 .hvf-av{position:relative;flex:0 0 auto;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--hvlineb);background:rgba(227,169,85,0.08);font-family:var(--hvdisp);font-size:16px;font-weight:700;color:var(--hvemb);text-transform:uppercase}
#home-v4 .hvf-dot{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;border:2px solid #0f0a06;background:var(--hvmut)}
#home-v4 .hvf-dot.on{background:#7bbf6a;box-shadow:0 0 8px rgba(123,191,106,0.7)}
#home-v4 .hvf-dot.away{background:#d19a3f}
#home-v4 .hvf-dot.dnd{background:#b4563f;box-shadow:0 0 8px rgba(180,86,63,0.7)}
/* own-status dropdown — Online / Away / Do Not Disturb / Appear Offline */
#home-v4 .hvf-statwrap{position:relative;margin-top:4px}
#home-v4 .hvf-statbtn{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;font-family:var(--hvmono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#7bbf6a;transition:color .14s ease}
#home-v4 .hvf-statbtn .sdot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor;flex:0 0 auto}
#home-v4 .hvf-statbtn .scar{width:8px;height:8px;opacity:0.6;transition:transform .18s ease}
#home-v4 .hvf-statbtn:hover{filter:brightness(1.2)}
#home-v4 .hvf-statwrap.open .hvf-statbtn .scar{transform:rotate(180deg)}
#home-v4 .hvf-statmenu{position:absolute;top:calc(100% + 8px);left:-4px;min-width:174px;z-index:40;padding:5px;border-radius:10px;border:1px solid var(--hvlineb);background:rgba(16,10,6,0.97);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);box-shadow:0 20px 44px -20px rgba(0,0,0,0.95),0 0 30px -18px var(--hvglow);opacity:0;visibility:hidden;transform:translateY(-5px);transition:all .16s ease}
#home-v4 .hvf-statwrap.open .hvf-statmenu{opacity:1;visibility:visible;transform:none}
#home-v4 .hvf-statmenu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 10px;border:0;border-radius:7px;background:none;cursor:pointer;text-align:left;font-family:var(--hvmono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--hvdim);transition:background .13s ease,color .13s ease}
#home-v4 .hvf-statmenu button i{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:currentColor}
#home-v4 .hvf-statmenu button:hover{background:rgba(227,169,85,0.1);color:var(--hvink)}
#home-v4 .hvf-statmenu button.sel{color:var(--hvink)}
#home-v4 .hvf-statmenu button.sel::after{content:"✓";margin-left:auto;color:var(--hvemb);font-family:var(--hvmono);font-size:12px}
#home-v4 .hvf-statmenu .hsw-on{color:#7bbf6a}
#home-v4 .hvf-statmenu .hsw-away{color:#d19a3f}
#home-v4 .hvf-statmenu .hsw-dnd{color:#b4563f}
#home-v4 .hvf-statmenu .hsw-off{color:var(--hvmut)}
#home-v4 .hvf-who{min-width:0;flex:1}
#home-v4 .hvf-who b{display:block;font-family:var(--hvdisp);font-size:16.5px;font-weight:600;color:var(--hvink);letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home-v4 .hvf-who select{margin-top:3px;width:100%;appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:var(--hvmono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:#7bbf6a;outline:none}
#home-v4 .hvf-who select option{background:#16100a;color:var(--hvink)}
#home-v4 .hvf-search{padding:12px 14px;border-bottom:1px solid var(--hvline)}
#home-v4 .hvf-search input,#home-v4 .hvf-add input{width:100%;padding:9px 12px;border-radius:8px;background:rgba(10,7,5,0.6);border:1px solid var(--hvline);outline:none;font-family:var(--hvserif);font-size:clamp(0.8438rem, 0.5084rem + 0.4878vw, 1.0938rem);color:var(--hvink)}
#home-v4 .hvf-search input::placeholder,#home-v4 .hvf-add input::placeholder{color:var(--hvmut);font-style:italic}
#home-v4 .hvf-search input:focus,#home-v4 .hvf-add input:focus{border-color:var(--hvlineb);box-shadow:0 0 0 3px rgba(227,169,85,0.12)}
#home-v4 .hvf-add{padding:12px 14px;border-bottom:1px solid var(--hvline);background:rgba(227,169,85,0.03)}
#home-v4 .hvf-add-results{margin-top:8px;display:flex;flex-direction:column;gap:4px;max-height:220px;overflow-y:auto;scrollbar-width:none}
#home-v4 .hvf-add-results::-webkit-scrollbar{width:0;display:none}
#home-v4 .hvf-add-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px}
#home-v4 .hvf-add-row .nm{flex:1;font-family:var(--hvserif);font-size:17.5px;color:var(--hvink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home-v4 .hvf-add-row button{flex:0 0 auto;font-family:var(--hvmono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;padding:6px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--hvlineb);background:rgba(227,169,85,0.08);color:var(--hvemb);transition:all .14s ease}
#home-v4 .hvf-add-row button:hover:not(:disabled){background:rgba(227,169,85,0.16)}
#home-v4 .hvf-add-row button:disabled{opacity:.5;cursor:default;border-color:var(--hvline);color:var(--hvmut);background:none}
#home-v4 .hvf-add-empty{font-family:var(--hvmono);font-size:12px;letter-spacing:0.06em;color:var(--hvmut);padding:8px 4px}
#home-v4 .hvf-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:8px 8px 14px}
#home-v4 .hvf-list::-webkit-scrollbar{width:0;display:none}
#home-v4 .hvf-grplbl{padding:12px 8px 6px;font-family:var(--hvmono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--hvmut)}
#home-v4 .hvf-req{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;background:rgba(227,169,85,0.05)}
#home-v4 .hvf-req .nm{flex:1;min-width:0;font-family:var(--hvserif);font-size:clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem);color:var(--hvink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home-v4 .hvf-req button{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border-radius:7px;cursor:pointer;border:1px solid var(--hvline);background:rgba(10,7,5,0.4);transition:all .14s ease}
#home-v4 .hvf-req button svg{width:13px;height:13px}
#home-v4 .hvf-req button.ok{color:#7bbf6a;border-color:rgba(123,191,106,0.4)}
#home-v4 .hvf-req button.no{color:var(--hvmut)}
#home-v4 .hvf-req button:hover{background:rgba(227,169,85,0.12)}
#home-v4 .hvf-fr{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;cursor:default;transition:background .14s ease}
#home-v4 .hvf-fr:hover{background:rgba(227,169,85,0.08)}
#home-v4 .hvf-fr .nm{min-width:0;flex:1}
#home-v4 .hvf-fr .nm b{display:block;font-family:var(--hvserif);font-size:clamp(0.9062rem, 0.5709rem + 0.4878vw, 1.1562rem);font-weight:600;color:var(--hvink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
#home-v4 .hvf-fr .nm span{display:block;font-family:var(--hvmono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--hvmut);margin-top:3px}
#home-v4 .hvf-fr.off{opacity:0.45}
#home-v4 .hvf-fr .rm{flex:0 0 auto;opacity:0;width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--hvline);border-radius:7px;color:var(--hvmut);cursor:pointer;transition:opacity .14s ease}
#home-v4 .hvf-fr .rm svg{width:11px;height:11px}
#home-v4 .hvf-fr:hover .rm{opacity:1}
#home-v4 .hvf-fr .rm:hover{color:#d98a6a;border-color:rgba(217,138,106,0.4)}
#home-v4 .hvf-empty{padding:24px 12px;text-align:center;font-family:var(--hvserif);font-style:italic;font-size:17px;color:var(--hvmut);line-height:1.5}
#home-v4 .hvf-foot{flex:0 0 auto;display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--hvline)}
#home-v4 .hvf-foot button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:8px;cursor:pointer;border:1px solid var(--hvline);background:rgba(10,7,5,0.4);color:var(--hvdim);font-family:var(--hvmono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;transition:all .15s ease}
#home-v4 .hvf-foot button:hover{color:var(--hvemb);border-color:var(--hvlineb);box-shadow:0 0 16px -8px var(--hvglow)}
#home-v4 .hvf-foot button svg{width:12px;height:12px}

/* ============================================================================
   Subscription & Ink — slide-in panel from the account menu. Anchored to the
   sidebar edge like Settings; ember palette; scoped under #anima-panel with an-
   prefixed classes. Balance + history are real; pricing is presentational.
   ============================================================================ */
#anima-panel{
  --anem:#c98a3e; --anemb:#e3a955; --anemd:#8a5f28; --anink:#efe4cd; --andim:#b4a68b;
  --anmut:#7d715c; --anline:rgba(227,169,85,0.22); --anlineb:rgba(227,169,85,0.45); --anglow:rgba(227,169,85,0.28);
  --andisp:'Cinzel',Georgia,serif; --anserif:'Cormorant Garamond',Georgia,serif; --anmono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:122;pointer-events:none;color:var(--anink);font-family:var(--anserif);
}
#anima-panel .an-clip{position:absolute;top:0;bottom:0;left:clamp(200px, 120px + 7.5vw, 264px);right:clamp(228px, 131.4px + 8.78vw, 300px);overflow:hidden;pointer-events:none}
#anima-panel .an{position:absolute;inset:0;display:flex;flex-direction:column;background:rgba(12,8,5,0.86);
  -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);pointer-events:auto;
  transform:translateX(-103%);transition:transform .42s cubic-bezier(.3,.75,.25,1)}
#anima-panel.open .an{transform:none;box-shadow:24px 0 80px -40px rgba(0,0,0,0.9)}
#anima-panel .an-top{display:flex;align-items:center;gap:14px;padding:0 30px;min-height:75px;box-sizing:border-box;border-bottom:1px solid var(--anline);flex:0 0 auto}
#anima-panel .an-top h2{font-family:var(--andisp);font-weight:700;font-size:clamp(0.9375rem, 0.6021rem + 0.4878vw, 1.1875rem);letter-spacing:0.12em;text-transform:uppercase;color:var(--anemb);margin:0;text-shadow:0 1px 16px var(--anglow)}
#anima-panel .an-chip{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--anmono);font-size:13px;letter-spacing:0.1em;color:var(--anemb);border:1px solid var(--anlineb);border-radius:999px;padding:7px 14px;background:rgba(227,169,85,0.07)}
#anima-panel .an-chip svg{width:14px;height:14px}
#anima-panel .an-x{font-family:var(--anmono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--andim);background:rgba(10,7,5,0.4);border:1px solid var(--anline);border-radius:7px;padding:9px 14px;cursor:pointer;transition:all .15s ease}
#anima-panel .an-x:hover{color:var(--anemb);border-color:var(--anlineb)}
#anima-panel .an-body{flex:1;overflow-y:auto;scrollbar-width:none;padding:28px 30px 60px}
#anima-panel .an-body::-webkit-scrollbar{width:0;display:none}
#anima-panel .an-in{width:min(1120px,100%);margin:0 auto;display:grid;gap:22px}
#anima-panel .an-card{background:rgba(18,11,6,0.58);border:1px solid var(--anline);border-radius:14px;box-shadow:0 24px 60px -34px rgba(0,0,0,0.9)}
#anima-panel .an-hd{display:flex;align-items:baseline;gap:12px;padding:16px 22px;border-bottom:1px solid var(--anline)}
#anima-panel .an-hd h3{margin:0;font-family:var(--anmono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--anmut);font-weight:500}
#anima-panel .an-note{font-family:var(--anserif);font-style:italic;font-size:17px;color:var(--anmut)}
#anima-panel .an-pad{padding:22px}
/* balance */
#anima-panel .an-bal{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;padding:28px 30px}
#anima-panel .an-amt{display:flex;align-items:center;gap:16px}
#anima-panel .an-orb{width:64px;height:64px;flex:0 0 auto;color:var(--anemb);filter:drop-shadow(0 0 18px var(--anglow))}
#anima-panel .an-orb svg{width:100%;height:100%;display:block}
#anima-panel .an-n{font-family:var(--andisp);font-size:clamp(2.25rem, 1.4116rem + 1.2195vw, 2.875rem);font-weight:700;line-height:1;color:var(--anemb);text-shadow:0 0 30px var(--anglow)}
#anima-panel .an-lbl{font-family:var(--anmono);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--anmut);margin-top:8px}
#anima-panel .an-rgt{text-align:right}
#anima-panel .an-refill{font-family:var(--anserif);font-size:18.5px;color:var(--andim);font-style:italic;margin:0 0 10px}
#anima-panel .an-refill b{color:var(--anink);font-style:normal;font-weight:600}
#anima-panel .an-soon{font-family:var(--anmono);font-size:11.5px;letter-spacing:0.1em;color:var(--anmut);margin:9px 0 0}
#anima-panel .an-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 22px;border-radius:9px;cursor:pointer;font-family:var(--anmono);font-size:13px;letter-spacing:0.18em;text-transform:uppercase;transition:all .16s ease;border:1px solid var(--anline);background:rgba(10,7,5,0.4);color:var(--andim)}
#anima-panel .an-btn:hover:not(:disabled){color:var(--anemb);border-color:var(--anlineb);box-shadow:0 0 20px -8px var(--anglow)}
#anima-panel .an-btn:disabled{opacity:.6;cursor:default}
#anima-panel .an-btn.primary{border-color:var(--anemd);color:#1e1206;background:linear-gradient(180deg,var(--anemb),var(--anemd));box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 6px 22px -8px var(--anglow)}
#anima-panel .an-btn.primary:hover{filter:brightness(1.07);color:#1e1206}
#anima-panel .an-btn.wide{width:100%}
#anima-panel .an-btn svg{width:14px;height:14px}
/* packs */
#anima-panel .an-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
#anima-panel .an-pack{position:relative;border:1px solid var(--anline);border-radius:12px;padding:22px 18px 18px;background:rgba(10,7,5,0.42);text-align:center;cursor:pointer;transition:all .16s ease}
#anima-panel .an-pack:hover{border-color:var(--anlineb);transform:translateY(-3px);box-shadow:0 16px 34px -20px rgba(0,0,0,0.9),0 0 26px -14px var(--anglow)}
#anima-panel .an-pack.best{border-color:var(--anlineb);background:rgba(227,169,85,0.06)}
#anima-panel .an-tag{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-family:var(--anmono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:#1e1206;background:linear-gradient(180deg,var(--anemb),var(--anemd));border-radius:999px;padding:4px 11px;white-space:nowrap}
#anima-panel .an-vial{width:38px;height:38px;margin:0 auto 12px;color:var(--anemb)}
#anima-panel .an-vial svg{width:100%;height:100%;display:block}
#anima-panel .an-qty{font-family:var(--andisp);font-size:clamp(1.375rem, 0.872rem + 0.7317vw, 1.75rem);font-weight:700;color:var(--anink);line-height:1}
#anima-panel .an-unit{font-family:var(--anmono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--anmut);margin:7px 0 0}
#anima-panel .an-bonus{font-family:var(--anserif);font-style:italic;font-size:17px;color:var(--anemb);margin:9px 0 0;min-height:21px}
#anima-panel .an-price{font-family:var(--andisp);font-size:clamp(1.0313rem, 0.654rem + 0.5488vw, 1.3125rem);font-weight:600;color:var(--anemb);margin:14px 0 0;padding-top:13px;border-top:1px solid var(--anline)}
/* plans */
#anima-panel .an-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
#anima-panel .an-plan{position:relative;display:flex;flex-direction:column;border:1px solid var(--anline);border-radius:12px;padding:24px 20px 20px;background:rgba(10,7,5,0.42);transition:all .16s ease}
#anima-panel .an-plan:hover{border-color:var(--anlineb);box-shadow:0 0 26px -14px var(--anglow)}
#anima-panel .an-plan.current{border-color:var(--anlineb);background:rgba(227,169,85,0.06)}
#anima-panel .an-plan h4{font-family:var(--andisp);font-size:clamp(0.9375rem, 0.6021rem + 0.4878vw, 1.1875rem);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--anemb);margin:0 0 4px}
#anima-panel .an-tl{font-family:var(--anserif);font-style:italic;font-size:17.5px;color:var(--anmut);margin:0 0 16px}
#anima-panel .an-cost{display:flex;align-items:baseline;gap:6px;margin:0 0 18px}
#anima-panel .an-cost b{font-family:var(--andisp);font-size:clamp(1.6563rem, 1.0274rem + 0.9146vw, 2.125rem);font-weight:700;color:var(--anink);line-height:1}
#anima-panel .an-cost span{font-family:var(--anmono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--anmut)}
#anima-panel .an-plan ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;flex:1;font-family:var(--anserif);font-size:18px;color:var(--andim);line-height:1.3}
#anima-panel .an-plan li{padding-left:18px;position:relative}
#anima-panel .an-plan li::before{content:"✦";position:absolute;left:0;color:var(--anemb);font-size:12px;top:3px}
#anima-panel .an-fine{font-family:var(--anmono);font-size:11.5px;letter-spacing:0.1em;color:var(--anmut);text-align:center;margin:16px 0 0}
/* ledger */
#anima-panel .an-tx{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--anline)}
#anima-panel .an-tx:last-child{border-bottom:0;padding-bottom:0}
#anima-panel .an-tx .ic{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--anline);border-radius:8px;color:var(--anemb);font-family:var(--andisp);font-weight:700}
#anima-panel .an-tx .what{flex:1;min-width:0}
#anima-panel .an-tx .what b{display:block;font-family:var(--anserif);font-size:19px;font-weight:600;color:var(--anink)}
#anima-panel .an-tx .what span{font-family:var(--anmono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--anmut)}
#anima-panel .an-tx .delta{font-family:var(--andisp);font-size:20px;font-weight:600;color:#8fbf8a}
#anima-panel .an-tx .delta.neg{color:var(--anmut)}
#anima-panel .an-empty{font-family:var(--anserif);font-style:italic;font-size:18px;color:var(--anmut);text-align:center;padding:12px}
@media (max-width:1180px){ #anima-panel .an-clip{right:0} }
@media (max-width:860px){ #anima-panel .an-clip{left:0} }
@media (max-width:780px){ #anima-panel .an-bal{grid-template-columns:1fr} #anima-panel .an-rgt{text-align:left} }

/* Billing — 4-view flow (subscription / shop / payment methods / checkout) */
#anima-panel .bill-view{position:absolute;inset:0;display:flex;flex-direction:column}
#anima-panel .bill-view.hidden{display:none}
#anima-panel .an-flex{flex:1}
#anima-panel .bill-empty{padding:22px 4px;text-align:center;font-family:var(--anserif);font-style:italic;font-size:18.5px;color:var(--anmut)}
#anima-panel .bill-cur{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 22px 20px}
#anima-panel .bill-cur-tile{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--anlineb);background:rgba(227,169,85,0.06);font-size:20px;color:var(--anemb)}
#anima-panel .bill-cur-id{flex:1;min-width:200px;display:flex;flex-direction:column;gap:5px}
#anima-panel .bill-cur-id b{font-family:var(--andisp);font-weight:700;font-size:22px;letter-spacing:0.12em;color:var(--anink)}
#anima-panel .bill-cur-id span{font-family:var(--anmono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--anmut)}
#anima-panel .bill-cur-acts{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
#anima-panel .bill-cur-acts .an-btn{padding:11px 16px;font-size:11.5px}
#anima-panel .bill-freecap{font-family:var(--anmono);font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:#584f3e}
#anima-panel .an-btn.danger{border-color:rgba(201,85,69,0.4);color:#c98a6a}
#anima-panel .an-btn.danger:hover{border-color:rgba(201,85,69,0.75);color:#c95545;box-shadow:none}
#anima-panel .bill-chip{padding:7px 13px;border:1px solid var(--anline);border-radius:8px;background:none;cursor:pointer;font-family:var(--anmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--anmut);transition:all .15s ease}
#anima-panel .bill-chip:hover{border-color:var(--anlineb)}
#anima-panel .bill-chip.on{color:var(--anemb);border-color:var(--anlineb);background:rgba(227,169,85,0.09)}
#anima-panel .bill-back{justify-self:start;align-self:flex-start;padding:8px 15px;border:1px solid var(--anline);border-radius:8px;background:rgba(10,7,5,0.4);cursor:pointer;font-family:var(--anmono);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--andim)}
#anima-panel .bill-back:hover{color:var(--anemb);border-color:var(--anlineb)}
#anima-panel .bill-detgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#anima-panel .bill-det{display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid var(--anline);border-radius:9px;background:rgba(10,7,5,0.35)}
#anima-panel .bill-det-k{font-family:var(--anmono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--anmut)}
#anima-panel .bill-det-v{font-size:19px;color:var(--anink)}
#anima-panel .bill-pips{position:relative}
#anima-panel .bill-pips::before,#anima-panel .bill-pips::after{content:"";position:absolute;left:-4px;width:8px;height:8px;transform:rotate(45deg);background:#0a0705;border:1px solid rgba(227,169,85,0.6)}
#anima-panel .bill-pips::before{top:-4px}
#anima-panel .bill-pips::after{bottom:-4px}
#anima-panel .bill-co-wrap{max-width:880px;width:100%;margin:0 auto}
#anima-panel .bill-co-card{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--anlineb);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,0.1)}
#anima-panel .bill-co-sum{padding:28px;background:linear-gradient(150deg,rgba(36,20,7,0.85),rgba(16,10,6,0.5) 65%);border-right:1px solid var(--anline)}
#anima-panel .bill-co-brand{font-family:var(--anmono);font-size:11px;letter-spacing:0.3em;color:var(--anmut)}
#anima-panel .bill-co-lead{display:flex;align-items:center;gap:12px;margin-top:16px}
#anima-panel .bill-co-tile{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border:1px solid var(--anlineb);background:rgba(227,169,85,0.06);color:var(--anemb)}
#anima-panel .bill-co-tile svg{width:22px;height:22px}
#anima-panel .bill-co-name{font-family:var(--andisp);font-weight:700;font-size:21px;color:var(--anink)}
#anima-panel .bill-co-kind{font-family:var(--anmono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--anmut);margin-top:4px}
#anima-panel .bill-co-price{font-family:var(--andisp);font-weight:700;font-size:clamp(2.0625rem, 1.3079rem + 1.0976vw, 2.625rem);color:var(--anink);margin:16px 0 4px}
#anima-panel .bill-co-lines{margin-top:14px;border-top:1px solid var(--anline);padding-top:14px;display:grid;gap:10px}
#anima-panel .bill-co-line{display:flex;justify-content:space-between;font-size:18px;color:var(--andim)}
#anima-panel .bill-co-line.bonus{color:#9db47c}
#anima-panel .bill-co-line.total{border-top:1px solid var(--anline);padding-top:12px;font-family:var(--andisp);color:var(--anink);font-size:20px}
#anima-panel .bill-co-foot{margin-top:18px;font-style:italic;font-size:16.5px;color:var(--anmut)}
#anima-panel .bill-co-review{padding:28px;display:flex;flex-direction:column;gap:13px}
#anima-panel .bill-co-h{font-family:var(--andisp);font-weight:700;font-size:18px;letter-spacing:0.16em;color:var(--anemb)}
#anima-panel .bill-co-copy{font-style:italic;font-size:18px;color:var(--andim);margin:0}
#anima-panel .bill-co-bul{display:flex;gap:10px;font-size:18px;color:var(--andim)}
#anima-panel .bill-co-bul span{color:var(--anemb)}
#anima-panel .bill-co-secure{display:flex;align-items:center;gap:8px;margin-top:2px;font-family:var(--anmono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--anmut)}
#anima-panel .bill-co-secure svg{width:13px;height:13px}
@media (max-width:720px){ #anima-panel .bill-co-card{grid-template-columns:1fr} #anima-panel .bill-co-sum{border-right:none;border-bottom:1px solid var(--anline)} #anima-panel .bill-detgrid{grid-template-columns:1fr} }
#anima-panel .bill-modal{position:absolute;inset:0;z-index:80;display:grid;place-items:center;background:rgba(5,3,2,0.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#anima-panel .bill-modal-card{position:relative;width:min(440px,88vw);padding:36px 34px 30px;text-align:center;background:rgba(16,10,6,0.98);border:1px solid var(--anlineb);box-shadow:inset 0 0 0 4px #0a0705,inset 0 0 0 5px rgba(227,169,85,0.13),0 40px 100px -40px rgba(0,0,0,0.95)}
#anima-panel .bill-sad{width:72px;height:72px;margin:0 auto;display:grid;place-items:center;border:2px solid var(--anlineb);border-radius:50%;background:rgba(227,169,85,0.05)}
#anima-panel .bill-sad svg{width:40px;height:40px;filter:drop-shadow(0 0 12px var(--anglow))}
#anima-panel .bill-modal-h{font-family:var(--andisp);font-weight:700;font-size:21px;letter-spacing:0.2em;color:var(--anink);margin-top:20px}
#anima-panel .bill-modal-body{font-style:italic;font-size:19px;color:var(--andim);line-height:1.6;margin:10px 0 0}
#anima-panel .bill-modal-body b{color:var(--anemb);font-style:normal}
#anima-panel .bill-modal-acts{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* ============================================================================
   Profile — slide-in panel from the account menu. Anchored to the sidebar like
   Settings/Ink; scoped under #profile-panel with pf- classes. Name / tier /
   counts / bio are real; achievements are presentational.
   ============================================================================ */
#profile-panel{
  --pfem:#c98a3e; --pfemb:#e3a955; --pfemd:#8a5f28; --pfink:#efe4cd; --pfdim:#b4a68b;
  --pfmut:#7d715c; --pfline:rgba(227,169,85,0.22); --pflineb:rgba(227,169,85,0.45); --pfglow:rgba(227,169,85,0.28);
  --pfdisp:'Cinzel',Georgia,serif; --pfserif:'Cormorant Garamond',Georgia,serif; --pfmono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:123;pointer-events:none;color:var(--pfink);font-family:var(--pfserif);
}
#profile-panel .pf-clip{position:absolute;top:0;bottom:0;left:264px;right:300px;overflow:hidden;pointer-events:none}
#profile-panel .pf{position:absolute;inset:0;display:flex;flex-direction:column;background:rgba(12,8,5,0.86);
  -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);pointer-events:auto;
  transform:translateX(-103%);transition:transform .42s cubic-bezier(.3,.75,.25,1)}
#profile-panel.open .pf{transform:none;box-shadow:24px 0 80px -40px rgba(0,0,0,0.9)}
#profile-panel .pf-top{display:flex;align-items:center;gap:14px;padding:0 30px;min-height:75px;box-sizing:border-box;border-bottom:1px solid var(--pfline);flex:0 0 auto}
#profile-panel .pf-top h2{font-family:var(--pfdisp);font-weight:700;font-size:19px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pfemb);margin:0;text-shadow:0 1px 16px var(--pfglow)}
#profile-panel .pf-since{margin-left:auto;font-family:var(--pfmono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pfmut)}
#profile-panel .pf-x{font-family:var(--pfmono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--pfdim);background:rgba(10,7,5,0.4);border:1px solid var(--pfline);border-radius:7px;padding:9px 14px;cursor:pointer;transition:all .15s ease}
#profile-panel .pf-x:hover{color:var(--pfemb);border-color:var(--pflineb)}
#profile-panel .pf-body{flex:1;overflow-y:auto;scrollbar-width:none;padding:30px}
#profile-panel .pf-body::-webkit-scrollbar{width:0;display:none}
#profile-panel .pf-grid{width:min(1080px,100%);margin:0 auto;display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:start}
/* id card */
#profile-panel .pf-idcard{background:rgba(18,11,6,0.58);border:1px solid var(--pfline);border-radius:14px;text-align:center;padding:30px 24px 24px}
#profile-panel .pf-avatar{position:relative;width:110px;height:110px;margin:0 auto 16px;display:grid;place-items:center}
#profile-panel .pf-avatar svg{width:100%;height:100%;color:var(--pfemb);filter:drop-shadow(0 0 16px var(--pfglow))}
#profile-panel .pf-init{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--pfdisp);font-size:36px;font-weight:700;color:var(--pfemb);text-transform:uppercase}
#profile-panel .pf-name{font-family:var(--pfdisp);font-size:clamp(1.1875rem, 0.6845rem + 0.7317vw, 1.5625rem);font-weight:700;letter-spacing:0.05em;color:var(--pfink);margin:0 0 3px}
#profile-panel .pf-handle{font-family:var(--pfmono);font-size:12.5px;letter-spacing:0.14em;color:var(--pfmut);margin:0 0 12px}
#profile-panel .pf-tier{display:inline-flex;align-items:center;gap:7px;font-family:var(--pfmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--pfemb);border:1px solid var(--pflineb);border-radius:999px;padding:6px 13px;background:rgba(227,169,85,0.07)}
#profile-panel .pf-tier svg{width:12px;height:12px}
#profile-panel .pf-bio-wrap{margin-top:18px;text-align:left}
#profile-panel .pf-bio-wrap textarea{width:100%;resize:vertical;min-height:64px;padding:11px 13px;border-radius:9px;background:rgba(10,7,5,0.6);border:1px solid var(--pfline);outline:none;font-family:var(--pfserif);font-style:italic;font-size:18px;color:var(--pfdim);line-height:1.45}
#profile-panel .pf-bio-wrap textarea:focus{border-color:var(--pflineb);box-shadow:0 0 0 3px rgba(227,169,85,0.12)}
#profile-panel .pf-bio-row{display:flex;align-items:center;gap:10px;margin-top:8px}
#profile-panel .pf-bio-msg{flex:1;font-family:var(--pfmono);font-size:12px;letter-spacing:0.06em;color:var(--pfmut)}
#profile-panel .pf-btn{font-family:var(--pfmono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;padding:8px 14px;border-radius:8px;cursor:pointer;border:1px solid var(--pfline);background:rgba(10,7,5,0.4);color:var(--pfdim);transition:all .15s ease}
#profile-panel .pf-btn:hover{color:var(--pfemb);border-color:var(--pflineb);box-shadow:0 0 16px -8px var(--pfglow)}
/* right column */
#profile-panel .pf-right{display:grid;gap:22px}
#profile-panel .pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--pfline);border-radius:14px;overflow:hidden;border:1px solid var(--pfline)}
#profile-panel .pf-stat{background:rgba(18,11,6,0.72);padding:20px 12px;text-align:center}
#profile-panel .pf-stat b{display:block;font-family:var(--pfdisp);font-size:clamp(1.3125rem, 0.7256rem + 0.8537vw, 1.75rem);font-weight:700;color:var(--pfemb);text-shadow:0 0 20px var(--pfglow)}
#profile-panel .pf-stat span{display:block;font-family:var(--pfmono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pfmut);margin-top:6px}
#profile-panel .pf-card{background:rgba(18,11,6,0.58);border:1px solid var(--pfline);border-radius:14px}
#profile-panel .pf-hd{display:flex;align-items:baseline;gap:12px;padding:16px 20px;border-bottom:1px solid var(--pfline)}
#profile-panel .pf-hd h3{margin:0;font-family:var(--pfmono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--pfmut);font-weight:500}
#profile-panel .pf-soon{margin-left:auto;font-family:var(--pfmono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--pfmut)}
#profile-panel .pf-pad{padding:20px}
#profile-panel .pf-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:11px}
#profile-panel .pf-medal{aspect-ratio:1;border:1px solid var(--pfline);border-radius:11px;display:grid;place-items:center;background:rgba(10,7,5,0.42);color:var(--pfemb)}
#profile-panel .pf-medal svg{width:24px;height:24px}
#profile-panel .pf-medal.locked{color:var(--pfmut);opacity:0.4}
#profile-panel .pf-recent .row{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--pfline)}
#profile-panel .pf-recent .row:last-child{border-bottom:0;padding-bottom:0}
#profile-panel .pf-recent .dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:var(--pfemb);box-shadow:0 0 10px var(--pfglow);margin-top:7px}
#profile-panel .pf-recent .txt{flex:1;font-family:var(--pfserif);font-size:19px;color:var(--pfdim);line-height:1.45}
#profile-panel .pf-recent .txt b{color:var(--pfink);font-weight:600}
#profile-panel .pf-recent .when{flex:0 0 auto;font-family:var(--pfmono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--pfmut)}
#profile-panel .pf-recent .empty{font-family:var(--pfserif);font-style:italic;color:var(--pfmut);text-align:center;padding:8px}
@media (max-width:1180px){ #profile-panel .pf-clip{right:0} }
@media (max-width:860px){ #profile-panel .pf-clip{left:0} }
@media (max-width:860px){ #profile-panel .pf-grid{grid-template-columns:1fr} #profile-panel .pf-stats{grid-template-columns:repeat(2,1fr)} }

/* ============================================================================
   AI Logic — admin-only system atlas. Full-screen, scoped under #ailogic-screen
   with aim- prefixed classes. A rail of maps + a canvas that renders each system
   as a vertical flow of node cards connected by arrows. Ember palette.
   ============================================================================ */
#ailogic-screen{
  --aiem:#c98a3e; --aiemb:#e3a955; --aiemd:#8a5f28; --aiink:#efe4cd; --aidim:#b4a68b;
  --aimut:#7d715c; --ailine:rgba(227,169,85,0.22); --ailineb:rgba(227,169,85,0.45); --aiglow:rgba(227,169,85,0.28);
  --aidisp:'Cinzel',Georgia,serif; --aiserif:'Cormorant Garamond',Georgia,serif; --aimono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:131;color:var(--aiink);font-family:var(--aiserif);
}
#ailogic-screen.hidden{display:none}
#ailogic-screen .aim-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 70% 80% at 55% 12%,#1d1206,#0a0705 76%)}
#ailogic-screen .aim-app{position:absolute;inset:0;z-index:1;display:grid;grid-template-rows:58px 1fr;grid-template-columns:270px 1fr}
/* top bar */
#ailogic-screen .aim-top{grid-column:1/3;display:flex;align-items:center;gap:16px;padding:0 22px;border-bottom:1px solid var(--ailine);background:rgba(12,8,5,0.72)}
#ailogic-screen .aim-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--aimono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--aidim);border:1px solid var(--ailine);border-radius:7px;padding:9px 14px 9px 11px;background:rgba(10,7,5,0.4);cursor:pointer;transition:all .15s ease}
#ailogic-screen .aim-back svg{width:13px;height:13px}
#ailogic-screen .aim-back:hover{color:var(--aiemb);border-color:var(--ailineb);box-shadow:0 0 18px -8px var(--aiglow)}
#ailogic-screen .aim-d20{width:26px;height:26px;color:var(--aiemb);filter:drop-shadow(0 0 8px var(--aiglow))}
#ailogic-screen .aim-d20 svg{width:100%;height:100%;display:block}
#ailogic-screen .aim-top h1{font-family:var(--aidisp);font-weight:700;font-size:17px;letter-spacing:0.14em;color:var(--aiemb);margin:0}
#ailogic-screen .aim-crumb{font-family:var(--aimono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--aimut)}
#ailogic-screen .aim-badge{font-family:var(--aimono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--aiem);border:1px solid var(--ailine);border-radius:5px;padding:4px 8px}
#ailogic-screen .aim-sp{flex:1}
#ailogic-screen .aim-live{font-family:var(--aimono);font-size:11.5px;letter-spacing:0.1em;color:var(--aidim);text-align:right;line-height:1.5;max-width:340px}
#ailogic-screen .aim-live b{color:var(--aiemb)}
/* rail */
#ailogic-screen .aim-rail{border-right:1px solid var(--ailine);background:rgba(12,8,5,0.6);padding:16px 12px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:4px}
#ailogic-screen .aim-rail::-webkit-scrollbar{width:0;display:none}
#ailogic-screen .aim-lbl{font-family:var(--aimono);font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--aimut);padding:4px 10px 8px}
#ailogic-screen .aim-map{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer;color:var(--aidim);transition:all .15s ease}
#ailogic-screen .aim-map svg{width:16px;height:16px;flex:0 0 auto;color:var(--aimut);transition:color .15s ease}
#ailogic-screen .aim-map .mt{font-family:var(--aiserif);font-size:18.5px;line-height:1.15}
#ailogic-screen .aim-map:hover{color:var(--aiink);background:rgba(227,169,85,0.06)}
#ailogic-screen .aim-map:hover svg{color:var(--aiemb)}
#ailogic-screen .aim-map.act{color:var(--aiemb);background:rgba(227,169,85,0.1);border-color:var(--ailine)}
#ailogic-screen .aim-map.act svg{color:var(--aiemb)}
#ailogic-screen .aim-note{margin-top:auto;padding:14px 10px 4px;border-top:1px solid var(--ailine);font-family:var(--aiserif);font-style:italic;font-size:16px;color:var(--aimut);line-height:1.5}
/* main + canvas */
#ailogic-screen .aim-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
#ailogic-screen .aim-head{padding:22px 34px 8px}
#ailogic-screen .aim-head h2{font-family:var(--aidisp);font-weight:700;font-size:26px;letter-spacing:0.05em;color:var(--aiink);margin:0 0 5px;text-shadow:0 1px 18px var(--aiglow)}
#ailogic-screen .aim-desc{font-family:var(--aiserif);font-style:italic;font-size:19px;color:var(--aidim)}
#ailogic-screen .aim-canvas{flex:1;overflow-y:auto;scrollbar-width:none;padding:22px 34px 60px}
#ailogic-screen .aim-canvas::-webkit-scrollbar{width:0;display:none}
#ailogic-screen .aim-pipe{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:0}
/* node card */
#ailogic-screen .aim-node{position:relative;border:1px solid var(--ailine);border-radius:12px;padding:16px 18px 15px;background:rgba(18,11,6,0.62);transition:all .16s ease}
#ailogic-screen .aim-node:hover{border-color:var(--ailineb);box-shadow:0 0 26px -14px var(--aiglow)}
#ailogic-screen .aim-node .nh{display:flex;align-items:center;gap:11px;margin-bottom:6px}
#ailogic-screen .aim-node .num{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-family:var(--aimono);font-size:13px;font-weight:500;color:#1e1206;background:linear-gradient(180deg,var(--aiemb),var(--aiemd))}
#ailogic-screen .aim-node .nt{font-family:var(--aidisp);font-weight:600;font-size:18px;letter-spacing:0.03em;color:var(--aiink)}
#ailogic-screen .aim-node .nd{font-family:var(--aiserif);font-size:18px;color:var(--aidim);line-height:1.45;margin:0}
#ailogic-screen .aim-node .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#ailogic-screen .aim-node .tag{font-family:var(--aimono);font-size:11px;letter-spacing:0.06em;color:var(--aiem);border:1px solid var(--ailine);border-radius:5px;padding:3px 7px;background:rgba(227,169,85,0.05)}
#ailogic-screen .aim-node.loop{border-style:dashed;border-color:var(--ailineb);background:rgba(227,169,85,0.04)}
#ailogic-screen .aim-node.loop .num{background:none;border:1px solid var(--ailineb);color:var(--aiemb)}
/* arrow between nodes */
#ailogic-screen .aim-arrow{align-self:center;width:2px;height:26px;position:relative;background:linear-gradient(var(--ailineb),var(--ailine))}
#ailogic-screen .aim-arrow::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ailineb)}
#ailogic-screen .aim-arrow.back{background:linear-gradient(var(--ailine),var(--aiemd));opacity:0.6}
/* live view */
#ailogic-screen .aim-liveview{max-width:820px;margin:0 auto}
#ailogic-screen .aim-livebtn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:9px;cursor:pointer;font-family:var(--aimono);font-size:13px;letter-spacing:0.18em;text-transform:uppercase;border:1px solid var(--aiemd);color:#1e1206;background:linear-gradient(180deg,var(--aiemb),var(--aiemd));box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 6px 22px -8px var(--aiglow)}
#ailogic-screen .aim-livebtn:hover{filter:brightness(1.07)}
#ailogic-screen .aim-tail{margin-top:20px;border:1px solid var(--ailine);border-radius:12px;background:rgba(10,7,5,0.5);padding:16px;font-family:var(--aimono);font-size:14px;line-height:1.7;color:var(--aidim);max-height:420px;overflow-y:auto;scrollbar-width:none;white-space:pre-wrap}
#ailogic-screen .aim-tail::-webkit-scrollbar{width:0;display:none}
#ailogic-screen .aim-tail .empty{color:var(--aimut);font-family:var(--aiserif);font-style:italic;font-size:17px}
@media (max-width:860px){ #ailogic-screen .aim-app{grid-template-columns:1fr;grid-template-rows:58px auto 1fr} #ailogic-screen .aim-rail{flex-direction:row;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--ailine)} #ailogic-screen .aim-note{display:none} #ailogic-screen .aim-crumb,#ailogic-screen .aim-badge{display:none} }

/* Blueprint (node-editor) map inside the AI Logic atlas. Wires on an SVG layer
   behind absolutely-positioned node cards with input/output port dots. */
#ailogic-screen .aim-canvas:has(.aim-bp){overflow:auto}
#ailogic-screen .aim-bp{position:relative;margin:0 auto}
#ailogic-screen .aim-wires{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
#ailogic-screen .aim-wires .wire{fill:none;stroke:rgba(227,169,85,0.5);stroke-width:2}
#ailogic-screen .aim-wires .wire.dash{stroke-dasharray:5 6;stroke:rgba(227,169,85,0.4)}
#ailogic-screen .aim-wires .wlbl{fill:var(--aimut);font-family:var(--aimono);font-size:11px;letter-spacing:0.04em;text-anchor:middle;paint-order:stroke;stroke:#0e0904;stroke-width:3px}
#ailogic-screen .aim-bpn{position:absolute;z-index:2;box-sizing:border-box;border:1px solid var(--ailine);border-radius:10px;padding:12px 14px;background:rgba(20,12,6,0.94);box-shadow:0 10px 28px -16px rgba(0,0,0,0.9)}
#ailogic-screen .aim-bpn::before,#ailogic-screen .aim-bpn::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--ailineb);border:2px solid #0e0904}
#ailogic-screen .aim-bpn::before{left:-5px}
#ailogic-screen .aim-bpn::after{right:-5px}
#ailogic-screen .aim-bpn .bt{font-family:var(--aidisp);font-weight:600;font-size:17px;letter-spacing:0.03em;color:var(--aiink)}
#ailogic-screen .aim-bpn .bs{font-family:var(--aiserif);font-size:16.5px;color:var(--aidim);line-height:1.35;margin-top:4px}
#ailogic-screen .aim-bpn .btag{display:inline-block;margin-top:9px;font-family:var(--aimono);font-size:10.5px;letter-spacing:0.1em;color:var(--aiem);border:1px solid var(--ailine);border-radius:5px;padding:3px 7px;background:rgba(227,169,85,0.05)}
#ailogic-screen .aim-bpn.good{border-color:rgba(143,191,138,0.5)}
#ailogic-screen .aim-bpn.good::before,#ailogic-screen .aim-bpn.good::after{background:#8fbf8a}
#ailogic-screen .aim-bpn.good .btag{color:#9dc98a;border-color:rgba(143,191,138,0.4)}
#ailogic-screen .aim-bpn.warn{border-color:var(--ailineb)}
#ailogic-screen .aim-bpn.warn .btag{color:var(--aiemb);border-color:var(--ailineb)}

/* ============================================================================
   Friends chat dock — bottom-right, beside the friends rail. Scoped under
   #chatdock (a global fixed element) with local ember vars.
   ============================================================================ */
#chatdock{
  --cem:#c98a3e; --cemb:#e3a955; --cemd:#8a5f28; --cink:#efe4cd; --cdim:#b4a68b; --cmut:#7d715c;
  --cline:rgba(227,169,85,0.22); --clineb:rgba(227,169,85,0.45); --cglow:rgba(227,169,85,0.28);
  --cdisp:'Cinzel',Georgia,serif; --cserif:'Cormorant Garamond',Georgia,serif; --cmono:'JetBrains Mono',monospace;
  position:fixed;right:308px;bottom:42px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:9px;pointer-events:none;
  font-family:var(--cserif);color:var(--cink);
}
#chatdock[hidden]{display:none}
#chatdock>*{pointer-events:auto}
#chatdock .chat-win{width:320px;display:flex;flex-direction:column;border:1px solid var(--clineb);border-bottom:0;border-radius:12px 12px 0 0;background:rgba(16,10,6,0.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -10px 50px -20px rgba(0,0,0,0.95),0 0 34px -20px var(--cglow);overflow:hidden;transition:height .26s cubic-bezier(.22,.61,.36,1);height:394px}
#chatdock .chat-win.min{height:60px}   /* fit the two-line header (avatar + name + presence) */
#chatdock .chat-win.hidden{display:none}
#chatdock .chat-hd{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:11px 12px;cursor:pointer;border-bottom:1px solid var(--cline);background:rgba(227,169,85,0.05)}
#chatdock .chat-hd .av{position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;border:1px solid var(--clineb);background:rgba(227,169,85,0.08);font-family:var(--cdisp);font-size:14px;font-weight:700;color:var(--cemb);text-transform:uppercase}
#chatdock .chat-hd .av .dot{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;border:2px solid #100a06;background:var(--cmut)}
#chatdock .dot.on{background:#7bbf6a}#chatdock .dot.away{background:#d19a3f}#chatdock .dot.dnd{background:#b4563f}
#chatdock .chat-hd .t{flex:1;min-width:0}
#chatdock .chat-hd .t b{display:block;font-family:var(--cdisp);font-size:clamp(0.7812rem, 0.4878rem + 0.4268vw, 1rem);font-weight:600;color:var(--cink);letter-spacing:0.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chatdock .chat-hd .t span{display:block;font-family:var(--cmono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cemb);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#chatdock .chat-hd .ctl{display:flex;gap:4px;flex:0 0 auto}
#chatdock .chat-hd .ctl button{width:22px;height:22px;display:grid;place-items:center;border:0;border-radius:6px;background:none;color:var(--cmut);cursor:pointer;transition:all .14s ease}
#chatdock .chat-hd .ctl button svg{width:11px;height:11px}
#chatdock .chat-hd .ctl button:hover{color:var(--cemb);background:rgba(227,169,85,0.12)}
#chatdock .chat-log{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:14px 13px;display:flex;flex-direction:column;gap:10px}
#chatdock .chat-log::-webkit-scrollbar{width:0;display:none}
#chatdock .chat-day{align-self:center;font-family:var(--cmono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--cmut)}
#chatdock .chat-empty{align-self:center;margin:auto 0;font-family:var(--cserif);font-style:italic;font-size:17px;color:var(--cmut);text-align:center;padding:0 20px;line-height:1.5}
#chatdock .msg{max-width:82%;padding:9px 12px;border-radius:11px;font-family:var(--cserif);font-size:clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem);line-height:1.4;color:var(--cink);text-wrap:pretty}
#chatdock .msg.them{align-self:flex-start;border:1px solid var(--cline);background:rgba(10,7,5,0.6);border-bottom-left-radius:4px}
#chatdock .msg.me{align-self:flex-end;border:1px solid var(--cemd);background:rgba(227,169,85,0.13);border-bottom-right-radius:4px}
#chatdock .msg .tm{display:block;font-family:var(--cmono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--cmut);margin-top:5px}
#chatdock .chat-in{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:10px 11px;border-top:1px solid var(--cline)}
#chatdock .chat-in textarea{flex:1;resize:none;height:38px;max-height:96px;padding:10px 12px;border-radius:9px;background:rgba(10,7,5,0.6);border:1px solid var(--cline);outline:none;font-family:var(--cserif);font-size:clamp(1rem, 0.8323rem + 0.2439vw, 1.125rem);color:var(--cink);line-height:1.3}
#chatdock .chat-in textarea::placeholder{color:var(--cmut);font-style:italic}
#chatdock .chat-in textarea:focus{border-color:var(--clineb);box-shadow:0 0 0 3px rgba(227,169,85,0.12)}
#chatdock .chat-in .send{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:9px;cursor:pointer;border:1px solid var(--cemd);color:#1e1206;background:linear-gradient(180deg,var(--cemb),var(--cemd));box-shadow:inset 0 1px 0 rgba(255,255,255,0.18)}
#chatdock .chat-in .send svg{width:15px;height:15px}
#chatdock .chat-in .send:hover{filter:brightness(1.08)}
#chatdock .chat-tabs{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:flex-end}
#chatdock .chat-tab{display:flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--cline);border-bottom:0;border-radius:10px 10px 0 0;background:rgba(16,10,6,0.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);cursor:pointer;font-family:var(--cserif);font-size:clamp(0.8438rem, 0.5084rem + 0.4878vw, 1.0938rem);color:var(--cdim);transition:all .15s ease}
#chatdock .chat-tab:hover{color:var(--cemb);border-color:var(--clineb)}
#chatdock .chat-tab i.dot{position:static;width:8px;height:8px;border:0;border-radius:50%}
#chatdock .chat-tab .badge{display:grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;font-family:var(--cmono);font-size:10.5px;color:#1e1206;background:linear-gradient(180deg,var(--cemb),var(--cemd))}
/* the friend rows become clickable to open a chat */
#home-v4 .hvf-fr{cursor:pointer}
@media (max-width:1180px){#chatdock{right:14px}#chatdock .chat-win{width:288px}}

/* ============================================================================
   iOS / mobile finishing pass. Everything above already collapses to a single
   column at <=860px; this block adds the device-level polish that CSS width
   breakpoints don't cover:
     - notch / home-indicator safe areas on the absolute full-screen shells
       (home, database, ai-logic) and the slide-in panels, so headers clear the
       status bar and bottom UI clears the home indicator when the app is
       installed to the home screen (apple-mobile-web-app-capable);
     - a phone-friendly chat dock (a floating 320px window is awkward on glass).
   env(safe-area-inset-*) is 0 on non-notched / desktop displays, so these rules
   are inert off-device. Header TRACKS are grown (not just padded) because a
   notch inset is ~47px in portrait — padding alone would crush a 58/75px bar.
   ============================================================================ */

/* --- Flex-column headers: pad + grow the min-height by the top inset. --- */
#home-v4 .hv-side { padding-top: env(safe-area-inset-top); }
#set-panel .sp-top,
#anima-panel .an-top,
#profile-panel .pf-top {
  padding-top: env(safe-area-inset-top);
  min-height: calc(75px + env(safe-area-inset-top));
}

/* --- Grid-shell header tracks grow by the top inset (desktop + mobile). --- */
#db-screen .dbs-app   { grid-template-rows: calc(58px + env(safe-area-inset-top)) 1fr; }
#ailogic-screen .aim-app { grid-template-rows: calc(58px + env(safe-area-inset-top)) 1fr; }
#db-screen .dbs-top,
#ailogic-screen .aim-top { padding-top: env(safe-area-inset-top); }
@media (max-width: 860px) {
  #db-screen .dbs-app   { grid-template-rows: calc(58px + env(safe-area-inset-top)) auto 1fr; }
  #ailogic-screen .aim-app { grid-template-rows: calc(58px + env(safe-area-inset-top)) auto 1fr; }
}

/* --- Bottom-anchored UI clears the home indicator. --- */
#home-v4 .hv-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

/* --- Chat dock becomes a bottom sheet on phones instead of a floating pane. --- */
@media (max-width: 860px) {
  #chatdock {
    left: 10px; right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    align-items: stretch;
  }
  #chatdock .chat-win { width: auto; max-width: none; height: min(68dvh, 460px); }
  #chatdock .chat-tabs { justify-content: flex-start; flex-wrap: wrap; }
}

/* --- Friends rail as a right-side drawer on mobile. The rail is display:none
   below 1180px (its column is gone); here it's surfaced on demand as an
   off-canvas drawer opened by the #hv-friends-btn nav toggle. The toggle,
   backdrop, and in-rail close button only exist at these widths. --- */
#home-v4 .hv-mobile-only { display: none; }
#home-v4 .hvf-backdrop { display: none; }
#home-v4 .hvf-close { display: none; }
@media (max-width: 1180px) {
  #home-v4 .hv-mobile-only { display: flex; }
  #home-v4 .hvf {
    display: flex;                       /* re-show (rail is display:none at this width) */
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 320px); z-index: 130;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(.3,.75,.25,1);
    box-shadow: -24px 0 70px -30px rgba(0,0,0,0.9);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html[data-frdrawer="open"] #home-v4 .hvf { transform: none; }
  html[data-frdrawer="open"] #home-v4 .hvf-backdrop {
    display: block; position: fixed; inset: 0; z-index: 120; background: rgba(6,4,2,0.55);
  }
  #home-v4 .hvf-close {
    display: grid; place-items: center;
    position: absolute; top: calc(13px + env(safe-area-inset-top)); right: 13px; z-index: 3;
    width: 30px; height: 30px; border: 1px solid var(--hvline); border-radius: 8px;
    background: rgba(10,7,5,0.6); color: var(--hvdim); cursor: pointer; transition: all .15s ease;
  }
  #home-v4 .hvf-close svg { width: 15px; height: 15px; }
  #home-v4 .hvf-close:hover { color: var(--hvemb); border-color: var(--hvlineb); }
}

/* ============================================================================
   Models — slide-in panel (desktop). Mirrors the #set-panel chrome (ember,
   slides in beside the sidebar on the home; full-width + scrim in-adventure),
   with per-engine model/context/behaviour rows. Body rendered by
   renderModelPanel(). Kept in sync with the mobile Settings→Model UI.
   ============================================================================ */
#model-panel{
  --spem:#c98a3e; --spemb:#e3a955; --spemd:#8a5f28; --spink:#efe4cd;
  --spdim:#b4a68b; --spmut:#7d715c; --spline:rgba(227,169,85,0.22); --splineb:rgba(227,169,85,0.45);
  --spglow:rgba(227,169,85,0.28);
  --spdisp:'Cinzel',Georgia,serif; --spserif:'Cormorant Garamond',Georgia,serif; --spmono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:120;pointer-events:none;
}
#model-panel .sp-scrim{position:absolute;inset:0;background:rgba(6,4,2,0.55);opacity:0;transition:opacity .3s ease;pointer-events:none}
#model-panel.full.open .sp-scrim{opacity:1;pointer-events:auto}
#model-panel .sp-clip{position:absolute;top:0;bottom:0;left:clamp(200px, 120px + 7.5vw, 264px);right:clamp(230px, 136px + 8.54vw, 300px);overflow:hidden;pointer-events:none}
#model-panel.full .sp-clip{left:0;right:0}
#model-panel .sp{position:absolute;inset:0;display:flex;flex-direction:column;
  background:rgba(12,8,5,0.86);-webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
  pointer-events:auto;
  transform:translateX(-103%);transition:transform .42s cubic-bezier(.3,.75,.25,1)}
#model-panel.open .sp{transform:none;box-shadow:24px 0 80px -40px rgba(0,0,0,0.9)}
#model-panel .sp-top{display:flex;align-items:center;justify-content:space-between;padding:0 34px;box-sizing:border-box;min-height:75px;border-bottom:1px solid var(--spline);flex:0 0 auto}
#model-panel .sp-top h2{font-family:var(--spdisp);font-weight:700;font-size:clamp(1.0313rem, 0.654rem + 0.5488vw, 1.3125rem);letter-spacing:0.14em;text-transform:uppercase;color:var(--spemb);margin:0;text-shadow:0 1px 16px var(--spglow)}
#model-panel .sp-x{font-family:var(--spmono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--spmut);background:none;border:1px solid var(--spline);border-radius:6px;padding:7px 12px;cursor:pointer;transition:all .15s ease}
#model-panel .sp-x:hover{color:var(--spemb);border-color:var(--splineb)}
#model-panel .sp-body{flex:1;overflow-y:auto;scrollbar-width:none;padding:26px var(--sp-3) 40px}
#model-panel .sp-body::-webkit-scrollbar{width:0;display:none}
#model-panel .sp-in{max-width:620px;margin:0 auto}
#model-panel .mp-intro{font-family:var(--spserif);font-style:italic;font-size:clamp(0.8438rem, 0.5503rem + 0.4268vw, 1.0625rem);color:var(--spmut);line-height:1.5;margin:0 0 22px}
#model-panel .mp-g{margin-bottom:22px;border:1px solid var(--spline);border-radius:12px;padding:16px 18px;background:rgba(10,7,5,0.4)}
#model-panel .mp-eh{font-family:var(--spdisp);font-weight:600;font-size:clamp(0.7813rem, 0.4878rem + 0.4268vw, 1rem);letter-spacing:0.08em;color:var(--spemb);margin:0}
#model-panel .mp-esub{font-family:var(--spserif);font-style:italic;font-size:15.5px;color:var(--spmut);margin:2px 0 10px}
#model-panel .mp-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px solid rgba(227,169,85,0.1)}
#model-panel .mp-row:last-child{border-bottom:0}
#model-panel .mp-t{font-family:var(--spserif);font-size:clamp(0.9063rem, 0.5709rem + 0.4878vw, 1.1563rem);color:var(--spink)}
#model-panel .mp-t .mp-d{display:block;font-style:italic;font-size:15px;color:var(--spmut);margin-top:1px}
#model-panel .mp-note{font-family:var(--spmono);font-size:12px;letter-spacing:0.02em;color:var(--spmut);margin:8px 2px 2px;line-height:1.5}
#model-panel .mp-sel{appearance:none;-webkit-appearance:none;font-family:var(--spmono);font-size:13px;letter-spacing:0.04em;color:var(--spink);
  background:rgba(10,7,5,0.6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23b4a68b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center;
  border:1px solid var(--spline);border-radius:8px;padding:8px 28px 8px 12px;cursor:pointer;flex:0 0 auto;max-width:180px}
#model-panel .mp-sel:hover{border-color:var(--splineb)}
#model-panel .sp-sw{appearance:none;-webkit-appearance:none;width:40px;height:23px;flex:0 0 auto;border-radius:999px;border:1px solid var(--splineb);background:rgba(10,7,5,0.6);position:relative;cursor:pointer;transition:all .18s ease;margin:0}
#model-panel .sp-sw::before{content:"";position:absolute;top:3px;left:4px;width:15px;height:15px;border-radius:50%;background:var(--spmut);transition:all .18s ease}
#model-panel .sp-sw:checked{background:linear-gradient(180deg,var(--spemb),var(--spemd));border-color:var(--spemd)}
#model-panel .sp-sw:checked::before{left:19px;background:#1e1206}
@media (max-width:1180px){ #model-panel .sp-clip{right:0} }
@media (max-width:860px){ #model-panel .sp-clip{left:0} #model-panel .sp-body{padding:22px 18px 40px} }

/* Hub — desktop browse sub-view inside the v4 home main column. */
#home-v4 .hub-view{padding:0}
#home-v4 .hub-view.hidden{display:none}
#home-v4 .hub-chips{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 18px}
#home-v4 .hub-chip{font-family:var(--hvmono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--hvdim);
  border:1px solid var(--hvline);border-radius:999px;padding:7px 13px;background:rgba(10,7,5,0.4);cursor:pointer;transition:all .15s ease}
#home-v4 .hub-chip:hover{color:var(--hvemb);border-color:var(--hvlineb)}
#home-v4 .hub-chip.on{color:#1e1206;background:linear-gradient(180deg,var(--hvemb),var(--hvemd));border-color:var(--hvemd)}

/* ---- Hub explore (featured world · delves · scenarios · characters) ---- */
#home-v4 .hub-sec{margin-bottom:30px}
#home-v4 .hub-sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:12px;flex-wrap:wrap}
#home-v4 .hub-sec-h h3{font-family:var(--hvdisp);font-weight:700;font-size:clamp(1.0313rem, 0.6959rem + 0.4878vw, 1.2813rem);letter-spacing:.07em;color:var(--hvink);margin:0}
#home-v4 .hub-sec-sub{font-family:var(--hvmono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hvmut)}
#home-v4 .hub-roll{margin-left:auto;font-family:var(--hvmono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#c98a3e;background:rgba(227,169,85,.05);border:1px solid rgba(227,169,85,.32);padding:7px 12px;cursor:pointer;transition:all .15s ease}
#home-v4 .hub-roll:hover{border-color:rgba(227,169,85,.6);color:#e3a955}
#home-v4 .hub-cards3{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
#home-v4 .hub-cards4{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px}
#home-v4 .hub-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:clamp(0.875rem, 0.5396rem + 0.4878vw, 1.125rem);border:1px solid rgba(227,169,85,.26);background:rgba(16,10,6,.55);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.1);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;animation:fadeUp .5s ease both}
#home-v4 .hub-card:hover{border-color:rgba(227,169,85,.7);box-shadow:inset 0 0 0 3px #0a0705,inset 0 0 0 4px rgba(227,169,85,.1),0 0 34px -12px rgba(227,169,85,.35)}
#home-v4 .hub-card.busy{opacity:.55;pointer-events:none}
#home-v4 .hub-card-genre{font-family:var(--hvmono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c98a3e}
#home-v4 .hub-card-title{font-family:var(--hvdisp);font-weight:700;font-size:clamp(1rem, 0.7484rem + 0.3659vw, 1.1875rem);letter-spacing:.04em;color:#efe4cd;line-height:1.25}
#home-v4 .hub-card-blurb{font-family:var(--hvserif);font-style:italic;font-size:clamp(0.875rem, 0.6234rem + 0.3659vw, 1.0625rem);color:#b4a68b;line-height:1.5;flex:1}
#home-v4 .hub-card-foot{font-family:var(--hvmono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#c98a3e;margin-top:4px}
#home-v4 .hub-card:hover .hub-card-foot{color:#e3a955;text-shadow:0 0 14px rgba(227,169,85,.5)}
#home-v4 .hub-char{align-items:flex-start}
#home-v4 .hub-char-ava{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(227,169,85,.45);background:rgba(227,169,85,.08);font-family:var(--hvdisp);font-weight:700;font-size:21px;color:var(--hvemb);margin-bottom:2px}
/* Hub "shape your hero" — fullscreen, one question at a time, minimalist
   (sparse creation flow): question · bare centered input · tiny hint ·
   the app's real 3D wireframe d20 (D20.draw canvas) inside a thin progress
   ring that fills one segment per answer. */
#hub-hero-screen{
  --ember-br:#e3a955; --ember-dp:#8a5f28;
  --cink:#efe4cd; --cink-dim:#b4a68b; --cink-mute:#7d715c;
  --cline:rgba(227,169,85,0.18); --cline-br:rgba(227,169,85,0.45); --cglow:rgba(227,169,85,0.28);
  /* The creation flow reads as prose — a question, then a box you write into —
     so its serif is the reading face, not the display Garamond. */
  --cserif:'Literata',Georgia,serif; --cmono:'JetBrains Mono',monospace;
  position:fixed;inset:0;z-index:200;overflow:hidden;background:#0a0705;
  display:flex;align-items:center;justify-content:center;
}
#hub-hero-screen.hidden{display:none}
#hub-hero-screen .hh-motes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#hub-hero-screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26vh;pointer-events:none;background:radial-gradient(70% 130% at 50% 108%,rgba(227,169,85,0.16),rgba(227,169,85,0.055) 45%,transparent 72%)}
html[data-reduce-motion="1"] #hub-hero-screen .hh-motes{display:none}
@media (prefers-reduced-motion: reduce){#hub-hero-screen .hh-motes{display:none}}
#hub-hero-screen .hh-wrap{position:relative}
#hub-hero-screen .hh-back{position:absolute;top:20px;left:22px;font-family:var(--cmono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cink-mute);background:none;border:none;padding:8px;cursor:pointer;transition:color .15s ease}
#hub-hero-screen .hh-back:hover{color:var(--ember-br)}
#hub-hero-screen .hh-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(560px,calc(100vw - 40px));padding:20px;text-align:center}
#hub-hero-screen .hh-wrap.hh-in{animation:hhIn .3s ease both}
@keyframes hhIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
#hub-hero-screen .hh-eyebrow{font-family:var(--cmono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--cink-mute);margin:0}
#hub-hero-screen .hh-q{font-family:var(--cserif);font-size:clamp(1.3125rem, 1.0109rem + 0.4878vw, 1.5625rem);font-weight:450;line-height:1.35;color:var(--cink);margin:2px 0 0;text-wrap:balance}
#hub-hero-screen .hh-control{width:100%}
#hub-hero-screen .hh-input{width:100%;padding:8px 4px 10px;background:none;border:none;border-bottom:1px solid var(--cline);border-radius:0;outline:none;font-family:var(--cserif);font-size:clamp(1.0625rem, 0.8109rem + 0.3659vw, 1.25rem);line-height:1.5;color:var(--cink);text-align:center;transition:border-color .18s ease}
#hub-hero-screen .hh-input::placeholder{color:var(--cink-mute);font-style:italic}
#hub-hero-screen .hh-input:focus{border-bottom-color:var(--ember-br)}
#hub-hero-screen textarea.hh-input{resize:none;line-height:1.6;font-size:clamp(0.9375rem, 0.7277rem + 0.3049vw, 1.09375rem);text-align:left}
#hub-hero-screen .hh-pills{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#hub-hero-screen .hh-pill{font-family:var(--cmono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cink-dim);padding:9px 17px;border-radius:100px;cursor:pointer;border:1px solid var(--cline);background:none;transition:all .16s ease}
#hub-hero-screen .hh-pill:hover{color:var(--ember-br);border-color:var(--cline-br)}
#hub-hero-screen .hh-pill.sel{color:#1e1206;border-color:var(--ember-dp);background:linear-gradient(180deg,var(--ember-br),var(--ember-dp))}
/* Tag step: one dropdown per category, and the running list of what the
   adventure will contain. Only one panel opens at a time, and it scrolls on
   its own so a long category never pushes the die and hint off a short screen. */
#hub-hero-screen .hh-tags{display:flex;flex-direction:column;gap:10px}
#hub-hero-screen .hh-tagbar{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
#hub-hero-screen .hh-tagcat-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--cmono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cink-dim);padding:8px 14px;border-radius:100px;cursor:pointer;border:1px solid var(--cline);background:none;transition:all .16s ease}
#hub-hero-screen .hh-tagcat-btn:hover{color:var(--ember-br);border-color:var(--cline-br)}
#hub-hero-screen .hh-tagcat-btn.open{color:var(--ember-br);border-color:var(--ember-dp);background:rgba(227,169,85,.08)}
#hub-hero-screen .hh-tagcat-btn .hh-caret{font-size:9px;transition:transform .18s ease}
#hub-hero-screen .hh-tagcat-btn.open .hh-caret{transform:rotate(180deg)}
#hub-hero-screen .hh-tagcat-n{display:none;min-width:16px;padding:1px 5px;border-radius:100px;font-size:9px;color:#1e1206;background:linear-gradient(180deg,var(--ember-br),var(--ember-dp))}
#hub-hero-screen .hh-tagcat-n.on{display:inline-block}
#hub-hero-screen .hh-tagpanel{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-height:min(34vh,260px);overflow-y:auto;padding:10px 6px;border:1px solid var(--cline);border-radius:12px;background:rgba(0,0,0,.25);animation:hhPanelIn .18s ease both}
#hub-hero-screen .hh-tagpanel[hidden]{display:none}
@keyframes hhPanelIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#hub-hero-screen .hh-tag{font-family:var(--cmono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--cink-dim);padding:6px 12px;border-radius:100px;cursor:pointer;border:1px solid var(--cline);background:none;transition:all .16s ease}
#hub-hero-screen .hh-tag:hover{color:var(--ember-br);border-color:var(--cline-br)}
#hub-hero-screen .hh-tag.sel{color:#1e1206;border-color:var(--ember-dp);background:linear-gradient(180deg,var(--ember-br),var(--ember-dp));animation:hhTagGlow 2.4s ease-in-out infinite}
#hub-hero-screen .hh-tag:disabled{cursor:default}
#hub-hero-screen .hh-tag:disabled:not(.sel){opacity:.55}
/* the "already selected" pulse — shared by panel tags and their chips */
@keyframes hhTagGlow{0%,100%{box-shadow:0 0 9px -3px rgba(227,169,85,.5)}50%{box-shadow:0 0 17px 0 rgba(227,169,85,.85)}}
#hub-hero-screen .hh-chosen{min-height:1em}
#hub-hero-screen .hh-chosen-label{font-family:var(--cmono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cink-mute);margin:0 0 7px}
#hub-hero-screen .hh-chosen-empty{font-family:var(--cmono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cink-mute);margin:0;opacity:.7}
#hub-hero-screen .hh-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#hub-hero-screen .hh-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--cmono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#1e1206;padding:6px 11px;border-radius:100px;cursor:pointer;border:1px solid var(--ember-dp);background:linear-gradient(180deg,var(--ember-br),var(--ember-dp));animation:hhTagGlow 2.4s ease-in-out infinite}
#hub-hero-screen .hh-chip-x{font-size:12px;line-height:1;opacity:.75}
#hub-hero-screen .hh-chip:hover .hh-chip-x{opacity:1}
#hub-hero-screen .hh-tags-none{font-family:var(--cmono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cink-mute);margin:0}
@media (prefers-reduced-motion:reduce){
  #hub-hero-screen .hh-tag.sel,#hub-hero-screen .hh-chip{animation:none;box-shadow:0 0 12px -3px rgba(227,169,85,.6)}
  #hub-hero-screen .hh-tagpanel{animation:none}
}
#hub-hero-screen .hh-continue{display:block;margin:14px auto 0;padding:9px 17px;border-radius:100px;cursor:pointer;border:1px solid var(--cline);background:none;color:var(--cink-dim);font-family:var(--cmono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:all .16s ease}
#hub-hero-screen .hh-continue:hover{color:var(--ember-br);border-color:var(--cline-br)}
#hub-hero-screen .hh-continue:disabled{opacity:.55;cursor:default}
#hub-hero-screen .hh-hint{font-family:var(--cmono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cink-mute);margin:0;min-height:1em}
#hub-hero-screen .hh-dicebox{position:relative;width:clamp(140px, 113.17px + 2.439vw, 160px);height:clamp(140px, 113.17px + 2.439vw, 160px);margin-top:14px}
#hub-hero-screen .hh-ring{position:absolute;inset:0;transform:rotate(-90deg)}
#hub-hero-screen .hh-ring circle{fill:none;stroke-width:1.5}
#hub-hero-screen .hh-ring-bg{stroke:var(--cline)}
#hub-hero-screen .hh-ring-fill{stroke:var(--ember-br);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1)}
#hub-hero-screen .hh-d20{position:absolute;inset:11%;width:78%;height:78%}
#model-panel .mp-locked{font-family:var(--spmono);font-size:13px;letter-spacing:0.04em;color:var(--spdim);border:1px solid var(--spline);border-radius:8px;padding:8px 12px;background:rgba(10,7,5,0.4)}
/* Models panel — context-window slider */
#model-panel .mp-slider-wrap{padding:12px 2px 8px;border-bottom:1px solid rgba(227,169,85,0.1)}
#model-panel .mp-slider-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px}
#model-panel .mp-ctxval{font-family:var(--spmono);font-size:13px;letter-spacing:0.04em;color:var(--spemb)}
#model-panel .mp-slider{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:rgba(227,169,85,0.2);outline:none;cursor:pointer;margin:0}
#model-panel .mp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:linear-gradient(180deg,var(--spemb),var(--spemd));border:1px solid var(--spemd);box-shadow:0 0 12px -3px var(--spglow);cursor:pointer}
#model-panel .mp-slider::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--spemb);border:1px solid var(--spemd);cursor:pointer}
#model-panel .mp-slider-ends{display:flex;justify-content:space-between;font-family:var(--spmono);font-size:10.5px;letter-spacing:0.06em;color:var(--spmut);margin-top:7px}

/* ============================================================================
   .eu — reusable stylized dropdown (the friends-rail presence selector look):
   a pill button + drop menu with a ✓ on the selected option. Ember-styled with
   literal colours so it works in any container. Behaviour in initEuDropdowns().
   ============================================================================ */
.eu{position:relative;display:inline-block;flex:0 0 auto}
.eu-btn{display:inline-flex;align-items:center;gap:9px;min-width:120px;background:rgba(10,7,5,0.6);
  border:1px solid rgba(227,169,85,0.28);border-radius:8px;padding:8px 12px;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.04em;color:#efe4cd;transition:border-color .15s ease}
.eu-btn:hover{border-color:rgba(227,169,85,0.5)}
.eu-btn .eu-lbl{flex:1;text-align:left;white-space:nowrap}
.eu-btn .eu-car{width:10px;height:10px;flex:0 0 auto;opacity:0.6;transition:transform .18s ease}
.eu.open .eu-btn{border-color:rgba(227,169,85,0.5)}
.eu.open .eu-btn .eu-car{transform:rotate(180deg)}
.eu-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;z-index:200;padding:5px;border-radius:10px;
  border:1px solid rgba(227,169,85,0.45);background:rgba(16,10,6,0.98);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  box-shadow:0 20px 44px -20px rgba(0,0,0,0.95),0 0 30px -18px rgba(227,169,85,0.28);
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:all .16s ease}
.eu.open .eu-menu{opacity:1;visibility:visible;transform:none}
.eu-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;border-radius:7px;background:none;
  cursor:pointer;text-align:left;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:0.04em;color:#b4a68b;white-space:nowrap;transition:background .13s ease,color .13s ease}
.eu-menu button:hover{background:rgba(227,169,85,0.1);color:#efe4cd}
.eu-menu button.sel{color:#efe4cd}
.eu-menu button.sel::after{content:"✓";margin-left:auto;padding-left:14px;color:#e3a955;font-size:12px}
/* Settings panel: stylized dropdowns sit at the right of each row */
#set-panel .set-pick{flex:0 0 auto}
#set-panel .sp-row .eu-btn{min-width:132px}
/* Settings TTS sliders — match the app's ember slider look */
#set-panel input[type="range"]{-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;background:rgba(227,169,85,0.2);outline:none;cursor:pointer;margin:0}
#set-panel input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;background:linear-gradient(180deg,var(--spemb),var(--spemd));border:1px solid var(--spemd);box-shadow:0 0 12px -3px var(--spglow);cursor:pointer}
#set-panel input[type="range"]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;background:var(--spemb);border:1px solid var(--spemd);cursor:pointer}
/* Settings — Reading typography sliders */
#set-panel .sp-slider{padding:11px 2px;border-bottom:1px solid rgba(227,169,85,0.1)}
#set-panel .sp-slider-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
#set-panel .sp-sval{font-family:var(--spmono);font-size:13px;letter-spacing:0.04em;color:var(--spemb)}
#set-panel .set-range{width:100%}
/* Models panel — sampling sub-header */
#model-panel .mp-subh{font-family:var(--spmono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--spem);margin:16px 0 4px;padding-top:12px;border-top:1px solid var(--spline)}


/* ============================================================================
   Adventure screen — exact match to adventure-paste.html. Scoped to
   #app-view.adv2. Lich omitted; Ledger is a static placeholder; the Memory
   panel keeps its original markup. Gameplay controls wire to the real backend.
   ========================================================================== */
#app-view.adv2{--bg:#0a0705;--ink:#efe4cd;--ink-soft:#e6dabf;--ink-mute:#b4a68b;--ink-dim:#7d715c;--ember:#e3a955;--ember-dk:#c98a3e;--ember-deep:#8a5f28;--line:rgba(227,169,85,0.22);--line-br:rgba(227,169,85,0.4);--serif:'Cormorant Garamond',Georgia,serif;--disp:'Cinzel',Georgia,serif;--mono:'JetBrains Mono',monospace;
  /* inset:0 alone sizes this to the EXACT visible viewport. An explicit
     height:100vh/100dvh can compute LARGER than that (fractional display
     scaling / zoom), which pushed the command bar off the bottom — so we let
     inset drive the height (auto) and beat the .app class's height. */
  position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column;height:auto;background:var(--bg);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased}
/* Ember-tinted scrollbar for the Tale/Ledger. Firefox uses scrollbar-color
   (without it, FF falls back to the blue system scrollbar). */
.adv2 #story-log,.adv2 .ledger{scrollbar-width:thin;scrollbar-color:var(--ember-deep) transparent}
.adv2 #story-log::-webkit-scrollbar,.adv2 .ledger::-webkit-scrollbar{width:8px}
.adv2 #story-log::-webkit-scrollbar-track,.adv2 .ledger::-webkit-scrollbar-track{background:transparent}
.adv2 #story-log::-webkit-scrollbar-thumb,.adv2 .ledger::-webkit-scrollbar-thumb{background:var(--ember-deep);border-radius:4px}
.adv2 #story-log::-webkit-scrollbar-thumb:hover,.adv2 .ledger::-webkit-scrollbar-thumb:hover{background:var(--ember-dk)}
.adv2 textarea::placeholder{color:var(--ink-dim);font-style:italic;font-family:var(--serif)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes emberUp{0%{transform:translateY(0);opacity:0}10%{opacity:.75}85%{opacity:.4}100%{transform:translateY(-86vh);opacity:0}}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes quillBlink{0%,100%{opacity:.35}50%{opacity:1}}
.adv2 .bgfx{position:absolute;inset:0;background:linear-gradient(180deg,#0a0705 0%,#150d06 62%,#1d1108 100%)}
.adv2 .hearth{position:absolute;left:-10%;bottom:-16%;width:60%;height:80%;background:radial-gradient(circle at 38% 84%,rgba(227,169,85,.12),transparent 60%);animation:breathe 5.5s ease-in-out infinite;pointer-events:none}
.adv2 .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle 130vmax at 50% 45%,transparent 55%,rgba(8,5,3,.55) 100%)}
.adv2 .scan{position:absolute;inset:0;z-index:80;pointer-events:none;opacity:.3;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px)}
.adv2 .ember{position:absolute;bottom:-8px;border-radius:50%;opacity:0;pointer-events:none;animation:emberUp linear infinite}
@media (prefers-reduced-motion: reduce){.adv2 .ember{display:none}.adv2 .hearth{animation:none}}
.adv2 .chrome{position:relative;z-index:5;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.adv2 .topbar{display:flex;align-items:center;gap:var(--sp-2);height:clamp(46px, 34px + 1.25vw, 58px);flex:0 0 auto;padding:0 var(--sp-2);border-bottom:1px solid var(--line);background:#0c0805}
.adv2 #adv-settings-top{display:none}   /* desktop: settings stays in the command bar */
.adv2 .iconbtn{display:grid;place-items:center;border:1px solid var(--line);background:none;cursor:pointer;color:var(--ink-dim);transition:border-color .15s,color .15s}
.adv2 .iconbtn.round{width:36px;height:36px;border-radius:50%}
.adv2 .iconbtn.sq{width:42px;height:42px;border-radius:9px}
.adv2 .iconbtn:hover{border-color:rgba(227,169,85,.5);color:var(--ember)}
.adv2 .chipbtn{display:inline-flex;align-items:center;gap:9px;padding:var(--sp-1) var(--sp-2);border:1px solid var(--line);border-radius:9px;background:none;cursor:pointer;color:var(--ink-mute);font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.18em;text-transform:uppercase;transition:border-color .15s,color .15s}
.adv2 .chipbtn:hover{border-color:rgba(227,169,85,.5);color:var(--ember)}
.adv2 .mid{flex:1;display:flex;min-height:0}
.adv2 .chron-col{width:240px;flex:0 0 auto;position:relative}
/* Tale margins here (not inline) so the adaptive tiers below can reclaim the
   lich's 220px reserved ground when the screen can't afford it. */
.adv2 .tale-panel{margin:var(--sp-1) 6px var(--sp-1) 220px}
.adv2 #story-log{padding:var(--sp-3) var(--sp-4) var(--sp-3)}
/* The lich as a background figure — locked position/size, z-index:-1 so it sits
   behind all the UI (shows through the semi-transparent Tale panel, hidden under
   the opaque bars). Edges feathered with a radial mask (no hard silhouette). */
/* Sized in vh so the lich keeps the SAME proportions on every screen (it's a
   256x256 square; 82vh ≈ 772px at a ~940px-tall viewport, matching the tuned look). */
.adv2 .chron-col .lich-scribe{position:absolute;left:-141px;top:-79px;width:772px;max-width:none;
  object-fit:contain;opacity:.95;pointer-events:none;filter:brightness(1.18);z-index:-1;
  -webkit-mask-image:radial-gradient(ellipse 84% 94% at 50% 44%,#000 58%,transparent 92%);
  mask-image:radial-gradient(ellipse 84% 94% at 50% 44%,#000 58%,transparent 92%)}
/* No outer drop shadow — it was casting a dark band down into the 16px gap
   above the command bar (stopping at the panel's left edge, ~330px in, so it
   read as a line). Keep only the two inset frame terms. */
.adv2 .panel{position:relative;background:rgba(16,10,6,.5);border:1px solid rgba(227,169,85,.28);box-shadow:inset 0 0 0 4px var(--bg),inset 0 0 0 5px rgba(227,169,85,.13)}
.adv2 .pip{position:absolute;width:8px;height:8px;transform:rotate(45deg);background:var(--bg);border:1px solid rgba(227,169,85,.6);z-index:2}
.adv2 .panel-h{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) var(--sp-3);border-bottom:1px solid var(--line);flex:0 0 auto}
.adv2 .panel-h .t{font-family:var(--disp);font-weight:700;font-size:var(--fs-panel-t);letter-spacing:.3em;color:var(--ember-dk)}
.adv2 .panel-h .rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(227,169,85,.35),transparent)}
.adv2 .panel-h .meta{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase}
.adv2 .story-body{flex:1;display:flex;min-height:0}
/* Real story entries, styled to read like the paste's prose */
.adv2 #story-log .turn{max-width:65ch;margin-left:auto;margin-right:auto;animation:fadeUp .5s ease both}
/* #story-log is .talelog here (not .story-log), so the Reading settings' vars
   must be applied explicitly or the font/spacing pickers do nothing in adv2. */
.adv2 #story-log .turn.assistant{color:var(--ink-soft);font-size:var(--fs-story);line-height:var(--read-line,1.9);font-family:var(--read-font,'Literata',Georgia,serif);font-weight:var(--read-weight,430);letter-spacing:.004em}
.adv2 #story-log .narr{margin:0 0 var(--read-para,28px);font-size:var(--fs-story);line-height:var(--read-line,1.9);color:var(--ink-soft);text-wrap:pretty}
.adv2 #story-log .narr .spk{color:var(--ember-dk);font-weight:600}
/* Calm ground behind the prose: the ember motes/lich stay in the margins,
   not under the saccade path. */
.adv2 #story-log{position:relative;z-index:1;background:rgba(10,7,5,.82)}
.adv2 #story-log .turn.assistant.formatted:first-child .narr:first-child::first-letter{float:left;font-family:var(--disp);font-weight:700;font-size:calc(var(--fs-story)*2.7);line-height:.82;color:var(--ember);margin:7px 12px 0 0;text-shadow:0 2px 22px rgba(227,169,85,.35)}
.adv2 #story-log .quote{color:var(--ink)}
.adv2 #story-log .dia{margin:0 0 20px;padding:3px 0 3px 18px;border-left:2px solid rgba(227,169,85,.55)}
.adv2 #story-log .dia-name{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember-dk);margin-bottom:3px}
.adv2 #story-log .dia-line{font-size:var(--fs-story-lg);line-height:1.7;color:var(--ink)}
.adv2 #story-log .turn.user{display:flex;align-items:baseline;gap:12px;margin:26px 0 22px;font-size:var(--fs-story);font-style:italic;color:var(--ember);line-height:1.6;white-space:normal}
.adv2 #story-log .turn.user[data-tag]::before{content:attr(data-tag);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#1e1206;background:linear-gradient(180deg,var(--ember),var(--ember-dk));border-radius:5px;padding:3px 7px;flex:0 0 auto;transform:translateY(-2px);font-style:normal}
/* Story is the director mode — it hands the player narrative control and bypasses
   the dice, so it wears an arcane violet instead of the ember of the other modes. */
.adv2 #story-log .turn.user[data-tag="STORY"]::before{background:linear-gradient(180deg,#c58bd6,#8a5f9e);color:#190a1f}
/* Ask Lichy: an aside in the margin of the tale. It is deliberately NOT book
   prose — it is set apart, in Lichy's violet rather than the story's ember, so
   a reader scanning back can see at a glance that nothing here happened. */
.adv2 #story-log .turn.aside{margin:24px 0;padding:14px 16px;border-left:2px solid rgba(197,139,214,.55);background:rgba(197,139,214,.06);border-radius:0 8px 8px 0}
.adv2 #story-log .turn.aside .aside-q{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-size:calc(var(--fs-story)*.92);font-style:italic;color:#d8b6e6;line-height:1.6}
.adv2 #story-log .turn.aside .aside-chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#190a1f;background:linear-gradient(180deg,#c58bd6,#8a5f9e);border-radius:5px;padding:3px 7px;flex:0 0 auto;transform:translateY(-2px);font-style:normal}
.adv2 #story-log .turn.aside .aside-a{color:var(--ink);font-size:calc(var(--fs-story)*.96)}
.adv2 #story-log .turn.aside .aside-a .narr:last-child{margin-bottom:0}
.adv2 #story-log .turn.continue-turn{text-align:center;color:var(--ink-dim);font-style:italic;font-size:calc(var(--fs-story)*.78);margin:18px auto}
.adv2 #story-log .turn.error{color:#ff9a8a}
.adv2 #story-log .empty{color:var(--ink-dim);text-align:center;font-style:italic;margin-top:40px}
/* Ledger */
.adv2 .led-sec{padding:16px 18px;border-bottom:1px solid rgba(227,169,85,.14)}
.adv2 .led-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px}
.adv2 .led-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.adv2 .led-row:last-child{margin-bottom:0}
/* Ledger party: the status dot reads as a small light (soft glow of its own
   color), one row per member, stats behind the caret. */
.adv2 #ledger-panel .status-dot{width:10px;height:10px;position:relative;box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.adv2 #ledger-panel .status-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:inherit;opacity:.4;filter:blur(4px);z-index:-1}
.adv2 .led-caret{flex:0 0 auto;font-size:11px;color:var(--ink-dim)}
.adv2 .led-member{border-top:1px solid rgba(227,169,85,.08);padding:9px 0}
.adv2 .led-member:first-child{border-top:none;padding-top:2px}
.adv2 .led-member:last-child{padding-bottom:0}
.adv2 .led-member-head{display:flex;align-items:center;gap:9px;cursor:pointer}
.adv2 .led-member-head .nm{flex:1;min-width:0;font-size:16px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adv2 .led-member-head .st{flex:0 0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.adv2 .dot{width:5px;height:5px;transform:rotate(45deg);flex:0 0 auto}
.adv2 .vit{width:9px;height:9px;transform:rotate(45deg)}
.adv2 .vit.on{background:var(--ember);box-shadow:0 0 7px rgba(227,169,85,.5)}
.adv2 .vit.dim{background:var(--ember-dk);box-shadow:0 0 7px rgba(227,169,85,.4)}
.adv2 .vit.off{border:1px solid rgba(227,169,85,.4)}
/* Command bar */
/* Solid background instead of blur-over-translucent (the backdrop-filter seam
   was the secondary contributor to the band above the bar). */
/* Wraps on any width so nothing is ever clipped; when the input can't fit on the
   button row it drops to a full-width row BELOW the buttons. */
.adv2 .cmdbar{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);min-height:clamp(58px, 26px + 3.4vw, 94px);border-top:1px solid var(--line);background:#0c0805}
.adv2 .cmd-divider{width:1px;height:38px;background:rgba(227,169,85,.18);margin:0 3px;flex:0 0 auto}
/* Mode buttons wear the same filled, gilded look as the Continue button. */
.adv2 .mode{flex:0 0 auto;height:auto;min-width:0;padding:var(--sp-2) calc(var(--sp-2)*1.2);border:1px solid var(--ember-deep);border-radius:9px;cursor:pointer;font-family:var(--mono);font-size:var(--fs-ui);letter-spacing:.18em;text-transform:uppercase;color:#1e1206;background:linear-gradient(180deg,var(--ember),var(--ember-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 22px -8px rgba(227,169,85,.28);transition:box-shadow .15s,transform .15s}
.adv2 .mode:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 30px -8px rgba(227,169,85,.5);transform:translateY(-1px)}
.adv2 .mode:disabled{opacity:.5;cursor:not-allowed}
/* Story: the same filled button, but its arcane violet — it hands the player
   narrative control and bypasses the dice, so it stays visually distinct. */
.adv2 .mode[data-mode="story"]{color:#190a1f;border-color:#6d4a7a;background:linear-gradient(180deg,#cd97dc,#7d5490);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 22px -8px rgba(197,139,214,.3)}
.adv2 .mode[data-mode="story"]:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 30px -8px rgba(197,139,214,.55);transform:translateY(-1px)}
.adv2 .gold{flex:0 0 auto;padding:14px 24px;border:1px solid var(--ember-deep);border-radius:9px;cursor:pointer;font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#1e1206;background:linear-gradient(180deg,var(--ember),var(--ember-deep));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 22px -8px rgba(227,169,85,.28);transition:box-shadow .15s,transform .15s}
.adv2 .gold:hover:not(:disabled){box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 30px -8px rgba(227,169,85,.5);transform:translateY(-1px)}
.adv2 .gold:disabled{opacity:.5;cursor:not-allowed}
.adv2 .dice{flex:0 0 auto;width:auto;height:auto;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 18px 6px;border:1px solid var(--line-br);border-radius:10px;cursor:pointer;background:rgba(227,169,85,.04);transition:border-color .15s,box-shadow .15s}
.adv2 .dice:hover:not(:disabled){border-color:rgba(227,169,85,.7);box-shadow:0 0 26px -8px rgba(227,169,85,.5)}
.adv2 .dice:disabled{opacity:.5;cursor:not-allowed}
.adv2 .dice.required,.adv2 #roll-btn.required{border-color:var(--ember);box-shadow:0 0 26px -6px rgba(227,169,85,.6)}
.adv2 #roll-btn{width:auto;height:auto;min-width:0}
.adv2 #roll-btn .dice-icon{width:38px;height:38px}
/* The composer reads back in the same face as the narration above it. It used
   to be italic Cormorant, which is lovely in a heading and punishing in a
   sentence you are still writing; only the placeholder stays italic now. */
.adv2 #input-box{flex:1 1 300px;min-width:200px;height:68px;padding:11px 14px;background:rgba(10,7,5,.6);border:1px solid var(--line);border-radius:9px;color:var(--ink);font-family:var(--read-font,'Literata',Georgia,serif);font-size:18.5px;line-height:1.55;resize:none;outline:none;max-width:none;margin:0;max-height:none;min-height:0}
.adv2 #input-box::placeholder{font-style:italic;opacity:.75}
.adv2 #input-box:focus{border-color:rgba(227,169,85,.55);box-shadow:0 0 26px -10px rgba(227,169,85,.45)}
.adv2 #input-box:disabled{opacity:.55}
/* roll banners float above the bar */
.adv2 .roll-required{position:absolute;left:50%;bottom:102px;transform:translateX(-50%);z-index:60;margin:0}
/* Chronicler nameplate */
/* bottom:16px matches the Tale panel's 16px bottom margin, so the banner's
   bottom edge lines up with the Tale window's bottom at any screen height. */
.adv2 .nameplate{position:absolute;left:85px;bottom:16px;top:auto;width:262px;right:auto;padding:18px 16px 17px;text-align:center;background:#140d07;border:1px solid var(--line-br)}
.adv2 .np-pip{position:absolute;width:7px;height:7px;transform:rotate(45deg);background:var(--bg);border:1px solid rgba(227,169,85,.55)}
/* Memory panel — reskin only; structure untouched */
.adv2 .memory-panel{background:rgba(14,9,5,.97);border-right:1px solid rgba(227,169,85,.45);z-index:75;box-shadow:30px 0 80px -30px rgba(0,0,0,.9)}
.adv2 .memory-header h2{color:var(--ember);font-family:var(--disp);letter-spacing:.28em}
/* Toast */
.adv2 .adv-toast{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);z-index:70;padding:11px 20px;background:rgba(20,13,7,.97);border:1px solid rgba(227,169,85,.5);box-shadow:0 20px 50px -18px rgba(0,0,0,.9),0 0 34px -14px rgba(227,169,85,.4);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ember);white-space:nowrap;animation:fadeUp .25s ease both}
.adv2 .adv-toast[hidden]{display:none}
/* The Memory drawer sits off-screen left (translateX(-100%)) when closed, but
   its box-shadow projects rightward onto the visible screen's left edge — that
   near-black shadow was the persistent "shadowy line". Cast it only when open. */
.adv2 .memory-panel { box-shadow:none; }
html[data-mdrawer="memory"] #app-view.adv2 .memory-panel { box-shadow:30px 0 80px -30px rgba(0,0,0,.9); }
/* ===== Fate Check overlay — 3D d20 roll (ember palette) ===================== */
#fateCheck {
  position: fixed; inset: 0; z-index: 90;
  display: none; /* JS sets display:flex when rolling */
  flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer;
  background: radial-gradient(circle 58vmax at 50% 46%, rgba(16,10,6,.9), rgba(5,3,2,.97));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fateIn .22s ease both;
}
@keyframes fateIn { from { opacity: 0 } to { opacity: 1 } }
#fateCheck .fate-title-row { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
#fateCheck .fate-title-row .rule-l { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, rgba(227,169,85,.55)); }
#fateCheck .fate-title-row .rule-r { width: 56px; height: 1px; background: linear-gradient(270deg, transparent, rgba(227,169,85,.55)); }
#fateCheck .fate-title {
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(0.9375rem, 0.6021rem + 0.4878vw, 1.1875rem);
  letter-spacing: .32em; color: #e3a955; text-shadow: 0 0 20px rgba(227,169,85,.4);
}
#fateCheck .fate-dc {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; color: #7d715c;
}
#fateCheck .fate-stage { position: relative; width: 340px; height: 340px; display: grid; place-items: center; }
#fateDie { position: absolute; inset: 0; filter: drop-shadow(0 0 18px rgba(227,169,85,.35)); }
#fateNum {
  position: relative; display: none;
  font-family: 'Cinzel', Georgia, serif; font-weight: 800; font-size: clamp(4.0625rem, 2.3018rem + 2.561vw, 5.375rem); color: #efe4cd;
  text-shadow: 0 0 36px rgba(227,169,85,.9), 0 0 8px rgba(227,169,85,.7);
}
#fateVerdict {
  display: none;
  font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: clamp(1.3125rem, 0.7256rem + 0.8537vw, 1.75rem);
  letter-spacing: .24em; text-shadow: 0 0 24px rgba(227,169,85,.35);
}
#fateMath {
  display: none; margin-top: 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .18em; color: #b4a68b;
}
#fateStatus {
  display: none; margin-top: 26px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: #7d715c;
  animation: fateBreathe 1.6s ease-in-out infinite;
}
@keyframes fateBreathe { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }
#fateCheck .pop { animation: fatePop .4s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes fatePop {
  0% { opacity: 0; transform: scale(.4) }
  60% { opacity: 1; transform: scale(1.18) }
  100% { opacity: 1; transform: scale(1) }
}
/* Roll-result card in the tale log — spinning die + verdict */
.adv2 .turn.user.roll { background: none; border: none; padding: 0; }
.adv2 .roll-card {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 14px; background: #140d07;
  border: 1px solid rgba(227,169,85,.28); border-radius: 2px;
}
.adv2 .roll-card canvas { flex: 0 0 auto; }
.adv2 .roll-card .rc-line { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; color: var(--ink-mute); }
.adv2 .roll-card .rc-verdict { font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: .18em; margin-top: 3px; }
.adv2 .turn.user.roll .rc-action { margin-top: 8px; color: var(--ink-soft); font-family: var(--serif); font-size: 18px; line-height: 1.5; }
/* ===== Adaptive tiers ==========================================
   ≤1520px: the lich decor column + the tale's 220px reserved margin stop
   earning their ~460px — reclaim it all for the story. (Handhelds like the
   GPD Win Max 2 land at 1280×800 CSS px: wide enough to miss every phone
   breakpoint, far too narrow to donate a third of itself to decoration.)
   ≤900px: the ledger folds. ≤700px: the phone layout below.
   max-height 860px: compact chrome — short/wide screens need their pixels
   for the story, not for bar padding. */
@media (max-width:1520px){
  .adv2 .chron-col{display:none}
  .adv2 .tale-panel{margin:var(--sp-1) 6px var(--sp-1) var(--sp-1)}
}
@media (max-height:860px){
  /* Height-specific compaction only — SIZES are handled by the fluid tokens. */
  .adv2 .topbar{height:46px}
  .adv2 .tale-panel{margin-top:8px !important;margin-bottom:8px !important}
  .adv2 .ledger{margin-top:8px !important;margin-bottom:8px !important}
  .adv2 .cmdbar{min-height:56px}
  .adv2 #story-log .turn.assistant,.adv2 #story-log .narr{line-height:var(--read-line,1.9)}
}
@media (max-width:900px){
  .adv2 .ledger{display:none}
  .adv2 .cmdbar{padding:10px 12px;gap:8px}
  .adv2 #input-box{flex:1 1 100%;min-width:0}
}
/* ===== Phone (≤700px): the shared adventure view BECOMES the native iOS layout
   from Adventure-screen-ios — full-bleed story, compact header, app-style command
   bar — while reusing 100% of the existing turn/streaming/roll/TTS/memory logic. */
@media (max-width:700px){
  .adv2 .mid{padding:0}
  /* One header only: keep the themed .topbar (Memory/Party + title, matches the
     iOS design) and drop the old crude #mobile-bar that duplicated it, plus the
     "THE TALE" sub-banner — the story goes straight under the header. */
  .adv2 #mobile-bar{display:none !important}
  .adv2 .tale-panel .panel-h{display:none}
  /* Full-bleed story: the lich column is already hidden at this width, so drop its
     220px margin and the panel chrome for an app-native feel. */
  .adv2 .tale-panel{margin:0 !important;border:none !important;box-shadow:none !important;background:transparent !important;border-radius:0}
  .adv2 .tale-panel .pip{display:none}
  .adv2 #story-log{padding:16px 18px 24px !important}
  /* Compact, icon-first top bar. */
  .adv2 .topbar{padding:8px 10px;gap:7px;min-height:52px}
  .adv2 .tb-title{font-size:15px !important;letter-spacing:.1em !important;max-width:44vw !important}
  .adv2 #adv-act-chip,.adv2 .ctx-wrap{display:none}   /* free the ~100px meter takes */
  /* Uniform 34px round icon buttons across the whole banner (back/memory/party/settings). */
  .adv2 .topbar .chipbtn span{display:none}
  .adv2 .topbar .chipbtn{padding:0;width:34px;height:34px;border-radius:50%;justify-content:center;flex:0 0 auto}
  .adv2 .topbar .iconbtn.round{width:34px;height:34px;flex:0 0 auto}
  .adv2 #adv-settings-top{display:inline-flex}   /* Settings gear, mobile-only, in the banner */
  /* Command bar in two fixed rows on every phone:
     ROW 1 — the primary buttons (Continue · Action · Talk · View · Story), gilded
             EXACTLY like the PC version (colours/design inherited; only re-sized).
     ROW 2 — the writing bar fills the width with the Roll button on the right.
     A zero-height 100%-basis pseudo forces the break so the split never collapses,
     whatever the device width. 16px input font stops iOS Safari auto-zoom on focus;
     env() clears the home indicator. */
  .adv2 .cmdbar{padding:9px 11px calc(10px + env(safe-area-inset-bottom));gap:6px;align-content:flex-start}
  .adv2 .cmdbar .cmd-divider{display:none}
  /* Credits/price-tag button removed on phones; Settings lives in the top banner. */
  .adv2 #app-cost-btn{display:none}
  .adv2 .cmdbar #adv-settings-btn{display:none}
  /* Row 1: Continue + the 4 modes, all on ONE row next to each other — they share
     the width and shrink to fit, so nothing wraps. Text 2px smaller. PC colours kept. */
  .adv2 #continue-btn{order:1;flex:1 1 0;min-width:0;padding:11px 5px;font-size:11px;letter-spacing:.06em}
  .adv2 .cmdbar .mode{order:2;flex:1 1 0;min-width:0;padding:11px 4px;font-size:11px;letter-spacing:.06em}
  /* Row 2: writing bar fills, Roll on the right. */
  .adv2 .cmdbar::after{content:"";order:5;flex:0 0 100%;height:0;margin:0;padding:0}
  .adv2 #input-box{order:6;flex:1 1 auto;min-width:0;font-size:18px;min-height:50px}
  .adv2 #roll-btn{order:7;flex:0 0 auto}
}

/* ===== Drawing Board — real-time collaborative admin docs ===== */
#board-screen { position: fixed; inset: 0; z-index: 132; display: flex; flex-direction: column; background: #0a0705; color: #efe4cd; font-family: 'Cormorant Garamond', Georgia, serif; }
#board-screen.hidden { display: none; }
.brd-top { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; height: 56px; padding: 0 20px; border-bottom: 1px solid rgba(227,169,85,.18); background: rgba(12,8,5,.7); }
.brd-flex { flex: 1; }
.brd-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(227,169,85,.3); border-radius: 8px; background: rgba(227,169,85,.05); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c98a3e; }
.brd-back:hover { border-color: rgba(227,169,85,.6); color: #e3a955; }
.brd-crumb { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #7d715c; }
.brd-presence { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brd-who { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px; border: 1px solid rgba(227,169,85,.2); border-radius: 999px; background: rgba(255,255,255,.02); }
.brd-who-av { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #100a05; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 13px; }
.brd-who-nm { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16.5px; color: #ddcfae; white-space: nowrap; }
/* Active-writer nameplates */
.brd-writers { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 30px; min-height: 34px; border-bottom: 1px solid rgba(227,169,85,.1); background: rgba(12,8,5,.4); }
.brd-writers.hidden { display: none; }
.brd-plate { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border: 1px solid rgba(227,169,85,.18); border-radius: 999px; background: rgba(255,255,255,.02); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 16px; color: #b4a68b; animation: brdPlateIn .18s ease both; }
.brd-plate b { font-weight: 700; font-style: normal; }
.brd-plate-x { font-style: italic; }
.brd-plate-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; animation: brdPulse 1.1s ease-in-out infinite; }
@keyframes brdPulse { 0%, 100% { opacity: .4; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes brdPlateIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.brd-body { flex: 1; min-height: 0; display: flex; }
.brd-rail { width: 250px; flex: 0 0 auto; display: flex; flex-direction: column; border-right: 1px solid rgba(227,169,85,.18); background: rgba(12,8,5,.5); }
.brd-new { margin: 14px; padding: 10px; border: 1px solid #8a5f28; border-radius: 9px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #1e1206; background: linear-gradient(180deg,#e3a955,#8a5f28); }
.brd-new:hover { filter: brightness(1.06); }
.brd-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: #8a5f28 transparent; }
.brd-item { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 10px 12px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; color: #ddcfae; }
.brd-item:hover { background: rgba(227,169,85,.05); }
.brd-item.on { border-color: rgba(227,169,85,.4); background: rgba(227,169,85,.08); }
.brd-item-t { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 16px; color: #efe4cd; }
.brd-item-m { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #7d715c; }
.brd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.brd-empty { margin: auto; max-width: 400px; text-align: center; font-style: italic; font-size: 19px; line-height: 1.5; color: #7d715c; padding: 24px; }
.brd-doc { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.brd-doc.hidden { display: none; }
.brd-dochead { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 14px 24px; border-bottom: 1px solid rgba(227,169,85,.14); }
.brd-title { flex: 0 1 auto; min-width: 200px; background: none; border: 1px solid transparent; border-radius: 7px; padding: 6px 8px; color: #efe4cd; font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; outline: none; }
.brd-title:hover { border-color: rgba(227,169,85,.2); }
.brd-title:focus { border-color: rgba(227,169,85,.5); background: rgba(10,7,5,.6); }
.brd-status { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #7d715c; }
.brd-del { width: 30px; height: 30px; border: 1px solid rgba(227,169,85,.25); border-radius: 7px; background: none; cursor: pointer; color: #7d715c; font-size: 14px; }
.brd-del:hover { border-color: #c95545; color: #c95545; }
.brd-editor { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; border: none; outline: none; padding: 24px 30px 40px; background: #0a0705; color: #ddcfae; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 16.5px; line-height: 1.7; scrollbar-width: thin; scrollbar-color: #8a5f28 transparent; }
.brd-editor::placeholder { color: #7d715c; font-style: italic; }
.brd-editor:disabled { opacity: .55; }
.brd-list::-webkit-scrollbar,.brd-editor::-webkit-scrollbar { width: 8px; }
.brd-list::-webkit-scrollbar-thumb,.brd-editor::-webkit-scrollbar-thumb { background: #8a5f28; border-radius: 4px; }
.brd-list::-webkit-scrollbar-track,.brd-editor::-webkit-scrollbar-track { background: transparent; }

/* ===== Knowledge-graph visualizer ===== */
.graph-btn { margin-top: 6px; }
.graph-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); display: flex; flex-direction: column;
}
.graph-overlay[hidden] { display: none; }
.graph-top {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  background: var(--panel); color: var(--text);
}
.graph-title { font-weight: 600; font-size: 17px; white-space: nowrap; }
.graph-legend {
  display: flex; gap: 14px; flex-wrap: wrap; margin-right: auto;
  font-size: 14px; color: var(--text-dim);
}
.graph-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.graph-legend .dot { width: 10px; height: 10px; border-radius: 50%; }
.graph-refresh, .graph-close {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-dim); width: 30px; height: 30px; border-radius: 7px;
  cursor: pointer; font-size: 17px; line-height: 1; flex: none;
}
.graph-refresh:hover, .graph-close:hover { background: var(--border); color: var(--text); }
#graph-canvas { flex: 1; width: 100%; display: block; cursor: grab; touch-action: none; }
.graph-tip {
  position: fixed; z-index: 210; pointer-events: none;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 11px; max-width: 260px; font-size: 14.5px; line-height: 1.4;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.graph-tip .tp-name { font-weight: 600; }
.graph-tip .tp-type { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-top: 1px; }
.graph-tip .tp-desc { margin-top: 5px; color: var(--text-dim); }
.graph-empty {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  color: var(--text-faint); font-size: 17px; text-align: center;
  max-width: 340px; line-height: 1.5; pointer-events: none;
}


/* ===== Memory panel: Instructions block · Files / Story Cards / Graph areas · edge arrow ===== */
.memory-panel { transition: transform .25s ease, width .28s ease; }
.memory-panel.expanded { width: 100vw !important; max-width: 100vw; }
.mem-instr { border-bottom: 1px solid var(--border-strong); }
.mem-instr-head {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 18px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600;
}
.mem-instr-head .caret { display: inline-block; transition: transform .15s ease; width: 12px; }
.mem-instr-head.collapsed .caret { transform: rotate(-90deg); }
.mem-instr-head .name { flex: 1; }
.mem-instr-head .count { font-size: 11px; color: var(--text-faint); letter-spacing: .06em; text-transform: none; }
.mem-instr-body { padding: 0 0 6px 0; }
.mem-tabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border-strong); }
.mem-tab {
  flex: 1; padding: 7px 4px; background: var(--panel-3); color: var(--text-faint);
  border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer;
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mem-tab:hover { color: var(--text); }
.mem-tab.active { color: var(--accent); border-color: var(--accent); background: var(--panel); }
.mem-area { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.mem-area[hidden] { display: none; }
#mem-area-files .memory-list { flex: 1; min-height: 0; }
.mem-area-graph { position: relative; }
.graph-snap { flex: 1; min-height: 0; position: relative; background: #100b06; }
.mem-expand {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 18px; height: 64px; padding: 0; border: 1px solid var(--border-strong); border-right: 0;
  border-radius: 8px 0 0 8px; background: var(--panel-3); color: var(--accent); cursor: pointer;
  font-size: 20px; line-height: 1; opacity: .8; transition: opacity .15s ease, background .15s ease;
}
.mem-expand:hover { opacity: 1; background: var(--panel); }
.adv2 .mem-expand { border-color: rgba(227,169,85,.45); background: rgba(20,13,7,.95); color: var(--ember, #e3a955); }
.adv2 .mem-tab.active { color: var(--ember, #e3a955); border-color: rgba(227,169,85,.7); }
.adv2 .mem-instr-head { color: var(--ember, #e3a955); }

/* Story cards — little square cards, ember art style, flip on click */
.cards-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0 12px; }
.cards-chip {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: none;
  color: var(--text-faint); cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
}
.cards-chip.on { color: var(--ember, #e3a955); border-color: rgba(227,169,85,.7); }
.cards-grid {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; padding: 12px;
}
.memory-panel.expanded .cards-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 20px; }
.scard {
  aspect-ratio: 1 / 1; perspective: 900px; cursor: pointer; outline: none;
  animation: scardIn .45s ease both; animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes scardIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.scard-inner { position: relative; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.scard.flipped .scard-inner { transform: rotateY(180deg); }
.scard-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px;
  border: 1px solid rgba(227,169,85,.32); background: rgba(16,10,6,.72);
  box-shadow: inset 0 0 0 3px #0a0705, inset 0 0 0 4px rgba(227,169,85,.12);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.scard:hover .scard-face, .scard:focus-visible .scard-face {
  border-color: rgba(227,169,85,.75);
  box-shadow: inset 0 0 0 3px #0a0705, inset 0 0 0 4px rgba(227,169,85,.12), 0 10px 30px -14px rgba(227,169,85,.55);
}
.scard:hover .scard-inner:not(.x) { }
.scard:hover { transform: translateY(-3px); transition: transform .15s ease; }
.scard-back { transform: rotateY(180deg); justify-content: flex-start; text-align: left; align-items: flex-start; overflow: hidden; }
.scard-aspect { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #c98a3e; }
.scard-glyph { font-size: 30px; line-height: 1; color: var(--ember, #e3a955); text-shadow: 0 0 18px rgba(227,169,85,.45); }
.scard-name { font-family: Cinzel, 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 12.5px; letter-spacing: .04em; color: #efe4cd; text-align: center; line-height: 1.2; word-break: break-word; }
.scard-name.small { font-size: 11.5px; text-align: left; }
.scard-text { margin: 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 12px; line-height: 1.35; color: #b4a68b; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.scard[data-aspect="player"] .scard-glyph { color: #e8c84e; text-shadow: 0 0 18px rgba(232,200,78,.5); }
.scard[data-aspect="person"] .scard-glyph { color: #7fb6e6; text-shadow: 0 0 18px rgba(90,166,224,.45); }
.scard[data-aspect="place"] .scard-glyph { color: #8fd08c; text-shadow: 0 0 18px rgba(108,191,106,.45); }
.scard[data-aspect="faction"] .scard-glyph { color: #ec7a6e; text-shadow: 0 0 18px rgba(220,90,78,.45); }
.scard[data-aspect="lore"] .scard-glyph { color: #c4c9d1; text-shadow: 0 0 18px rgba(154,160,168,.4); }
.scard[data-aspect="entity"] .scard-glyph { color: #c9a8e6; text-shadow: 0 0 18px rgba(177,140,208,.45); }
.scard.dead .scard-front { filter: grayscale(.7) brightness(.8); }
@media (prefers-reduced-motion: reduce) { .scard { animation: none; } .scard-inner { transition: none; } }

.scard-trig { margin-top: auto; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; color: #c98a3e; opacity: .85; }

/* Recoverable turn failures share the transcript in both adventure shells. */
.turn-failure { white-space:normal; overflow-wrap:anywhere; }
.turn-failure p { margin:0 0 .65rem; }
.turn-retry { padding:.65rem 1rem; min-height:44px; cursor:pointer; color:var(--ink); background:var(--panel); border:1px solid var(--ember-dk); border-radius:8px; font:inherit; }
.turn-retry:hover, .turn-retry:focus-visible { background:var(--ember-deep); outline:2px solid var(--ember); outline-offset:2px; }
.adv2 #story-log .turn.user.roll { display:block; }

/* ---------------- Lichy's Suggestion -------------------------------------
   Three advisory openings between the story and the composer. Deliberately
   quiet: it sits under the story without competing with it. Picking one loads
   it into the composer; it never sends on its own. */
.lichy-suggest{margin:0 0 8px;padding:7px 10px 6px;border:1px solid var(--cline);border-radius:9px;background:rgba(0,0,0,.14)}
.lichy-suggest.hidden{display:none}
.lichy-suggest .lsug-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.lichy-suggest .lsug-title{margin:0;font-family:var(--cmono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cink-mute);opacity:.85}
.lichy-suggest .lsug-acts{display:flex;align-items:center;gap:2px}
.lichy-suggest .lsug-icon{width:20px;height:20px;border:0;border-radius:6px;background:none;color:var(--cink-mute);cursor:pointer;font-size:11px;line-height:1;opacity:.6;transition:all .16s ease}
.lichy-suggest .lsug-icon:hover:not(:disabled){color:var(--ember-br);opacity:1;background:rgba(227,169,85,.08)}
.lichy-suggest .lsug-icon:disabled{opacity:.3;cursor:default}
.lichy-suggest .lsug-list{list-style:none;margin:0;padding:0}
.lichy-suggest .lsug-item{display:flex;align-items:baseline;gap:10px;width:100%;padding:3px 6px;border:0;border-radius:6px;background:none;text-align:left;cursor:pointer;transition:background .16s ease}
.lichy-suggest .lsug-item:hover{background:rgba(227,169,85,.06)}
.lichy-suggest .lsug-tag{flex:0 0 40px;font-family:var(--cmono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember);opacity:.75}
.lichy-suggest .lsug-item:hover .lsug-tag{opacity:1}
.lichy-suggest .lsug-text{font-family:var(--cserif);font-size:12.5px;line-height:1.4;color:var(--cink-mute)}
.lichy-suggest .lsug-item:hover .lsug-text{color:var(--cink-dim)}
.lichy-suggest .lsug-state{margin:0;padding:3px 6px;font-family:var(--cserif);font-size:12px;color:var(--cink-mute);opacity:.8}
/* Hidden: one quiet stub, so they are always one click from coming back. */
.lichy-suggest.lsug-off{padding:0;border:0;background:none;margin:0 0 6px}
.lichy-suggest .lsug-show{padding:3px 9px;border:1px solid var(--cline);border-radius:100px;background:none;color:var(--cink-mute);cursor:pointer;font-family:var(--cmono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.55;transition:all .16s ease}
.lichy-suggest .lsug-show:hover{color:var(--ember-br);border-color:var(--cline-br);opacity:1}
@media (max-width:700px){
  .lichy-suggest .lsug-item{gap:8px;padding:5px 5px;min-height:44px}
  .lichy-suggest .lsug-tag{flex-basis:36px}
  .lichy-suggest .lsug-text{font-size:12.5px}
  .lichy-suggest .lsug-show{min-height:40px;padding:8px 14px}
  /* The icons stay visually small (the panel is meant to be quiet) but get a
     44px tap area via an invisible expander, so they are usable with a thumb. */
  .lichy-suggest .lsug-icon{position:relative}
  .lichy-suggest .lsug-icon::after{content:"";position:absolute;inset:-12px}
  .lichy-suggest .lsug-acts{gap:8px}
}

/* ---------------- Opening briefing ---------------------------------------
   Orientation above turn 1: who you are, the world, and your goal. Built at
   creation from the core stage, so it never drifts from the story's premise. */
.story-brief{margin:0 0 20px;padding:14px 16px;border:1px solid var(--cline);border-left:2px solid var(--ember);border-radius:10px;background:rgba(0,0,0,.2)}
.story-brief .sb-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.story-brief .sb-title{margin:0;font-family:var(--cmono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.story-brief .sb-toggle{border:0;background:none;color:var(--cink-mute);cursor:pointer;font-family:var(--cmono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.story-brief .sb-toggle:hover{color:var(--ember-br)}
.story-brief .sb-body{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:10px 0 0}
.story-brief.collapsed .sb-body{display:none}
.story-brief dt{font-family:var(--cmono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cink-mute);padding-top:3px;white-space:nowrap}
.story-brief dd{margin:0;font-family:var(--cserif);font-size:14.5px;line-height:1.5;color:var(--cink-dim)}
@media (max-width:700px){
  .story-brief .sb-body{grid-template-columns:1fr;gap:2px 0}
  .story-brief dt{padding-top:8px}
  .story-brief .sb-toggle{position:relative}
  .story-brief .sb-toggle::after{content:"";position:absolute;inset:-14px -10px}
}

/* ---------------- Turn in progress --------------------------------------
   The narrator writes out of sight: the reader sees a turning wireframe die,
   then the finished prose arrives whole and already laid out. */
.story-log .turn.assistant.streaming{border:0;background:none;padding:0}
.turn-wait{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 0 30px}
.turn-wait canvas{display:block;opacity:.85}
.turn-wait-label{font-family:var(--cmono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cink-mute);opacity:.75;animation:turnWaitPulse 2.2s ease-in-out infinite}
@keyframes turnWaitPulse{0%,100%{opacity:.45}50%{opacity:.9}}
/* The reveal itself — a single soft fade, never a typewriter. */
.turn-reveal{animation:turnReveal .42s cubic-bezier(.22,1,.36,1) both}
@keyframes turnReveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .turn-wait-label{animation:none;opacity:.7}
  .turn-reveal{animation:none}
}

/* ---------- Token meter ----------------------------------------------------
   The meter names every document and memory block sent this turn, so the list
   is long by design: a fixed header carries the one number that matters and the
   list scrolls beneath it. Base styling here; the violet UI restyles it below. */
#tokens-modal .modal-content {
  display: flex; flex-direction: column;
  width: min(940px, 94vw); max-width: min(940px, 94vw);
  max-height: min(88vh, 880px);
}
#tokens-modal h3 { flex: 0 0 auto; }
#tokens-modal .modal-actions { flex: 0 0 auto; }
#tokens-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.tok-head { flex: 0 0 auto; padding-bottom: 14px; }
.tok-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-dim);
}
.tok-figure { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 12px; }
.tok-fig-now { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 42px; line-height: 1; color: var(--text); }
.tok-fig-max { font-family: var(--mono); font-size: 13px; color: var(--text-dim); }
.tok-fig-pct { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--accent); }
.tok-bar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.tok-bar-fill { height: 100%; background: var(--accent); }

.tok-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.tok-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px;
}
.tok-tile-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); }
.tok-tile-v { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); }
.tok-tile-s { font-family: var(--mono); font-size: 10px; color: var(--text-dim); }

.tok-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px; scrollbar-width: thin;
}
.tok-scroll::-webkit-scrollbar { width: 9px; }
.tok-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }

.tok-cats { display: flex; flex-direction: column; }
.tok-cat {
  display: grid; grid-template-columns: minmax(120px, 190px) 1fr 76px;
  align-items: center; gap: 14px; padding: 9px 0 7px;
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px;
}
.tok-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-cbar { height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.tok-cbar-fill { height: 100%; background: var(--accent); opacity: .85; }
.tok-val {
  text-align: right; color: var(--text); font-family: var(--mono);
  font-size: 13px; font-variant-numeric: tabular-nums;
}

.tok-items { display: flex; flex-direction: column; margin: 0 0 12px 10px; padding-left: 14px; border-left: 1px solid var(--border); }
.tok-item {
  display: grid; grid-template-columns: minmax(110px, 1fr) 150px 64px;
  align-items: center; gap: 12px; padding: 3px 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
}
.tok-iname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok-ibar { height: 5px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.tok-ibar-fill { height: 100%; background: var(--accent); opacity: .45; }
.tok-ival { text-align: right; font-variant-numeric: tabular-nums; }
.tok-note { margin-top: 12px; font-size: 13px; color: var(--text-dim); }

@media (max-width: 620px) {
  .tok-fig-now { font-size: 32px; }
  .tok-cat { grid-template-columns: minmax(90px, 130px) 1fr 58px; gap: 9px; font-size: 15px; }
  .tok-item { grid-template-columns: 1fr 0px 52px; gap: 8px; font-size: 10.5px; }
  .tok-ibar { display: none; }
}

/* ---------- Creation: described type/size cards + the systems toggle -------- */
.hh-pills-desc { flex-direction: column; gap: 10px; align-items: stretch; max-width: 560px; margin: 0 auto; }
.hh-pill-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 13px 16px; white-space: normal; line-height: 1.4;
}
.hh-pill-l { display: flex; align-items: center; gap: 9px; font-size: 17px; text-transform: none; letter-spacing: .02em; }
/* The pill base is uppercase mono; a description has to read as prose. */
.hh-pill-d { font-size: 13.5px; opacity: .72; text-transform: none; letter-spacing: normal;
  font-family: 'Cormorant Garamond', Georgia, serif; }
.hh-pill-soon {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; opacity: .8;
}
.hh-pill-off { opacity: .42; cursor: not-allowed; }
.hh-pill-off:hover { transform: none; }
.hh-sys { display: flex; flex-direction: column; gap: 12px; max-width: 560px; margin: 0 auto; }
.hh-systoggle {
  display: flex; align-items: center; gap: 11px; align-self: flex-start;
  padding: 9px 15px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: none; color: var(--text); cursor: pointer; font-size: 15px;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.hh-switch {
  width: 34px; height: 18px; border-radius: 999px; flex: 0 0 auto;
  background: var(--panel-2); border: 1px solid var(--border); position: relative;
  transition: background .2s;
}
.hh-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--text-dim);
  transition: transform .2s, background .2s;
}
.hh-systoggle.on .hh-switch { background: var(--accent); }
.hh-systoggle.on .hh-switch::after { transform: translateX(16px); background: var(--panel); }

/* A required creation step that was left blank: the hint turns into the error,
   so the message appears where the eye already is instead of in a dialog. */
.hh-hint-warn { color: var(--danger, #c95545) !important; }
.hh-input-warn { border-color: var(--danger, #c95545) !important; }

/* Story Memory's working parts (rolling summary + remembered moments) are not
   files, so the files view alone shows no sign of them. Graph mode has the
   graph and cards views instead and hides this. */
.mem-bank {
  margin: 10px 0 14px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--panel-2);
}
.mem-bank-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mem-bank-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim);
}
.mem-bank-state {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-dim);
}
.mem-bank-state.ready { color: #9db47c; border-color: rgba(157,180,124,.5); }
.mem-bank-state.partial { color: #c98a6a; border-color: rgba(201,138,106,.5); }
.mem-bank-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dim);
}
.mem-bank-row b { color: var(--text); font-variant-numeric: tabular-nums; }
.mem-bank-err { margin: 8px 0 0; font-size: 12px; color: var(--danger, #c95545); }

/* Story Memory's cards: the authored memory files, shown with the trigger that
   actually recalls them (the file name). */
.card-tile {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  width: 100%; text-align: left; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel-2); color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px;
}
.card-tile:hover { border-color: var(--border-strong); }
.card-trigger { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-dim); }
.card-trigger b { color: var(--accent); }
.card-folder {
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-dim);
}
.card-body { color: var(--text-dim); line-height: 1.45; }

/* ---- Story Memory: the Files area becomes the document + card editor ----
   This engine sends a handful of documents every turn and pulls cards in by
   trigger, so the player edits exactly those, in place. The folder tree is
   folded to the bottom; graph mode restores it and this whole block is unused. */
#mem-layout {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 20px 18px;
}
.mem-layout-h {
  margin: 14px 0 2px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.mem-layout-sub {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: var(--fs-ui); font-style: italic; line-height: 1.4;
  color: var(--text-faint);
}
.mem-doc { margin: 0 0 12px; }
.mem-doc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mem-doc-label {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--text-dim);
}
.mem-doc-label b { color: var(--accent); letter-spacing: .04em; }
.mem-doc-status {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  color: var(--text-faint); white-space: nowrap;
}
.mem-doc-area {
  display: block; width: 100%; margin-top: 4px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--panel-2); color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif; font-size: 15px; line-height: 1.5;
  resize: vertical;
}
.mem-doc-area:focus { outline: none; border-color: var(--accent); }
.mem-cardlist { display: flex; flex-direction: column; gap: 12px; }
.mem-cardlist .memory-hint { margin: 0; }

/* ===== Invite friends — the campaign's table (opened from the top bar) ===== */
/* Uses the adventure palette variables so it reads as part of the story chrome
   rather than a transplanted dialog. */
.inv-screen { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(8, 6, 4, .72);
  backdrop-filter: blur(3px); }
.inv-screen.hidden { display: none; }
.inv-box { width: min(560px, 100%); max-height: min(78vh, 720px); overflow: auto;
  background: var(--panel, #14100c); border: 1px solid var(--line, rgba(227,169,85,.22));
  border-radius: 12px; padding: 22px 24px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6); }
.inv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.inv-head h2 { flex: 1; margin: 0; font-family: var(--disp); font-size: 19px;
  font-weight: 700; letter-spacing: .18em; color: var(--ember, #e3a955); }
.inv-x { background: none; border: 0; color: var(--ink-dim, #9b8c78); font-size: 24px;
  line-height: 1; cursor: pointer; padding: 0 4px; }
.inv-x:hover { color: var(--ember, #e3a955); }
.inv-seats { margin: 2px 0 16px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim, #9b8c78); }
.inv-sub { margin: 20px 0 8px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim, #9b8c78);
  font-weight: 400; }
.inv-sub[hidden] { display: none; }
.inv-list { display: flex; flex-direction: column; gap: 6px; }
.inv-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border: 1px solid var(--line, rgba(227,169,85,.16)); border-radius: 8px; }
.inv-seatno { flex: 0 0 auto; width: 20px; text-align: center; font-family: var(--mono);
  font-size: 12px; color: var(--ember, #e3a955); opacity: .75; }
.inv-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink, #e8dcc8); }
.inv-who em { font-style: italic; color: var(--ink-dim, #9b8c78); }
.inv-seat { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim, #9b8c78); }
.inv-act { flex: 0 0 auto; background: none; cursor: pointer; padding: 5px 12px;
  border: 1px solid var(--line, rgba(227,169,85,.3)); border-radius: 6px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember, #e3a955); }
.inv-act:hover:not(:disabled) { background: rgba(227, 169, 85, .12); }
.inv-act:disabled { opacity: .4; cursor: default; }
.inv-act.bad { color: #c98b7a; border-color: rgba(201, 139, 122, .32); }
.inv-act.bad:hover { background: rgba(201, 139, 122, .12); }
.inv-empty { margin: 0; padding: 10px 2px; color: var(--ink-dim, #9b8c78); font-size: 14px; }
.inv-note { margin: 14px 0 0; min-height: 1em; font-size: 13px; color: var(--ink-dim, #9b8c78); }
.inv-note.bad { color: #c98b7a; }
@media (max-width: 560px) {
  .inv-box { padding: 18px 16px 16px; }
  .inv-seat { display: none; }   /* the seat label is the first thing to go when narrow */
}

/* An outstanding invitation: at the table in spirit, holding no seat. */
.inv-row.pending { opacity: .62; border-style: dashed; }
.inv-row.pending .inv-seatno { opacity: .5; }