/* ============================================================
   components.css — All reusable UI components.
   Add new components here. Do not put layout or token
   definitions here — those belong in layout.css / theme.css.
   ============================================================ */


/* ── SECTION CARDS ── */

.section {
  background: var(--parchment);
  border: 1px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 12px var(--shadow);
  overflow: hidden;
}

.section-header {
  background: linear-gradient(to right, var(--parchment-dark), var(--parchment));
  border-bottom: 2px solid var(--gold);
  padding: 0.9rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.section-header .icon { font-size: 1.3rem; }

.section-header h2 {
  font-size: 1.35rem;
  color: var(--red);
  letter-spacing: 0.03em;
}

.section-header .badge {
  margin-left: auto;
  font-size: 0.72rem;
  background: var(--red);
  color: var(--parchment);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-style: italic;
}

.section-body { padding: 1.4rem 1.6rem; }


/* ── TYPOGRAPHY WITHIN SECTIONS ── */

h3 {
  font-size: 1.05rem;
  color: var(--ink-light);
  border-bottom: 1px solid var(--rule-color);
  padding-bottom: 0.25rem;
  margin-bottom: 0.75rem;
  margin-top: 1.3rem;
  letter-spacing: 0.02em;
}

h3:first-child { margin-top: 0; }

h4 {
  font-size: 0.9rem;
  color: var(--red);
  margin-bottom: 0.4rem;
  margin-top: 1rem;
  font-style: italic;
}

h4:first-child { margin-top: 0; }

p {
  line-height: 1.7;
  font-size: 0.92rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}

p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.3rem; margin-bottom: 0.6rem; }

li { line-height: 1.65; font-size: 0.92rem; margin-bottom: 0.2rem; }

strong { color: var(--ink-light); }
em     { color: var(--ink-light); }

hr.divider {
  border: none;
  border-top: 1px solid var(--rule-color);
  margin: 1.2rem 0;
  opacity: 0.5;
}

.ornament {
  text-align: center;
  color: var(--gold);
  margin: 0.8rem 0;
  font-size: 1rem;
  letter-spacing: 0.4em;
  opacity: 0.7;
}


/* ── CALLOUT BOXES ── */

.callout {
  border-radius: 4px;
  padding: 0.85rem 1rem;
  margin: 0.9rem 0;
  border-left: 4px solid;
  font-size: 0.9rem;
}

.callout-title {
  font-weight: bold;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.35rem;
}

