:root {
  /* Illuminated-manuscript / night-sky theme: deep navy grounds, warm gold
     ink and borders, parchment-cream text, a cold blue for secondary
     accents (stormlight) and a muted crimson for danger/HP-critical. */
  --bg: #0b0e1a;
  --bg-2: #131829;
  --panel: #161c30;
  --panel-2: #1d2438;
  --border: #3a3352;
  --border-gold: #8a6d2f;
  --gold: #d4af37;
  --gold-bright: #f0cf6a;
  --gold-dim: #9c8144;
  --text: #ede3c8;
  --text-dim: #a99f8c;
  --accent: #d4af37;
  --accent-2: #6ec6ff;
  --danger: #c1584f;
  --radius: 8px;

  --font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;

  --tile-ask: #6ec6ff;
  --tile-notes: #d4af37;
  --tile-characters: #7fb88a;
  --tile-web: #b285c9;
  --tile-enemies: #c1584f;
  --tile-encounter: #d97b45;
  --tile-library: #5fb0b0;
  --tile-overlay: #9a7fd1;
  --tile-campaign: #d4af37;
  --tile-session: #e8c35a;
}

* { box-sizing: border-box; }

/* Generic show/hide utility. Several components (encounter empty/detail,
   the overlay "open PDF" button, etc) toggle this class from JS; it needs
   to exist exactly once, generically, rather than duplicated per
   component, so newly-added ".hidden" toggles don't silently no-op.
   !important because several elements (encounter-detail, etc) declare
   their own `display` at equal specificity later in this file, which
   would otherwise win by source order and silently defeat hiding. */
.hidden { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body {
  /* A Highstorm sky photo, fixed so it doesn't scroll with content, darkened
     with a gradient overlay so panel text stays readable over it. Falls
     back to the plain navy gradient if the image is ever missing. */
  background-color: var(--bg);
  background-image:
    linear-gradient(160deg, rgba(11, 14, 26, 0.58) 0%, rgba(8, 7, 15, 0.72) 55%, rgba(8, 7, 15, 0.85) 100%),
    url("../img/highstorm-bg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

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

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.01em; }

button {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  color: var(--text);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}
button:hover { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25); }
button:active { transform: translateY(1px); }
button.primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-dim));
  border-color: var(--gold-bright);
  color: #241a04;
  font-weight: 700;
}
button.primary:hover { box-shadow: 0 0 14px -2px rgba(212, 175, 55, 0.7); }
button.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
button.danger:hover { box-shadow: 0 0 0 1px rgba(193, 88, 79, 0.35); border-color: var(--danger); }

input, textarea, select {
  font: inherit;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  width: 100%;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.3);
}
textarea { resize: vertical; }

::selection { background: rgba(212, 175, 55, 0.35); color: var(--text); }

/* Themed scrollbars (Chromium — the tablet browser this app targets) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--panel-2); border: 2px solid var(--bg-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-gold); }

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.2rem;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.15), 0 4px 16px -8px rgba(0,0,0,0.6);
  flex: 0 0 auto;
}
.brand {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.04em; color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
  white-space: nowrap;
}
.brand-crest { width: 24px; height: 24px; color: var(--gold-bright); filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.5)); flex: 0 0 auto; }
.tabs { display: flex; gap: 0.35rem; flex: 1; overflow-x: auto; }
.tab-btn {
  background: transparent; border-color: transparent; color: var(--text-dim);
  white-space: nowrap; font-size: 0.92rem; padding: 0.6rem 0.9rem;
  border-radius: 999px;
}
.tab-btn:hover { border-color: var(--border-gold); color: var(--text); box-shadow: none; }
.tab-btn.active {
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-bright);
  border-color: var(--gold-dim);
  box-shadow: inset 0 0 12px -4px rgba(212, 175, 55, 0.4);
}
.status { color: #6fae7c; font-size: 1.1rem; text-shadow: 0 0 8px currentColor; }
.status.offline { color: var(--danger); }

/* Views */
#views { flex: 1; min-height: 0; position: relative; }
.view { display: none; height: 100%; padding: 1rem; overflow: auto; }
.view.active { display: block; }

/* Ask */
.ask-layout { display: flex; flex-direction: column; height: 100%; max-width: 900px; margin: 0 auto; }
.ask-chat { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
.ask-empty { color: var(--text-dim); padding: 2rem 1rem; text-align: center; font-style: italic; }
.ask-msg { padding: 0.9rem 1.1rem; border-radius: var(--radius); max-width: 100%; white-space: pre-wrap; }
.ask-msg.question { background: var(--panel-2); align-self: flex-end; border: 1px solid var(--border); }
.ask-msg.answer { background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-gold); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.08) inset; }
.ask-msg.error { background: #2e1616; border: 1px solid var(--danger); color: #ffb4b4; }
.citations { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.citation-chip {
  background: rgba(110, 198, 255, 0.08); border: 1px solid var(--accent-2); color: var(--accent-2);
  padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.85rem; min-height: unset;
}
.ask-form { display: flex; gap: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--border-gold); }
.ask-form textarea { flex: 1; }

/* Notes */
.notes-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; height: 100%; }
.notes-list { overflow-y: auto; border-right: 1px solid var(--border); padding-right: 0.8rem; }
.note-item { padding: 0.7rem; border-radius: var(--radius); margin-bottom: 0.4rem; background: linear-gradient(160deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.note-item:hover { border-color: var(--gold-dim); }
.note-item.active { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.25); }
.note-item .n-title { font-weight: 600; font-family: var(--font-display); }
.note-item .n-meta { color: var(--text-dim); font-size: 0.8rem; }
.notes-editor { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; }
.editor-row { display: flex; gap: 0.6rem; }
.notes-editor textarea { flex: 1; min-height: 160px; }
.editor-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

.file-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 1.1rem; min-height: 44px; cursor: pointer; color: var(--text);
}
.file-btn.disabled { opacity: 0.5; cursor: not-allowed; }

.char-editor-top { display: flex; gap: 1rem; }
.portrait-box {
  position: relative;
  flex: 0 0 auto; width: 110px; height: 110px; border-radius: var(--radius);
  background: var(--panel-2); border: 2px solid var(--border-gold);
  box-shadow: 0 0 0 3px var(--bg-2), 0 0 12px -4px rgba(212, 175, 55, 0.5);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.portrait-box img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.portrait-placeholder { color: var(--text-dim); font-size: 0.75rem; text-align: center; padding: 0 0.5rem; }

/* "Adjust" toggles a click-to-set focus point, so a tall portrait photo's
   face doesn't get cropped off by the box's default center-crop. */
.portrait-adjust-btn {
  position: absolute; right: 3px; bottom: 3px; z-index: 2;
  min-height: unset; padding: 0.15rem 0.45rem; font-size: 0.65rem;
  background: rgba(11, 14, 26, 0.8); border: 1px solid var(--border-gold); color: var(--gold-bright);
  border-radius: 999px;
}
.portrait-adjust-btn:hover { box-shadow: 0 0 6px -1px rgba(212, 175, 55, 0.6); }
.portrait-box.adjusting { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 2px var(--gold-bright), 0 0 14px -2px rgba(212, 175, 55, 0.8); }
.portrait-box.adjusting img { cursor: crosshair; }
.portrait-adjust-hint {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 220px; text-align: center;
  background: var(--panel); border: 1px solid var(--border-gold); border-radius: var(--radius);
  padding: 0.3rem 0.55rem; font-size: 0.72rem; color: var(--gold-bright); z-index: 3;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
}
.portrait-adjust-hint.hidden { display: none; }
.char-editor-fields { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; }

.image-gallery { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gallery-thumb {
  position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: var(--panel-2);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gallery-thumb .thumb-actions {
  position: absolute; inset: auto 0 0 0; display: flex; justify-content: flex-end;
  gap: 0.2rem; padding: 0.15rem; background: rgba(0,0,0,0.55);
}
.gallery-thumb .thumb-actions button {
  min-height: unset; padding: 0.1rem 0.35rem; font-size: 0.7rem; border-radius: 4px;
}
.gallery-thumb.is-primary { border-color: var(--gold); box-shadow: 0 0 8px -2px rgba(212, 175, 55, 0.6); }

/* Resource dials + Relationships side by side on the character sheet. Each
   column shrinks to half width on a wide screen and stacks on a narrow one
   (tablet portrait, or the flyout-sized column this sits in). */
.char-stats-links-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.char-stats-links-row > .char-stats-section,
.char-stats-links-row > .links-section { flex: 1 1 260px; min-width: 240px; }

/* Character resource dials (reuses .participant-card/.stat-row from
   Encounters, but considerably shrunk down — this sits in a half-width
   column next to Relationships, and doesn't need Encounter's full-size
   touch targets since it's usually a quick glance/tweak, not a live fight). */
.char-stats-section h4 { margin: 0 0 0.4rem 0; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.char-stats-section .participants-list { margin-bottom: 0.3rem; gap: 0.35rem; }
.char-stats-section .participant-card { padding: 0.5rem 0.6rem; gap: 0.3rem; }
.char-stats-section .stat-row { gap: 0.35rem; }
.char-stats-section .stat-row .stat-badge { width: 1.4rem; height: 1.4rem; font-size: 0.7rem; }
.char-stats-section .stat-row .stat-label { font-size: 0.72rem; min-width: 2.8rem; }
.char-stats-section .stat-row input[type=number] { width: 3.2rem; padding: 0.35rem 0.5rem; min-height: 34px; }
.char-stats-section .stat-row .hp-bar-wrap { height: 8px; min-width: 60px; }
.char-stats-section .quick-btn { padding: 0.2rem 0.4rem; font-size: 0.72rem; min-height: 30px; }
.char-stats-hint { color: var(--text-dim); font-size: 0.85rem; font-style: italic; }

/* Relationship links */
.links-section h4 { margin: 0 0 0.4rem 0; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.links-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
}
.link-row .l-desc { font-size: 0.9rem; }
.link-row .l-desc .l-name { font-weight: 600; }
.link-row button { min-height: unset; padding: 0.3rem 0.6rem; }
.link-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.link-form select, .link-form input[type=text] { flex: 1; min-width: 140px; }
.checkbox-label { display: flex; align-items: center; gap: 0.3rem; color: var(--text-dim); font-size: 0.85rem; white-space: nowrap; }
.checkbox-label input { width: auto; }

/* Character goals: a short description, a flexible number of progress
   checkboxes, and a GM-only reward note, per goal. */
.goals-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.goals-section-head h4 { margin: 0; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.goals-section-head button { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.goals-list { display: flex; flex-direction: column; gap: 0.6rem; }
.goals-empty { color: var(--text-dim); font-size: 0.85rem; font-style: italic; padding: 0.4rem 0; }
.goal-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.06) inset;
}
.goal-top { display: flex; gap: 0.6rem; align-items: center; }
.goal-desc { flex: 1; font-weight: 600; }
.goal-top button { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.goal-checkboxes { display: flex; flex-direction: column; gap: 0.3rem; }
.goal-checkbox-row { display: flex; align-items: center; gap: 0.5rem; }
.goal-checkbox-row input[type=checkbox] { width: auto; flex: 0 0 auto; }
.goal-checkbox-row input[type=text] {
  flex: 1; min-height: unset; padding: 0.35rem 0.6rem; font-size: 0.85rem;
  background: var(--bg-2); border: 1px solid var(--border);
}
.goal-checkbox-remove {
  flex: 0 0 auto; min-height: unset; background: none; border: none; color: var(--text-dim);
  font-size: 1.1rem; line-height: 1; padding: 0.1rem 0.4rem;
}
.goal-checkbox-remove:hover { color: var(--danger); box-shadow: none; border-color: transparent; }
.goal-add-checkbox { align-self: flex-start; min-height: unset; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.goal-reward {
  font-size: 0.85rem; font-style: italic; color: var(--text-dim);
  background: var(--bg-2); min-height: 44px;
}

/* Character editor sub-tabs (Overview / Abilities / Goals / Notes & Images)
   — the identity fields above stay visible in every tab, but Goals and
   Abilities in particular can get long, so splitting them out keeps any
   one screen from growing unbounded. Deliberately separate class names
   from the app's top-level .tab-btn/.view so the two switchers (each
   driven by its own querySelectorAll) never interfere with each other. */
.char-subtabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border-gold); margin: 0.2rem 0 0.8rem; flex-wrap: wrap; }
.char-subtab-btn {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--text-dim); padding: 0.5rem 0.9rem; min-height: unset;
  border-radius: var(--radius) var(--radius) 0 0;
}
.char-subtab-btn:hover { color: var(--text); box-shadow: none; border-color: transparent; }
.char-subtab-btn.active {
  color: var(--gold-bright); background: var(--panel-2);
  border-color: var(--border-gold); position: relative; top: 1px;
}
.char-subtab-panel { display: none; flex-direction: column; gap: 0.6rem; }
.char-subtab-panel.active { display: flex; }
.char-subtab-hint { color: var(--text-dim); font-size: 0.82rem; font-style: italic; margin: -0.2rem 0 0.2rem; }

/* Character abilities, optionally clustered into named groups (a
   Surgebinding order, a weapon's various attacks, etc). Groups are plain
   <details> so they're collapsible for free; an ability with no group
   lands in a trailing "Ungrouped" bucket. */
.abilities-groups { display: flex; flex-direction: column; gap: 0.6rem; }
.ability-group {
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 0 0.8rem;
}
.ability-group summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.6rem 0; list-style: none; user-select: none;
}
.ability-group summary::-webkit-details-marker { display: none; }
.ability-group summary::before {
  content: "▸"; color: var(--gold-dim); transition: transform 0.12s ease; font-size: 0.8rem;
}
.ability-group[open] summary::before { transform: rotate(90deg); }
.ability-group-title { font-weight: 700; font-family: var(--font-display); color: var(--gold-dim); font-size: 0.9rem; }
.ability-group-count { color: var(--text-dim); font-size: 0.8rem; }
.ability-group-body { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.8rem; }
.ability-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.ability-card-top { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ability-name { flex: 1 1 200px; font-weight: 600; }
.ability-group-input { flex: 0 1 160px; font-size: 0.85rem; }
.ability-card-top .ability-remove { flex: 0 0 auto; min-height: unset; padding: 0.35rem 0.6rem; }
.ability-text { min-height: 60px; font-size: 0.9rem; }
.ability-cost-row { display: flex; gap: 0.4rem; }
.ability-cost-row select { font-size: 0.85rem; padding: 0.3rem 0.4rem; }

/* Enemies */
.enemies-layout { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; height: 100%; }
.enemies-sidebar { display: flex; flex-direction: column; gap: 0.6rem; min-height: 0; border-right: 1px solid var(--border-gold); padding-right: 0.8rem; }
.enemies-sidebar .notes-list { border: none; padding: 0; }
.enemies-sidebar .enemies-list-grow { flex: 1; min-height: 0; overflow-y: auto; }
.enemies-sidebar-actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.enemies-sidebar-actions button { flex: 1; }
.enemy-editor { overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; padding-right: 0.4rem; }
.enemy-editor textarea { min-height: 80px; }

.extract-box { display: flex; flex-direction: column; gap: 0.5rem; }
.extract-status { font-size: 0.85rem; color: var(--text-dim); }
.extract-review { display: flex; flex-direction: column; gap: 0.5rem; }
.proposal-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.6rem; }
.proposal-card .p-title { font-weight: 600; font-family: var(--font-display); }
.proposal-card .p-meta { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.4rem; }

/* Generic centered modal dialog (extract-from-PDF, and reusable elsewhere) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 69; }
.modal-backdrop.hidden { display: none; }
.modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 70; width: min(520px, 92vw); max-height: 85vh;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.modal.hidden { display: none; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  font-weight: 700; font-family: var(--font-display); color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.modal-header button {
  background: none; border: none; font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.5rem; min-height: unset;
  color: var(--text-dim);
}
.modal-header button:hover { color: var(--gold-bright); box-shadow: none; border-color: transparent; }
.modal-body { flex: 1; overflow-y: auto; padding: 1rem; }
.proposal-card .p-actions { display: flex; gap: 0.4rem; }
.proposal-card .p-actions button { min-height: unset; padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.proposal-card.saved { opacity: 0.5; }

.repeat-section h4 { margin: 0.2rem 0 0.3rem 0; font-size: 0.85rem; color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.08em; }
.repeat-list { display: flex; flex-direction: column; gap: 0.4rem; }
.repeat-row { display: flex; gap: 0.4rem; align-items: flex-start; }
.repeat-row input[type=text] { flex: 1; }
.repeat-row textarea { flex: 1; min-height: 50px; }
.repeat-row button { min-height: unset; padding: 0.4rem 0.6rem; }
.repeat-list-wide .repeat-row { flex-wrap: wrap; }
.repeat-list-wide .repeat-row .r-name { flex: 0 0 100%; }
.r-cost-row { display: flex; gap: 0.4rem; flex: 0 0 100%; }
.r-cost-row select { font-size: 0.85rem; padding: 0.3rem 0.4rem; }

/* Encounters */
.encounter-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; height: 100%; }
.encounter-sidebar { display: flex; flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--border-gold); padding-right: 0.8rem; overflow-y: auto; }
.encounter-sidebar .notes-list { border: none; padding: 0; }
.encounter-main { overflow-y: auto; }
.encounter-empty { color: var(--text-dim); padding: 2rem; text-align: center; font-style: italic; }
.encounter-detail { display: flex; flex-direction: column; gap: 0.8rem; }
.add-combatant-box { display: flex; flex-direction: column; gap: 0.5rem; background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 0.7rem; }
.add-combatant-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.add-combatant-row select { flex: 1; min-width: 140px; }
.add-combatant-row input[type=text] { flex: 1; min-width: 100px; }

