@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap');

/* Variables mirrored from fabula-ultima-sheet.css */
:root {
  --bg:           #0d0f0e;
  --surface:      #141816;
  --surface2:     #1b1f1d;
  --surface3:     #222826;
  --border:       #2e3830;
  --border-bright:#3d4f47;
  --teal:         #4ecdc4;
  --teal-dim:     #2a6b66;
  --gold:         #c9a84c;
  --gold-dim:     #7a6130;
  --red:          #c0392b;
  --text:         #d4cfc4;
  --text-dim:     #7a8a82;
  --text-bright:  #ede8dc;
  --font-display: 'Cinzel', serif;
  --font-body:    'Crimson Text', serif;
  --font-mono:    'Inconsolata', monospace;
}

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

/* ── Base ── */
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(78,205,196,.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(201,168,76,.04) 0%, transparent 50%);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  padding: 32px;
  max-width: 860px;
  margin: 0 auto;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.3;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 1.85em;
  color: var(--teal);
  border-bottom: 1px solid var(--border-bright);
  padding-bottom: 0.3em;
  margin-top: 0.4em;
}

h2 { font-size: 1.3em;  color: var(--gold); }
h3 { font-size: 1.1em;  color: var(--text-bright); }
h4 { font-size: 0.95em; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; }
h5, h6 { font-size: 0.85em; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Body copy ── */
p { margin-bottom: 0.9em; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--text-bright); font-weight: 600; }
em, i     { color: var(--text-dim); font-style: italic; }

a           { color: var(--teal); text-decoration: none; }
a:hover     { text-decoration: underline; }

small { font-size: 0.82em; color: var(--text-dim); }

/* ── Lists ── */
ul, ol { padding-left: 1.5em; margin-bottom: 0.9em; }
li { margin-bottom: 0.35em; }
li > p { margin-bottom: 0.3em; }
li strong { color: var(--gold); }
dl dt::before { content: "\10087 "; }

/* Custom bullet style used by several pages */
ul.no-bullets, .class-list, .toc-list, .ability-list { list-style: none; padding-left: 0; }

/* ── Blockquote ── */
blockquote {
  border-left: 3px solid var(--teal-dim);
  margin: 1em 0;
  padding: 0.6em 1.2em;
  color: var(--text-dim);
  font-style: italic;
  background: var(--surface2);
}

blockquote cite, cite { font-size: 0.85em; color: var(--text-dim); display: block; margin-top: 0.4em; }

/* ── Code ── */
code {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: var(--surface2);
  color: var(--teal);
  padding: 0.05em 0.3em;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.84em;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 1em;
  overflow-x: auto;
  margin-bottom: 0.9em;
}

/* ── HR / dividers ── */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.4em 0;
}

/* ── Tables ── */
table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: 0.9em; }
th {
  background: var(--surface3);
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 0.65em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-bright);
}
td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }

/* ── Structural ── */
header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.8em;
  margin-bottom: 1.4em;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.78em;
}

section { margin-bottom: 1.4em; }

/* .container wrappers used by some pages */
.container, .document-container, .section-container { /* inherit body max-width */ }

/* ── Metadata / footer notes ── */
.metadata, .meta-data, .metadata-box, .meta-info,
.document-footer, .page-info, .reference-note,
.source-note, .footer-note {
  margin-top: 2em;
  padding: 0.7em 0.9em;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.76em;
  color: var(--text-dim);
}

/* ── Section breaks ── */
.section-break, .section-divider {
  border-top: 1px solid var(--border-bright);
  margin: 1.6em 0;
  padding-top: 1.6em;
}

/* ── Section / sub-section headings ── */
.section-header, .section-title, .subheading {
  font-family: var(--font-display);
  font-size: 0.65em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

/* ── Card-style entries ── */
.weapon-entry, .skill-entry, .artifact-entry, .item-entry,
.character-card, .stat-block, .skill-card, .ability-item,
.lore-entry, .credit-entry, .choice-group,
.index-item, .equipment, .equipment-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal-dim);
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* Entry / item titles */
.weapon-title, .artifact-title, .entry-title,
.item-name, .item-title, .item-header,
.ability-title, .skill-title, .skill-name,
.weapon-name, .effect-header, .skill-header {
  font-family: var(--font-display);
  font-size: 0.72em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.35em;
}

/* Stats / attributes lines */
.weapon-stats, .stats-line, .stats, .stats-block,
.stats-data, .stats-grid, .attributes,
.key-attributes, .stat-item, .stat-box, .stat-block {
  font-family: var(--font-mono);
  font-size: 0.82em;
  color: var(--text-dim);
  margin-bottom: 0.5em;
}

.attributes span, .stats-grid span { display: inline-block; margin-right: 1em; }

/* Damage / cost labels */
.damage-type     { color: var(--red); font-weight: 600; }
.cost, .item-cost, .skill-cost, .requirements { color: var(--gold-dim); font-family: var(--font-mono); font-size: 0.85em; }

/* ── ToC ── */
.toc-list { list-style: none; padding: 0; }
.toc-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95em;
}
.toc-item:last-child { border-bottom: none; }
.title, .section-header.title { flex: 1; }
.page-number { font-family: var(--font-mono); font-size: 0.82em; color: var(--text-dim); white-space: nowrap; }

/* ── Profile / character ── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.profile-attribute strong, .profile-field strong { color: var(--text-dim); font-size: 0.85em; display: block; }
.profile-attribute span  { font-weight: 600; color: var(--text-bright); }

.character-info { font-size: 0.9em; color: var(--text-dim); margin-bottom: 0.5em; }

/* ── Notes / highlights / examples ── */
.highlight, .note, .info-box, .info-item, .special-rules {
  background: var(--surface2);
  border: 1px solid var(--border-bright);
  padding: 10px 14px;
  margin: 0.8em 0;
}

.example {
  border-left: 3px solid var(--gold-dim);
  padding: 0.5em 1em;
  color: var(--text-dim);
  font-style: italic;
  margin: 0.8em 0;
}

/* ── Descriptor / index groups ── */
.descriptor-group, .index-list, .class-list, .ability-list { margin-bottom: 1em; }
.index-item { display: flex; gap: 0.5em; }
.skill-classes { font-size: 0.8em; color: var(--text-dim); }

/* ── Section group ── */
.section-group { margin-bottom: 1.4em; }

/* ── Skill header layout ── */
.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4em;
}

/* ── Scrollbar ── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-bright); }
::-webkit-scrollbar-thumb:hover { background: var(--teal-dim); }