.callout.mechanic              { background: #e8eef8; border-color: var(--blue); }
.callout.mechanic .callout-title { color: var(--blue); }

.callout.dm-note               { background: #fdf5e0; border-color: var(--gold); }
.callout.dm-note .callout-title  { color: var(--gold); }

.callout.danger                { background: #f8e8e8; border-color: var(--red); }
.callout.danger .callout-title   { color: var(--red); }

.callout.success               { background: #e8f5eb; border-color: var(--green); }
.callout.success .callout-title  { color: var(--green); }

.callout.lore {
  background: var(--parchment-dark);
  border-color: var(--ink-light);
  font-style: italic;
}
.callout.lore .callout-title { font-style: normal; color: var(--ink-light); }


/* ── READ-ALOUD BLOCK ── */

.read-aloud {
  background: #1a2740;
  border: 1px solid #2e4a7a;
  border-left: 4px solid var(--gold-light);
  padding: 1.1rem 1.4rem;
  margin: 1rem 0;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #e8dfc8;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.read-aloud p,
.read-aloud li,
.read-aloud em,
.read-aloud span { color: #e8dfc8; }

.read-aloud strong { color: var(--gold-light); }

.read-aloud .ra-label {
  font-style: normal;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  font-weight: bold;
}


/* ── STAT PILLS ── */

.stat-pill {
  display: inline-block;
  background: var(--ink-light);
  color: var(--parchment);
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 10px;
  margin: 0 0.15rem;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  white-space: nowrap;
}

.stat-pill.dc     { background: var(--blue); }
.stat-pill.check  { background: var(--green); }
.stat-pill.damage { background: var(--red); }
.stat-pill.time   { background: var(--gold); color: #fff; }


/* ── NPC CARDS ── */

.npc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.6rem;
}

.npc-card {
  background: var(--parchment-dark);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1rem;
  border-top: 3px solid;
  display: flex;
  flex-direction: column;
}

.npc-card.villain { border-top-color: var(--red); }
.npc-card.ally    { border-top-color: var(--green); }
.npc-card.neutral { border-top-color: var(--gold); }

/* NPC portrait image */
.npc-card .npc-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: top center;
  border-radius: 3px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--gold);
}

.npc-card .npc-name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--ink-light);
  margin-bottom: 0.25rem;
}

.npc-card .npc-role {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(160, 120, 48, 0.4);
  padding-bottom: 0.4rem;
}

.npc-card .npc-role .tag {
  font-style: normal;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  margin-right: 0.3rem;
}

.tag-villain { background: var(--red); color: var(--parchment); }
.tag-ally    { background: var(--green); color: var(--parchment); }
.tag-neutral { background: var(--gold); color: var(--ink); }
.tag-missing { background: #555; color: var(--parchment); }

.npc-card p { font-size: 0.84rem; line-height: 1.55; margin-bottom: 0.4rem; }

.npc-card .stat-block {
  font-size: 0.78rem;
  color: var(--ink-light);
  border-top: 1px solid rgba(160, 120, 48, 0.4);
  padding-top: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}


/* ── 5-ROOM FLOW ── */

.room-list { counter-reset: room; }

.room {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.3rem;
  align-items: flex-start;
}

.room-number {
  min-width: 2.4rem;
  height: 2.4rem;
  background: var(--red);
  color: var(--parchment);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(139, 26, 26, 0.4);
}

.room-content  { flex: 1; }
.room-title    { font-weight: bold; color: var(--ink-light); font-size: 0.95rem; }
.room-body     { font-size: 0.88rem; line-height: 1.6; color: var(--ink); margin-top: 0.25rem; }


/* ── OUTCOME BRANCHES ── */

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.8rem;
  margin-top: 0.6rem;
}

.outcome {
  padding: 0.9rem;
  border-radius: 4px;
  border: 1px solid;
}

.outcome.early  { background: #e8f5eb; border-color: var(--green); }
.outcome.late   { background: #fdf5e0; border-color: var(--gold); }
.outcome.fail   { background: #f8e8e8; border-color: var(--red); }

.outcome .outcome-label {
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.outcome.early .outcome-label { color: var(--green); }
.outcome.late  .outcome-label { color: var(--gold); }
.outcome.fail  .outcome-label { color: var(--red); }

.outcome p { font-size: 0.85rem; line-height: 1.5; }


/* ── DATA TABLES ── */

.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.8rem 0;
}

.styled-table th {
  background: var(--ink-light);
  color: var(--parchment);
  padding: 0.5rem 0.8rem;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.styled-table td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--parchment-dark);
  vertical-align: top;
  line-height: 1.5;
}

.styled-table tr:nth-child(even) td { background: var(--parchment-dark); }
.styled-table tr:hover td           { background: #ede2c5; }

.styled-table td:first-child        { font-weight: bold; color: var(--gold); white-space: nowrap; }
.styled-table td strong             { color: var(--red); }

/* Riddle table variant */
.riddle-table td                    { vertical-align: top; }
.riddle-table td:nth-child(1)       { font-style: italic; font-weight: normal; color: var(--ink); max-width: 380px; white-space: normal; }
.riddle-table td:nth-child(2)       { color: var(--green); font-weight: bold; white-space: nowrap; }
.riddle-table td:nth-child(3)       { color: var(--red); white-space: nowrap; }


/* ── BATTLEFIELD ACTION CARDS ── */

.ba-card {
  background: var(--parchment-dark);
  border: 1px solid var(--gold);
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
}

.ba-card summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: bold;
  color: var(--ink-light);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  background: var(--parchment-dark);
  user-select: none;
}

.ba-card summary::-webkit-details-marker { display: none; }

.ba-card summary::before {
  content: '▶';
  font-size: 0.6rem;
  color: var(--gold);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.ba-card[open] summary::before { transform: rotate(90deg); }

.ba-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(160, 120, 48, 0.4);
}

.ba-phase {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  align-items: flex-start;
}

.ba-label {
  min-width: 100px;
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  text-align: center;
  flex-shrink: 0;
}

.ba-label.tell       { background: #d4edff; color: var(--blue); border: 1px solid var(--blue); }
.ba-label.neutralize { background: #d4ffe0; color: var(--green); border: 1px solid var(--green); }
.ba-label.mitigate   { background: #fff3d4; color: var(--gold); border: 1px solid var(--gold); }
.ba-label.resolution { background: #ffd4d4; color: var(--red); border: 1px solid var(--red); }

.ba-text { font-size: 0.87rem; line-height: 1.6; }


/* ── IMAGE REVEAL ── */
/* Wrapper for show/hide location art and battlemaps */

.image-reveal {
  margin: 1rem 0;
}

.image-reveal .image-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--parchment-dark);
  border: 1px solid var(--gold);
  color: var(--ink-light);
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: 'Georgia', serif;
  transition: background 0.15s;
}

.image-reveal .image-toggle:hover {
  background: #ddd0a8;
}

.image-reveal .image-toggle::before {
  content: '🖼';
  font-size: 0.9rem;
}

.image-reveal .image-container {
  display: none;
  margin-top: 0.6rem;
  position: relative;
}

.image-reveal.open .image-container {
  display: block;
}

.image-reveal .image-container img {
  max-width: 100%;
  border: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 4px 16px var(--shadow);
}

.image-reveal .image-caption {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ink-light);
  margin-top: 0.4rem;
  text-align: center;
}


/* ── WIKI LINKS ── */

a.wiki-link {
  color: var(--red);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
}

a.wiki-link:hover {
  color: var(--gold);
  text-decoration-style: solid;
}


/* ── LINK PREVIEW TOOLTIP ── */

.link-preview {
  position: fixed;
  z-index: 500;
  background: var(--parchment);
  border: 2px solid var(--gold);
  border-radius: 4px;
  width: 420px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.link-preview .lp-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.9rem;
  background: var(--parchment-dark);
  border-bottom: 1px solid var(--gold);
  flex-shrink: 0;
}

.link-preview .lp-title {
  font-weight: bold;
  color: var(--red);
  font-size: 0.88rem;
}

.link-preview .lp-tag {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.1rem 0.4rem;
  border-radius: 2px;
  background: var(--gold);
  color: var(--ink);
  flex-shrink: 0;
}

.link-preview .lp-content {
  overflow-y: auto;
  padding: 0.75rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Scale down components that appear inside the preview */
.link-preview .statblock {
  font-size: 0.78rem;
}

.link-preview .npc-card {
  border: none;
  padding: 0;
  box-shadow: none;
}

.link-preview .npc-img {
  max-height: 140px;
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
  margin-bottom: 0.5rem;
}


/* ── MISC / LINKED NOTES SECTION ── */

.misc-entry {
  margin-bottom: 0.6rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  overflow: hidden;
}

.misc-summary {
  padding: 0.65rem 1rem;
  cursor: pointer;
  background: var(--parchment-dark);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: bold;
  color: var(--ink-light);
  font-size: 0.9rem;
  user-select: none;
  list-style: none;
}

.misc-summary::-webkit-details-marker { display: none; }

.misc-summary::before {
  content: '▶';
  font-size: 0.55rem;
  color: var(--gold);
  transition: transform 0.15s;
  flex-shrink: 0;
}

.misc-entry[open] > .misc-summary::before { transform: rotate(90deg); }

.misc-tag {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  font-weight: bold;
  flex-shrink: 0;
}

.misc-tag-monster { background: var(--red);   color: var(--parchment); }
.misc-tag-npc     { background: var(--green); color: var(--parchment); }
.misc-tag-note    { background: var(--gold);  color: var(--ink); }

.misc-content {
  padding: 1rem 1.2rem;
  background: var(--parchment);
}


/* ── D&D 5E STATBLOCK ── */

.statblock {
  background: #fdf1dc;
  border: 2px solid var(--red);
  border-radius: 2px;
  padding: 0.6rem 0.8rem 0.8rem;
  max-width: 420px;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(139, 26, 26, 0.15);
}

.sb-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--red);
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.sb-type {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-light);
  margin-bottom: 0.4rem;
}

hr.sb-divider {
  border: none;
  border-top: 2px solid var(--red);
  margin: 0.45rem 0;
  opacity: 0.6;
}

.sb-props {
  margin: 0.3rem 0;
}

.sb-prop {
  line-height: 1.5;
  margin: 0.1rem 0;
  font-size: 0.84rem;
}

.sb-prop-label {
  font-weight: bold;
  color: var(--red);
}

.sb-abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  background: rgba(139, 26, 26, 0.07);
  border-top:    1px solid rgba(139, 26, 26, 0.25);
  border-bottom: 1px solid rgba(139, 26, 26, 0.25);
  padding: 0.35rem 0;
  margin: 0.45rem 0;
}

.sb-ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}

.sb-ability span:first-child {
  font-size: 0.62rem;
  font-weight: bold;
  color: var(--red);
  text-transform: uppercase;
}

.sb-ability span:last-child {
  font-size: 0.8rem;
}

.sb-section-title {
  font-size: 0.95rem;
  font-variant: small-caps;
  color: var(--red);
  border-bottom: 1px solid rgba(139, 26, 26, 0.4);
  margin-top: 0.6rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.03em;
}

.sb-action {
  margin: 0.35rem 0;
  line-height: 1.55;
  font-size: 0.84rem;
}

.sb-action-name {
  font-style: italic;
  font-weight: bold;
}

/* Lore text below statblock */
.sb-lore {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(160, 120, 48, 0.35);
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--ink);
}

.sb-lore h4 {
  color: var(--ink-light);
  font-size: 0.88rem;
  margin-top: 0.7rem;
  margin-bottom: 0.3rem;
  border-bottom: none;
}

.sb-lore p { margin-bottom: 0.5rem; }


/* ── NPC NOTE FIELDS ── */

.npc-fields {
  font-size: 0.84rem;
  line-height: 1.6;
  border-top: 1px solid rgba(160, 120, 48, 0.4);
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

.npc-field {
  margin-bottom: 0.25rem;
}

.npc-field-label {
  font-weight: bold;
  color: var(--ink-light);
}


/* ── GENERIC NOTE ── */

.generic-note {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink);
}

.generic-note h4 {
  margin-top: 0.8rem;
  margin-bottom: 0.3rem;
  border-bottom: none;
}


/* ── GAME TERM TOOLTIPS ── */

.game-term {
  border-bottom: 1px dotted var(--blue);
  cursor: help;
}

.game-term--condition {
  border-bottom-color: var(--green);
}

.game-term--creature {
  border-bottom-color: #7c4d7c;
}

.term-tooltip {
  position: fixed;
  z-index: 998;
  max-width: 340px;
  background: var(--parchment);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  font-family: 'Georgia', serif;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--ink);
}