.save-status { font-size: 0.85rem; min-height: 1.2em; color: #8fcf9c; transition: opacity 0.4s ease; }
.save-status.error { color: var(--danger); }
.save-status.fading { opacity: 0; }

.participants-list { display: flex; flex-direction: column; gap: 0.6rem; }
.participant-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.06) inset;
}
.participant-card.defeated { opacity: 0.45; }
/* A card with card art lays the portrait out full-height on the left,
   Encounter-tracker-grade sized (big enough to actually recognize the
   creature at a glance) rather than the small round avatar this used to
   be, with the name/stat rows filling the rest of the card beside it. */
.participant-body { display: flex; gap: 0.9rem; align-items: stretch; }
.participant-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; justify-content: center; }
.p-portrait {
  width: 110px; height: 150px; border-radius: var(--radius); object-fit: cover;
  flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--border-gold);
  box-shadow: 0 0 12px -3px rgba(212, 175, 55, 0.5);
}
.participant-top { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.p-name-btn {
  font-weight: 600; font-family: var(--font-display); font-size: 1.05rem; background: none; border: none; color: var(--text);
  padding: 0; min-height: unset; text-align: left; cursor: pointer;
}
.p-name-btn.linked { color: var(--accent-2); text-decoration: underline dotted; text-underline-offset: 3px; }
.p-name-btn.linked:hover { color: var(--gold-bright); }
.p-name-plain { font-weight: 600; font-family: var(--font-display); font-size: 1.05rem; }

/* This system's fast/slow action economy, tracked per combatant rather
   than initiative order. Click again to clear it back to neutral. */
.speed-toggle { display: flex; gap: 0.3rem; }
.speed-btn {
  min-height: unset; padding: 0.3rem 0.5rem; font-size: 1rem; line-height: 1;
  background: var(--bg-2); border: 1px solid var(--border-gold); border-radius: 999px;
  opacity: 0.55; filter: grayscale(0.6);
}
.speed-btn:hover { opacity: 0.85; }
.speed-btn.active { opacity: 1; filter: none; }
.speed-btn[data-speed="slow"].active { border-color: var(--accent-2); box-shadow: 0 0 8px -1px rgba(110, 198, 255, 0.6); background: rgba(110, 198, 255, 0.1); }
.speed-btn[data-speed="fast"].active { border-color: var(--gold-bright); box-shadow: 0 0 8px -1px rgba(212, 175, 55, 0.7); background: rgba(212, 175, 55, 0.12); }

.stat-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.stat-row .stat-badge {
  display: flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%; flex: 0 0 auto;
  font-size: 0.95rem; background: var(--bg-2); border: 1px solid var(--border-gold);
  box-shadow: 0 0 6px -1px rgba(212, 175, 55, 0.4);
}
.stat-row[data-stat="hp"] .stat-badge { color: #e6857c; border-color: #8a4038; }
.stat-row[data-stat="focus"] .stat-badge { color: var(--gold-bright); }
.stat-row[data-stat="investiture"] .stat-badge { color: var(--accent-2); border-color: #2d5b78; }
.stat-row .stat-label { color: var(--text-dim); font-size: 0.8rem; min-width: 3.6rem; }
.stat-row input[type=number] { width: 4.5rem; }
.hp-row input[type=number] { width: 4.5rem; }
.stat-row .hp-bar-wrap { max-width: 200px; height: 10px; }
.pool-set-max { min-height: unset; padding: 0.25rem 0.5rem; font-size: 0.78rem; }
.hp-bar-wrap {
  position: relative; flex: 1; min-width: 120px; height: 12px;
  background: var(--bg-2); border-radius: 999px; overflow: visible;
  border: 1px solid var(--border-gold);
}
.hp-bar-fill {
  height: 100%; border-radius: 999px;
  transition: width 0.15s ease, background-color 0.15s ease;
  box-shadow: 0 0 8px -1px currentColor;
}
.quick-btn { min-height: unset; padding: 0.3rem 0.55rem; font-size: 0.85rem; }
.participant-bottom { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.participant-bottom input[type=text] { flex: 1; min-width: 140px; }

/* Web (graph) view */
.web-layout { display: flex; flex-direction: column; height: 100%; gap: 0.6rem; }
.web-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.web-legend { display: flex; gap: 0.3rem; }
.legend-item {
  display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-dim);
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 0.25rem 0.6rem;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  font-family: inherit;
}
.legend-item:hover { background: rgba(255, 255, 255, 0.06); }
.legend-item.active { color: var(--text); border-color: var(--border); background: rgba(255, 255, 255, 0.05); }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid; background: var(--panel-2); transition: background 0.15s ease; }
.legend-dot.pc { border-color: var(--accent-2); }
.legend-dot.npc { border-color: var(--accent); }
.legend-dot.dead { border-color: var(--danger); }
.legend-item.active .legend-dot.pc { background: var(--accent-2); }
.legend-item.active .legend-dot.npc { background: var(--accent); }
.legend-item.active .legend-dot.dead { background: var(--danger); }
.web-hint { font-size: 0.8rem; color: var(--text-dim); }
.web-canvas-wrap { flex: 1; min-height: 0; border: 1px solid var(--border-gold); border-radius: var(--radius); overflow: hidden; background: #070911; position: relative; box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.08) inset; }
#web-canvas { display: block; width: 100%; height: 100%; }

/* Characters */
.char-list-wrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid var(--border-gold); padding-right: 0.8rem; }
.char-filters { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; flex: 0 0 auto; }
.filter-btn { background: transparent; color: var(--text-dim); padding: 0.4rem 0.8rem; min-height: unset; }
.filter-btn.active { background: rgba(212, 175, 55, 0.12); color: var(--gold-bright); border-color: var(--gold-dim); }
.char-list-wrap .notes-list { border-right: none; padding-right: 0; flex: 1; }

/* Library */
.library-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; height: 100%; }
.library-list { overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; align-content: start; }
.doc-card { background: linear-gradient(160deg, var(--panel), var(--panel-2)); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 0.9rem; display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.doc-card .d-title { font-weight: 600; font-family: var(--font-display); }
.doc-card .d-meta { color: var(--text-dim); font-size: 0.85rem; }
.doc-card .d-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; }
.doc-card .share-btn { white-space: nowrap; }
.doc-card .share-btn.on { background: var(--gold); color: var(--bg, #0b0e1a); border-color: var(--gold); font-weight: 700; }
.doc-card.shared { box-shadow: inset 3px 0 0 var(--gold); }
.tag { display: inline-block; background: rgba(212, 175, 55, 0.08); border: 1px solid var(--border-gold); border-radius: 999px; padding: 0.1rem 0.6rem; font-size: 0.75rem; color: var(--gold-dim); margin-right: 0.3rem; }
.upload-form { background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; align-self: start; }
.upload-status { color: var(--text-dim); font-size: 0.85rem; min-height: 1.2em; }

/* Campaign — sub-tabs (Position / Objectives / Secrets / Plot Threads /
   Timeline) split what used to be one long scroll of stacked sections.
   A separate switcher from the app's top-level tabs and from the
   character editor's own sub-tabs (deliberately distinct class names) so
   none of the three ever interfere with each other. */
.campaign-subtabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border-gold); margin: 0 0 1rem; flex-wrap: wrap; }
.campaign-subtab-btn {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--text-dim); padding: 0.5rem 0.9rem; min-height: unset;
  border-radius: var(--radius) var(--radius) 0 0;
}
.campaign-subtab-btn:hover { color: var(--text); box-shadow: none; border-color: transparent; }
.campaign-subtab-btn.active {
  color: var(--gold-bright); background: var(--panel-2);
  border-color: var(--border-gold); position: relative; top: 1px;
}
.campaign-subtab-panel { display: none; }
.campaign-subtab-panel.active { display: block; }

/* Campaign */
.campaign-layout { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.8rem; }
.campaign-form { display: flex; flex-direction: column; gap: 0.8rem; }
.campaign-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--text-dim); }
.campaign-current { background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 1rem; margin-top: 0.5rem; }

/* Campaign objectives checklist: a flat, campaign-wide list (unlike a
   character's Goals, which are per-PC/NPC). Open items sort above done
   ones (server-side, by the "done" column) so checking something off
   sinks it out of the way without losing it or needing a delete. */
.objectives-section { margin-top: 0.6rem; }
.objectives-section h3 { margin-bottom: 0.2rem; }
.objectives-add-row { display: flex; gap: 0.5rem; margin: 0.6rem 0; }
.objectives-add-row input[type=text] { flex: 1; }
.objectives-add-row button { flex: 0 0 auto; }
.objectives-list { display: flex; flex-direction: column; gap: 0.4rem; }
.objective-row {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.55rem 0.7rem;
}
.objective-row input[type=checkbox] { width: auto; flex: 0 0 auto; }
.objective-row .objective-text {
  flex: 1; min-height: unset; padding: 0.3rem 0.5rem; font-size: 0.92rem;
  background: transparent; border: 1px solid transparent;
}
.objective-row .objective-text:hover, .objective-row .objective-text:focus { background: var(--bg-2); border-color: var(--border); }
.objective-row.done { opacity: 0.6; }
.objective-row.done .objective-text { text-decoration: line-through; color: var(--text-dim); }
.objective-remove {
  flex: 0 0 auto; min-height: unset; background: none; border: none; color: var(--text-dim);
  font-size: 1.1rem; line-height: 1; padding: 0.1rem 0.4rem;
}
.objective-remove:hover { color: var(--danger); box-shadow: none; border-color: transparent; }

/* Secrets tracker: title + body + tags, an optional "revealed" flag, and a
   free-pick set of which characters currently know it. Cards use <details>
   like the ability groups so a long list of secrets stays scannable —
   collapsed to just the title, badge and known-by chips until opened. */
.secrets-section { margin-top: 1.2rem; }
.secrets-section h3 { margin-bottom: 0.2rem; }
#secrets-search { margin: 0.6rem 0; }
.secrets-list { display: flex; flex-direction: column; gap: 0.6rem; }
.secret-card {
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 0 0.8rem;
}
.secret-card summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.6rem 0; list-style: none; user-select: none; flex-wrap: wrap;
}
.secret-card summary::-webkit-details-marker { display: none; }
.secret-card summary::before {
  content: "▸"; color: var(--gold-dim); transition: transform 0.12s ease; font-size: 0.8rem;
}
.secret-card[open] summary::before { transform: rotate(90deg); }
.secret-summary-title { font-weight: 700; font-family: var(--font-display); color: var(--gold-dim); font-size: 0.92rem; flex: 1 1 auto; }
.secret-badge {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-dim); white-space: nowrap;
}
.secret-badge.revealed { color: #7fd490; border-color: #7fd49066; background: rgba(127, 212, 144, 0.08); }
/* Not "hidden" — that class name is a global `display: none` utility used
   all over this app, and colliding with it silently vanishes the badge. */
.secret-badge.unrevealed { color: var(--gold-dim); border-color: var(--border-gold); background: rgba(212, 175, 55, 0.06); }
.secret-known-chip {
  font-size: 0.75rem; color: var(--text-dim); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.5rem;
}
.secret-body-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.8rem; }
.secret-title-input { font-weight: 600; }
.secret-body-text { min-height: 90px; }
.secret-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.secret-known-by { display: flex; flex-direction: column; gap: 0.3rem; }
.secret-known-by-label { font-size: 0.8rem; color: var(--text-dim); }
.secret-known-by-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
.secret-known-by-checks label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--text); white-space: nowrap; }
.secret-known-by-checks input { width: auto; }
.secret-card-actions { display: flex; align-items: center; gap: 0.6rem; }
.secret-card-actions button { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.82rem; }

/* Plot-thread flags: same collapsible-card language as Secrets, but no
   known-by picker — just a title, freeform notes, tags, and a resolved
   flag. Open threads sort above resolved ones (server-side), so resolving
   one sinks it out of the way without losing it. */
.plot-threads-section { margin-top: 1.2rem; }
.plot-threads-section h3 { margin-bottom: 0.2rem; }
#threads-search { margin: 0.6rem 0; }
.plot-threads-list { display: flex; flex-direction: column; gap: 0.6rem; }
.thread-card {
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 0 0.8rem;
}
.thread-card summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.6rem 0; list-style: none; user-select: none; flex-wrap: wrap;
}
.thread-card summary::-webkit-details-marker { display: none; }
.thread-card summary::before {
  content: "▸"; color: var(--gold-dim); transition: transform 0.12s ease; font-size: 0.8rem;
}
.thread-card[open] summary::before { transform: rotate(90deg); }
.thread-summary-title { font-weight: 700; font-family: var(--font-display); color: var(--gold-dim); font-size: 0.92rem; flex: 1 1 auto; }
.thread-card.resolved .thread-summary-title { color: var(--text-dim); text-decoration: line-through; }
.thread-badge {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text-dim); white-space: nowrap;
}
.thread-badge.thread-resolved { color: #7fd490; border-color: #7fd49066; background: rgba(127, 212, 144, 0.08); }
.thread-badge.thread-open { color: var(--gold-dim); border-color: var(--border-gold); background: rgba(212, 175, 55, 0.06); }
.thread-body-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.8rem; }
.thread-title-input { font-weight: 600; }
.thread-notes-text { min-height: 90px; }
.thread-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.thread-card-actions { display: flex; align-items: center; gap: 0.6rem; }
.thread-card-actions button { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.82rem; }

