:root {
  --bg: #0e0e12;
  --bg2: #16161c;
  --bg3: #1e1e26;
  --border: #2e2e3a;
  --text: #e8e6f0;
  --text2: #9490a8;
  --accent: #7c6fd4;
  --accent2: #a095e8;
  --danger: #c0392b;
  --danger-bg: #2a1010;
  --success: #27ae60;
  --warning: #e67e22;
  --radius: 8px;
  --radius-lg: 12px;
  --portrait-width: 224px;
  --portrait-height: 256px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

/* ── Loading ─────────────────────────────────────────────── */
.loading-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.loading-inner { text-align: center; color: var(--text2); }
.folly-logo { font-size: 3rem; margin-bottom: 1rem; }

/* ── Layout ──────────────────────────────────────────────── */
#app { min-height: 100vh; }

.page { display: none; min-height: 100vh; }
.page.active { display: flex; flex-direction: column; }

/* ── Login ───────────────────────────────────────────────── */
.login-page {
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a1830 0%, var(--bg) 70%);
}
.login-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%; max-width: 380px;
}
.login-header { text-align: center; margin-bottom: 2rem; }
.login-header .logo { font-size: 2.5rem; margin-bottom: 0.5rem; }
.login-header h1 { font-size: 1.25rem; font-weight: 600; color: var(--accent2); }
.login-header p { font-size: 0.85rem; color: var(--text2); margin-top: 0.25rem; }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0;
  padding: 0 1.5rem;
  height: 56px;
}
.nav-brand {
  font-size: 1rem; font-weight: 600; color: var(--accent2);
  margin-right: auto; display: flex; align-items: center; gap: 0.5rem;
}
.nav-tabs { display: flex; gap: 0; height: 100%; overflow-x: auto; }
.nav-tab {
  padding: 0 1.25rem;
  border: none; background: none; color: var(--text2);
  cursor: pointer; font-size: 0.9rem; height: 100%;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tab:hover { color: var(--text); }
.nav-tab.active { color: var(--accent2); border-bottom-color: var(--accent); }
.nav-right { margin-left: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.nav-user { font-size: 0.8rem; color: var(--text2); }
.nav-user-button {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text2);
}
.nav-user-button:hover {
  background: transparent;
  border: none;
  color: var(--text);
}
.badge-gm {
  background: var(--accent); color: white;
  font-size: 0.65rem; padding: 1px 6px; border-radius: 10px;
  font-weight: 600; letter-spacing: 0.05em;
}
.dice-roller {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.dice-select {
  width: 160px;
  padding: 0.35rem 0.55rem;
  font-size: 0.8rem;
}
.dice-result {
  min-width: 2.4rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--accent2);
  font-weight: 700;
}
.llm-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warning);
  border: 1px solid var(--warning);
  background: rgba(243, 156, 18, 0.12);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  white-space: nowrap;
}
.llm-status[hidden] { display: none; }
.llm-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--warning);
  animation: llm-pulse 1.1s ease-in-out infinite;
}
.llm-stop {
  border: 0;
  border-left: 1px solid rgba(243, 156, 18, 0.45);
  background: transparent;
  color: var(--warning);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  margin: -0.18rem -0.35rem -0.18rem 0;
  padding: 0.18rem 0.35rem;
}
.llm-stop[hidden] { display: none; }
@keyframes llm-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── Main content ────────────────────────────────────────── */
.main { flex: 1; padding: 2rem 2rem; width: 100%; }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.page-header h2 { font-size: 1.3rem; font-weight: 600; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
label { display: block; font-size: 0.82rem; color: var(--text2); margin-bottom: 0.35rem; font-weight: 500; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  color: var(--text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: border-color 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
}
/* Drop the native number spinners so number fields read like the
   text-based stat fields (e.g. SAN) instead of a browser default. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
textarea { resize: vertical; min-height: 80px; }
select option { background: var(--bg3); }
select[multiple] option:checked,
select[multiple] option[selected] {
  background: var(--accent);
  color: #fff;
}
select[multiple] option:disabled {
  color: var(--text2);
  background: #14141a;
}

/* ── Buttons ─────────────────────────────────────────────── */
button, .btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}
button:hover, .btn:hover { background: var(--bg2); border-color: var(--accent); }

.btn-primary {
  background: var(--accent); border-color: var(--accent); color: white;
}
.btn-primary:hover { background: var(--accent2); border-color: var(--accent2); }

.btn-danger { background: var(--danger-bg); border-color: var(--danger); color: #e57373; }
.btn-danger:hover { background: #3a1515; }

button:disabled, .btn:disabled, button[disabled], .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--bg3);
  border-color: var(--border);
  color: var(--text2);
}
button:disabled:hover, .btn:disabled:hover, button[disabled]:hover, .btn[disabled]:hover {
  background: var(--bg3);
  border-color: var(--border);
}

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.btn-full { width: 100%; justify-content: center; padding: 0.65rem; }
.btn-subtle {
  background: transparent;
  border-color: #3a3a46;
  color: var(--text2);
}
.btn-subtle:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Cards / Tables ──────────────────────────────────────── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.card-title { font-weight: 600; font-size: 1rem; }
.card-sub { font-size: 0.82rem; color: var(--text2); margin-top: 0.15rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th { text-align: left; padding: 0.6rem 0.75rem; color: var(--text2); font-weight: 500; border-bottom: 1px solid var(--border); }
td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg3); }

/* ── Session grid ────────────────────────────────────────── */
.session-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.session-card { cursor: pointer; transition: border-color 0.15s; }
.session-card:hover { border-color: var(--accent); }
.session-card .player-count { font-size: 0.8rem; color: var(--text2); }

/* ── Character sheet ─────────────────────────────────────── */
.sheet-container { max-width: 820px; position: relative; padding-top: 0.25rem; }
.sheet-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.sheet-section-header {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent2);
  text-transform: uppercase;
}
.sheet-section-body { padding: 1.25rem; }

.characteristics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.char-field label { text-align: center; }
.char-field input { text-align: center; font-size: 1.1rem; font-weight: 600; }

