:root {
  --ink: #2a2622;
  --ink-soft: #5c544b;
  --parchment: #f7f4ec;
  --parchment-deep: #ece4d6;
  --card: #fffdf8;
  --border: #e3dccd;
  --ember: #b45309;
  --ember-deep: #92400e;
  --ok: #2e7d32;
  --warn: #b8860b;
  --danger: #b91c1c;

  /* Phase 7.4 — component-channel triplets (space-separated) so alpha tints can
     be re-tinted per theme via rgb(var(--x-rgb) / a). Default = the hexes above. */
  --ink-rgb: 42 38 34;
  --ember-rgb: 180 83 9;
  --warn-rgb: 184 134 11;

  /* Phase 7.4 — semantic seams. Defaults reproduce today's look exactly:
     accent ink stays white; solid (ink-bg) buttons stay ink/white/black;
     fields stay white; focus ring + scrim keep their exact former values. */
  --on-accent: #fff;          /* text on an --ember background */
  --solid-bg: var(--ink);     /* the ink-filled secondary buttons + monogram host */
  --solid-fg: #fff;
  --solid-bg-hover: #000;
  --field-bg: #fff;           /* inputs / textareas / tabs / import cards */
  --focus-ring: 0 0 0 3px rgb(var(--ember-rgb) / 0.12);
  --scrim: rgb(var(--ink-rgb) / 0.45);   /* modal backdrop */

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(42, 38, 34, 0.04), 0 4px 16px rgba(42, 38, 34, 0.06);

  /* Phase 7.3b-i — transcript role vars. Reference the palette, so they re-tint
     automatically when a preset overrides --ink/--card/etc. */
  --msg-user-bg: var(--ink);
  --msg-user-ink: var(--parchment);
  --msg-dm-bg: var(--card);
  --msg-dm-ink: var(--ink);
  --msg-dm-border: var(--border);
}

* { box-sizing: border-box; }
body {
  font-family: var(--sans);
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%);
  background-attachment: fixed;
}
main { max-width: 740px; margin: 0 auto; padding: 1.75rem 1.1rem; display: flex; flex-direction: column; height: 100vh; }
h1 {
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ember);
  display: inline-block;
  align-self: flex-start;
}

.hint { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* Buttons */
button { font-family: var(--sans); transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.btn-primary,
#new-campaign, #load, #send, #auth-submit {
  align-self: flex-start;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: var(--radius);
  background: var(--ember);
  color: var(--on-accent);
  font-size: 1rem;
  cursor: pointer;
}
#new-campaign:hover, #load:hover, #send:hover, #auth-submit:hover { background: var(--ember-deep); }
#new-campaign:disabled, #load:disabled, #send:disabled, #auth-submit:disabled { opacity: 0.5; cursor: default; }
.link-btn { border: none; background: none; color: var(--ember); font-size: 0.82rem; cursor: pointer; padding: 0.2rem 0; text-decoration: underline; }
.link-btn:hover { color: var(--ember-deep); }
.back-link { align-self: flex-start; font-size: 0.82rem; padding: 0.3rem 0; border: none; background: none; color: var(--ink-soft); cursor: pointer; }
.back-link:hover { color: var(--ink); }

/* Auth view */
#auth { display: flex; justify-content: center; }
#auth[hidden] { display: none; }
.auth-card {
  display: flex; flex-direction: column; gap: 0.7rem;
  width: 100%; max-width: 360px;
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.auth-card input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  background: var(--field-bg);
}
.auth-card input:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.auth-card #auth-submit { align-self: stretch; text-align: center; }
.auth-card .link-btn { align-self: center; }

/* Campaigns view */
#campaigns { display: flex; flex-direction: column; gap: 0.85rem; }
#campaigns[hidden] { display: none; }
#campaign-list { display: flex; flex-direction: column; gap: 0.55rem; }
.campaign-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.95rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.campaign-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.campaign-row-name { font-family: var(--serif); font-weight: 600; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campaign-row-date { font-size: 0.75rem; color: var(--ink-soft); }
.campaign-load { flex-shrink: 0; padding: 0.4rem 1rem; border: none; border-radius: 8px; background: var(--solid-bg); color: var(--solid-fg); font-size: 0.88rem; cursor: pointer; }
.campaign-load:hover { background: var(--solid-bg-hover); }
.campaign-load:disabled { opacity: 0.5; cursor: default; }
.campaign-actions { display: flex; gap: 0.4rem; flex-shrink: 0; align-items: center; }
.campaign-delete {
  padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--ink-soft); font-size: 0.82rem; cursor: pointer;
}
.campaign-delete:hover { border-color: var(--danger); color: var(--danger); }
.campaign-delete:disabled { opacity: 0.5; cursor: default; }

/* Setup view */
#setup { display: flex; flex-direction: column; gap: 0.85rem; }
#setup[hidden] { display: none; }
.setup-actions { display: flex; gap: 0.5rem; align-items: center; }
#load-capsule { align-self: flex-start; font-size: 0.82rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
#load-capsule:hover { border-color: var(--ember); color: var(--ember); }
#capsule {
  width: 100%; resize: vertical;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; line-height: 1.45;
  background: var(--card);
}
#capsule:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }

/* Play view */
#play { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#play[hidden] { display: none; }
/* Phase 7.6 — the bar carries only session-acting buttons now (name + Campaigns moved to the
   header). Wrap instead of clip: drop flex-shrink:0 and allow the row to wrap under width pressure
   (the ≤1180 Tools/Party toggles used to shove Campaigns off-screen). #campaign-name is styled in
   the .app-head block below; #to-campaigns is styled by .head-btn (dropped from this selector so
   the id doesn't out-specify .head-btn). */
#campaign-bar { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.8rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--border); }
.bar-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
#save, #download, #end-session, #new-session { font-size: 0.8rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
#save:hover, #download:hover, #end-session:hover, #new-session:hover { border-color: var(--ember); color: var(--ember); }
#save:disabled, #download:disabled, #end-session:disabled { opacity: 0.5; cursor: default; }
/* Phase 7.1 - unsaved-progress marker on the Save button. sessionDirty drives the leave guards;
   this is its visible mirror in the play bar (a bullet via ::after, so the label never mutates). */