/* Session timeline: a read-only chronological recap of session notes,
   grouped by session number. Reuses the Notes data (session_number) rather
   than duplicating it into a new store — clicking a note jumps to it on
   the Notes tab. A little wider than the other Campaign panels since it's
   mostly reading, not filling in a form. */
.campaign-timeline-layout { max-width: 760px; }
.campaign-timeline { display: flex; flex-direction: column; gap: 1.4rem; position: relative; }
.timeline-session { position: relative; padding-left: 1.6rem; }
.timeline-session::before {
  content: ""; position: absolute; left: 0.28rem; top: 1.6rem; bottom: -1.4rem;
  width: 1px; background: var(--border-gold); opacity: 0.5;
}
.timeline-session:last-child::before { display: none; }
.timeline-session::after {
  content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--gold-dim); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.timeline-session-head { font-family: var(--font-display); color: var(--gold-dim); font-size: 1rem; margin-bottom: 0.5rem; }
.timeline-notes { display: flex; flex-direction: column; gap: 0.5rem; }
.timeline-note {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.8rem; cursor: pointer; transition: border-color 0.12s ease;
}
.timeline-note:hover { border-color: var(--border-gold); }
.timeline-note-title { font-weight: 600; }
.timeline-note-meta { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.1rem; }
.timeline-note-excerpt { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.35rem; }

/* PDF overlay */
.pdf-overlay {
  position: fixed; inset: 0; background: #07080d; z-index: 50;
  display: flex; flex-direction: column;
}
.pdf-overlay.hidden { display: none; }
.pdf-toolbar {
  display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1rem;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border-bottom: 1px solid var(--border-gold);
  box-shadow: 0 1px 0 rgba(212, 175, 55, 0.15), 0 4px 16px -8px rgba(0,0,0,0.6);
}
.pdf-nav { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.pdf-toolbar-btn { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.85rem; }
.pdf-toolbar-btn.active { border-color: var(--gold-bright); color: var(--gold-bright); }
.pdf-page-jump { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-dim); }
.pdf-page-jump input {
  width: 3.4rem; min-height: unset; padding: 0.3rem 0.4rem; text-align: center;
  -moz-appearance: textfield;
}
.pdf-page-jump input::-webkit-outer-spin-button,
.pdf-page-jump input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdf-zoom { display: flex; align-items: center; gap: 0.3rem; padding-left: 0.6rem; border-left: 1px solid var(--border); }
.pdf-zoom button { min-height: unset; padding: 0.3rem 0.55rem; font-size: 0.9rem; }
#pdf-zoom-reset { min-width: 3.6rem; font-size: 0.78rem; }
.pdf-body { flex: 1; display: flex; min-height: 0; }
.pdf-bookmarks-panel {
  flex: 0 0 auto; width: 270px; overflow-y: auto; padding: 0.8rem;
  background: var(--panel); border-right: 1px solid var(--border-gold);
}
.pdf-bookmarks-panel.hidden { display: none; }
.pdf-bookmarks-header {
  font-family: var(--font-display); font-weight: 700; color: var(--gold-bright);
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; margin-bottom: 0.6rem;
}
.pdf-bookmarks-list { display: flex; flex-direction: column; gap: 0.1rem; }
.pdf-bookmark-btn {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-dim); padding: 0.32rem 0.4rem; font-size: 0.85rem; border-radius: 4px;
  min-height: unset; line-height: 1.3;
}
.pdf-bookmark-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); box-shadow: none; border-color: transparent; }
.pdf-bookmark-btn.current { background: rgba(212, 175, 55, 0.12); color: var(--gold-bright); }
.pdf-bookmarks-empty { color: var(--text-dim); font-size: 0.82rem; font-style: italic; }
.pdf-canvas-wrap { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 1rem; }
/* The PDF viewer's canvas wrap needs align-items: flex-start specifically
   (not the shared rule above, which the image lightbox also uses and
   whose vertical centering via the flex default of "stretch" is fine to
   leave alone). Stretch forces a flex item's cross-axis size (height) to
   fill the container regardless of its own height:auto, and since canvas
   is a replaced element with an intrinsic aspect ratio, the browser then
   back-computes a *shrunk width* to match that stretched height — so the
   canvas silently rendered at container-height-driven size no matter how
   many pixels were actually drawn into it, defeating zoom entirely (the
   zoom % updated but nothing on screen visibly grew). */
#pdf-overlay .pdf-canvas-wrap { align-items: flex-start; }
/* flex: 0 0 auto matters too — a flex item shrinks to fit its container by
   default (flex-shrink: 1), which would otherwise squash the canvas back
   down to the container width. Locking flex-shrink to 0 lets it overflow
   .pdf-canvas-wrap once zoomed past the container size, which is what
   makes it scrollable. */
#pdf-canvas { flex: 0 0 auto; background: #f4ecd8; box-shadow: 0 0 30px rgba(0,0,0,0.6), 0 0 0 1px var(--border-gold); max-width: none; height: auto; }
#image-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,0.6), 0 0 0 1px var(--border-gold); border-radius: 4px; }
@media (max-width: 700px) {
  .pdf-bookmarks-panel { position: fixed; top: 3.2rem; bottom: 0; left: 0; z-index: 5; box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
}

/* Home */
.home-layout { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6rem; }
.home-hero {
  text-align: center;
  padding: 2.2rem 1rem 0.4rem;
  position: relative;
}
.home-hero::after {
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  margin: 0.9rem auto 0;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}
.home-hero-title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-family: var(--font-display);
  background: linear-gradient(120deg, var(--gold-dim), var(--gold-bright) 45%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.25);
}
.home-hero-sub { color: var(--text-dim); margin-top: 0.4rem; font-size: 0.95rem; font-style: italic; }

/* Home dashboard widgets: Highstorm countdown + adventure progress stepper */
.home-widgets {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 2.4fr);
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.widget-card {
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.06) inset;
}
.widget-title {
  font-size: 0.8rem; font-weight: 700; font-family: var(--font-display);
  color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.08em;
}
.widget-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.widget-title-row button { min-height: unset; padding: 0.3rem 0.7rem; font-size: 0.8rem; }

.highstorm-display { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.5rem 0 0.8rem; }
.highstorm-count {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1;
  color: var(--accent-2); text-shadow: 0 0 16px rgba(110, 198, 255, 0.35);
}
.highstorm-count.overdue { color: var(--danger, #e05a4e); text-shadow: 0 0 16px rgba(224, 90, 78, 0.5); }
.highstorm-unit { color: var(--text-dim); font-size: 0.95rem; }
.highstorm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.highstorm-actions .quick-btn { min-height: unset; padding: 0.4rem 0.8rem; }
.highstorm-set { display: flex; gap: 0.4rem; }
.highstorm-set input { width: 5.5rem; }
.highstorm-set button { min-height: unset; padding: 0.4rem 0.7rem; }

.chapter-stepper { display: flex; align-items: flex-start; gap: 0; margin-top: 0.7rem; overflow-x: auto; padding-bottom: 0.3rem; }
.chapter-step { display: flex; align-items: center; flex: 0 0 auto; }
.chapter-step:last-child .chapter-step-line { display: none; }
.chapter-step-main { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; cursor: pointer; background: none; border: none; padding: 0; width: 6.5rem; }
.chapter-step-dot {
  width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 2px solid var(--border-gold);
  background: var(--bg-2); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.chapter-step.done .chapter-step-dot { background: var(--gold-dim); border-color: var(--gold-dim); }
.chapter-step.current .chapter-step-dot {
  background: var(--gold-bright); border-color: var(--gold-bright);
  box-shadow: 0 0 10px 1px rgba(212, 175, 55, 0.7);
}
.chapter-step-label { font-size: 0.78rem; color: var(--text-dim); text-align: center; line-height: 1.25; }
.chapter-step.current .chapter-step-label { color: var(--gold-bright); font-weight: 700; }
.chapter-step-line { width: 2.4rem; height: 2px; background: var(--border-gold); margin: 0 0.2rem; align-self: flex-start; margin-top: 0.5rem; flex: 0 0 auto; }
.chapter-step.done + .chapter-step .chapter-step-line,
.chapter-step.done .chapter-step-line { background: var(--gold-dim); }
.chapter-empty { color: var(--text-dim); font-size: 0.85rem; font-style: italic; margin-top: 0.6rem; }

.chapters-modal-hint { color: var(--text-dim); font-size: 0.85rem; margin: 0 0 0.7rem; }
.chapters-edit-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.chapter-edit-row { display: flex; align-items: center; gap: 0.4rem; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.5rem; }
.chapter-edit-row.current { border-color: var(--gold-bright); box-shadow: 0 0 8px -2px rgba(212, 175, 55, 0.6); }
.chapter-edit-row input[type=text] { flex: 1; }
.chapter-edit-row button { min-height: unset; padding: 0.3rem 0.55rem; font-size: 0.85rem; }
.chapter-edit-current-btn { color: var(--text-dim); }
.chapter-edit-row.current .chapter-edit-current-btn { color: var(--gold-bright); font-weight: 700; }

.widget-card-full { grid-column: 1 / -1; }

/* Music and Sound Effects sit side by side as their own equal-width row,
   spanning the full width of the (uneven 1fr/2.4fr) .home-widgets grid
   above them. */
.home-audio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) {
  .home-audio-row { grid-template-columns: 1fr; }
}

/* Home dashboard music player: quick play/switch controls so the GM can
   change what's playing mid-session without leaving whatever tab they're
   on. The actual song management (tagging, playlists) lives on the Music
   tab — this widget only picks a source and controls playback. */
.music-player { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; }
#music-source-select { width: 100%; }
.music-now-playing { color: var(--text-dim); font-size: 0.9rem; min-height: 1.3em; }
.music-now-playing.playing { color: var(--gold-bright); font-weight: 600; }
.music-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.music-control-btn {
  min-height: unset; width: 2.6rem; height: 2.6rem; padding: 0; font-size: 1rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.music-volume-label { display: flex; align-items: center; gap: 0.5rem; color: var(--text-dim); font-size: 0.82rem; margin-left: auto; }
.music-volume-label input[type=range] { width: 7rem; }

@media (max-width: 900px) {
  .home-widgets { grid-template-columns: 1fr; }
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 1.6rem 1.1rem;
  min-height: 168px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.06) inset;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.tile::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tile-accent, var(--accent));
  box-shadow: 0 0 10px 0 var(--tile-accent, var(--accent));
}
.tile:hover {
  transform: translateY(-3px);
  border-color: var(--tile-accent, var(--accent));
  box-shadow: 0 10px 24px -12px var(--tile-accent, var(--accent)), 0 0 0 1px rgba(212, 175, 55, 0.06) inset;
}
.tile:active { transform: translateY(-1px); }
.tile-icon { width: 4.6rem; height: 4.6rem; object-fit: contain; filter: drop-shadow(0 0 8px rgba(0,0,0,0.45)); }
.tile-title { font-size: 1.1rem; font-weight: 700; font-family: var(--font-display); color: var(--text); }
.tile-desc { color: var(--text-dim); font-size: 0.82rem; line-height: 1.3; }

.tile-ask { --tile-accent: var(--tile-ask); }
.tile-notes { --tile-accent: var(--tile-notes); }
.tile-characters { --tile-accent: var(--tile-characters); }
.tile-web { --tile-accent: var(--tile-web); }
.tile-enemies { --tile-accent: var(--tile-enemies); }
.tile-encounter { --tile-accent: var(--tile-encounter); }
.tile-library { --tile-accent: var(--tile-library); }
.tile-overlay { --tile-accent: var(--tile-overlay); }
.tile-campaign { --tile-accent: var(--tile-campaign); }
.tile-session { --tile-accent: var(--tile-session); }

@media (max-width: 900px) {
  .home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-hero-title { font-size: 1.9rem; }
}

@media (max-width: 720px) {
  .notes-layout, .library-layout { grid-template-columns: 1fr; }
  .notes-list { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 0.6rem; max-height: 30vh; }
  .participant-body { flex-direction: column; }
  .p-portrait { width: 100%; height: 140px; }
}

/* Enemy card flyout */
.flyout-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 59;
}
.flyout-backdrop.hidden { display: none; }
.flyout {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60;
  width: min(420px, 92vw);
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border-left: 1px solid var(--border-gold);
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform 0.2s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,0.55), inset 1px 0 0 rgba(212, 175, 55, 0.08);
}
/* Two classes here so this beats the generic .hidden{display:none} rule at
   the same specificity level: the flyout needs to stay in the layout
   (display:flex) while hidden so its transform slides out with a visible
   transition, instead of vanishing instantly. */
.flyout.hidden { display: flex !important; transform: translateX(100%); visibility: hidden; }
.flyout-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  font-weight: 700; font-family: var(--font-display); color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.flyout-header button {
  background: none; border: none; font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.5rem; min-height: unset;
  color: var(--text-dim);
}
.flyout-header button:hover { color: var(--gold-bright); box-shadow: none; border-color: transparent; }
.flyout-body { flex: 1; overflow-y: auto; padding: 1rem; }
.flyout-body .fc-top { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.8rem; }
.flyout-body .fc-portrait { width: 72px; height: 72px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border-gold); flex: 0 0 auto; background: var(--panel-2); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px -3px rgba(212, 175, 55, 0.5); }
.flyout-body .fc-portrait img { width: 100%; height: 100%; object-fit: cover; }
.flyout-body .fc-name { font-size: 1.2rem; font-weight: 700; font-family: var(--font-display); color: var(--text); }
.flyout-body .fc-subtitle { color: var(--text-dim); font-size: 0.9rem; font-style: italic; }
.flyout-body .fc-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem; margin: 0.8rem 0; }
.flyout-body .fc-stat { background: var(--bg-2); border: 1px solid var(--border-gold); border-radius: var(--radius); padding: 0.4rem 0.5rem; text-align: center; }
.flyout-body .fc-stat .fc-stat-key { font-size: 0.7rem; color: var(--gold-dim); text-transform: uppercase; letter-spacing: 0.03em; }
.flyout-body .fc-stat .fc-stat-val { font-weight: 700; font-family: var(--font-display); color: var(--text); }
.flyout-body .fc-line { margin: 0.35rem 0; font-size: 0.9rem; }
.flyout-body .fc-line strong { color: var(--text-dim); font-weight: 600; }
.flyout-body .fc-section-title { margin: 1rem 0 0.3rem; font-size: 0.85rem; font-family: var(--font-display); color: var(--accent-2); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
.flyout-body .fc-block { margin-bottom: 0.6rem; }
.flyout-body .fc-block-name { font-weight: 600; color: var(--gold-dim); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cost-badge {
  display: inline-flex; align-items: center; gap: 0.15rem;
  font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.04em;
  padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid var(--border-gold);
  background: var(--bg-2); color: var(--text-dim); text-transform: uppercase; font-weight: 600;
}
.cost-badge.cost-action { color: var(--gold-bright); border-color: var(--border-gold); letter-spacing: 0; font-size: 0.75rem; }
.cost-badge.cost-reaction { color: var(--accent-2); border-color: var(--accent-2); }
.cost-badge.cost-free { color: #9fd68c; border-color: #9fd68c; }
.flyout-body .fc-block-text { color: var(--text-dim); font-size: 0.9rem; white-space: pre-wrap; }
.flyout-body .fc-empty { color: var(--text-dim); text-align: center; padding: 2rem 0; }

/* Music tab: Music / Sound FX sub-tabs (same pattern as the Campaign tab's
   sub-tabs, deliberately a separate class so the two switchers don't share
   state), each holding its own song-library-left / playlists-or-buttons-
   right layout. Songs are scanned off disk, not uploaded, so the library
   column is about tagging/naming what's already there and rescanning after
   adding files, not importing. */
.music-subtabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border-gold); margin: 0 0 1rem; flex-wrap: wrap; }
.music-subtab-btn {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--text-dim); padding: 0.5rem 0.9rem; min-height: unset;
  border-radius: var(--radius) var(--radius) 0 0;
}
.music-subtab-btn:hover { color: var(--text); box-shadow: none; border-color: transparent; }
.music-subtab-btn.active {
  color: var(--gold-bright); background: var(--panel-2);
  border-color: var(--border-gold); position: relative; top: 1px;
}
.music-subtab-panel { display: none; }
.music-subtab-panel.active { display: block; }