.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.skill-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem; }
.skill-row input[type=number] { width: 70px; text-align: center; }
.combat-skills-header,
.combat-skill-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 84px;
  gap: 0.5rem;
  align-items: center;
}
.combat-skills-header {
  margin-bottom: 0.35rem;
  padding: 0 0.1rem;
}
.combat-skills-header span {
  font-size: 0.75rem;
  color: var(--text2);
}
.combat-skills-grid {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.combat-skill-row input {
  text-align: center;
}
.combat-skill-row input:first-child {
  text-align: left;
  background: var(--bg3);
}
.skill-name-wrap { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.skill-name-wrap .msk-name { flex: 1; min-width: 0; }
.common-skills-grid .csk-row input[readonly] { background: var(--bg3); }
.sheet-inline-expand summary { cursor: pointer; color: var(--accent2); font-size: 0.82rem; margin-bottom: 0.35rem; }
.btn-inline-remove {
  padding: 0.05rem 0.35rem;
  min-width: 1.2rem;
  height: 1.2rem;
  line-height: 1;
  font-size: 0.72rem;
  border-radius: 999px;
  color: #e57373;
  background: var(--danger-bg);
  border-color: var(--danger);
}

.edl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.damage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.damage-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
  background: var(--bg3);
}
.damage-toggle input {
  margin: 0;
}
.damage-toggle span {
  font-size: 0.88rem;
  font-weight: 600;
}
.weapons-header,
.weapon-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) 72px 72px 100px 100px auto;
  gap: 0.5rem;
  align-items: center;
}
.weapons-header {
  margin-bottom: 0.35rem;
  padding: 0 0.1rem;
}
.weapons-header span {
  font-size: 0.75rem;
  color: var(--text2);
}
#weapons {
  display: grid;
  gap: 0.5rem;
}
.weapon-row input {
  min-width: 0;
}

.languages-header,
.language-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto auto;
  gap: 0.5rem;
  align-items: center;
}
.languages-header {
  margin-bottom: 0.35rem;
  padding: 0 0.1rem;
}
.languages-header span {
  font-size: 0.75rem;
  color: var(--text2);
}
#languages {
  display: grid;
  gap: 0.5rem;
}
.language-row input[type="text"],
.language-row input[type="number"] {
  min-width: 0;
}
.lang-own {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text2);
  white-space: nowrap;
}

.custom-fields .custom-field-row {
  display: grid; grid-template-columns: 1fr 2fr auto;
  gap: 0.5rem; align-items: center; margin-bottom: 0.5rem;
}

.sheet-actions {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 1rem 0; position: sticky; bottom: 0;
  background: var(--bg); border-top: 1px solid var(--border);
  margin: 0 -1.5rem;
  padding: 0.75rem 1.5rem;
}
.save-status { font-size: 0.82rem; color: var(--text2); }
.save-status.saved { color: var(--success); }
.save-status.error { color: var(--danger); }

/* ── Readonly sheet view ──────────────────────────────────── */
.readonly-sheet { opacity: 1; }
.readonly-sheet input, .readonly-sheet textarea, .readonly-sheet select {
  pointer-events: none; background: var(--bg); border-color: transparent;
  color: var(--text);
}
.readonly-sheet .sheet-portrait { pointer-events: none; }

.sheet-personal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--portrait-width);
  gap: 1rem 1.25rem;
  align-items: start;
}
.sheet-portrait-block {
  justify-self: end;
  width: var(--portrait-width);
}
.sheet-portrait {
  width: 100%;
  height: var(--portrait-height);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg3);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-portrait-image { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--bg3); }
.sheet-portrait-empty { font-size: 0.78rem; color: var(--text2); }
.portrait-controls { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
.portrait-camera-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 24, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}
.portrait-camera-dialog {
  width: min(560px, 100%);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.portrait-camera-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.portrait-camera-video {
  width: 100%;
  max-height: 60vh;
  display: block;
  background: #000;
  border-radius: var(--radius);
}
.portrait-camera-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.occupation-key {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.35rem;
}
.occupation-key span {
  font-size: 0.72rem;
  color: var(--accent2);
  background: rgba(160,149,232,0.1);
  border: 1px solid rgba(160,149,232,0.35);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}
.occupation-key-help {
  width: 100%;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--text2);
}

/* ── Session view (GM sees all sheets) ───────────────────── */
.sheet-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sheet-tab {
  padding: 0.4rem 1rem; border-radius: 20px;
  border: 1px solid var(--border); background: var(--bg3);
  cursor: pointer; font-size: 0.85rem; transition: all 0.15s;
}
.sheet-tab.active { background: var(--accent); border-color: var(--accent); color: white; }
.sheet-tab:hover:not(.active) { border-color: var(--accent); }
.gm-overview-pane { margin-bottom: 1.25rem; }
.gm-overview-pane td { vertical-align: top; }

/* ── Scenario information / NPCs ────────────────────────── */
.scenario-viewer {
  color: var(--text2);
  font-size: 0.84rem;
  margin-bottom: 1rem;
}
.scenario-section { margin-bottom: 1.5rem; }
.scenario-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.scenario-section-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent2);
}
.scenario-grid,
.npc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.scenario-entry-card,
.scenario-summary-card,
.npc-card {
  margin-bottom: 0;
}
.scenario-body p {
  margin-bottom: 0.7rem;
}
.scenario-body p:last-child {
  margin-bottom: 0;
}
.scenario-subtitle {
  margin-top: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--text2);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}