#save.dirty { border-color: var(--ember); color: var(--ember); }
#save.dirty::after { content: ' \2022'; }

#messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.85rem; padding-bottom: 1rem; }
.msg { padding: 0.7rem 0.95rem; border-radius: var(--radius); max-width: 86%; line-height: 1.5; }
.msg.user { align-self: flex-end; background: var(--msg-user-bg); color: var(--msg-user-ink); border-bottom-right-radius: 4px; }
.msg.assistant { align-self: flex-start; background: var(--msg-dm-bg); color: var(--msg-dm-ink); border: 1px solid var(--msg-dm-border); box-shadow: var(--shadow); border-bottom-left-radius: 4px; font-family: var(--serif); font-size: 1.02rem; }
/* Phase 7.3c-i refinement — DM narration fills the transcript column to the scrollbar (the 86% .msg
   cap left a dead strip on the right, obvious in the wide three-pane). Player turns keep the capped
   right-aligned bubble; onboarding (#onboarding-messages) is untouched. */
#messages .msg.assistant { max-width: 100%; }

/* Phase 7.3b-i — small role label. Inherits the bubble ink at low opacity so it contrasts on both
   the dark player bubble and the light DM bubble, and themes transitively via the role ink vars. */
.msg-role { display: block; font-family: var(--sans); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: currentColor; opacity: 0.55; margin-bottom: 0.3rem; }
.msg-body { min-width: 0; }
/* Literal bodies (player turns + the expanded imported-character block) preserve exact text. */
.msg-body.literal { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Rendered DM markdown — tight vertical rhythm inside the bubble. */
.msg-body > :first-child { margin-top: 0; }
.msg-body > :last-child { margin-bottom: 0; }
.msg-body p { margin: 0 0 0.6rem; }
.msg-body h3, .msg-body h4, .msg-body h5, .msg-body h6 { font-family: var(--serif); line-height: 1.25; margin: 0.6rem 0 0.35rem; }
.msg-body h3 { font-size: 1.1rem; }
.msg-body h4 { font-size: 1rem; }
.msg-body h5, .msg-body h6 { font-size: 0.92rem; }
.msg-body ul, .msg-body ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.msg-body li { margin: 0.1rem 0; }
.msg-body blockquote { margin: 0 0 0.6rem; padding: 0.1rem 0 0.1rem 0.8rem; border-left: 3px solid var(--border); color: var(--ink-soft); font-style: italic; }
.msg-body hr { border: none; border-top: 1px solid var(--border); margin: 0.7rem 0; }
.msg-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; background: rgb(var(--ink-rgb) / 0.06); padding: 0.05rem 0.3rem; border-radius: 4px; }
.msg-body pre { margin: 0 0 0.6rem; padding: 0.6rem 0.75rem; background: var(--parchment-deep); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; }
.msg-body pre code { background: none; padding: 0; font-size: 0.8rem; }
/* Collapsible imported-character block (a player turn). */
.msg-collapse-toggle { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: inherit; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.msg-collapse-toggle:hover { text-decoration: underline; }
.msg-body-literal { margin-top: 0.5rem; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; line-height: 1.45; }
/* Phase 7.3b-ii — DM roll-suggestion chip: an inline pill in DM prose that opens the dice roller
   pre-filled. Sans over the serif bubble so it reads as an affordance, not narration. */
.roll-chip { display: inline-block; vertical-align: baseline; font-family: var(--sans); font-size: 0.82em; line-height: 1.35; padding: 0.05rem 0.55rem; margin: 0.05rem 0.1rem; border: 1px solid var(--ember); border-radius: 999px; background: rgb(var(--ember-rgb) / 0.08); color: var(--ember-deep); cursor: pointer; }
.roll-chip:hover { background: var(--ember); color: var(--on-accent); }
.roll-chip-mode { opacity: 0.85; font-size: 0.9em; }
.msg-collapse-foot { margin-top: 0.5rem; opacity: 0.8; }

.msg.pending { opacity: 0.85; font-style: italic; position: relative; }
/* Animated dots after the pending text so a long DM pause reads as working, not frozen. */
.msg.pending .msg-body::after {
  content: '';
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: wf-thinking-dots 1.4s steps(4, end) infinite;
}
@keyframes wf-thinking-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
/* A soft pulse on the whole bubble as a second, motion-based "still working" cue. */
.msg.pending { animation: wf-pending-pulse 1.6s ease-in-out infinite; }
@keyframes wf-pending-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}

.status { font-size: 0.8rem; min-height: 1.2em; margin-bottom: 0.5rem; color: var(--ink-soft); }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
/* Busy status: a long operation is in flight (Create Campaign, Session End, Save). Animated dots
   + pulse mirror the .pending bubble so these long waits read as working, not frozen. */
.status.busy { color: var(--ink-soft); animation: wf-pending-pulse 1.6s ease-in-out infinite; }
.status.busy::after {
  content: '';
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: wf-thinking-dots 1.4s steps(4, end) infinite;
}
/* Phase 7.6 — the character-import status uses its own class (char-import-status), not .status,
   so mirror the busy pulse here: sheet ingest ("Reading …") is one of the longer round trips. */
.char-import-status.busy { animation: wf-pending-pulse 1.6s ease-in-out infinite; }
.char-import-status.busy::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: wf-thinking-dots 1.4s steps(4, end) infinite; }
.reload-link { margin-left: 0.4rem; cursor: pointer; text-decoration: underline; color: var(--ember); background: none; border: none; font: inherit; padding: 0; }

#composer { display: flex; gap: 0.5rem; align-items: flex-end; }
/* Phase 7.3a — custom top-right resize grip (native handle is UA-locked bottom-right). The field
   wraps the textarea so the grip can sit at its top-right corner; drag up to grow (box is
   bottom-anchored → the top edge follows), drag down to shrink. Class-based → both composers. */