.music-layout { display: grid; grid-template-columns: minmax(320px, 1.4fr) minmax(280px, 1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 900px) { .music-layout { grid-template-columns: 1fr; } }
.music-songs-col code { background: var(--bg-2); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.35rem; font-size: 0.85em; }
#music-songs-search { margin: 0.6rem 0; }
.music-songs-list { display: flex; flex-direction: column; gap: 0.4rem; }
.music-song-row {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
}
.music-song-title { flex: 1 1 200px; font-weight: 600; }
.music-song-tags { flex: 1 1 160px; font-size: 0.85rem; }
.music-song-row .save-status { flex: 0 0 auto; }

.music-playlists-list { display: flex; flex-direction: column; gap: 0.6rem; }
.playlist-card {
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%);
  padding: 0 0.8rem;
}
.playlist-card summary {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  padding: 0.6rem 0; list-style: none; user-select: none; flex-wrap: wrap;
}
.playlist-card summary::-webkit-details-marker { display: none; }
.playlist-card summary::before {
  content: "▸"; color: var(--gold-dim); transition: transform 0.12s ease; font-size: 0.8rem;
}
.playlist-card[open] summary::before { transform: rotate(90deg); }
.playlist-summary-title { font-weight: 700; font-family: var(--font-display); color: var(--gold-dim); font-size: 0.92rem; flex: 1 1 auto; }
.playlist-song-count { color: var(--text-dim); font-size: 0.8rem; }
.playlist-body-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.8rem; }
.playlist-name-input { font-weight: 600; }
.playlist-song-picker { display: flex; flex-direction: column; gap: 0.3rem; max-height: 260px; overflow-y: auto; }
.playlist-song-picker label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; padding: 0.15rem 0; }
.playlist-song-picker input { width: auto; }
.playlist-card-actions { display: flex; align-items: center; gap: 0.6rem; }

/* Home dashboard: output-device picker in the Music widget's header, and
   the Sound Effects widget's button board. */
.widget-title-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.audio-output-select { min-height: unset; padding: 0.3rem 0.6rem; font-size: 0.8rem; max-width: 13rem; }
.audio-output-hint { color: var(--text-dim); font-size: 0.8rem; margin: 0.3rem 0 0; }

.sfx-board { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.sfx-board-empty { color: var(--text-dim); font-size: 0.88rem; margin-top: 0.4rem; }

/* Global sound-effects popup: a floating button + panel that live outside
   <main>, so they stay on screen no matter which tab is active — the
   whole point is triggering an effect without leaving whatever you're
   doing (e.g. running the Encounter tab mid-fight). */
.sfx-global-fab {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 62;
  width: 3.2rem; height: 3.2rem; min-height: unset; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-gold);
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.sfx-global-fab:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-gold); }
.sfx-global-fab.active { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright), 0 6px 20px rgba(0, 0, 0, 0.5); }
.sfx-global-fab-icon { font-size: 1.4rem; color: var(--gold-bright); line-height: 1; }
.sfx-global-fab.playing { animation: sfx-pulse 1s ease-in-out infinite; }

.sfx-global-panel {
  position: fixed; right: 1.25rem; bottom: 5rem; z-index: 63;
  width: min(360px, calc(100vw - 2.5rem)); max-height: min(70vh, 560px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.sfx-global-panel.hidden { display: none; }
.sfx-global-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  font-weight: 700; font-family: var(--font-display); color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.sfx-global-panel-actions { display: flex; align-items: center; gap: 0.3rem; }
.sfx-global-panel-actions button { min-height: unset; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.sfx-global-panel-actions #sfx-global-close-btn {
  background: none; border: none; font-size: 1.3rem; line-height: 1; padding: 0.1rem 0.4rem; color: var(--text-dim);
}
.sfx-global-panel-actions #sfx-global-close-btn:hover { color: var(--gold-bright); box-shadow: none; border-color: transparent; }
.sfx-global-panel-body { flex: 1; overflow-y: auto; padding: 0.8rem; }
.sfx-global-panel .sfx-board { margin-top: 0; }
@media (max-width: 560px) {
  .sfx-global-panel { right: 0.6rem; bottom: 4.6rem; }
  .sfx-global-fab { right: 0.9rem; bottom: 0.9rem; }
}

/* ------------------------------------------------------------- Events --- */
/* Adventure-module Event cards. Two states share most of this styling: the
   compact management row (Campaign tab > Events) and the full tracker card
   (floating panel, reachable from anywhere) — the latter recreates the
   printed card's layout (banner / icon row / title / trigger text) but in
   the app's own gold-on-navy palette and Cinzel/Spectral fonts rather than
   the card's actual look, so it reads as part of the app, not a pasted-in
   screenshot. */
:root {
  --event-opp: var(--accent-2);
  --event-opp-bg-1: #1b3a63;
  --event-opp-bg-2: #0f2038;
  --event-comp: #e08277;
  --event-comp-bg-1: #5c1f1f;
  --event-comp-bg-2: #341313;
}

.events-section .events-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.event-mgmt-row {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.event-mgmt-row[open] { border-color: var(--border-gold); }
.event-mgmt-summary {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none;
}
.event-mgmt-summary::-webkit-details-marker { display: none; }
.event-mgmt-type-dot {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto;
}
.event-mgmt-type-dot.opportunity { background: var(--event-opp); box-shadow: 0 0 6px rgba(110, 198, 255, 0.6); }
.event-mgmt-type-dot.complication { background: var(--event-comp); box-shadow: 0 0 6px rgba(224, 130, 119, 0.6); }
.event-mgmt-name { font-weight: 600; font-family: var(--font-display); flex: 1 1 auto; }
.event-mgmt-progress { font-size: 0.82rem; color: var(--text-dim); }
.event-mgmt-active-chip {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem; border-radius: 10px; border: 1px solid var(--gold-bright); color: var(--gold-bright);
}
.event-mgmt-body { padding: 0 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.event-mgmt-body input[type="text"],
.event-mgmt-body textarea,
.event-mgmt-body select { width: 100%; }
.event-mgmt-row-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.event-mgmt-row-fields > label { flex: 1 1 160px; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--text-dim); }
.event-mgmt-actions { display: flex; align-items: center; gap: 0.5rem; }

/* Floating FAB + panel: same reachable-from-anywhere pattern as the sfx
   one, offset to its left so both can sit on screen together. */
.events-global-fab {
  position: fixed; right: 5.05rem; bottom: 1.25rem; z-index: 62;
  width: 3.2rem; height: 3.2rem; min-height: unset; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-gold);
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.events-global-fab:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-gold); }
.events-global-fab.active { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright), 0 6px 20px rgba(0, 0, 0, 0.5); }
.events-global-fab-icon { font-size: 1.4rem; color: var(--gold-bright); line-height: 1; }
/* A completed-but-not-yet-dismissed event pulses the FAB so it's never
   quietly forgotten about, without forcing an auto-dismiss the GM didn't ask for. */
.events-global-fab.has-complete { animation: sfx-pulse 1.4s ease-in-out infinite; }

.events-global-panel {
  position: fixed; right: 5.05rem; bottom: 5rem; z-index: 63;
  width: min(360px, calc(100vw - 2.5rem)); max-height: min(75vh, 620px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.events-global-panel.hidden { display: none; }
.events-global-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  font-weight: 700; font-family: var(--font-display); color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
#events-global-close-btn {
  background: none; border: none; font-size: 1.3rem; line-height: 1; padding: 0.1rem 0.4rem; color: var(--text-dim);
}
#events-global-close-btn:hover { color: var(--gold-bright); box-shadow: none; border-color: transparent; }
.events-global-panel-body { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.7rem; }
#events-activate-select { width: 100%; }

.events-global-board { display: flex; flex-direction: column; gap: 0.7rem; }
.events-board-empty { color: var(--text-dim); font-size: 0.88rem; text-align: center; padding: 0.5rem 0; }

/* The tracker card itself — recreates the printed card's structure
   (colored EVENT banner / icon row / title / trigger text) in the app's
   own palette and fonts. */
.event-card {
  border: 1px solid var(--border-gold); border-radius: var(--radius); overflow: hidden;
  background: var(--panel); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.event-card-banner {
  padding: 0.35rem 0.7rem; text-align: center; font-family: var(--font-display);
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.event-card.opportunity .event-card-banner { background: linear-gradient(180deg, var(--event-opp-bg-1), var(--event-opp-bg-2)); }
.event-card.complication .event-card-banner { background: linear-gradient(180deg, var(--event-comp-bg-1), var(--event-comp-bg-2)); }
.event-card-tap-zone { padding: 0.7rem 0.8rem 0.5rem; cursor: pointer; user-select: none; text-align: center; }
.event-card-tap-zone:active { background: rgba(255, 255, 255, 0.03); }
.event-card-pips { display: flex; justify-content: center; gap: 0.35rem; margin-bottom: 0.5rem; font-size: 1.3rem; line-height: 1; }
.event-card-pip { opacity: 0.28; transition: opacity 0.15s ease, transform 0.15s ease; }
.event-card-pip.filled { opacity: 1; transform: scale(1.08); }
.event-card.opportunity .event-card-pip { color: var(--event-opp); }
.event-card.complication .event-card-pip { color: var(--event-comp); }
.event-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--text); margin-bottom: 0.3rem; }
.event-card-trigger { font-family: var(--font-body); font-style: italic; font-size: 0.82rem; color: var(--text-dim); line-height: 1.3; }
.event-card.complete .event-card-name { color: var(--gold-bright); }
.event-card.complete { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright), 0 3px 16px rgba(212, 175, 55, 0.25); }
.event-card-complete-flag {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gold-bright); margin-top: 0.3rem;
}
.event-card-controls {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.4rem 0.7rem 0.7rem; border-top: 1px solid var(--border);
}
.event-card-controls button {
  min-height: unset; padding: 0.25rem 0.55rem; font-size: 0.76rem;
}
.event-card-controls .event-undo-btn:disabled { opacity: 0.35; cursor: default; }

.events-hidden-toggle-btn {
  background: none; border: 1px dashed var(--border); color: var(--text-dim); font-size: 0.8rem;
  padding: 0.3rem 0.5rem; text-align: left;
}
.events-hidden-toggle-btn.hidden, .events-hidden-list.hidden { display: none; }
.events-hidden-list { display: flex; flex-direction: column; gap: 0.35rem; }
.event-hidden-row {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem;
  border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.82rem;
}
.event-hidden-row .event-mgmt-type-dot { width: 0.55rem; height: 0.55rem; }
.event-hidden-row .e-name { flex: 1 1 auto; font-family: var(--font-display); }
.event-hidden-row .e-progress { color: var(--text-dim); }
.event-hidden-row button { min-height: unset; padding: 0.2rem 0.5rem; font-size: 0.75rem; }

@media (max-width: 560px) {
  .events-global-panel { right: 0.6rem; bottom: 8.7rem; }
  .events-global-fab { right: 0.9rem; bottom: 4.6rem; }
}

/* A button is a fixed-size circular art tile (an uploaded image, centered
   and cropped to fill the circle, or the button's color with a big
   fallback letter) with a caption underneath. Every button is the same
   size regardless of what image was uploaded or how long its label is —
   deliberately NOT sized by its content (that's what produced a row of
   mismatched tiles when images had different aspect ratios).
   .sfx-btn-thumb is a smaller, non-interactive variant of the same markup
   used as a live preview in the management row. */