.tt-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.tt-name {
  font-weight: bold;
  color: var(--ink-light);
  font-size: 0.9rem;
}

.tt-badge {
  font-size: 0.68rem;
  font-family: 'Courier New', monospace;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tt-badge--spell     { background: var(--blue);  color: #fff; }
.tt-badge--condition { background: var(--green); color: #fff; }
.tt-badge--creature  { background: #7c4d7c;      color: #fff; }

.tt-meta {
  font-size: 0.76rem;
  color: var(--ink-light);
  margin-bottom: 0.35rem;
  font-style: italic;
}

.tt-props {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  font-size: 0.74rem;
  color: var(--ink-light);
  margin-bottom: 0.4rem;
  border-top: 1px solid rgba(160,120,48,0.3);
  padding-top: 0.3rem;
}

.tt-body {
  font-size: 0.8rem;
  color: var(--ink);
}

.tt-body--pre {
  white-space: pre-line;
}


/* ── INLINE FLOAT IMAGES (Obsidian ![[file|right|200]] embeds) ── */

/* ── PURCHASE / SOURCE BADGE ── */

.purchase-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  background: rgba(0, 0, 0, 0.72);
  color: #e8d8a0;
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.03em;
  z-index: 10;
  transition: background 0.15s;
}

.purchase-badge:hover {
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
}

/* ── LOW-RES IMAGE MODE ── */


/* ── IMAGE HOVER PREVIEW ── */

.img-hover-preview {
  position: fixed;
  z-index: 999;
  max-width: 420px;
  max-height: 520px;
  border: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.5);
  overflow: hidden;
  background: var(--parchment-dark);
}

.img-hover-preview img {
  display: block;
  max-width: 420px;
  max-height: 520px;
  object-fit: contain;
}

.npc-img, .img-float { cursor: zoom-in; }

.img-float {
  border: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 2px 8px var(--shadow);
  margin-bottom: 0.75rem;
  display: block;
}

.img-float.right {
  float: right;
  margin-left: 1rem;
}

.img-float.left {
  float: left;
  margin-right: 1rem;
}

.section-body::after {
  content: '';
  display: table;
  clear: both;
}


/* ── GALLERY ── */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin: 0.75rem 0 1.5rem;
}

.gallery-grid--locations {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery-item {
  background: var(--parchment-dark);
  border: 1px solid var(--gold);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.gallery-grid--locations .gallery-item img {
  aspect-ratio: 4 / 3;
}

.gallery-item:hover img {
  opacity: 0.85;
}

.gallery-label {
  padding: 0.3rem 0.5rem;
  font-size: 0.78rem;
  color: var(--ink-light);
  text-align: center;
  font-style: italic;
  border-top: 1px solid rgba(160, 120, 48, 0.35);
}

/* ── LIGHTBOX ── */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 88vh;
  border: 2px solid var(--gold);
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7);
}

.lightbox-caption {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: #e8d8a0;
  font-size: 0.88rem;
  font-style: italic;
  pointer-events: none;
}


/* ── MOBILE FIXES ── */
@media (max-width: 767px) {
  /* Tables: scroll horizontally rather than stretching the page */
  .styled-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Statblock: never exceed container width */
  .statblock { max-width: 100%; }

  /* Tooltips and previews: fit within viewport */
  .link-preview { width: calc(100vw - 2rem); max-width: 360px; }
  .term-tooltip { max-width: calc(100vw - 2rem); }

  /* Section body: slightly tighter padding on small screens */
  .section-body { padding: 1rem 1.1rem; }
}