.tag-list span {
  background: rgba(160,149,232,0.1);
  border: 1px solid rgba(160,149,232,0.35);
  color: var(--accent2);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  font-size: 0.76rem;
}
.scenario-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.85rem;
}
.scenario-sources span {
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
  font-size: 0.72rem;
}
.scenario-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 0.9rem;
}
.scenario-media-grid figure {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg3);
}
.scenario-media-grid img {
  display: block;
  width: 100%;
  height: auto;
}
.scenario-media-grid figcaption {
  color: var(--text2);
  font-size: 0.75rem;
  padding: 0.45rem 0.55rem;
}
.scenario-empty {
  padding: 1.25rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.scenario-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.scenario-section-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.prompt-textarea {
  min-height: 48vh;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}
.scenario-file-editor {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 1rem;
  align-items: start;
}
.scenario-file-list {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg2);
}
.scenario-file-list button {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  display: block;
  text-align: left;
  padding: 0.65rem 0.75rem;
  cursor: pointer;
}
.scenario-file-list button:last-child { border-bottom: 0; }
.scenario-file-list button.active,
.scenario-file-list button:hover {
  background: rgba(160,149,232,0.12);
}
.scenario-file-list span,
.scenario-file-list small {
  display: block;
}
.scenario-file-list small {
  color: var(--text2);
  margin-top: 0.15rem;
}
.scenario-file-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--text2);
  font-size: 0.84rem;
  margin-bottom: 0.45rem;
}
.scenario-source-editor textarea {
  min-height: 13rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.45;
}
@media (max-width: 760px) {
  .scenario-file-editor {
    grid-template-columns: 1fr;
  }
}
.scenario-source-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.gm-private-analysis {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.npc-detail-meta {
  color: var(--text2);
  font-size: 0.84rem;
  margin: -0.7rem 0 1rem;
}

.adventure-description p { margin-bottom: 0.8rem; }
.adventure-description p:last-child { margin-bottom: 0; }
.adventure-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Modal ───────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 1rem;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
}
.modal .table-wrap {
  margin-top: 0.25rem;
}
.modal h3 { font-size: 1.1rem; margin-bottom: 1.25rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.25rem; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert {
  padding: 0.75rem 1rem; border-radius: var(--radius);
  font-size: 0.88rem; margin-bottom: 1rem;
}
.alert-danger { background: var(--danger-bg); border: 1px solid var(--danger); color: #e57373; }
.alert-success { background: #0d2a1a; border: 1px solid var(--success); color: #5cb85c; }

/* ── Empty states ────────────────────────────────────────── */
.empty { text-align: center; padding: 3rem 1rem; color: var(--text2); }
.empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .nav { padding: 0 0.75rem; height: auto; flex-wrap: wrap; }
  .nav-brand { height: 52px; }
  .nav-tabs { order: 3; width: 100%; height: 44px; }
  .nav-tab { padding: 0 0.85rem; white-space: nowrap; }
  .nav-right { gap: 0.6rem; margin-left: 0; }
  .dice-select { width: 118px; }
  .characteristics-grid { grid-template-columns: repeat(3, 1fr); }
  .combat-skills-header,
  .combat-skill-row,
  .weapons-header,
  .weapon-row {
    grid-template-columns: 1fr;
  }
  .damage-grid {
    grid-template-columns: 1fr 1fr;
  }
  .skills-grid, .edl-grid { grid-template-columns: 1fr; }
  .custom-fields .custom-field-row { grid-template-columns: 1fr 1fr auto; }
  .sheet-personal-layout { grid-template-columns: 1fr; }
  .sheet-portrait-block { justify-self: start; width: var(--portrait-width); }
}

/* ── 6-column characteristics grid (STR/CON/DEX/INT/POW/SIZ) ── */
.characteristics-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.characteristics-grid-6 .char-field label { text-align: center; }
.characteristics-grid-6 .char-field select { text-align: center; }

/* ── Derived stats grid ── */
.derived-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.5rem; }

/* ── Magic spells table ── */
.magic-spell-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.magic-spell-row input { margin: 0; }

/* ── Responsive additions ── */
@media (max-width: 700px) {
  .characteristics-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .derived-grid { grid-template-columns: repeat(2, 1fr); }
  .magic-spell-row { grid-template-columns: 1fr 1fr auto; }
  .magic-spell-row .spell-notes { grid-column: 1 / -1; }
}

/* ── Case Info: rich summary presentation ── */
.presentation-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text2);
  margin-bottom: 0.75rem;
}
.presentation-badge.pb-scene { background: rgba(124, 111, 212, 0.14); color: var(--accent2); border-color: var(--accent); }
.presentation-badge.pb-player { background: rgba(39, 174, 96, 0.14); color: #5fd49a; border-color: #2f6f4f; }

.case-index {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.9rem;
  margin: 0 0 1rem;
}
.case-index-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text2);
  margin-bottom: 0.35rem;
}
.case-index ul { list-style: none; margin: 0; padding: 0; }
.case-index li { margin: 0.12rem 0; }
.case-index li.ci-l3 { padding-left: 1rem; }
.case-index a { color: var(--accent2); text-decoration: none; font-size: 0.88rem; }
.case-index a:hover { text-decoration: underline; }