.sfx-btn {
  flex: 0 0 auto; width: 5.6rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  border: none; background: none; color: var(--text);
  padding: 0; cursor: pointer; transition: transform 0.08s ease;
}
.sfx-btn:hover { transform: scale(1.04); }
.sfx-btn:hover .sfx-btn-art { box-shadow: 0 0 0 2px var(--border-gold); }
.sfx-btn:active { transform: scale(0.97); }
.sfx-btn.playing .sfx-btn-art { box-shadow: 0 0 0 3px var(--gold-bright); animation: sfx-pulse 1s ease-in-out infinite; }
.sfx-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sfx-btn:disabled:hover { transform: none; }
.sfx-btn:disabled:hover .sfx-btn-art { box-shadow: 0 0 0 1px var(--border-gold); }
@keyframes sfx-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--gold-bright); }
  50% { box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.35); }
}
.sfx-btn-art {
  flex: 0 0 auto; width: 5.6rem; height: 5.6rem; border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--sfx-color, var(--panel-2));
  background-size: cover; background-position: center;
  border: 1px solid var(--border-gold);
  font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.12s ease;
}
.sfx-btn-art.has-image { font-size: 0; } /* image fills the circle; no letter to show */
.sfx-btn-label {
  flex: 0 0 auto; width: 100%; font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-align: center; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sfx-btn-thumb {
  flex: 0 0 auto; width: 3.4rem; cursor: default; transition: none;
}
.sfx-btn-thumb:hover { transform: none; }
.sfx-btn-thumb:hover .sfx-btn-art { box-shadow: 0 0 0 1px var(--border-gold); }
.sfx-btn-thumb .sfx-btn-art { width: 3.4rem; height: 3.4rem; font-size: 1.1rem; }

/* Sound FX management tab: mirrors the Music tab's song-library / playlist
   two-column layout (.music-layout, reused as-is), but the right column
   holds button rows instead of playlist cards. */
.sfx-buttons-list { display: flex; flex-direction: column; gap: 0.5rem; }
.sfx-button-row {
  display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
}
.sfx-button-image-controls { display: flex; flex-direction: column; gap: 0.25rem; flex: 0 0 auto; }
.sfx-button-image-upload-btn {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  padding: 0.3rem 0.6rem; font-size: 0.75rem; color: var(--text-dim);
  background: transparent; text-align: center;
}
.sfx-button-image-upload-btn:hover { color: var(--text); }
.sfx-button-image-remove-btn { min-height: unset; padding: 0.3rem 0.6rem; font-size: 0.75rem; }
.sfx-button-label { flex: 1 1 140px; font-weight: 600; }
.sfx-button-color { flex: 0 0 auto; width: 2.4rem; height: 2.2rem; padding: 0.15rem; border-radius: 6px; }
.sfx-button-sound-select { flex: 1 1 160px; font-size: 0.85rem; }
.sfx-button-row .save-status { flex: 0 0 auto; }
.sfx-button-move-group { display: flex; gap: 0.2rem; flex: 0 0 auto; }
.sfx-button-move-group button { min-height: unset; padding: 0.3rem 0.5rem; font-size: 0.75rem; }
.sfx-button-row .danger { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.82rem; flex: 0 0 auto; }
.playlist-card-actions button { min-height: unset; padding: 0.35rem 0.7rem; font-size: 0.82rem; }

/* ------------------------------------------------------- Home: backup --- */
.backup-last { font-size: 0.85rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.backup-last.ok { color: #8fcf9c; }
.backup-last.stale { color: var(--gold-bright); }
.backup-last.never { color: var(--danger); }
.backup-hint { color: var(--text-dim); font-size: 0.88rem; margin: 0.4rem 0 0.7rem; }
.backup-hint code { font-size: 0.85em; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.backup-audio-label { white-space: normal; }
.backup-audio-size { color: var(--text-dim); opacity: 0.8; }
.backup-spacer { flex: 1 1 auto; }
.backup-actions button { min-height: unset; padding: 0.45rem 0.9rem; }
.backup-progress { margin-top: 0.7rem; }
.backup-progress.hidden { display: none; }
.backup-progress-bar { height: 6px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; }
.backup-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); transition: width 0.2s ease; }
.backup-progress.indeterminate .backup-progress-fill { width: 35%; animation: backup-slide 1.2s ease-in-out infinite; }
@keyframes backup-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .backup-progress.indeterminate .backup-progress-fill { animation: none; width: 100%; opacity: 0.5; } }
.backup-message { margin-top: 0.5rem; font-size: 0.88rem; min-height: 1.2em; color: var(--text-dim); }
.backup-message.ok { color: #8fcf9c; }
.backup-message.error { color: var(--danger); }
/* Sits below the nine section tiles: housekeeping, not something the GM
   reaches for mid-session, so it lives under the main navigation. */
.home-backup-card { margin-top: 1.2rem; }

/* ------------------------------------------------------ Session tab --- */
/* Run sheets: sessions list on the left, the selected session's ordered
   scenes on the right. The "current" scene is the one being played right
   now: it's the only card shown open by default, with its read-aloud text,
   notes and one-tap links up front; the run bar above steps through them. */
.session-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; height: 100%; }
.session-sidebar { display: flex; flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--border-gold); padding-right: 0.8rem; overflow-y: auto; }
.session-new-row { display: flex; gap: 0.35rem; }
.session-new-row #session-new-number { width: 3.6rem; flex: 0 0 auto; }
.session-new-row #session-new-title { flex: 1 1 auto; min-width: 0; }
.session-new-row button { min-height: unset; padding: 0.4rem 0.7rem; }
.session-list .note-item .n-title { display: flex; gap: 0.45rem; align-items: baseline; }
.session-list .s-num { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.session-list .note-item.played { opacity: 0.7; }
.session-main { overflow-y: auto; padding-right: 0.3rem; }
.session-empty { color: var(--text-dim); padding: 2rem; text-align: center; font-style: italic; max-width: 38rem; margin: 0 auto; }
.session-detail { display: flex; flex-direction: column; gap: 0.8rem; max-width: 60rem; }
.session-detail.hidden { display: none; }
.session-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.session-num-label, .session-date-label { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.85rem; font-family: var(--font-display); }
.session-num-label input { width: 4.2rem; }
.session-title-input { flex: 1 1 14rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.session-head button { min-height: unset; padding: 0.45rem 0.8rem; }
.session-prep { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.session-prep summary { cursor: pointer; padding: 0.5rem 0.8rem; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; }
.session-prep textarea { display: block; width: calc(100% - 1.6rem); margin: 0 0.8rem 0.8rem; min-height: 5rem; }

.session-runbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.7rem 0.9rem; border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.7);
}
.runbar-now { display: flex; flex-direction: column; min-width: 0; }
.runbar-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.runbar-title { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--gold-bright); overflow-wrap: anywhere; }
.runbar-actions { display: flex; gap: 0.5rem; }
.runbar-actions button { min-height: unset; padding: 0.5rem 1rem; }

.scene-list { display: flex; flex-direction: column; gap: 0.6rem; }
.scene-empty { color: var(--text-dim); font-style: italic; padding: 0.6rem 0.2rem; }
.scene-card { border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(160deg, var(--panel), var(--panel-2)); }
.scene-card.current { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright), 0 4px 18px rgba(212, 175, 55, 0.18); }
.scene-card.done:not(.current) { opacity: 0.6; }
.scene-summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; list-style: none; }
.scene-summary::-webkit-details-marker { display: none; }
.scene-num { font-family: var(--font-display); font-weight: 700; color: var(--gold-dim); min-width: 1.4rem; font-variant-numeric: tabular-nums; }
.scene-card.current .scene-num { color: var(--gold-bright); }
.scene-title { flex: 1 1 auto; font-family: var(--font-display); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.scene-card.done .scene-title { text-decoration: line-through; text-decoration-color: var(--text-dim); }
.scene-now-chip { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1a1405; background: var(--gold-bright); border-radius: 999px; padding: 0.1rem 0.5rem; }
.scene-link-icons { color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.15em; white-space: nowrap; }
.scene-order-btns { display: flex; gap: 0.2rem; }
.scene-order-btns button, .scene-summary .scene-done-btn { min-height: unset; padding: 0.15rem 0.45rem; font-size: 0.8rem; }
.scene-body { padding: 0 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.scene-read-aloud {
  font-family: var(--font-body); font-style: italic; font-size: 1.02rem; line-height: 1.55; color: var(--text);
  background: rgba(212, 175, 55, 0.07); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.7rem 0.9rem; white-space: pre-wrap;
}
.scene-read-aloud::before { content: "Read aloud"; display: block; font-style: normal; font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.3rem; }
.scene-gm-notes { color: var(--text-dim); white-space: pre-wrap; font-size: 0.95rem; }
.scene-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scene-link-btn { min-height: unset; padding: 0.45rem 0.8rem; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.scene-link-btn.missing { opacity: 0.55; font-style: italic; }
.scene-npcs { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.scene-npcs-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); font-family: var(--font-display); margin-right: 0.2rem; }
.npc-chip { min-height: unset; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.85rem; }
.npc-chip .x { margin-left: 0.35rem; color: var(--text-dim); }
.scene-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.scene-foot button { min-height: unset; padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.scene-edit { display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px dashed var(--border); padding-top: 0.7rem; }
.scene-edit.hidden { display: none; }
.scene-edit label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: var(--text-dim); }
.scene-edit textarea { min-height: 4.5rem; }
.scene-edit-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.scene-edit-row > label { flex: 1 1 12rem; }
.scene-edit-row > label.page { flex: 0 0 6rem; }
.scene-add-btn { align-self: flex-start; min-height: unset; padding: 0.5rem 1rem; border-style: dashed; }

@media (max-width: 800px) {
  .session-layout { grid-template-columns: 1fr; }
  .session-sidebar { border-right: none; border-bottom: 1px solid var(--border-gold); padding: 0 0 0.8rem; max-height: 14rem; }
}
/* The app's global form rules make inputs/selects full-width; the session
   header wants them sized to content so it stays one line on a laptop. */
.session-head select, .session-head input[type=date] { width: auto; flex: 0 0 auto; }
.session-head .session-num-label input { width: 4.2rem; }
.session-head .session-title-input { width: auto; min-width: 0; }

/* ---------------------------------------------------- Skill checks panel --- */
/* Third floating button, left of Events (⚡) and Sound effects (♫). */
.skills-global-fab {
  position: fixed; right: 8.85rem; bottom: 1.25rem; z-index: 62;
  width: 3.2rem; height: 3.2rem; min-height: unset; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-gold);
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-bright);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.skills-global-fab:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-gold); }
.skills-global-fab.active { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright), 0 6px 20px rgba(0, 0, 0, 0.5); }
.skills-fab-icon { width: 1.6rem; height: 1.6rem; }