.composer-field { position: relative; flex: 1; display: flex; min-width: 0; }
.composer-grip {
  position: absolute; top: 5px; right: 5px;
  width: 15px; height: 15px; border-radius: 3px;
  cursor: ns-resize; touch-action: none; opacity: 0.7;
  background:
    linear-gradient(135deg, transparent 46%, var(--border) 46%, var(--border) 54%, transparent 54%),
    linear-gradient(135deg, transparent 66%, var(--border) 66%, var(--border) 74%, transparent 74%);
}
.composer-grip:hover {
  opacity: 1;
  background:
    linear-gradient(135deg, transparent 46%, var(--ember) 46%, var(--ember) 54%, transparent 54%),
    linear-gradient(135deg, transparent 66%, var(--ember) 66%, var(--ember) 74%, transparent 74%);
}
#input { flex: 1; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: 1rem; background: var(--card); font-family: var(--sans); color: var(--ink); line-height: 1.4; resize: none; min-height: 2.7rem; max-height: 40vh; }
#input:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }

/* --- Dice roller (Phase 5) --- */

#dice-toggle {
  font-size: 0.8rem; padding: 0.4rem 0.75rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
#dice-toggle:hover { border-color: var(--ember); color: var(--ember); }

#dice-panel {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1rem; margin-bottom: 0.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
#dice-panel[hidden] { display: none; }
.dice-panel-head { display: flex; align-items: center; justify-content: space-between; }
.dice-panel-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }

.dice-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dice-controls select,
.dice-controls input {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border);
  border-radius: 8px; font-size: 0.9rem; background: var(--field-bg); color: var(--ink);
}
.dice-controls #dice-context { flex: 1; min-width: 150px; }
.dice-controls #dice-modifier { width: 80px; }
.dice-controls select:focus,
.dice-controls input:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }

#dice-roll {
  padding: 0.55rem; border: none; border-radius: var(--radius);
  background: var(--ember); color: var(--on-accent); font-size: 0.95rem; cursor: pointer;
}
#dice-roll:hover { background: var(--ember-deep); }

#dice-result {
  background: var(--parchment-deep); border-radius: var(--radius);
  padding: 0.9rem; text-align: center;
}
#dice-result[hidden] { display: none; }
.dice-result-context { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.35rem; }
.dice-result-dice { font-size: 0.85rem; color: var(--ink-soft); margin: 0 0 0.2rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dice-result-total { font-family: var(--serif); font-size: 2rem; font-weight: 600; margin: 0.2rem 0 0; }
.dice-flag { font-size: 0.8rem; font-weight: 600; margin: 0.3rem 0 0; min-height: 1em; }
.dice-flag.nat20 { color: var(--ok); }
.dice-flag.nat1 { color: var(--danger); }
#dice-insert {
  margin-top: 0.7rem; padding: 0.45rem 1rem; border: none; border-radius: 8px;
  background: var(--solid-bg); color: var(--solid-fg); font-size: 0.85rem; cursor: pointer;
}
#dice-insert:hover { background: var(--solid-bg-hover); }

.dice-log-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--ink-soft); }
.dice-log { border: 1px solid var(--border); border-radius: 8px; max-height: 220px; overflow-y: auto; }
.dice-log-empty { font-size: 0.8rem; color: var(--ink-soft); padding: 0.85rem; margin: 0; text-align: center; }
.dice-log-entry { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.dice-log-entry:last-child { border-bottom: none; }
.dice-log-label { font-size: 0.82rem; font-weight: 600; margin: 0; }
.dice-log-expr { font-size: 0.75rem; color: var(--ink-soft); margin: 0.1rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dice-log-total { font-size: 1rem; font-weight: 600; margin: 0; white-space: nowrap; }
.dice-log-total.nat20 { color: var(--ok); }
.dice-log-total.nat1 { color: var(--danger); }

/* --- Session Close panel (Phase 6.3b) --- */
#close-panel {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1rem; margin-bottom: 0.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 60vh; overflow-y: auto;
}
#close-panel[hidden] { display: none; }
.close-head { display: flex; align-items: center; justify-content: space-between; }
.close-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.close-meta { font-size: 0.78rem; color: var(--ink-soft); }
.close-prose { white-space: pre-wrap; line-height: 1.55; font-family: var(--serif); font-size: 1rem; }
.close-diff-head { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); border-top: 1px solid var(--border); padding-top: 0.7rem; }
.close-diff { display: flex; flex-direction: column; gap: 0.4rem; }
.close-diff-empty { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.close-diff-row { font-size: 0.85rem; line-height: 1.45; }
.close-diff-label { font-weight: 600; }
.close-diff-change { color: var(--ink-soft); }
.close-diff-from { text-decoration: line-through; overflow-wrap: anywhere; }
.close-diff-arrow { margin: 0 0.35rem; }
.close-diff-to { color: var(--ink); overflow-wrap: anywhere; }
.close-warning {
  font-size: 0.85rem; line-height: 1.45;
  background: rgb(var(--warn-rgb) / 0.1);
  border: 1px solid var(--warn); border-radius: 8px;
  padding: 0.6rem 0.75rem; color: var(--ink);
}
.close-warning[hidden] { display: none; }
/* Phase 7.5d — close-panel visual identity ingest (mid-campaign Atelier fill / create-if-absent). */
.close-visual { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.7rem; }
.close-visual-head { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.close-visual-roster { display: flex; flex-direction: column; gap: 0.2rem; }
.close-visual-rosterrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.82rem; margin: 0; }
.close-visual-rostername { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.close-visual-status { flex-shrink: 0; font-size: 0.76rem; }
.close-visual-status.set { color: var(--ok); }
.close-visual-status.none { color: var(--ink-soft); }
.close-visual-controls { display: flex; gap: 0.5rem; }
.close-visual-select { flex: 1; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.88rem; background: var(--field-bg); color: var(--ink); font-family: var(--sans); }
.close-visual-select:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.close-visual-hint { font-size: 0.76rem; color: var(--ink-soft); margin: 0; line-height: 1.4; }
.close-visual-hint[hidden] { display: none; }
.close-visual-text { width: 100%; resize: vertical; min-height: 3.5rem; max-height: 30vh; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; line-height: 1.4; background: var(--field-bg); color: var(--ink); }
.close-visual-text:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.close-visual-drop { padding: 0.6rem; border: 1.5px dashed var(--border); border-radius: 8px; text-align: center; font-size: 0.76rem; color: var(--ink-soft); cursor: pointer; background: var(--field-bg); }
.close-visual-drop:hover, .close-visual-drop.dragover { border-color: var(--ember); color: var(--ember); background: rgb(var(--ember-rgb) / 0.06); }
.close-visual-go { align-self: flex-start; font-size: 0.8rem; padding: 0.4rem 0.9rem; border: none; border-radius: 8px; background: var(--ember); color: var(--on-accent); cursor: pointer; }
.close-visual-go:hover { background: var(--ember-deep); }
.close-visual-go:disabled { opacity: 0.5; cursor: default; }
.close-visual-stat { font-size: 0.76rem; min-height: 1em; color: var(--ink-soft); }
.close-visual-stat.warn { color: var(--warn); }
.close-visual-link { align-self: flex-start; font-size: 0.78rem; font-weight: 600; color: var(--ember); text-decoration: none; }
.close-visual-link:hover { color: var(--ember-deep); text-decoration: underline; }
.close-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.close-actions button {
  font-size: 0.85rem; padding: 0.45rem 0.9rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); color: var(--ink); cursor: pointer;
}
.close-actions button:hover { border-color: var(--ember); color: var(--ember); }
.close-actions button:disabled { opacity: 0.5; cursor: default; }
.close-actions .close-primary { background: var(--ember); color: var(--on-accent); border-color: var(--ember); }
.close-actions .close-primary:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--on-accent); }
.close-actions .close-primary:disabled { opacity: 0.5; cursor: default; }