/* ── GM Info ─────────────────────────────────────────────────────────────── */
.gm-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
}
.gm-pill-spotlight--balanced,
.gm-pill-engagement--active { color: #5fd49a; border-color: #2f6f4f; background: rgba(39, 174, 96, 0.12); }
.gm-pill-spotlight--under, .gm-pill-spotlight--low,
.gm-pill-engagement--passive, .gm-pill-engagement--quiet,
.gm-pill-quiet,
.gm-pill-priority--high, .gm-pill-priority--urgent { color: var(--warning); border-color: var(--warning); background: rgba(243, 156, 18, 0.12); }
.gm-pill-spotlight--over, .gm-pill-spotlight--high { color: #e88; border-color: var(--danger); background: rgba(192, 57, 43, 0.12); }
.gm-pill-priority--low { color: var(--text2); }

.gm-signal-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.gm-signal {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 0.65rem;
  cursor: pointer;
  color: var(--text);
}
.gm-signal:hover { border-color: var(--accent); }
.gm-signal-name { font-weight: 600; font-size: 0.86rem; }

.gm-brief-card { display: flex; flex-direction: column; gap: 0.85rem; }
.gm-brief-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.6rem;
}
.gm-brief-block .scenario-subtitle { margin-top: 0; }
.gm-when {
  font-size: 0.72rem; font-weight: 600;
  color: var(--accent2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
}

.gm-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.gm-action-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.4rem;
}
.gm-action-card { border-left: 3px solid var(--border); }
.gm-action-card.gm-prio-high, .gm-action-card.gm-prio-urgent { border-left-color: var(--warning); }
.gm-action-card.gm-prio-low { border-left-color: var(--text2); }

.summary-content { color: var(--text); line-height: 1.55; }
.summary-content p { margin: 0 0 0.7rem; }
/* clear: both — a floated figure taller than its section's prose overhangs the
   section boundary, and flow-root only contains the float at the body edge, not
   between headings. Without this, the overhang spills past the next heading and
   each following section steps further right. Clearing at headings starts every
   section below the previous figure; prose within a section still wraps beside
   it. (The taller the figure — e.g. with a caption — the worse the overhang.) */
.summary-content .summary-h,
.scenario-body .summary-h { clear: both; color: var(--accent2); margin: 1.1rem 0 0.45rem; line-height: 1.3; scroll-margin-top: 1rem; }
.summary-content .summary-h1,
.summary-content .summary-h2,
.scenario-body .summary-h1,
.scenario-body .summary-h2 { font-size: 1.02rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.summary-content .summary-h3,
.scenario-body .summary-h3 { font-size: 0.94rem; color: var(--text); }
.summary-content .summary-h4,
.summary-content .summary-h5,
.summary-content .summary-h6,
.scenario-body .summary-h4,
.scenario-body .summary-h5,
.scenario-body .summary-h6 { font-size: 0.88rem; color: var(--text2); }
.summary-content ul.summary-points,
.summary-content ol.summary-points,
.scenario-body ul.summary-points,
.scenario-body ol.summary-points { margin: 0.3rem 0 0.8rem; padding-left: 1.25rem; }
.summary-content ul.summary-points li,
.summary-content ol.summary-points li,
.scenario-body ul.summary-points li,
.scenario-body ol.summary-points li { margin: 0.2rem 0; }
.summary-content blockquote {
  margin: 0.6rem 0;
  padding: 0.4rem 0.9rem;
  border-left: 3px solid var(--accent);
  color: var(--text2);
  font-style: italic;
}
.scenario-body blockquote {
  margin: 0.6rem 0;
  padding: 0.4rem 0.9rem;
  border-left: 3px solid var(--accent);
  color: var(--text2);
  font-style: italic;
}
.summary-content code,
.scenario-body code {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.85em;
}
.summary-content pre,
.scenario-body pre {
  overflow: auto;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0.7rem 0;
}
.summary-content pre code,
.scenario-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
}
.markdown-table-wrap {
  overflow-x: auto;
  margin: 0.7rem 0 1rem;
}
.markdown-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
  font-size: 0.9rem;
}
.markdown-table th,
.markdown-table td {
  border: 1px solid var(--border);
  padding: 0.42rem 0.55rem;
  vertical-align: top;
  text-align: left;
}
.markdown-table th {
  background: var(--bg3);
  color: var(--accent2);
  font-weight: 700;
}
.session-analysis-card { margin-top: 1rem; }
.session-analysis-title {
  font-weight: 600;
  color: var(--accent2);
  font-size: 0.98rem;
  margin-bottom: 0.5rem;
}

/* ── Admin: case allocation checkboxes ── */
.case-allocation { display: flex; flex-direction: column; gap: 0.35rem; max-height: 320px; overflow-y: auto; margin: 0.25rem 0 0.75rem; }
.case-allocation-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--text); cursor: pointer; }
.case-allocation-row input { margin: 0; }

/* ── GM brainstorm chat ── */
/* Fill the viewport below the header/subtabs so the compose box (Send) is
   always visible and the log scrolls internally. */
.gmchat-wrap {
  display: flex;
  flex-direction: column;
  /* Page chrome (nav + session header + sub-tabs + AI-Support header) varies;
     leave generous breathing room so the compose row never scrolls off. */
  height: calc(100vh - 22rem);
  min-height: 320px;
  max-height: 78vh;
}
.gmchat-log {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gmchat-msg { display: flex; flex-direction: column; gap: 0.2rem; max-width: 90%; }
.gmchat-user { align-self: flex-end; align-items: flex-end; }
.gmchat-assistant { align-self: flex-start; }
/* Marks where one NPC hands off to another in a carried-over conversation. */
.gmchat-msg.npc-handoff { margin-top: 0.6rem; border-top: 1px dashed var(--border); padding-top: 0.6rem; }
.gmchat-who { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text2); }
.gmchat-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
}
.gmchat-user .gmchat-body { background: rgba(124, 111, 212, 0.16); border-color: var(--accent); }
.gmchat-markdown-body {
  white-space: normal;
  min-width: min(38rem, 100%);
}
.gmchat-markdown-body .chat-markdown > *:first-child { margin-top: 0; }
.gmchat-markdown-body .chat-markdown > *:last-child { margin-bottom: 0; }
.gmchat-markdown-body p { margin: 0 0 0.65rem; }
.gmchat-markdown-body h4,
.gmchat-markdown-body h5,
.gmchat-markdown-body h6 {
  color: var(--accent2);
  line-height: 1.25;
  margin: 0.9rem 0 0.45rem;
}
.gmchat-markdown-body h4 { font-size: 1rem; }
.gmchat-markdown-body h5 { font-size: 0.94rem; }
.gmchat-markdown-body h6 { font-size: 0.88rem; color: var(--text2); }
.gmchat-markdown-body ul,
.gmchat-markdown-body ol {
  margin: 0.25rem 0 0.75rem;
  padding-left: 1.35rem;
}
.gmchat-markdown-body li { margin: 0.18rem 0; }
.gmchat-markdown-body .markdown-table-wrap {
  max-width: 100%;
  margin: 0.55rem 0 0.75rem;
}
.gmchat-markdown-body .markdown-table { min-width: 32rem; }
.gmchat-markdown-body code {
  background: var(--bg2);
}
.gmchat-markdown-body pre {
  max-width: 100%;
}
.gmchat-caret { color: var(--accent2); animation: gmchat-blink 1s steps(1) infinite; }
@keyframes gmchat-blink { 50% { opacity: 0; } }
.gmchat-compose { margin-top: 0.75rem; flex: 0 0 auto; }
.gmchat-compose textarea { width: 100%; resize: vertical; }
.gmchat-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: center; }
/* Inline compose: Send/Stop sit to the right of the textarea instead of below
   it — saves vertical space on the AI Support page so the controls stay on
   screen without scrolling. */