.skills-global-panel {
  position: fixed; right: 8.85rem; bottom: 5rem; z-index: 63;
  width: min(380px, calc(100vw - 2.5rem)); max-height: min(78vh, 680px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.skills-global-panel.hidden { display: none; }
.skills-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  font-weight: 700; font-family: var(--font-display); color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.skills-panel-actions { display: flex; align-items: center; gap: 0.3rem; }
.skills-panel-actions button { min-height: unset; padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.skills-panel-actions button.active { border-color: var(--gold-bright); color: var(--gold-bright); }
#skills-close-btn { background: none; border: none; font-size: 1.3rem; line-height: 1; padding: 0.1rem 0.4rem; color: var(--text-dim); }
#skills-close-btn:hover { color: var(--gold-bright); box-shadow: none; border-color: transparent; }
.skills-panel-body { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.7rem; }

.skills-dc { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.skills-dc-chip {
  font-size: 0.74rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.12rem 0.55rem; white-space: nowrap;
}
.skills-dc-chip b { color: var(--gold-bright); font-family: var(--font-display); font-variant-numeric: tabular-nums; margin-right: 0.2rem; }
#skills-search { width: 100%; }

.skills-groups { display: flex; flex-direction: column; gap: 0.9rem; }
.skills-group-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-dim); border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; margin-bottom: 0.3rem;
}
.skills-group-head button { min-height: unset; padding: 0.15rem 0.5rem; font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem; padding: 0.35rem 0.2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.skill-row:last-child { border-bottom: none; }
.skill-name { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.skill-attr {
  align-self: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; font-family: var(--font-display);
  color: var(--gold-bright); border: 1px solid var(--border-gold); border-radius: 4px; padding: 0.05rem 0.35rem;
}
.skill-attr.blank { color: var(--text-dim); border-color: var(--border); font-weight: 400; }
.skill-desc { grid-column: 1 / -1; color: var(--text-dim); font-size: 0.84rem; line-height: 1.35; }
.skill-row mark { background: rgba(212, 175, 55, 0.25); color: inherit; border-radius: 2px; }
.skills-none { color: var(--text-dim); font-style: italic; font-size: 0.88rem; }

.skill-edit-row { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--border); }
.skill-edit-line { display: flex; gap: 0.35rem; align-items: center; }
.skill-edit-line input { flex: 1 1 auto; min-width: 0; }
.skill-edit-line select { width: auto; flex: 0 0 auto; }
.skill-edit-line button { min-height: unset; padding: 0.2rem 0.5rem; }
.skill-edit-row textarea { min-height: 2.6rem; font-size: 0.84rem; }
.skills-edit-foot { display: flex; align-items: center; gap: 0.6rem; }
.skills-edit-foot.hidden { display: none; }
.skills-edit-foot button { min-height: unset; padding: 0.35rem 0.8rem; font-size: 0.82rem; }

@media (max-width: 560px) {
  .skills-global-panel { right: 0.6rem; bottom: 12.8rem; }
  .skills-global-fab { right: 0.9rem; bottom: 8.3rem; }
}

/* ------------------------------------------------ section sub-nav --- */
/* Second row of tabs for sections that hold more than one screen
   (Characters · Relationship web, Encounter · Enemies, Library ·
   Adaptations). Slim and quiet so it reads as belonging to the section
   lit up above it, not as a second top bar. */
.section-subnav {
  display: flex; gap: 0.3rem; flex: 0 0 auto; overflow-x: auto;
  padding: 0.4rem 1.2rem 0; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--bg-2), rgba(19, 24, 41, 0.85));
}
.section-subnav.hidden { display: none; }
.section-subnav-btn {
  background: transparent; border: 1px solid transparent; border-bottom: none;
  color: var(--text-dim); padding: 0.45rem 0.95rem; min-height: unset; font-size: 0.88rem;
  border-radius: var(--radius) var(--radius) 0 0; white-space: nowrap;
}
.section-subnav-btn:hover { color: var(--text); box-shadow: none; border-color: transparent; }
.section-subnav-btn.active {
  color: var(--gold-bright); background: var(--panel-2);
  border-color: var(--border-gold); position: relative; top: 1px;
}
.tile-music { --tile-accent: var(--accent-2); }

/* ------------------------------------------------------- Locations --- */
.loc-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; height: 100%; }
.loc-sidebar { display: flex; flex-direction: column; gap: 0.6rem; border-right: 1px solid var(--border-gold); padding-right: 0.8rem; overflow-y: auto; }
.loc-new-row { display: flex; gap: 0.35rem; }
.loc-new-row input { flex: 1 1 auto; min-width: 0; }
.loc-new-row button { min-height: unset; padding: 0.4rem 0.7rem; flex: 0 0 auto; }
.loc-tree { display: flex; flex-direction: column; gap: 0.15rem; }
.loc-tree-item {
  display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; min-height: unset;
  padding: 0.4rem 0.5rem; border-radius: var(--radius); background: transparent; border: 1px solid transparent;
  color: var(--text); font-size: 0.92rem;
}
.loc-tree-item:hover { border-color: var(--border); box-shadow: none; }
.loc-tree-item.active { border-color: var(--gold); background: rgba(212, 175, 55, 0.08); }
.loc-tree-item .t-name { font-family: var(--font-display); font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.loc-tree-item .t-kind { color: var(--text-dim); font-size: 0.75rem; white-space: nowrap; }
.loc-tree-item .t-twig { color: var(--gold-dim); font-size: 0.8rem; }
.loc-tree-empty { color: var(--text-dim); font-style: italic; font-size: 0.88rem; padding: 0.4rem; }

.loc-main { overflow-y: auto; padding-right: 0.3rem; }
.loc-empty { color: var(--text-dim); padding: 2rem; text-align: center; font-style: italic; max-width: 38rem; margin: 0 auto; }
.loc-detail { display: flex; flex-direction: column; gap: 0.9rem; max-width: 72rem; }
.loc-detail.hidden { display: none; }
.loc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.82rem; color: var(--text-dim); min-height: 1.2em; }
.loc-crumbs button { background: none; border: none; min-height: unset; padding: 0; color: var(--gold-dim); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; }
.loc-crumbs button:hover { color: var(--gold-bright); box-shadow: none; }
.loc-head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.loc-art-box { width: 8rem; height: 8rem; flex: 0 0 auto; }
.loc-head-fields { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.loc-name-input { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.loc-head-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.loc-head-row #loc-kind { flex: 1 1 10rem; min-width: 0; }
.loc-parent-label { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); font-size: 0.85rem; flex: 1 1 14rem; }
.loc-parent-label select { flex: 1 1 auto; min-width: 0; }
.loc-head-actions { display: flex; flex-direction: column; gap: 0.4rem; }
.loc-head-actions button { min-height: unset; padding: 0.45rem 0.8rem; }

.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.loc-col { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.loc-field { display: flex; flex-direction: column; gap: 0.3rem; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.loc-field textarea { min-height: 7rem; font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.95rem; color: var(--text); }
.loc-block h4 { margin: 0 0 0.4rem; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.loc-source-row { display: flex; gap: 0.4rem; }
.loc-source-row select { flex: 1 1 auto; min-width: 0; }
.loc-source-row input { width: 5.5rem; flex: 0 0 auto; }
.loc-source-row button { min-height: unset; padding: 0.4rem 0.8rem; flex: 0 0 auto; }

.loc-map-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.loc-map-head h4 { margin: 0; }
.loc-map-actions { display: flex; gap: 0.35rem; align-items: center; }
.loc-map-actions button, .loc-map-actions .file-btn { min-height: unset; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.loc-map-actions .hidden { display: none; }
.loc-map-frame { position: relative; border: 1px solid var(--border-gold); border-radius: var(--radius); overflow: hidden; background: var(--bg-2); line-height: 0; }
.loc-map-frame.hidden { display: none; }
.loc-map-frame img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.loc-map-frame.placing { cursor: crosshair; box-shadow: 0 0 0 2px var(--gold-bright); }
.loc-map-pins { position: absolute; inset: 0; pointer-events: none; }
.loc-pin {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  background: none; border: none; padding: 0; min-height: unset; line-height: 1; cursor: pointer;
}
.loc-pin:hover { box-shadow: none; }
.loc-pin-dot {
  width: 1.15rem; height: 1.15rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: radial-gradient(circle at 35% 35%, #bfe6ff, #2f7fd0 55%, #0c2a5a);
  border: 2px solid var(--gold-bright); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
.loc-pin-label {
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--text);
  background: rgba(11, 14, 26, 0.82); border: 1px solid var(--border-gold); border-radius: 4px;
  padding: 0.12rem 0.35rem; white-space: nowrap; order: -1;
}
.loc-pin:hover .loc-pin-label, .loc-pin:focus-visible .loc-pin-label { color: var(--gold-bright); border-color: var(--gold-bright); }
.loc-map-frame.placing .loc-pin { pointer-events: none; opacity: 0.6; }
.loc-place-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--gold-bright); border-radius: var(--radius);
  background: rgba(212, 175, 55, 0.1); color: var(--gold-bright); font-size: 0.88rem;
}
.loc-place-banner.hidden { display: none; }
.loc-place-banner button { min-height: unset; padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.loc-map-empty { color: var(--text-dim); font-style: italic; font-size: 0.88rem; margin: 0; }

.loc-children { display: flex; flex-direction: column; gap: 0.35rem; }
.loc-child-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.loc-child-row .c-name { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); font-weight: 600; background: none; border: none; padding: 0; min-height: unset; text-align: left; color: var(--text); overflow-wrap: anywhere; }
.loc-child-row .c-name:hover { color: var(--gold-bright); box-shadow: none; }
.loc-child-row .c-pin-state { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
.loc-child-row .c-pin-state.placed { color: var(--accent-2); }
.loc-child-row button.c-act { min-height: unset; padding: 0.2rem 0.55rem; font-size: 0.78rem; }

.char-found-at { margin-top: 1rem; }
.char-found-at.hidden { display: none; }
.char-found-at h4 { margin: 0 0 0.4rem 0; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.char-found-at-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }

@media (max-width: 1000px) { .loc-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .loc-layout { grid-template-columns: 1fr; }
  .loc-sidebar { border-right: none; border-bottom: 1px solid var(--border-gold); padding: 0 0 0.8rem; max-height: 16rem; }
}

/* Details card that pops up on the map when a pin is clicked. Sits below
   the pin (above it for pins in the lower part of the map), and shifts
   sideways near the map's left/right edges so it isn't cut off. */
.loc-pin-card {
  position: absolute; z-index: 3; pointer-events: auto;
  width: min(17rem, 80%); transform: translate(-50%, 0.6rem);
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  border: 1px solid var(--gold-bright); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  padding: 0.6rem 0.7rem 0.7rem; line-height: 1.35; text-align: left;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.loc-pin-card.above { transform: translate(-50%, calc(-100% - 2.4rem)); }
.loc-pin-card.from-left { transform: translate(-1.2rem, 0.6rem); }
.loc-pin-card.from-left.above { transform: translate(-1.2rem, calc(-100% - 2.4rem)); }
.loc-pin-card.from-right { transform: translate(calc(-100% + 1.2rem), 0.6rem); }
.loc-pin-card.from-right.above { transform: translate(calc(-100% + 1.2rem), calc(-100% - 2.4rem)); }
.loc-pin-card-head { display: flex; align-items: flex-start; gap: 0.4rem; }
.loc-pin-card-title { flex: 1 1 auto; font-family: var(--font-display); font-weight: 700; color: var(--gold-bright); overflow-wrap: anywhere; }
.loc-pin-card-close { background: none; border: none; min-height: unset; padding: 0 0.2rem; font-size: 1.1rem; line-height: 1; color: var(--text-dim); }
.loc-pin-card-close:hover { color: var(--gold-bright); box-shadow: none; }
.loc-pin-card-kind { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); font-family: var(--font-display); }
.loc-pin-card-desc { font-size: 0.86rem; color: var(--text); white-space: pre-wrap; }
.loc-pin-card-desc.empty { color: var(--text-dim); font-style: italic; }
.loc-pin-card-who { font-size: 0.8rem; color: var(--text-dim); }
.loc-pin-card-open { align-self: flex-start; min-height: unset; padding: 0.35rem 0.9rem; font-size: 0.85rem; margin-top: 0.15rem; }
.loc-pin[aria-expanded="true"] .loc-pin-label { color: var(--gold-bright); border-color: var(--gold-bright); }
.loc-map-frame { overflow: visible; }
.loc-map-frame img { border-radius: var(--radius); }

/* ------------------------------------------------------ How-to guide --- */
.guide-open-btn {
  margin-top: 0.8rem; min-height: unset; padding: 0.35rem 1rem; font-size: 0.85rem;
  background: transparent; border: 1px solid var(--border-gold); border-radius: 999px; color: var(--gold-bright);
}
.guide-open-btn:hover { background: rgba(212, 175, 55, 0.1); }
.guide-modal { width: min(760px, 94vw); max-height: 88vh; }
.guide-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border-gold); }
.guide-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left;
  min-height: unset; padding: 0.6rem 0.9rem; border: none; border-radius: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem;
}
.guide-tab:hover { color: var(--text); box-shadow: none; }
.guide-tab.active { color: var(--gold-bright); border-bottom-color: var(--gold-bright); background: rgba(212, 175, 55, 0.06); }
.guide-tab-when { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dim); font-weight: 700; }
.guide-body { padding: 1rem 1.2rem 1.2rem; }
.guide-panel { display: none; }
.guide-panel.active { display: block; }
.guide-lede { margin: 0 0 0.9rem; color: var(--text-dim); font-style: italic; max-width: 62ch; }
.guide-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; }
.guide-step {
  counter-increment: step; display: grid; grid-template-columns: 2rem 1fr auto; gap: 0.7rem; align-items: center;
  padding: 0.6rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.guide-step:last-child { border-bottom: none; }
.guide-step::before {
  content: counter(step); display: flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--border-gold);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}
.guide-step-text { line-height: 1.45; }
.guide-step-text b { color: var(--text); font-weight: 600; }
.guide-go { min-height: unset; padding: 0.3rem 0.75rem; font-size: 0.8rem; white-space: nowrap; }
.guide-rule { margin: 1.1rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.88rem; }
@media (max-width: 600px) {
  .guide-tabs { grid-template-columns: repeat(2, 1fr); }
  .guide-step { grid-template-columns: 2rem 1fr; }
  .guide-go { grid-column: 2; justify-self: start; }
}

/* ---------------------------------------------- formatted text fields --- */
/* Location descriptions / GM notes (and run-sheet scenes): shown formatted
   like the printed adventure, edited as plain text with a toolbar. */
.loc-text-blocks { display: flex; flex-direction: column; gap: 0.9rem; }
.rich-field { position: relative; }
/* Header bar: label, section jump chips, Open all, Edit. Sticks to the top
   of the scrolling page while you read through a long field. */
.rt-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.35rem 0; margin-bottom: 0.35rem;
  background: rgba(11, 14, 26, 0.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.rt-bar.hidden { display: none; }
.rt-label {
  font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-right: 0.3rem; white-space: nowrap;
}
.rt-jump { display: flex; gap: 0.3rem; flex: 1 1 auto; overflow-x: auto; scrollbar-width: thin; min-width: 0; padding: 0.1rem 0; }
.rt-jump-chip {
  flex: 0 0 auto; min-height: 2.1rem; padding: 0.25rem 0.75rem; font-size: 0.82rem; border-radius: 999px;
  font-family: var(--font-body); letter-spacing: 0; text-transform: none;
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
}
.rt-jump-chip.open { color: var(--gold-bright); border-color: var(--gold-dim); }
.rt-allbtn, .rt-editbtn { min-height: 2.1rem; padding: 0.25rem 0.75rem; font-size: 0.78rem; margin-left: auto; }
.rt-allbtn + .rt-editbtn { margin-left: 0; }
.rt-allbtn.hidden { display: none; }
.rt-view {
  position: relative; min-height: 3.2rem;
  padding: 0.8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel), var(--panel-2));
}
.rt-view.hidden, .rt-editor.hidden { display: none; }
.rt-empty {
  display: block; width: 100%; text-align: left; min-height: unset; padding: 0; border: none; background: none;
  color: var(--text-dim); font: italic 0.98rem var(--font-body); letter-spacing: 0; text-transform: none; cursor: text;
}
.rt-empty:hover { box-shadow: none; color: var(--text); }

/* Foldable sections: one per "##" heading. */
.rt-intro { margin-bottom: 0.6rem; }
.rt-sec { border-top: 1px solid var(--border); }
.rt-sec:first-child { border-top: none; }
.rt-sec-head {
  display: flex; align-items: center; gap: 0.55rem; width: 100%; min-height: 3rem;
  padding: 0.55rem 0.2rem; margin: 0; border: none; border-radius: 0; background: none; box-shadow: none;
  text-align: left; cursor: pointer; color: var(--gold-bright);
  font-family: var(--font-display); font-size: 1.08rem; font-variant: small-caps; letter-spacing: 0.05em; text-transform: none;
  scroll-margin-top: 3.5rem;
}
.rt-sec { scroll-margin-top: 3.2rem; }
.rt-sec-head:hover { background: rgba(240, 207, 106, 0.05); box-shadow: none; }
.rt-chev { display: inline-block; width: 1rem; color: var(--gold); transition: transform 0.15s ease; font-size: 0.85rem; }
.rt-sec.open .rt-chev { transform: rotate(90deg); }
.rt-sec-body { display: none; padding: 0 0.2rem 0.8rem 1.55rem; }
.rt-sec.open .rt-sec-body { display: block; }

/* Tables (e.g. Opportunities and Complications) */
.rt-table-wrap { overflow-x: auto; margin: 0 0 0.8rem; }
.rt-table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.rt-table th, .rt-table td { border: 1px solid var(--border); padding: 0.4rem 0.6rem; text-align: left; vertical-align: top; }
.rt-table th { background: rgba(240, 207, 106, 0.1); color: var(--gold-bright); font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
.rt-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); }