/* Onboarding view (Phase 6.5b) */
#onboarding { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0.75rem; }
#onboarding[hidden] { display: none; }
#onboarding-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; }
#onboarding-bar { display: flex; gap: 0.5rem; align-items: center; }
#onboarding-bar[hidden] { display: none; }
.ob-import-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.ob-import-toggle { align-self: flex-start; font-size: 0.82rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ember); cursor: pointer; }
.ob-import-toggle:hover { border-color: var(--ember); }
#onboarding-import[hidden] { display: none; }

/* Draft finish view (Phase 6.6a) */
#draft-finish { display: flex; flex-direction: column; gap: 0.85rem; }
#draft-finish[hidden] { display: none; }
.draft-summary {
  padding: 0.8rem 0.95rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.draft-summary-name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.25rem; }
.draft-summary-meta { font-size: 0.78rem; color: var(--ink-soft); margin: 0; }
.draft-summary-desc { font-size: 0.85rem; line-height: 1.45; margin: 0.5rem 0 0; }
.draft-form { display: flex; flex-direction: column; gap: 0.7rem; }
.draft-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.draft-field > span { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.draft-field input {
  padding: 0.55rem 0.75rem; border: 1px solid var(--border);
  border-radius: 8px; font-size: 0.95rem; background: var(--field-bg); color: var(--ink);
  font-family: var(--sans);
}
.draft-field input:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.draft-field-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.draft-field-narrow { flex: 0 0 90px; }
.draft-note { font-size: 0.78rem; color: var(--ink-soft); margin: 0; }

/* Character import (Phase 6.6b) */
.char-import { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; background: var(--parchment-deep); border: 1px solid var(--border); border-radius: var(--radius); }
.char-import-head { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.char-import-tabs { display: flex; gap: 0.4rem; }
.char-import-tab { font-size: 0.8rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer; }
.char-import-tab.active { border-color: var(--ember); color: var(--ember); background: var(--field-bg); }
.char-import-pane { display: flex; flex-direction: column; gap: 0.5rem; }
.char-import-pane[hidden] { display: none; }
.char-import textarea { width: 100%; resize: vertical; min-height: 5rem; max-height: 40vh; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; line-height: 1.4; background: var(--field-bg); color: var(--ink); }
.char-import textarea:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.char-import-drop { padding: 1.1rem; border: 1.5px dashed var(--border); border-radius: 8px; text-align: center; font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; background: var(--field-bg); }
.char-import-drop:hover, .char-import-drop.dragover { border-color: var(--ember); color: var(--ember); }
.char-import-go { align-self: flex-start; font-size: 0.85rem; padding: 0.45rem 1rem; border: none; border-radius: 8px; background: var(--ember); color: var(--on-accent); cursor: pointer; }
.char-import-go:hover { background: var(--ember-deep); }
.char-import-go:disabled { opacity: 0.5; cursor: default; }
.char-import-status { font-size: 0.8rem; min-height: 1em; color: var(--ink-soft); }
.char-import-status.warn { color: var(--warn); }
.char-import-status.ok { color: var(--ok); }
.char-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.8rem; background: var(--field-bg); border: 1px solid var(--ember); border-radius: 8px; }
.char-card[hidden] { display: none; }
.char-card-name { font-family: var(--serif); font-weight: 600; font-size: 1rem; margin: 0; }
.char-card-line { font-size: 0.82rem; color: var(--ink-soft); margin: 0; }
.char-card-warn { font-size: 0.78rem; color: var(--warn); margin: 0; line-height: 1.4; }
.char-card-actions { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.char-card-use { font-size: 0.82rem; padding: 0.4rem 0.9rem; border: none; border-radius: 8px; background: var(--ember); color: var(--on-accent); cursor: pointer; }
.char-card-use:hover { background: var(--ember-deep); }
.char-card-discard { font-size: 0.82rem; padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer; }
/* Phase 7.5d — visual_identity section in the review card (integument elicitation + captured summary). */
.char-card-visual { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.55rem; margin-top: 0.1rem; }
.char-card-visual[hidden] { display: none; }
.char-card-visual-head { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.char-card-visual-row { display: flex; flex-direction: column; gap: 0.25rem; }
.char-card-visual-label { font-size: 0.76rem; font-weight: 600; color: var(--ink-soft); }
.char-card-visual-input { padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; font-family: var(--sans); background: var(--field-bg); color: var(--ink); }
.char-card-visual-input:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.char-card-visual-summary { font-size: 0.74rem; color: var(--ink-soft); margin: 0; line-height: 1.4; }
/* Phase 7.5d c-fe-2 — captured-details disclosure + Atelier enrich + conflict confirm. */
.char-card-visual-captured { display: flex; flex-direction: column; gap: 0.3rem; }
.char-card-visual-toggle { align-self: flex-start; font-family: var(--sans); font-size: 0.74rem; padding: 0.1rem 0; border: none; background: none; color: var(--ember); cursor: pointer; text-decoration: underline; }
.char-card-visual-toggle:hover { color: var(--ember-deep); }
.char-card-visual-detaillist { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.4rem 0.5rem; background: var(--parchment-deep); border: 1px solid var(--border); border-radius: 8px; }
.char-card-visual-detaillist[hidden] { display: none; }
.char-card-visual-detail { font-size: 0.76rem; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.char-card-visual-detail-key { font-weight: 600; color: var(--ink-soft); }
.char-card-atelier { display: flex; flex-direction: column; gap: 0.4rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.char-card-atelier-link { align-self: flex-start; font-size: 0.78rem; font-weight: 600; color: var(--ember); text-decoration: none; }
.char-card-atelier-link:hover { color: var(--ember-deep); text-decoration: underline; }
.char-card-atelier-toggle { align-self: flex-start; font-family: var(--sans); font-size: 0.74rem; padding: 0.1rem 0; border: none; background: none; color: var(--ink-soft); cursor: pointer; text-decoration: underline; }
.char-card-atelier-toggle:hover { color: var(--ember); }
.char-card-atelier-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.char-card-atelier-panel[hidden] { display: none; }
.char-card-atelier-text { width: 100%; resize: vertical; min-height: 4rem; max-height: 30vh; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.76rem; line-height: 1.4; background: var(--field-bg); color: var(--ink); }
.char-card-atelier-text:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.char-card-atelier-drop { padding: 0.6rem; border: 1.5px dashed var(--border); border-radius: 8px; text-align: center; font-size: 0.76rem; color: var(--ink-soft); cursor: pointer; background: var(--field-bg); }
.char-card-atelier-drop:hover, .char-card-atelier-drop.dragover { border-color: var(--ember); color: var(--ember); background: rgb(var(--ember-rgb) / 0.06); }
.char-card-atelier-go { align-self: flex-start; font-size: 0.8rem; padding: 0.4rem 0.9rem; border: none; border-radius: 8px; background: var(--ember); color: var(--on-accent); cursor: pointer; }
.char-card-atelier-go:hover { background: var(--ember-deep); }
.char-card-atelier-go:disabled { opacity: 0.5; cursor: default; }
.char-card-atelier-status { font-size: 0.76rem; min-height: 1em; color: var(--ink-soft); }
.char-card-atelier-status.warn { color: var(--warn); }
.char-card-conflict { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.7rem; background: rgb(var(--warn-rgb) / 0.1); border: 1px solid var(--warn); border-radius: 8px; }
.char-card-conflict-head { font-size: 0.78rem; font-weight: 600; color: var(--ink); margin: 0; }
.char-card-conflict-row { font-size: 0.76rem; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.char-card-conflict-key { font-weight: 600; }
.char-card-conflict-from { text-decoration: line-through; color: var(--ink-soft); }
.char-card-conflict-to { color: var(--ink); }
.char-card-conflict-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.char-card-conflict-actions button { font-size: 0.78rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.char-card-conflict-actions button:hover { border-color: var(--ember); color: var(--ember); }
.char-card-conflict-actions .char-card-conflict-use { background: var(--ember); color: var(--on-accent); border-color: var(--ember); }
.char-card-conflict-actions .char-card-conflict-use:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--on-accent); }
.char-import-applied { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: var(--ok); }
.char-import-clear { font-size: 0.8rem; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer; }
.char-import-clear:hover { border-color: var(--danger); color: var(--danger); }
.draft-form.locked { opacity: 0.55; pointer-events: none; }
.draft-actions { display: flex; gap: 0.5rem; align-items: center; }
#draft-create { padding: 0.6rem 1.4rem; }
#onboarding-composer { display: flex; gap: 0.5rem; align-items: flex-end; }
#onboarding-input { flex: 1; padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--sans); font-size: 1rem; background: var(--card); color: var(--ink); line-height: 1.4; resize: none; min-height: 2.6rem; max-height: 40vh; }
#onboarding-input:focus { outline: none; border-color: var(--ember); }
#onboarding-send { padding: 0.55rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--ink); cursor: pointer; }
#onboarding-send:hover { border-color: var(--ember); color: var(--ember); }
#create-campaign { padding: 0.6rem 1.4rem; }
.btn-primary { background: var(--ember); color: var(--on-accent); border: none; border-radius: var(--radius); cursor: pointer; font-family: var(--sans); font-size: 1rem; }
.btn-primary:hover { background: var(--ember-deep); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }
.campaigns-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
/* Phase 7.1 - static at-cap notice; explains why the create actions are disabled (the disable
   itself blocks the click that used to surface the reason). Soft warn, full-width so it sits above
   the wrapped buttons. */
.cap-notice {
  flex-basis: 100%; margin: 0 0 0.15rem; font-size: 0.82rem; line-height: 1.4; color: var(--ink);
  background: rgb(var(--warn-rgb) / 0.1); border: 1px solid var(--warn); border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.cap-notice[hidden] { display: none; }
#new-campaign { padding: 0.6rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--ink); cursor: pointer; }

/* --- Character display (Phase 7.2) --- */

/* Play view goes three-pane while active (tools | transcript | party); every other view keeps the
   740px column. Rails are FIXED width; the transcript is the flex column, so a wider window feeds
   the extra pixels to the transcript up to the 1400 cap — bubble max-width (86%) keeps the measure
   readable. (Phase 7.3c-i, L1′) */
body.play-active main { max-width: 1400px; }

#play-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 1.25rem; align-items: stretch; }
#play-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

#play-rail {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0.85rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.rail-head { display: flex; align-items: center; justify-content: space-between; }
.rail-title { font-family: var(--serif); font-weight: 600; font-size: 1rem; }
#rail-body { display: flex; flex-direction: column; gap: 0.55rem; }

/* Party button is the mobile rail toggle; hidden on desktop (rail always on). */
#party { display: none; }
/* Tools toggle mirrors Party but at the ≤1180 breakpoint (three-pane floor). Hidden on desktop. */
#tools-toggle { display: none; }

/* Tools rail (Phase 7.3c-i) — interactive host, left column. Same card chrome as #play-rail. */
#play-tools {
  min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0.85rem; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.tools-body { display: flex; flex-direction: column; gap: 0.75rem; }

/* Slim quick-roll tray. The full #dice-panel (Dice button / "More dice…") keeps every other die,
   modifier, multi-die, and context field; this is the one-tap d20. */
.dice-tray { display: flex; flex-direction: column; gap: 0.5rem; }
.dice-tray-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.dice-tray-mode { display: flex; gap: 0.25rem; }
.tray-mode-btn { flex: 1; font-family: var(--sans); font-size: 0.76rem; padding: 0.35rem 0.2rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer; }
.tray-mode-btn:hover { border-color: var(--ember); color: var(--ember); }
.tray-mode-btn.active { border-color: var(--ember); background: var(--ember); color: var(--on-accent); }
.tray-roll { font-family: var(--sans); padding: 0.5rem; border: none; border-radius: var(--radius); background: var(--ember); color: var(--on-accent); font-size: 0.9rem; cursor: pointer; }
.tray-roll:hover { background: var(--ember-deep); }
.tray-result { background: var(--parchment-deep); border-radius: var(--radius); padding: 0.7rem; text-align: center; }
.tray-result[hidden] { display: none; }
.tray-result-expr { font-size: 0.75rem; color: var(--ink-soft); margin: 0 0 0.15rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tray-result-total { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; margin: 0; }
.tray-result .dice-flag { margin: 0.2rem 0 0; }
.tray-insert { margin-top: 0.5rem; padding: 0.4rem 0.9rem; border: none; border-radius: 8px; background: var(--solid-bg); color: var(--solid-fg); font-size: 0.8rem; cursor: pointer; }
.tray-insert:hover { background: var(--solid-bg-hover); }
.tray-more { align-self: flex-start; }

/* Scene illustration tool (Phase 7.3c-iii) — mirrors party-card→sheet: a compact scrollable
   preview in the rail that pops out to WFOverlay for a larger editable view. */
.illus-tool { display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.illus-output { display: flex; flex-direction: column; gap: 0.4rem; }
.illus-output[hidden] { display: none; }
.illus-preview { font-size: 0.72rem; line-height: 1.4; color: var(--ink); background: var(--parchment-deep); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.6rem; max-height: 8.5rem; overflow-y: auto; cursor: pointer; white-space: pre-wrap; overflow-wrap: anywhere; }
.illus-preview:hover, .illus-preview:focus { border-color: var(--ember); outline: none; }
.illus-actions { display: flex; gap: 0.75rem; }
.illus-editor { display: flex; flex-direction: column; gap: 0.75rem; }
.illus-editor textarea { width: 100%; min-height: 40vh; resize: vertical; padding: 0.7rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; background: var(--field-bg); color: var(--ink); }
.illus-editor textarea:focus { outline: none; border-color: var(--ember); box-shadow: var(--focus-ring); }
.illus-editor-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.illus-editor-actions button { font-size: 0.85rem; padding: 0.45rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.illus-editor-actions button:hover { border-color: var(--ember); color: var(--ember); }
.illus-editor-actions .illus-primary { background: var(--ember); color: var(--on-accent); border-color: var(--ember); }
.illus-editor-actions .illus-primary:hover { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--on-accent); }
/* Phase 7.5d — Atelier launch link in the tools rail (async signage; ingest lives at Session End). */
.rail-atelier { display: flex; flex-direction: column; gap: 0.2rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.rail-atelier-link { font-size: 0.8rem; font-weight: 600; color: var(--ember); text-decoration: none; }
.rail-atelier-link:hover { color: var(--ember-deep); text-decoration: underline; }
.rail-atelier-note { font-size: 0.72rem; color: var(--ink-soft); margin: 0; line-height: 1.35; }

.party-empty { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
/* Phase 7.3c-ii — card is now header (portrait + name) over a full-width glance body so the
   ability row and stat lines get the whole card width, not the narrow info column. */
.party-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.7rem; background: var(--parchment-deep);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.party-card:hover, .party-card:focus { border-color: var(--ember); box-shadow: var(--shadow); outline: none; }
.party-card-head { display: flex; gap: 0.7rem; align-items: center; }
.party-card-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.party-card-name { font-family: var(--serif); font-weight: 600; font-size: 0.95rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.party-card-sub { font-size: 0.76rem; color: var(--ink-soft); margin: 0; }
.party-card-body { display: flex; flex-direction: column; gap: 0.4rem; }
.party-card-stats { display: flex; gap: 0.45rem 0.9rem; flex-wrap: wrap; }
.party-card-cond { font-size: 0.74rem; color: var(--warn); margin: 0; }

/* Ability-mod row — 6 compact cells across the full card width. */
.rail-abils { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.2rem; }
.rail-abil { display: flex; flex-direction: column; align-items: center; gap: 0.02rem; padding: 0.2rem 0.1rem; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }
.rail-abil-key { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-soft); }
.rail-abil-mod { font-family: var(--serif); font-size: 0.9rem; font-weight: 600; }

/* One-line stat rows (saves / spell / features). */
.rail-line { font-size: 0.76rem; line-height: 1.35; margin: 0; }
.rail-line-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); margin-right: 0.35rem; }

/* Spell-slot chips. */
.rail-slots { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.rail-slot { font-size: 0.68rem; padding: 0.05rem 0.35rem; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }

/* Portrait slot — monogram placeholder; Phase 8 drops art in here. */
.pc-monogram {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ember); color: var(--on-accent); font-family: var(--serif);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em;
}
.pc-monogram.lg { width: 56px; height: 56px; font-size: 1.25rem; }

.pc-stat { display: flex; flex-direction: column; gap: 0.05rem; min-width: 42px; }
.pc-stat-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.pc-stat-val { font-size: 0.9rem; font-weight: 600; }

/* Overlay — large content over the play area (modal). Sheet now; map/primers reuse it. */
#play-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--scrim); }
#play-overlay[hidden] { display: none; }
.overlay-inner { width: 100%; max-width: 760px; max-height: 88vh; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 40px rgb(var(--ink-rgb) / 0.25); padding: 1.1rem 1.2rem; }
.overlay-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.overlay-nav { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sheet-nav-inner { display: flex; align-items: center; gap: 0.6rem; }
.sheet-nav-inner button { font-size: 0.82rem; padding: 0.35rem 0.8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
.sheet-nav-inner button:hover:not(:disabled) { border-color: var(--ember); color: var(--ember); }
.sheet-nav-inner button:disabled { opacity: 0.4; cursor: default; }
.sheet-pos { font-size: 0.8rem; color: var(--ink-soft); }

.sheet-header { display: flex; gap: 0.85rem; align-items: center; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 0.85rem; }
.sheet-header-info { min-width: 0; }
.sheet-name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 0; }
.sheet-sub { font-size: 0.85rem; color: var(--ink-soft); margin: 0.15rem 0 0; }
.sheet-align { font-size: 0.78rem; color: var(--ink-soft); margin: 0.15rem 0 0; font-style: italic; }

.sheet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.85rem; align-items: start; }
.sheet-section { background: var(--parchment-deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.8rem; }
.sheet-section-head { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 0.5rem; }

.abil-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
.abil-box { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.4rem 0.2rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; }
.abil-key { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.abil-mod { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.abil-score { font-size: 0.7rem; color: var(--ink-soft); }

.sheet-stat-grid { display: flex; flex-wrap: wrap; gap: 0.55rem 0.9rem; }
.combat-wrap { display: flex; flex-direction: column; gap: 0.4rem; }
.sheet-note { font-size: 0.72rem; color: var(--ink-soft); margin: 0; font-style: italic; }

.prof-list { display: flex; flex-direction: column; gap: 0.15rem; }
.prof-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.prof-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-soft); flex-shrink: 0; }
.prof-dot.on { background: var(--ember); border-color: var(--ember); }
.prof-dot.exp { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 0 2px var(--parchment-deep), 0 0 0 3px var(--ember); }
.prof-name { flex: 1; }
.prof-abil { font-size: 0.68rem; color: var(--ink-soft); text-transform: uppercase; }
.prof-val { font-weight: 600; min-width: 2.5ch; text-align: right; }

.sheet-lines { display: flex; flex-direction: column; gap: 0.4rem; }
.sheet-line { font-size: 0.82rem; line-height: 1.4; }
.sheet-line-label { font-weight: 600; }
.sheet-line-label::after { content: ': '; }

.attack-list { display: flex; flex-direction: column; gap: 0.3rem; }
.attack-row { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.82rem; }
.attack-name { flex: 1; font-weight: 600; }
.attack-bonus { color: var(--ink-soft); }
.attack-dmg { color: var(--ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.attack-mastery { font-size: 0.7rem; color: var(--ember); }

.sheet-spell { display: flex; flex-direction: column; gap: 0.5rem; }
.spell-slots { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.spell-slot { font-size: 0.76rem; padding: 0.15rem 0.45rem; background: var(--card); border: 1px solid var(--border); border-radius: 6px; }

.sheet-notes { font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; }

/* ≤1180 — three-pane floor. Tools rail → play-bar "Tools" toggle; party rail stays a side column
   (it collapses only at ≤820). An opened tools drawer spans full width across the top since the
   grid here is only two columns (transcript + party). (Phase 7.3c-i, L6) */
@media (max-width: 1180px) {
  #play-main { grid-template-columns: minmax(0, 1fr) 300px; }
  #play-tools { display: none; }
  #play-tools.open { display: flex; grid-column: 1 / -1; grid-row: 1; max-height: 40vh; }
  #tools-toggle {
    display: inline-block; font-size: 0.8rem; padding: 0.4rem 0.75rem;
    border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer;
  }
  #tools-toggle:hover { border-color: var(--ember); color: var(--ember); }
}

/* Mobile: single column; rails collapse to the Party + Tools toggles. */
@media (max-width: 820px) {
  body.play-active main { max-width: 740px; }
  #play-main { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  #play-col { flex: 1; min-height: 0; }
  #party { display: inline-block; font-size: 0.8rem; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; }
  #party:hover { border-color: var(--ember); color: var(--ember); }
  #play-rail { display: none; flex: 0 0 auto; max-height: 45vh; margin-top: 0.75rem; }
  #play-rail.open { display: flex; }
  #play-tools { order: 2; flex: 0 0 auto; margin-top: 0.75rem; }
  #play-tools.open { max-height: 45vh; }
  .overlay-inner { max-height: 92vh; padding: 0.9rem 1rem; }
}

/* ============================ Phase 7.4 — Theming ============================ */

/* App header — persistent chrome above every view; hosts the theme switcher. */
.app-head { display: flex; align-items: flex-end; gap: 0.75rem 1rem; flex-wrap: wrap; position: relative; }
/* Phase 7.6 — campaign name sits right of the title (play only), grows to eat the middle space,
   and ellipsizes under pressure instead of shoving the action cluster off-screen. */
#campaign-name { display: none; font-family: var(--serif); font-weight: 600; font-size: clamp(0.85rem, 1.7vw, 1.05rem); align-self: center; margin-bottom: 1.1rem; flex: 0 1 auto; min-width: 0; max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.play-active #campaign-name { display: block; }
/* Phase 7.6 — below phone width the name is decorative (you know the campaign you loaded);
   drop it so the title + action cluster keep a single clean row. */
@media (max-width: 520px) { body.play-active #campaign-name { display: none; } }
/* Phase 7.6 — right-pinned meta cluster: Guide · Theme · Campaigns. margin-left:auto keeps it
   right even when the (grow) campaign name is absent; margin-bottom matches the h1 so the cluster
   bottom-aligns with the title underline. */
.head-actions { display: flex; align-items: flex-end; gap: 0.4rem; margin-left: auto; margin-bottom: 1.1rem; }
.head-btn, .theme-btn { font-family: var(--sans); font-size: 0.82rem; line-height: 1.2; padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-block; }
.head-btn:hover, .theme-btn:hover { border-color: var(--ember); color: var(--ember); }
/* Campaigns is play-only nav (leave the current campaign). */
#to-campaigns { display: none; }
body.play-active #to-campaigns { display: inline-block; }
.theme-btn:hover { border-color: var(--ember); color: var(--ember); }

.theme-popover { position: absolute; top: 100%; right: 0; z-index: 60; margin-top: 0.3rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 210px; padding: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.theme-popover[hidden] { display: none; }
.theme-swatch { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border: 1px solid transparent; border-radius: 8px; background: none; font-family: var(--sans); font-size: 0.85rem; color: var(--ink); cursor: pointer; text-align: left; }
.theme-swatch:hover { border-color: var(--border); background: var(--parchment-deep); }
.theme-swatch.active { border-color: var(--ember); }
.theme-swatch-chip { width: 28px; height: 18px; border-radius: 5px; border: 1px solid var(--border); flex-shrink: 0; }
.theme-swatch-label { flex: 1; }
.theme-swatch-check { color: var(--ember); font-size: 0.85rem; min-width: 0.9em; }

/* — Light presets — */
:root[data-theme="verdant-grove"] {
  --ink: #232a20; --ink-soft: #56604d; --parchment: #f2f3ea; --parchment-deep: #e6e9da;
  --card: #fbfcf6; --border: #d9dfc9; --ember: #4f7942; --ember-deep: #3c5c32;
  --ink-rgb: 35 42 32; --ember-rgb: 79 121 66;
}
:root[data-theme="tidewater"] {
  --ink: #1b2a29; --ink-soft: #4e605f; --parchment: #eef3f2; --parchment-deep: #dde8e7;
  --card: #f8fbfb; --border: #cadedc; --ember: #0f7d8c; --ember-deep: #0a5e69;
  --ink-rgb: 27 42 41; --ember-rgb: 15 125 140;
}
:root[data-theme="frosthold"] {
  --ink: #232a33; --ink-soft: #566070; --parchment: #eef1f4; --parchment-deep: #dee4ec;
  --card: #f8fafc; --border: #ccd6e2; --ember: #3f6ea5; --ember-deep: #2f5580;
  --ink-rgb: 35 42 51; --ember-rgb: 63 110 165;
}
:root[data-theme="amethyst-fen"] {
  --ink: #29232f; --ink-soft: #5d5468; --parchment: #f0ecf2; --parchment-deep: #e4dcea;
  --card: #fbf9fc; --border: #ddd0e4; --ember: #7d5ba6; --ember-deep: #614281;
  --ink-rgb: 41 35 47; --ember-rgb: 125 91 166;
}

/* — Dark presets — pin the solid/field/on-accent/shadow seams (ink is now light). */
:root[data-theme="nightfall"] {
  --ink: #e6e9f0; --ink-soft: #9aa3b8; --parchment: #1e2230; --parchment-deep: #171a24;
  --card: #262b3b; --border: #363c50; --ember: #88a0d8; --ember-deep: #9db2e4;
  --ok: #7fc99a; --warn: #d9b45f; --danger: #e08585;
  --ink-rgb: 230 233 240; --ember-rgb: 136 160 216; --warn-rgb: 217 180 95;
  --on-accent: #1a1f2b; --solid-bg: #363c50; --solid-fg: #e6e9f0; --solid-bg-hover: #434a63;
  --field-bg: #171a24; --scrim: rgb(0 0 0 / 0.55);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.42);
}
:root[data-theme="cinderhall"] {
  --ink: #efe4d6; --ink-soft: #b3a591; --parchment: #221a17; --parchment-deep: #1a1310;
  --card: #2c221d; --border: #43352c; --ember: #e07b39; --ember-deep: #ec8f52;
  --ok: #86c98a; --warn: #e0b45f; --danger: #e58a7a;
  --ink-rgb: 239 228 214; --ember-rgb: 224 123 57; --warn-rgb: 224 180 95;
  --on-accent: #221a17; --solid-bg: #43352c; --solid-fg: #efe4d6; --solid-bg-hover: #54423a;
  --field-bg: #1a1310; --scrim: rgb(0 0 0 / 0.55);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 16px rgb(0 0 0 / 0.45);
}
:root[data-theme="wyrmwood"] {
  --ink: #dde6dd; --ink-soft: #93a593; --parchment: #17211b; --parchment-deep: #101812;
  --card: #1f2c23; --border: #324034; --ember: #6bab7f; --ember-deep: #83c197;
  --ok: #8fce9d; --warn: #d9b45f; --danger: #e08585;
  --ink-rgb: 221 230 221; --ember-rgb: 107 171 127; --warn-rgb: 217 180 95;
  --on-accent: #17211b; --solid-bg: #324034; --solid-fg: #dde6dd; --solid-bg-hover: #3f5042;
  --field-bg: #101812; --scrim: rgb(0 0 0 / 0.55);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.45);
}
/* Future: Casmoran theme packs (faction/deity/nation) drop in as more blocks here +
   one roster entry in WFTheme.THEMES — no code change. */

/* Phase 7.4c — per-campaign scope control (shown in the popover only when a saved campaign is loaded). */
.theme-scope { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.15rem 0.15rem 0.45rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--border); }
.theme-scope-seg { display: flex; gap: 0.25rem; }
.theme-scope-btn { flex: 1; font-family: var(--sans); font-size: 0.74rem; padding: 0.3rem 0.2rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer; }
.theme-scope-btn:hover { border-color: var(--ember); color: var(--ember); }
.theme-scope-btn.active { border-color: var(--ember); background: var(--ember); color: var(--on-accent); }
.theme-scope-clear { align-self: flex-start; font-family: var(--sans); font-size: 0.76rem; padding: 0.1rem 0; border: none; background: none; color: var(--ember); cursor: pointer; text-decoration: underline; }
.theme-scope-clear:hover { color: var(--ember-deep); }