.gmchat-compose-inline { display: flex; gap: 0.5rem; align-items: stretch; }
.gmchat-compose-inline textarea { flex: 1 1 auto; min-height: 4.5rem; }
.gmchat-actions-side { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0; flex: 0 0 auto; align-items: stretch; }
.gmchat-mode { display: inline-flex; gap: 0.25rem; }
.gmchat-mode .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.gmchat-image { max-width: 320px; max-height: 420px; width: auto; height: auto; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
.gmchat-image-actions { margin-top: 0.4rem; }
.gmchat-saved { color: #5fd49a; font-size: 0.82rem; }

.gmchat-msg-actions { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.gmchat-msg-actions .btn { font-size: 0.74rem; padding: 0.12rem 0.5rem; }
.gmchat-edit { width: 100%; resize: vertical; }

.gmchat-error { margin-top: 0.5rem; color: var(--danger); font-size: 0.85rem; }

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.asset-card {
  display: flex; flex-direction: column; gap: 0.35rem;
  text-decoration: none; color: var(--text2); font-size: 0.78rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem; background: var(--bg3);
}
.asset-card:hover { border-color: var(--accent); }
.asset-card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: calc(var(--radius) - 2px); background: var(--bg);
}
.asset-card span { word-break: break-word; }
.asset-card-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.asset-card-actions .btn { font-size: 0.72rem; padding: 0.12rem 0.45rem; }
.ef-toolbar { display: flex; gap: 0.4rem; flex-shrink: 0; }

.scenario-figure { margin: 0.75rem 0; }
.scenario-figure img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: var(--radius);
}
/* Filename-tagged inline layout: title block sits above, figure floats
   left/right, prose wraps beside it. The natural CSS pattern.
   Two containment layers are needed:
   - `display: flow-root` on the cards/body (below) is a Block Formatting
     Context that stops a float overflowing past the CARD boundary.
   - `clear: both` on .summary-h headings (see the heading rule above) stops a
     tall figure overflowing past the next SECTION heading inside one body —
     flow-root alone does not cover that, which caused a right-stepping cascade. */
.scenario-figure.sf-full { width: 100%; margin: 0.75rem 0; }
.scenario-figure.sf-left,
.scenario-figure.sf-right { width: var(--sf-w, 30%); max-width: 70%; }
.scenario-figure.sf-left { float: left; margin: 0.2rem 1rem 0.5rem 0; }
.scenario-figure.sf-right { float: right; margin: 0.2rem 0 0.5rem 1rem; }
.scenario-entry-card, .scenario-summary-card,
.scenario-body, .summary-content { display: flow-root; }
@media (max-width: 700px) {
  .scenario-figure.sf-left, .scenario-figure.sf-right {
    float: none; width: 100%; max-width: 100%; margin: 0.75rem 0;
  }
}
.scenario-jump {
  display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem;
  margin: 0 0 1rem; padding: 0.5rem 0.75rem;
  background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius);
}
.scenario-jump a { color: var(--accent2); text-decoration: none; font-size: 0.86rem; }
.scenario-jump a:hover { text-decoration: underline; }
.scenario-entry-card { scroll-margin-top: 1rem; }
/* Combined top index: Places / NPCs / Things groups, each labelled. */
.scenario-jump-all { margin: 0 0 1.25rem; }
.scenario-jump-group { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.4rem; }
.scenario-jump-group .scenario-jump { margin: 0; flex: 1; }
.scenario-jump-label {
  flex: 0 0 4.5rem; padding-top: 0.55rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text2);
}
@media (max-width: 600px) {
  .scenario-jump-group { flex-direction: column; gap: 0.2rem; }
  .scenario-jump-label { padding-top: 0; }
}
.scenario-figure figcaption {
  font-size: 0.8rem; color: var(--text2);
  margin-top: 0.3rem; text-align: center;
}
.scenario-figure-missing {
  font-size: 0.8rem; color: var(--warning);
  border: 1px dashed var(--warning); border-radius: var(--radius);
  background: rgba(243,156,18,0.08);
  padding: 0.4rem 0.6rem; margin: 0.6rem 0;
}
.asset-pdf {
  width: 100%; aspect-ratio: 3 / 4; display: flex;
  align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent2);
  background: var(--bg); border-radius: calc(var(--radius) - 2px);
}
.vis-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  padding: 0.08rem 0.45rem; border-radius: 999px; border: 1px solid var(--border);
}
.vis-gm { color: var(--warning); border-color: var(--warning); background: rgba(243,156,18,0.12); }
.vis-player { color: #1c7a48; border-color: #2f6f4f; background: rgba(39,174,96,0.12); }
/* Marks a seeded file that has been hand-edited away from its original — a
   unique, possibly valuable artifact (amber to read as "custom, mind this one"). */
.seed-modified { color: #c9871f; font-weight: 600; font-size: 0.72rem; margin-right: 0.4rem; white-space: nowrap; }

/* ── Index image manager ── */
.entity-img-table { padding: 0.6rem 0.9rem; }
.entity-img-table > summary { cursor: pointer; font-size: 0.9rem; color: var(--text2); }
.entity-img-table > summary strong { color: var(--text); }
.table-scroll { overflow-x: auto; margin-top: 0.7rem; }
table.eit { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
table.eit th, table.eit td { text-align: left; padding: 0.5rem 0.55rem; border-top: 1px solid var(--border); vertical-align: top; }
table.eit th { color: var(--text2); font-weight: 600; border-top: none; }
.eit-name { min-width: 140px; font-weight: 600; }
.eit-name small { color: var(--text2); font-weight: 400; }
.eit-art { width: 130px; }
.eit-thumb { width: 110px; height: 110px; object-fit: cover; border-radius: calc(var(--radius) - 2px); border: 1px solid var(--border); display: block; }
.eit-file { font-size: 0.7rem; color: var(--text2); margin-top: 0.25rem; word-break: break-all; }
.eit-none { color: var(--text2); font-style: italic; }
.eit-prompt { width: 100%; min-width: 220px; font-size: 0.78rem; resize: vertical; }
.eit-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; min-width: 240px; }
.eit-actions .btn { font-size: 0.72rem; padding: 0.12rem 0.45rem; }
.eit-actions .dice-select { width: auto; font-size: 0.72rem; padding: 0.12rem 0.3rem; }
.eit-status { flex-basis: 100%; font-size: 0.72rem; color: var(--text2); margin-top: 0.2rem; }
.eit-status.saved { color: #5fd49a; }
.eit-status.error { color: #e57373; }
.eit-entity-row > td { border-top: 2px solid var(--border); background: rgba(255,255,255,0.015); }
.eit-file-row > td { border-top: 1px dashed var(--border); }
.eit-sub { color: var(--text2); text-align: center; width: 1.5rem; }
.eit-orphan-head { margin: 1rem 0 0.4rem; font-weight: 600; color: var(--warning); border-top: 2px solid var(--border); padding-top: 0.7rem; }

/* ── Assigned rolls ── */
.roll-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.roll-form select, .roll-form input { margin: 0; }
.roll-form input[type="text"] { min-width: 180px; flex: 1 1 180px; }
.roll-form input[type="number"] { width: 140px; }
.roll-grid { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.4rem 0 0.6rem; }
.roll-card { padding: 0.7rem 0.9rem; }
.roll-badge { display: inline-block; font-size: 0.82rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text2); }
.roll-badge.roll-pending { color: var(--warning); border-color: var(--warning); }
.roll-badge.roll-pass { color: #5fd49a; border-color: #2f6f4f; background: rgba(39,174,96,0.12); }
.roll-badge.roll-fail { color: #e88; border-color: var(--danger); background: rgba(192,57,43,0.12); }

.roll-luck { margin-top: 0.55rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--text2); }
.roll-luck input { margin: 0; }

.wound-cell { white-space: nowrap; }
.wound-tog { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.8rem; margin-right: 0.5rem; color: var(--text2); }
.wound-tog input { margin: 0; }
.luck-adj { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; margin-right: 0.4rem; }
.luck-adj-form { display: flex; gap: 0.35rem; align-items: center; }
.luck-adj-form input { margin: 0; }

/* ── Per-skill Roll button ── */
.sheet-roll-btn {
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text2);
  cursor: pointer;
  flex: 0 0 auto;
}
.sheet-roll-btn:hover { color: var(--text); border-color: var(--accent); }
.sheet-roll-btn.roll-needed {
  background: #4a3c12;
  border-color: var(--warning);
  color: #ffd479;
  font-weight: 600;
  animation: roll-pulse 1.6s ease-in-out infinite;
}
@keyframes roll-pulse { 50% { box-shadow: 0 0 0 3px rgba(230,126,34,0.18); } }
.srm-result { font-size: 1.05rem; margin: 0.5rem 0 0.9rem; }
.roll-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.roll-line:last-child { border-bottom: none; }

/* Keep the per-skill Roll button inline on its row (wide screens) rather than
   wrapping under the skill. The base rows are 2-/3-col grids; extend them. */
.skill-row.with-roll { grid-template-columns: 1fr auto auto; }
.combat-skill-row.with-roll { grid-template-columns: minmax(0, 1fr) 84px 84px auto; }
/* With Roll buttons, base stats drop to 3-per-row (like the derived grid) and
   each cell is fully inline: label · select · Roll. Plenty of width at 3-up. */
.characteristics-grid-6.with-roll-grid { grid-template-columns: repeat(3, 1fr); }
.char-field.with-roll {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.char-field.with-roll > label { margin: 0; flex: 0 0 auto; text-align: left; }
.char-field.with-roll select { flex: 1 1 auto; min-width: 0; }
.char-field.with-roll .sheet-roll-btn { margin: 0; }
.sheet-roll-btn { white-space: nowrap; }

/* Derived stats: title · value · Roll inline (matches the base-stats block). */
.derived-grid .form-group.with-roll { display: flex; align-items: center; gap: 0.4rem; }
.derived-grid .form-group.with-roll > label { margin: 0; flex: 0 0 auto; text-align: left; }
.derived-grid .form-group.with-roll > input,
.derived-grid .form-group.with-roll > div { flex: 1 1 auto; min-width: 0; }
/* Current HP/MP/Luck — 3-column row, each with a Roll button. */
.current-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.5rem; margin-top: 0.75rem; }
.current-cell { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.65rem; }
.current-label { font-size: 0.78rem; color: var(--text2); flex: 0 0 auto; }
.current-val { font-weight: 700; font-size: 1.05rem; }
.current-base { color: var(--text2); font-weight: 400; font-size: 0.8rem; }
.current-cell .sheet-roll-btn { margin-left: auto; }
.state-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem 0.85rem; margin: 0.5rem 0; }
.state-name { font-weight: 600; color: var(--accent2); margin-bottom: 0.35rem; }
.state-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--border); }
.state-card .state-line:first-of-type { border-top: none; }
.state-head { min-width: 150px; }
.state-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.state-wounds { margin-top: 0.45rem; font-size: 0.85rem; color: var(--text2); }