/* Rules phrases and character links */
.rt-rule {
  display: inline; padding: 0 0.3rem; border-radius: 4px; font-weight: 600; white-space: nowrap;
  color: #ffd9a0; background: rgba(255, 170, 60, 0.12); border: 1px solid rgba(255, 170, 60, 0.35);
}
button.rt-rule {
  min-height: unset; font: inherit; font-weight: 600; line-height: inherit; letter-spacing: 0; text-transform: none;
  cursor: pointer; vertical-align: baseline; margin: 0;
}
button.rt-rule:hover { background: rgba(255, 170, 60, 0.24); box-shadow: none; }
.rt-adv { color: #8fe3a4; font-weight: 600; }
.rt-dis { color: #ff9a8f; font-weight: 600; }
.rt-char {
  display: inline; min-height: unset; padding: 0; margin: 0; border: none; background: none; box-shadow: none;
  font: inherit; font-weight: 600; line-height: inherit; letter-spacing: 0; text-transform: none;
  color: #e9d7ff; border-bottom: 1px dotted rgba(200, 170, 255, 0.8); border-radius: 0; cursor: pointer; vertical-align: baseline;
}
.rt-char:hover { color: #fff; box-shadow: none; background: rgba(200, 170, 255, 0.12); }

/* Key points: a compact cheat sheet */
.rich-field.rt-keypoints .rt-view:not(.empty) { border-color: rgba(110, 198, 255, 0.35); border-left: 3px solid var(--accent-2); padding: 0.55rem 0.9rem; }
.rich-field.rt-keypoints .rt-view ul { margin: 0; }

/* The formatted text itself (shared by the fields and run-sheet scenes). */
.rt-view, .rt-render { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text); white-space: normal; }
.rt-view > :first-child, .rt-render > :first-child { margin-top: 0; }
.rt-view > :last-child, .rt-render > :last-child { margin-bottom: 0; }
.rt-view p, .rt-render p { margin: 0 0 0.7rem; }
.rt-view strong, .rt-render strong { color: #f6ead0; font-weight: 700; }
.rt-view em, .rt-render em { font-style: italic; }
.rt-view ul, .rt-view ol, .rt-render ul, .rt-render ol { margin: 0 0 0.7rem; padding-left: 1.4rem; }
.rt-view li, .rt-render li { margin: 0.15rem 0; }
.rt-view li::marker, .rt-render li::marker { color: var(--gold); }
.rt-h {
  font-family: var(--font-display); color: var(--gold-bright); line-height: 1.25;
  margin: 1rem 0 0.45rem; letter-spacing: 0.02em;
}
.rt-h1 { font-size: 1.3rem; border-bottom: 1px solid var(--border-gold); padding-bottom: 0.2rem; }
.rt-h2 { font-size: 1.05rem; font-variant: small-caps; letter-spacing: 0.05em; }
.rt-h3 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.rt-box {
  margin: 0 0 0.8rem; padding: 0.7rem 0.9rem;
  background: rgba(240, 207, 106, 0.08); border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.98rem;
}
.rt-box p { margin-bottom: 0.45rem; }
.rt-loc {
  display: inline; min-height: unset; padding: 0 0.25rem; margin: 0 0.05rem;
  font: inherit; font-weight: 600; color: var(--accent-2); line-height: inherit;
  background: rgba(110, 198, 255, 0.1); border: 1px solid rgba(110, 198, 255, 0.35); border-radius: 4px;
  cursor: pointer; vertical-align: baseline;
}
.rt-loc:hover { background: rgba(110, 198, 255, 0.2); box-shadow: none; }

/* "What the players see" reads like the book's parchment read-aloud box. */
.rich-field.rt-readaloud .rt-view:not(.empty) {
  background: linear-gradient(160deg, rgba(240, 207, 106, 0.09), rgba(240, 207, 106, 0.04));
  border-color: rgba(212, 175, 55, 0.35); border-left: 3px solid var(--gold);
  font-size: 1.04rem;
}

/* Editor */
.rt-editor { display: flex; flex-direction: column; border: 1px solid var(--gold-dim); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.rt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; padding: 0.4rem; border-bottom: 1px solid var(--border); background: var(--bg-2); }
.rt-tool { min-height: unset; padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.rt-tool-bold { font-weight: 800; }
.rt-tool-italic { font-style: italic; font-family: Georgia, serif; }
.rt-sep { flex: 1 1 auto; }
.rt-editor textarea {
  border: none; border-radius: 0; resize: vertical; min-height: 10rem; width: 100%;
  font-family: var(--font-body); font-size: 0.98rem; line-height: 1.55; padding: 0.7rem 0.9rem; background: var(--panel);
}
.rt-editor textarea:focus { outline: none; box-shadow: none; }
.rt-status { font-size: 0.8rem; color: var(--gold-bright); flex: 1 1 auto; }
.rt-status.bad { color: #ff9a8f; }
.rt-send-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); background: rgba(200, 170, 255, 0.08); font-size: 0.85rem; }
.rt-send-row.hidden { display: none; }
.rt-send-row select { flex: 0 1 14rem; min-height: 2.2rem; }
.rt-send-row button { min-height: 2.2rem; padding: 0.25rem 0.8rem; font-size: 0.8rem; }
.rt-tool-ai { border-color: rgba(200, 170, 255, 0.5); color: #e9d7ff; }
.rt-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.5rem 0.4rem 0.9rem; border-top: 1px solid var(--border); background: var(--bg-2); }
.rt-hint { font-size: 0.75rem; color: var(--text-dim); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-done { min-height: unset; padding: 0.3rem 1rem; font-size: 0.82rem; }

/* Run-sheet scenes render the same formatting. */
.scene-read-aloud.rt-render { white-space: normal; }
.scene-gm-notes.rt-render { white-space: normal; color: var(--text); }

/* --------------------------------------------- Locations: reading mode --- */
/* Hides the place tree and every editing control so the text gets the whole
   screen; everything else (who's here, map, sub-locations) stays usable. */
.loc-read-head { display: none; }
.loc-import-btn { margin-top: 0.45rem; min-height: unset; padding: 0.4rem 0.8rem; font-size: 0.85rem; border-color: rgba(200, 170, 255, 0.5); color: #e9d7ff; }
#view-locations.reading .loc-layout { grid-template-columns: 1fr; }
#view-locations.reading .loc-sidebar,
#view-locations.reading .loc-head,
#view-locations.reading .rt-editbtn,
#view-locations.reading .loc-source-row select,
#view-locations.reading .loc-source-row input,
#view-locations.reading .loc-import-btn,
#view-locations.reading #loc-add-image-wrap,
#view-locations.reading .loc-map-actions label,
#view-locations.reading #loc-map-remove,
#view-locations.reading .loc-child-row button.c-act,
#view-locations.reading #loc-npcs .x,
#view-locations.reading #loc-npcs select { display: none !important; }
#view-locations.reading .loc-rich-block:has(.rich-field.is-empty) { display: none; }
#view-locations.reading .loc-read-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap;
}
.loc-read-title { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }
#loc-read-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--gold-bright); letter-spacing: 0.02em; }
.loc-read-kind { font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
#loc-read-exit { min-height: 2.6rem; padding: 0.4rem 1.1rem; }
#view-locations.reading .loc-detail { max-width: 64rem; margin: 0 auto; }
#view-locations.reading .rt-view { font-size: 1.14rem; line-height: 1.65; padding: 1rem 1.2rem; }
#view-locations.reading .rich-field.rt-readaloud .rt-view:not(.empty) { font-size: 1.18rem; }
#view-locations.reading .rt-sec-head { font-size: 1.22rem; min-height: 3.4rem; }
#view-locations.reading .rt-jump-chip { min-height: 2.5rem; font-size: 0.92rem; padding: 0.3rem 0.95rem; }

/* ------------------------------------------ Import text from the PDF --- */
.loc-import-modal { width: min(820px, 94vw); max-height: 90vh; display: flex; flex-direction: column; }
.loc-import-intro { margin: 0 0 0.8rem; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
.loc-import-intro strong { color: var(--gold-bright); }
.loc-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.loc-import-row select { flex: 1 1 14rem; min-width: 0; }
.loc-import-row label { display: flex; align-items: center; gap: 0.35rem; color: var(--text-dim); font-size: 0.88rem; }
.loc-import-row input { width: 5.5rem; }
.loc-import-status { margin: 0.7rem 0 0.3rem; font-size: 0.9rem; color: var(--gold-bright); min-height: 1.2em; }
.loc-import-status.bad { color: #ff9a8f; }
.loc-import-preview { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.loc-import-preview.hidden { display: none; }
.loc-import-preview h4 { margin: 0.6rem 0 0.1rem; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.loc-import-preview .rt-render { padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); max-height: 18rem; overflow-y: auto; }
.loc-import-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.loc-import-actions.hidden { display: none; }
.loc-import-warn { flex: 1 1 auto; color: #ffd9a0; font-size: 0.85rem; }

/* --------------------------------------------- Character quick look --- */
.char-pop {
  position: fixed; z-index: 80; width: min(23rem, 92vw); max-height: min(28rem, 80vh);
  display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem 0.9rem 0.8rem;
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  border: 1px solid rgba(200, 170, 255, 0.6); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65);
}
.char-pop.hidden { display: none; }
.char-pop-head { display: flex; align-items: center; gap: 0.7rem; }
.char-pop-portrait {
  width: 3.4rem; height: 3.4rem; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--gold-dim);
  background: var(--bg-2) center / cover no-repeat; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.4rem; color: var(--gold);
}
.char-pop-titles { flex: 1 1 auto; min-width: 0; }
.char-pop-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--gold-bright); }
.char-pop-role { font-size: 0.85rem; color: var(--text-dim); }
.char-pop-close { align-self: flex-start; background: none; border: none; font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.4rem; min-height: unset; color: var(--text-dim); }
.char-pop-close:hover { color: var(--gold-bright); box-shadow: none; }
.char-pop-stats { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.char-pop-stats.hidden { display: none; }
.char-pop-dial { font-size: 0.82rem; padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); }
.char-pop-dial b { color: var(--gold); font-weight: 600; margin-right: 0.2rem; }
.char-pop-notes { flex: 1 1 auto; overflow-y: auto; font-size: 0.93rem; line-height: 1.5; min-height: 0; white-space: normal; }
.char-pop-notes p { margin: 0 0 0.5rem; }
.char-pop-empty { color: var(--text-dim); font-style: italic; margin: 0; }
.char-pop-foot { display: flex; justify-content: flex-end; }
.char-pop-foot button { min-height: 2.4rem; padding: 0.3rem 1rem; font-size: 0.85rem; }

/* ------------------------------------------------ Player screen (TV) --- */
.tv-global-fab {
  position: fixed; right: 12.65rem; bottom: 1.25rem; z-index: 62;
  width: 3.2rem; height: 3.2rem; min-height: unset; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-gold);
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.tv-global-fab:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--border-gold); }
.tv-global-fab.active { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright), 0 6px 20px rgba(0, 0, 0, 0.5); }
.tv-global-fab-icon { font-size: 1.35rem; line-height: 1; }
/* A red "on air" dot while the TV shows something other than the blank screen. */
.tv-global-fab.live::after {
  content: ""; position: absolute; top: 0.15rem; right: 0.15rem; width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: #ff5a4a; box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(255, 90, 74, 0.8);
}
.tv-global-panel {
  position: fixed; right: 1.25rem; bottom: 5rem; z-index: 63;
  width: min(380px, calc(100vw - 2.5rem)); max-height: min(78vh, 640px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.tv-global-panel.hidden { display: none; }
.tv-panel-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  font-family: var(--font-display); font-weight: 700; color: var(--gold-bright);
}
.tv-panel-header button { background: none; border: none; font-size: 1.4rem; line-height: 1; padding: 0.1rem 0.4rem; min-height: unset; color: var(--text-dim); }
.tv-panel-header button:hover { color: var(--gold-bright); box-shadow: none; }
.tv-panel-body { padding: 0.8rem 0.9rem 0.9rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.tv-now { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-2); }
.tv-now-thumb {
  width: 4.2rem; height: 2.4rem; flex: 0 0 auto; border-radius: 4px; border: 1px solid var(--border-gold);
  background: #0b0e1a url("../img/highstorm-bg.jpg") center / cover no-repeat;
}
.tv-now-thumb:not(.empty) { background-color: #000; background-size: contain; }
.tv-now-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); font-family: var(--font-display); }
.tv-now-what { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tv-actions { display: flex; gap: 0.5rem; }
.tv-actions button { flex: 1 1 0; min-height: 2.6rem; }
.tv-check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--text-dim); line-height: 1.35; }
.tv-check input { margin-top: 0.15rem; width: auto; min-height: unset; flex: 0 0 auto; }
.tv-section-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); }
.tv-add-handout { min-height: unset; padding: 0.25rem 0.7rem; font-size: 0.8rem; text-transform: none; letter-spacing: 0; }
.tv-handouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.45rem; }
.tv-handout { position: relative; }
.tv-handout-show {
  display: block; width: 100%; aspect-ratio: 1; min-height: unset; padding: 0; border-radius: 6px;
  border: 1px solid var(--border-gold); background: #000 center / cover no-repeat;
}
.tv-handout-show:hover { box-shadow: 0 0 0 2px var(--gold-bright); }
.tv-handout-del {
  position: absolute; top: 0.2rem; right: 0.2rem; width: 1.5rem; height: 1.5rem; min-height: unset; padding: 0;
  border-radius: 50%; font-size: 0.95rem; line-height: 1; background: rgba(11, 14, 26, 0.85); border: 1px solid var(--border); color: var(--text-dim);
}
.tv-empty { margin: 0; font-size: 0.85rem; color: var(--text-dim); font-style: italic; }
.tv-help { font-size: 0.82rem; color: var(--text-dim); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.tv-help code { color: var(--gold-bright); font-size: 0.95rem; user-select: all; }

.tv-show-btn { border-color: rgba(110, 198, 255, 0.5); color: #cfeaff; }
.tv-show-btn:hover { border-color: var(--accent-2); }
#image-tv { margin-left: auto; min-height: unset; padding: 0.35rem 0.9rem; }
.loc-read-actions { display: flex; gap: 0.5rem; }
#loc-read-tv { min-height: 2.6rem; padding: 0.4rem 1rem; }
.char-pop-foot { gap: 0.5rem; }

.tv-toast {
  position: fixed; left: 50%; bottom: 5.2rem; transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 0.8rem; max-width: calc(100vw - 2rem);
  padding: 0.55rem 0.6rem 0.55rem 1rem; border-radius: 999px;
  background: rgba(11, 14, 26, 0.95); border: 1px solid rgba(110, 198, 255, 0.55);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6); color: var(--text); font-size: 0.92rem;
}
.tv-toast.hidden { display: none; }
.tv-toast.bad { border-color: rgba(255, 120, 100, 0.7); color: #ffd0c8; }
.tv-toast button { min-height: 2.2rem; padding: 0.2rem 0.9rem; font-size: 0.82rem; border-radius: 999px; }

.tv-menu {
  position: fixed; z-index: 91; min-width: 14rem; max-width: calc(100vw - 1rem);
  display: flex; flex-direction: column; padding: 0.35rem;
  background: linear-gradient(160deg, var(--panel), var(--bg-2));
  border: 1px solid rgba(110, 198, 255, 0.55); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.tv-menu.hidden { display: none; }
.tv-menu-item { text-align: left; min-height: 2.8rem; padding: 0.4rem 0.8rem; border: none; background: none; border-radius: 6px; font-size: 0.95rem; }
.tv-menu-item:hover { background: rgba(110, 198, 255, 0.12); box-shadow: none; }
.tv-menu-empty { padding: 0.6rem 0.7rem; color: var(--text-dim); font-size: 0.88rem; font-style: italic; max-width: 16rem; }

@media (max-width: 560px) {
  .tv-global-fab { right: 0.9rem; bottom: 12rem; }
  .tv-global-panel { right: 0.6rem; bottom: 4.5rem; }
}

/* Handouts from the PC's handouts folder, grouped by subfolder. The one on
   the TV is outlined in blue; tapping it again blanks the TV. */
.tv-refresh { min-height: unset; padding: 0.25rem 0.7rem; font-size: 0.8rem; text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.tv-handouts-list { display: flex; flex-direction: column; gap: 0.45rem; }
.tv-handout-group { font-size: 0.8rem; color: var(--gold); font-family: var(--font-display); margin-top: 0.2rem; }
.tv-handout-name { font-size: 0.75rem; color: var(--text-dim); margin-top: 0.2rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-handout-show { position: relative; background-color: #000; }
.tv-handout.on-tv .tv-handout-show { border: 2px solid var(--accent-2); box-shadow: 0 0 0 2px rgba(110, 198, 255, 0.35), 0 0 14px rgba(110, 198, 255, 0.45); }
.tv-handout.on-tv .tv-handout-name { color: #cfeaff; }
.tv-handout-badge {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.2rem 0.25rem;
  font-size: 0.66rem; line-height: 1.2; font-weight: 600; text-align: center;
  background: rgba(20, 70, 120, 0.9); color: #fff; border-radius: 0 0 4px 4px;
}
.tv-empty code { color: var(--gold-bright); }

/* ------------------------------------------- Sheet & portal (GM side) --- */
.gm-sheet-wrap { display: flex; flex-direction: column; gap: 1rem; }
.gm-sheet-wrap.hidden { display: none; }
.gm-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.gm-sheet-head h4, .portal-box-head h4 { margin: 0; color: var(--gold-dim); font-family: var(--font-display); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.portal-box { padding: 0.8rem 0.9rem; border: 1px solid rgba(110, 198, 255, 0.45); border-radius: var(--radius); background: rgba(110, 198, 255, 0.05); display: flex; flex-direction: column; gap: 0.5rem; }
.portal-box-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.portal-status { font-size: 0.85rem; color: var(--text-dim); }
.portal-status.on { color: #8fe3a4; }
.portal-help { margin: 0; font-size: 0.88rem; color: var(--text-dim); line-height: 1.45; }
.portal-pin-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.portal-pin-row.hidden { display: none; }
.portal-pin-row input { flex: 0 1 12rem; font-size: 1.1rem; letter-spacing: 0.2em; }
.changes-box { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.changes-refresh { min-height: unset; padding: 0.25rem 0.7rem; font-size: 0.8rem; }
.changes-list { display: flex; flex-direction: column; gap: 0.5rem; }
.change-entry { padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.change-entry.undone { opacity: 0.5; }
.change-entry.is-undo { border-style: dashed; }
.change-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.change-who { font-weight: 600; font-family: var(--font-display); }
.change-who.player { color: #8fc7ff; }
.change-who.gm { color: var(--gold-bright); }
.change-when { font-size: 0.8rem; color: var(--text-dim); }
.change-undo { margin-left: auto; min-height: unset; padding: 0.2rem 0.75rem; font-size: 0.8rem; }
.change-undone { margin-left: auto; font-size: 0.8rem; color: var(--text-dim); font-style: italic; }
.change-entry ul { margin: 0.35rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.change-entry li { margin: 0.1rem 0; }

/* ---------------------------------------------------------- GM lock --- */
.home-lock-card { margin-top: 1rem; }
.gm-lock-state { font-size: 0.85rem; color: #ffb38a; font-family: var(--font-display); }
.gm-lock-state.on { color: #8fe3a4; }
.gm-lock-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gm-lock-actions input { flex: 0 1 14rem; letter-spacing: 0.15em; }
.gm-lock-screen {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6, 8, 16, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gm-lock-screen.hidden { display: none; }
.gm-lock-panel {
  width: min(24rem, 100%); padding: 1.6rem 1.4rem; text-align: center; display: flex; flex-direction: column; gap: 0.7rem;
  background: linear-gradient(160deg, var(--panel), var(--bg-2)); border: 1px solid var(--border-gold); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}
.gm-lock-glyph { font-size: 2rem; color: var(--gold); }
.gm-lock-panel h2 { margin: 0; font-family: var(--font-display); color: var(--gold-bright); }
.gm-lock-panel p { margin: 0; color: var(--text-dim); }
.gm-lock-form { display: flex; gap: 0.5rem; }
.gm-lock-form input { flex: 1 1 auto; font-size: 1.2rem; letter-spacing: 0.3em; text-align: center; }
.gm-lock-error { min-height: 1.2em; color: #ffb38a !important; }
.gm-lock-player a { color: var(--accent-2); }

/* ------------------------------------------------ Sheet themes (GM) --- */
.theme-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.theme-pick { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.78rem; color: var(--text-dim); font-family: var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; flex: 0 1 16rem; }
.theme-pick select { text-transform: none; letter-spacing: 0; font-size: 1rem; }
.themes-modal { width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; }
.themes-body { display: grid; grid-template-columns: 15rem 1fr; gap: 1rem; align-items: start; }
.themes-side { display: flex; flex-direction: column; gap: 0.8rem; position: sticky; top: 0; }
.themes-list { display: flex; flex-direction: column; gap: 0.35rem; }
.themes-item { display: flex; align-items: center; gap: 0.6rem; text-align: left; min-height: 2.8rem; padding: 0.4rem 0.6rem; }
.themes-item.active { border-color: var(--gold-bright); box-shadow: 0 0 0 1px var(--gold-bright); }
.themes-swatch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 6px; border: 2px solid; flex: 0 0 auto; }
.themes-swatch i { width: 0.7rem; height: 1.2rem; border-radius: 2px; display: block; }
.themes-new { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.themes-new label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-dim); }
.themes-editor { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.themes-editor.hidden { display: none; }
.themes-empty { grid-column: 2; color: var(--text-dim); font-style: italic; margin: 0; }
.themes-empty.hidden { display: none; }
.theme-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-dim); }
.theme-colors, .theme-fonts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.theme-colors label, .theme-fonts label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; color: var(--text-dim); }
.theme-colors input[type="color"] { height: 2.8rem; padding: 0.2rem; cursor: pointer; }
.theme-bg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.theme-bg-label { font-size: 0.85rem; color: var(--text-dim); }
.theme-bg-thumb { width: 4.5rem; height: 2.6rem; border-radius: 4px; border: 1px solid var(--border); background: center / cover no-repeat var(--bg-2); }
.theme-bg-thumb.empty { background-image: none; }
.theme-bg .file-btn, .theme-bg button { min-height: unset; padding: 0.35rem 0.8rem; font-size: 0.85rem; }
.theme-dim { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-dim); }
.theme-dim input { width: 8rem; padding: 0; }
.theme-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.theme-preview-label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); }
.theme-preview { padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border); max-height: 32rem; overflow-y: auto; }
@media (max-width: 760px) { .themes-body { grid-template-columns: 1fr; } .themes-side { position: static; } .themes-empty { grid-column: 1; } }

/* ------------------------------------------- player journal (GM view) --- */
.gm-journal { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.6rem; }
.gm-jgroup { display: flex; flex-direction: column; gap: 0.5rem; }
.gm-jgroup h4 { margin: 0; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.gm-jentry { padding: 0.7rem 0.9rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
.gm-jhead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.4rem; }
.gm-jtitle { font-family: var(--font-display); font-weight: 700; color: var(--gold-bright); }
.gm-jdate { font-size: 0.8rem; color: var(--text-dim); }

/* ----------------------------------------------------------- Messages --- */
/* ✉ button beside the TV button, and its panel (js/gm_messages.js). */
.msg-global-fab {
  position: fixed; right: 16.45rem; bottom: 1.25rem; z-index: 62;
  width: 3.2rem; height: 3.2rem; min-height: unset; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-gold);
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.msg-global-fab:hover { transform: scale(1.06); }
.msg-global-fab.active { border-color: var(--gold-bright); box-shadow: 0 0 0 2px var(--gold-bright), 0 6px 20px rgba(0, 0, 0, 0.5); }
.msg-global-fab-icon { font-size: 1.45rem; color: var(--gold-bright); line-height: 1; }
.msg-global-panel {
  position: fixed; right: 1.25rem; bottom: 5rem; z-index: 63;
  width: min(460px, calc(100vw - 2.5rem)); max-height: min(80vh, 680px);
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-gold); border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.msg-global-panel.hidden { display: none; }
.msg-panel-header {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); color: var(--gold); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem;
}
.msg-panel-header #msg-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-panel-header button { min-height: 2.4rem; min-width: 2.4rem; padding: 0; background: none; border: none; box-shadow: none; font-size: 1.3rem; color: var(--text-dim); }
.msg-back.hidden { display: none; }
.msg-panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem; overflow-y: auto; }
.msg-list-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.msg-empty, .msg-hint { margin: 0; color: var(--text-dim); font-size: 0.85rem; }
.msg-hint.warn { color: #f0c27a; }
.msg-flash { margin: 0; padding: 0.45rem 0.7rem; border-radius: var(--radius); background: rgba(143, 227, 164, 0.1); border: 1px solid rgba(143, 227, 164, 0.4); color: #bff0cb; font-size: 0.9rem; }
.msg-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.msg-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem 0.75rem; border-radius: var(--radius); background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); }
.msg-card-title { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.msg-card-body { color: var(--text-dim); font-size: 0.86rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.msg-sent { font-size: 0.78rem; color: var(--text-dim); }
.msg-sent .read { color: #8fe3a4; }
.msg-sent .unread { color: var(--gold); }
.msg-sent.none { font-style: italic; }
.msg-card-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.msg-card-actions button { min-height: 2.4rem; padding: 0.2rem 0.9rem; }
.msg-title-input { width: 100%; box-sizing: border-box; font-size: 1rem; }
.msg-input { width: 100%; resize: vertical; min-height: 9rem; font-size: 1rem; box-sizing: border-box; }
.msg-compose-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.msg-status { flex: 1 1 auto; font-size: 0.82rem; color: #ef8a80; min-width: 4rem; }
.msg-preview { padding: 0.6rem 0.75rem; border-radius: var(--radius); background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-gold); max-height: 12rem; overflow-y: auto; }
.msg-preview-body { font-size: 0.9rem; color: var(--text-dim); }
.msg-preview-body p { margin: 0.3rem 0; }
.msg-to { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.msg-chip { min-height: 2.4rem; padding: 0.25rem 0.8rem; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); box-shadow: none; font-weight: 400; }
.msg-chip.has { border-color: rgba(143, 227, 164, 0.5); }
.msg-chip.on { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 700; }
.msg-do-send { margin-left: auto; min-height: 2.6rem; }
.msg-deliveries { display: flex; flex-direction: column; gap: 0.3rem; }
.msg-delivery { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.msg-delivery span { flex: 1 1 auto; color: var(--text-dim); }
.msg-unsend { min-height: 2rem; padding: 0.1rem 0.7rem; font-size: 0.78rem; }
.portal-message-btn { margin-top: 0.5rem; }
.portal-message-btn.hidden { display: none; }
@media (max-width: 560px) {
  .msg-global-fab { right: 0.9rem; bottom: 15.7rem; }
  .msg-global-panel { right: 0.6rem; bottom: 4.5rem; width: calc(100vw - 1.2rem); }
}

/* Damaged database file warning (js/app.js checkDbHealth). */
.db-alert {
  position: sticky; top: 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem;
  padding: 0.7rem 1rem; background: #5a1d1a; border-bottom: 2px solid #c1584f; color: #ffe1dc;
}
.db-alert.hidden { display: none; }
.db-alert.done { background: #1d4a2a; border-color: #8fe3a4; color: #dcffe6; }
.db-alert-text { flex: 1 1 20rem; display: flex; flex-direction: column; gap: 0.15rem; }
.db-alert-text b { font-family: var(--font-display); }
.db-alert button { min-height: 2.6rem; }

/* -------------------------------------------------------- Expertises --- */
/* Characters → Expertises (js/gm_expertises.js) */
.xp-admin { max-width: 70rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.xp-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
.xp-head h2 { margin: 0 0 0.3rem; font-family: var(--font-display); color: var(--gold); }
.xp-help { margin: 0; color: var(--text-dim); font-size: 0.9rem; max-width: 46rem; }
.xp-new { display: grid; grid-template-columns: minmax(10rem, 1.2fr) 9rem minmax(10rem, 2fr) auto; gap: 0.5rem; padding: 0.7rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border-gold); }
.xp-toolbar { display: flex; align-items: center; gap: 0.8rem; }
.xp-toolbar input { max-width: 20rem; }
.xp-groups { display: flex; flex-direction: column; gap: 1rem; }
.xp-group { padding: 0.7rem 0.8rem; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--border-gold); }
.xp-cultural { border-left-color: #c9a8f0; } .xp-weapon { border-left-color: #ef9a7a; } .xp-armor { border-left-color: #9ab8ef; }
.xp-utility { border-left-color: #8fd18f; } .xp-specialist { border-left-color: var(--gold); }
.xp-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.5rem; }
.xp-group-head h3 { margin: 0; font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.xp-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.xp-row { display: grid; grid-template-columns: minmax(9rem, 1fr) 8.5rem minmax(10rem, 2fr) 5.5rem 2.4rem; gap: 0.4rem; align-items: center; }
.xp-row input, .xp-row select { min-height: 2.4rem; font-size: 0.92rem; }
.xp-source { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); text-align: center; }
.xp-del { min-height: 2.4rem; padding: 0; }
.xp-empty { margin: 0; color: var(--text-dim); font-style: italic; }
@media (max-width: 760px) {
  .xp-new { grid-template-columns: 1fr 8rem; }
  .xp-new #xp-new-desc { grid-column: 1 / -1; }
  .xp-row { grid-template-columns: 1fr 7.5rem 2.4rem; }
  .xp-row .xp-desc { grid-column: 1 / 3; } .xp-row .xp-source { display: none; }
}
.upload-hint { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--text-dim); line-height: 1.4; }

/* ----------------------------------------------------- Quick NPC (js/gm_npcs.js) --- */
.npc-global-fab { right: 20.25rem; }
.npc-global-panel { width: min(480px, calc(100vw - 2.5rem)); }
.npc-title { flex: 1 1 auto; }
.npc-opts { display: flex; flex-direction: column; gap: 0.45rem; }
.npc-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.npc-culture { flex: 1 1 10rem; min-height: 2.5rem; }
.npc-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.npc-seg-btn { min-height: 2.5rem; padding: 0.2rem 0.8rem; border: none; border-radius: 0; background: transparent; box-shadow: none; font-weight: 400; color: var(--text-dim); }
.npc-seg-btn.on { background: var(--gold); color: var(--bg); font-weight: 700; }
.npc-role, .npc-situ { width: 100%; box-sizing: border-box; }
.npc-go { min-height: 2.6rem; }
.npc-ai { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--text-dim); margin-left: auto; }
.npc-ai input { width: auto; min-height: unset; }
.npc-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.7rem 0.8rem; border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border-gold); }
.npc-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--gold-bright); background: transparent;
  border: 1px solid transparent; padding: 0.1rem 0.3rem; min-height: unset; }
.npc-name:hover, .npc-name:focus { border-color: var(--border); }
.npc-sub { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.82rem; color: var(--text-dim); padding: 0 0.3rem; }
.npc-src { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dim); }
.npc-role-edit { font-size: 0.9rem; min-height: 2.2rem; }
.npc-field { display: flex; flex-direction: column; gap: 0.15rem; }
.npc-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-family: var(--font-display); }
.npc-field textarea { resize: vertical; min-height: 2.4rem; font-size: 0.9rem; line-height: 1.35; field-sizing: content; }
.npc-secret .npc-label { color: #ef8a80; }
.npc-hook textarea { border-color: var(--border-gold); }
.npc-actions { justify-content: flex-end; }
.npc-saved { color: #8fe3a4; margin-right: auto; }
.npc-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.npc-chip { min-height: 2.2rem; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.82rem; font-weight: 400; background: var(--panel); border: 1px solid var(--border); box-shadow: none; }
.npc-chip.on { border-color: var(--gold); color: var(--gold-bright); }
.npc-chip.saved { color: #8fe3a4; }
@media (max-width: 560px) {
  .npc-global-fab { right: 0.9rem; bottom: 19.4rem; }
  .npc-global-panel { right: 0.6rem; bottom: 4.5rem; width: calc(100vw - 1.2rem); }
}

/* ---- Characters list: search, tag chips, groups ---- */
.char-search { flex: 0 0 auto; margin-bottom: 0.5rem; width: 100%; box-sizing: border-box; }
.char-tagbar { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.char-tag-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; max-height: 7.2rem; overflow-y: auto; }
.char-tag-chips:empty { display: none; }
.char-tagbar:empty { display: none; }
.char-tag-chip { min-height: 1.9rem; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 400;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-dim); box-shadow: none; }
.char-tag-chip small { color: var(--gold-dim); margin-left: 0.15rem; }
.char-tag-chip.on { background: var(--gold); border-color: var(--gold); color: var(--bg); font-weight: 700; }
.char-tag-chip.on small { color: var(--bg); }
.char-tag-chip.untagged { font-style: italic; }
.char-tag-more, .char-tag-clear { min-height: 1.9rem; padding: 0.1rem 0.6rem; font-size: 0.8rem; background: none; border: none; box-shadow: none; color: var(--gold); text-decoration: underline; }
.char-tag-tools { display: flex; align-items: center; gap: 0.6rem; }
.char-group-toggle { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--text-dim); cursor: pointer; }
.char-group-toggle input { width: auto; min-height: unset; }
.char-group { margin-bottom: 0.4rem; }
.char-group > summary { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; cursor: pointer; list-style: none;
  padding: 0.35rem 0.4rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.char-group > summary::-webkit-details-marker { display: none; }
.char-group > summary::before { content: "▸"; margin-right: 0.35rem; transition: transform 0.15s ease; display: inline-block; }
.char-group[open] > summary::before { transform: rotate(90deg); }
.char-group > summary span { flex: 1 1 auto; }
.char-group > summary small { color: var(--text-dim); letter-spacing: 0; }
.note-item .n-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.3rem; }
.note-item .n-tags span { font-size: 0.7rem; padding: 0 0.4rem; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.char-list-empty { color: var(--text-dim); font-style: italic; margin: 0.4rem 0; }
.char-tag-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.char-tag-suggest:empty { display: none; }
.char-tag-suggest-label { font-size: 0.78rem; color: var(--text-dim); }