/* ── About tab ───────────────────────────────────────────── */
.about-card { max-width: 880px; display: flex; flex-direction: column; gap: 1.5rem; }
.about-hero { display: flex; gap: 1.5rem; align-items: flex-start; }
.about-portrait-frame {
  flex: 0 0 auto; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg3);
}
.about-portrait { display: block; width: 200px; height: auto; }
.about-copy { display: flex; flex-direction: column; gap: 0.75rem; }
.about-copy p { color: var(--text); }
.about-inline-link { color: var(--accent2); }
.about-inline-link:hover { color: var(--accent); }
.about-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.about-link-button { text-decoration: none; }
.about-meta-card { background: var(--bg3); }
.about-meta-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.about-meta-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4rem 0; border-top: 1px solid var(--border);
}
.about-meta-list li:first-child { border-top: none; }
.about-meta-list span { color: var(--text2); }
.about-meta-list code,
.about-meta-list strong,
.about-meta-list a,
.about-meta-list time { color: var(--text); text-align: right; }

@media (max-width: 640px) {
  .about-hero { flex-direction: column; }
  .about-portrait { width: 100%; }
}

/* ── Rules browser view ── */
body:not(.rules-print-mode) #tab-rules .rules-document {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  line-height: 1.6;
}
body:not(.rules-print-mode) #tab-rules .rules-document .print-cover { display: none; }
body:not(.rules-print-mode) #tab-rules .rules-document .print-section { margin: 0; }
body:not(.rules-print-mode) #tab-rules .rules-document h1,
body:not(.rules-print-mode) #tab-rules .rules-document h2,
body:not(.rules-print-mode) #tab-rules .rules-document h3,
body:not(.rules-print-mode) #tab-rules .rules-document h4 {
  color: var(--accent2);
  line-height: 1.25;
  margin: 1.4rem 0 0.6rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document h1 {
  font-size: 1.45rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document h2 {
  font-size: 1.18rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.25rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document h3 { font-size: 1.02rem; color: var(--text); }
body:not(.rules-print-mode) #tab-rules .rules-document h4 { font-size: 0.95rem; color: var(--text2); }
body:not(.rules-print-mode) #tab-rules .rules-document p,
body:not(.rules-print-mode) #tab-rules .rules-document li {
  max-width: none;
}
body:not(.rules-print-mode) #tab-rules .rules-document p,
body:not(.rules-print-mode) #tab-rules .rules-document ul,
body:not(.rules-print-mode) #tab-rules .rules-document pre,
body:not(.rules-print-mode) #tab-rules .rules-document table {
  margin-bottom: 0.75rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document ul {
  padding-left: 1.35rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg2);
  border: 1px solid var(--border);
  font-size: 0.92rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document th,
body:not(.rules-print-mode) #tab-rules .rules-document td {
  border: 1px solid var(--border);
  padding: 0.42rem 0.55rem;
  vertical-align: top;
  text-align: left;
}
body:not(.rules-print-mode) #tab-rules .rules-document th {
  background: var(--bg3);
  color: var(--accent2);
}
body:not(.rules-print-mode) #tab-rules .rules-document code {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05rem 0.25rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document pre {
  overflow: auto;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}
body:not(.rules-print-mode) #tab-rules .rules-document pre code {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ── Rules tab: Core / Advanced / What's New switcher ── */
.rules-views {
  display: flex;
  gap: 0.25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--border);
}
.rules-view-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  color: var(--text2);
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  margin-bottom: -1px;
}
.rules-view-btn:hover { color: var(--text); background: var(--bg2); }
.rules-view-btn.active {
  color: var(--accent2);
  background: var(--bg2);
  border-color: var(--border);
  border-bottom-color: var(--bg2);
}

/* ── Rules tab: "What's New in Advanced" changelog ── */
.rules-changes-intro { color: var(--text2); margin-bottom: 1.25rem; }
.rules-change-group { margin-bottom: 1.75rem; }
.rules-change-chapter {
  font-size: 1.1rem;
  color: var(--accent2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
  margin: 0 0 0.85rem;
}
.rules-change-entry {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.85rem;
}
.rules-change-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--text);
}
.rules-change-body > :first-child { margin-top: 0; }
.rules-change-body > :last-child { margin-bottom: 0; }
.rules-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: #fff;
  white-space: nowrap;
}
.rules-badge-add { background: var(--success); border-color: var(--success); }
.rules-badge-supersede { background: var(--danger); border-color: var(--danger); }
.rules-badge-supplement { background: var(--warning); border-color: var(--warning); }

/* ── NPC chat: small character portrait on the NPC's messages ── */
.npc-chat-portrait {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 0.4rem;
  border: 1px solid var(--border);
}

/* ── Printable export documents ── */
/* Re-map the dark theme variables to print-friendly values for the whole
   export, so every component (incl. inline color:var(--text2) styles) renders
   dark-on-white. These apply on screen too, not only when printing. */
.print-doc {
  --bg: #fff; --bg2: #fff; --bg3: #fff; --border: #bbb;
  --text: #111; --text2: #333; --accent: #222; --accent2: #222;
  --warning: #7a4a00; --success: #1f6f3a; --danger: #a02020;
  background: #fff; color: #111; max-width: 900px; margin: 0 auto; padding: 1.5rem 2rem 4rem;
}
/* Hard guarantee: nothing pale. Keeps borders/images intact. */
.print-doc, .print-doc *:not(img):not(svg) { color: #111 !important; }
.print-doc h1, .print-doc h2, .print-doc h3, .print-doc h4 { color: #000 !important; }
.print-doc .card, .print-doc .scenario-entry-card, .print-doc .scenario-summary-card,
.print-doc table, .print-doc th, .print-doc td { background: #fff !important; border-color: #bbb !important; }
.print-doc .print-section { margin-top: 1.5rem; }
.print-doc .print-cover { text-align: center; padding: 3rem 0; border-bottom: 2px solid #111; margin-bottom: 1rem; }

/* The export is a static hardcopy — strip ALL interactive chrome (on screen
   and in print), not just buttons: regenerate/revert actions, jump indexes,
   tab strips, anything clickable. The Print/Close toolbar sits OUTSIDE
   .print-doc so it is unaffected here. */
.print-doc .btn, .print-doc button, .print-doc .scenario-section-actions,
.print-doc .scenario-jump, .print-doc .scenario-jump-all, .print-doc .case-index,
.print-doc [onclick], .print-doc .sheet-tabs,
.print-doc input[type="button"], .print-doc input[type="submit"] { display: none !important; }
/* Value-bearing fields stay (they hold sheet data) but render as flat text. */
.print-doc select, .print-doc input, .print-doc textarea {
  -webkit-appearance: none; appearance: none; border: none !important;
  background: transparent !important; color: #111 !important; padding: 0 !important;
  height: auto !important; max-height: none !important; overflow: visible !important; }
.print-doc select { pointer-events: none; }
.print-doc textarea { resize: none; white-space: pre-wrap; }
.print-doc .scroll, .print-doc [class*="scroll"] {
  height: auto !important; max-height: none !important; overflow: visible !important; }

.print-toolbar { position: fixed; top: 0; right: 0; z-index: 9999; display: flex; gap: .5rem; padding: .6rem .8rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 0 0 0 var(--radius); }
body.print-mode { overflow: auto; background: #fff; }
body.print-mode #app { display: none !important; }

@media print {
  .print-toolbar { display: none !important; }
  body.print-mode #app { display: none !important; }
  .print-doc { max-width: none; margin: 0; padding: 0; }
  /* Every export section starts on its own page (legacy prop for Chrome). */
  .print-doc .print-section { break-before: page; page-break-before: always; }
  /* Never orphan a heading at the foot of a page — keep titles with content. */
  .print-doc h1, .print-doc h2, .print-doc h3, .print-doc h4,
  .print-doc .card-title, .print-doc .scenario-section-header {
    break-after: avoid; page-break-after: avoid; }
  /* Only small atomic blocks avoid internal breaks; large content cards/tables
     flow across pages so a tall card doesn't get shoved off, stranding its
     title on the previous page. */
  .print-doc .sheet-portrait, .print-doc figure, .print-doc tr { break-inside: avoid; }
  a { color: #111 !important; text-decoration: none; }
  body.rules-print-mode .nav, body.rules-print-mode .rules-print-actions { display: none !important; }
  body.rules-print-mode #tab-rules { display: block !important; padding: 0; }
  body.rules-print-mode #tab-rules .print-doc { max-width: none; margin: 0; padding: 0; }
  body.rules-print-mode #tab-rules .print-doc .print-section { break-before: auto; page-break-before: auto; }
}

/* ── P0: brand identity, splash & login ───────────────────────────────────── */
.brand-mark { width: 56px; height: 56px; color: var(--accent2); display: block; }
.brand-mark.lg { width: 72px; height: 72px; }
.brand-splash { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.brand-word {
  font-size: 1.9rem; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text); text-transform: none;
}
.brand-tag { color: var(--text2); font-size: 0.85rem; letter-spacing: 0.03em; margin-top: 0.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .brand-splash { animation: brand-rise 0.5s ease-out both; }
  .brand-mark { animation: brand-glow 3.2s ease-in-out infinite; }
  @keyframes brand-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes brand-glow { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(160,149,232,0.45)); } }
}

/* Atmospheric login: original generated backdrop + legibility overlay */
.login-page { position: relative; overflow: hidden; }
.login-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('/img/login-bg.png') center / cover no-repeat;
}
.login-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10,10,16,0.35) 0%, rgba(10,10,16,0.78) 70%, rgba(10,10,16,0.92) 100%),
    linear-gradient(180deg, rgba(10,10,16,0.45) 0%, rgba(10,10,16,0.2) 40%, rgba(10,10,16,0.8) 100%);
}
.login-page .login-card {
  position: relative; z-index: 1;
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}
.login-header { display: flex; flex-direction: column; align-items: center; }
.login-header .brand-mark { margin-bottom: 0.6rem; }
.login-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text); }
.login-header p { font-size: 0.84rem; color: var(--text2); margin-top: 0.2rem; letter-spacing: 0.04em; }

/* ── P1: dual-theme tokens & toggle ───────────────────────────────────────── */
:root { --focus: #a095e8; }
/* Dark stays the default (the existing :root values). The light theme is a
   hand-tuned map for WCAG-readable contrast — never an inversion of dark. */
:root[data-theme="light"] {
  --bg: #f6f5f9;
  --bg2: #ffffff;
  --bg3: #ecebf3;
  --border: #d4d0e0;
  --text: #1d1b2a;
  --text2: #5b5570;
  --accent: #5d50b8;
  --accent2: #4a3f96;
  --danger: #b3271e;
  --danger-bg: #fbe9e7;
  --success: #1f7a44;
  --warning: #9a5b00;
  --focus: #5d50b8;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Focus ring (consistent across both themes, theme-tinted). */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: calc(var(--radius) / 2);
}

/* Theme toggle button in the nav. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--bg2); border-color: var(--accent); color: var(--accent2); }
.theme-toggle svg { display: block; }

/* Nav brand: SVG mark instead of emoji */
.nav-brand { gap: 0.55rem; }
.brand-mark.sm { width: 22px; height: 22px; color: var(--accent2); }

/* Light theme: the atmospheric photo backdrop is designed for dark. Swap to a
   clean light gradient so the login reads correctly there. */
:root[data-theme="light"] .login-page { background: linear-gradient(180deg, #eceaf6 0%, #f6f5f9 60%, #ffffff 100%); }
:root[data-theme="light"] .login-bg { display: none; }
:root[data-theme="light"] .login-page .login-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px -28px rgba(35, 26, 80, 0.25);
  backdrop-filter: none;
}

/* Light theme: the dice-roller and llm-status colours that were tuned for the
   dark palette stay readable via tokens; nothing component-level to override. */

/* Respect user motion preferences globally for any P0/P1 transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Case Files: optional cover image per session card ────────────────────── */
.session-card .session-cover {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--border);
  margin-top: 0.8rem;
}

/* Full-screen diagram editor overlay (vendored Excalidraw). The editor itself
   is themed by host.css; these rules only frame the host's toolbar + canvas.
   Kept light-on-white so the drawing surface reads the same in either theme. */
.rol-exc-host, .rol-exc-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; background: #fff;
}
.rol-exc-toolbar {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid #ddd;
  background: #fff; color: #111;
}
.rol-exc-title { font-weight: 600; }
.rol-exc-error { color: #b00020; }
.rol-exc-spacer { flex: 1; }
.rol-exc-canvas { flex: 1; min-height: 0; }
.rol-exc-toolbar button {
  padding: 6px 14px; border: 1px solid #c7c7d1; border-radius: 6px;
  background: #f3f3f6; color: #111; cursor: pointer; font: inherit;
}
.rol-exc-toolbar button.primary { font-weight: 600; background: var(--accent, #5b5bd6); color: #fff; border-color: transparent; }
.rol-exc-toolbar button:disabled { opacity: 0.55; cursor: default; }