/* =============================================================
   panels.css — All right-panel content modules
   Character overview, combat, weapons, spells, features,
   inventory, backstory, session log, settings, placeholder,
   and character list.
   ============================================================= */

/* ── Shared panel utilities ───────────────────────────────────── */
.panel-empty {
  color: var(--ink-muted);
  font-size: 0.82rem;
  font-style: italic;
  padding: 12px 0;
}
.panel-loading {
  color: var(--ink-muted);
  font-size: 0.85rem;
  padding: 24px 0;
  text-align: center;
}
.panel-error {
  background: rgba(139,26,26,0.08);
  border: var(--border-ornate);
  border-radius: 2px;
  color: var(--blood);
  font-size: 0.82rem;
  padding: 12px;
  margin: 6px 0;
}

/* ── Character list (sidebar Characters tab) ───────────────────── */
.char-list-header {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--blood);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.char-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.char-list__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  background: rgba(232,220,200,0.7);
  border: var(--border-ornate);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.char-list__btn:hover {
  background: rgba(196,146,42,0.12);
  border-color: rgba(196,146,42,0.4);
  box-shadow: var(--shadow-glow-gold);
}
.char-list__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}
.char-list__meta {
  font-size: 0.75rem;
  color: var(--ink-muted);
}
.char-list__hp-bar {
  width: 100%;
  height: 4px;
  background: rgba(59,47,30,0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.char-list__hp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 300ms ease;
}
.char-list__hp-num {
  font-size: 0.72rem;
  font-weight: 700;
}

/* ── Sheet player tag ─────────────────────────────────────────── */
.sheet-player-tag {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-bottom: 8px;
  padding: 3px 6px;
  background: rgba(232,220,200,0.6);
  border-radius: 2px;
  border: var(--border-ornate);
  display: inline-block;
}

/* ── Character Overview ───────────────────────────────────────── */

/* Header row: portrait left, identity text right */
.ov-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}
.ov-identity { flex: 1; min-width: 0; }
.ov-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.ov-sub { font-size: 0.82rem; color: var(--ink-muted); }
.ov-background, .ov-alignment { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }

/* Portrait: 72px with CSS-only gold double-border frame */
.ov-portrait-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  margin: 0 12px 0 0;
}
.ov-portrait-inner {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: rgba(255,240,210,0.85);
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  background: linear-gradient(135deg, #5C3D1E, #8B5A2B);
  overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dark), var(--shadow-md), 0 0 8px rgba(196,146,42,0.2);
}
.ov-portrait-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ov-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.ov-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ov-bar-label {
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 22px;
  flex-shrink: 0;
}
.ov-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(59,47,30,0.12);
  border-radius: 2px;
  overflow: hidden;
}
.ov-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 400ms ease;
}
.ov-bar-fill--xp { background: var(--gold); }
.ov-bar-val { font-size: 0.72rem; color: var(--ink-muted); white-space: nowrap; }
/* HP quick-adjust row — dark container so metallic buttons contrast */
.ov-hp-adjust {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(42,26,16,0.88);
  border: 1px solid rgba(196,146,42,0.25);
  border-radius: 2px;
  margin-top: 6px;
}
.ov-hp-btn {
  flex: 1;
  padding: 5px 4px !important;
  min-height: 30px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
}

.ov-hp-cur             { font-weight: 900; }
.ov-hp-cur--editable   { cursor: pointer; border-bottom: 1px dashed currentColor; }
.ov-hp-cur--editable:hover { opacity: 0.8; }
.ov-hp-sep  { margin: 0 1px; color: var(--ink-muted); }
.ov-hp-max  { color: var(--ink-muted); font-size: 0.8rem; font-weight: 900; }
.ov-hp-temp { font-size: 0.7rem; color: var(--gold); margin-left: 3px; }

/* HP bar row: stacked layout (label+value on top, track below) */
.ov-bar-row--hp {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.ov-hp-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/* HP track: 12px tall with border + inner shadow
   flex: none prevents the flex: 1 from ov-bar-track collapsing this in a column flex */
.ov-hp-track {
  flex: none;
  height: 12px;
  background: rgba(59,47,30,0.18);
  border: 1px solid rgba(139,26,26,0.3);
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
  overflow: hidden;
  position: relative;
}
/* HP fill with inner highlight — explicit height so 100% resolves against track */
.ov-hp-fill {
  height: 100%;
  display: block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  transition: width 400ms ease, background 400ms ease;
}
/* Tick marks every 10 HP via repeating gradient */
.ov-hp-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent calc(100% / (var(--tick-count, 40) / 10) - 1px),
    rgba(0,0,0,0.3) calc(100% / (var(--tick-count, 40) / 10) - 1px),
    rgba(0,0,0,0.3) calc(100% / (var(--tick-count, 40) / 10))
  );
  pointer-events: none;
}

/* Frame separator between identity and stats — CSS gradient line */
.ov-frame-separator {
  display: block;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 5%, var(--gold-dark) 25%, var(--gold) 50%, var(--gold-dark) 75%, transparent 95%);
  margin: 8px 0 10px;
  border: none;
}

/* ── Stat cells — inner highlight per mockup ──────────────────── */
.ov-stats-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.ov-stat-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px;
  background: rgba(59,47,30,0.06);
  border: 1px solid rgba(139,26,26,0.2);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
              inset 0 -1px 0 rgba(59,47,30,0.15);
}
.ov-stat-val   { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.ov-stat-label { font-size: 0.55rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-muted); }

.ov-abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.ov-ability-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(59,47,30,0.06);
  border: 1px solid rgba(139,26,26,0.2);
  border-radius: 2px;
  padding: 5px 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
              inset 0 -1px 0 rgba(59,47,30,0.15);
}
.ov-ability-abbr  { font-size: 0.55rem; font-weight: 900; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.15em; }
.ov-ability-mod   { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.ov-ability-score { font-size: 0.65rem; color: var(--ink-muted); }

/* ── Combat ───────────────────────────────────────────────────── */
.combat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.combat-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(59,47,30,0.06);
  border: 1px solid rgba(139,26,26,0.2);
  border-radius: 2px;
  padding: 6px 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
              inset 0 -1px 0 rgba(59,47,30,0.15);
}
.combat-stat__val   { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.combat-stat__label { font-size: 0.55rem; font-weight: 900; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.15em; }
.combat-hp-sep      { font-weight: 400; color: var(--ink-muted); margin: 0 1px; }
.combat-hp-cur--editable { cursor: pointer; border-bottom: 1px dashed var(--blood); }
.combat-hp-cur--editable:hover { opacity: 0.8; }

/* Death saves */
.combat-death-saves { margin-bottom: 10px; }
.combat-death-saves__label { font-size: 0.78rem; font-weight: 700; color: var(--ink-muted); display: block; margin-bottom: 4px; }
.combat-death-saves__row   { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.combat-death-saves__type  { font-size: 0.72rem; width: 52px; color: var(--ink-muted); }
.combat-death-saves__type--success { color: var(--done-green); }
.combat-death-saves__type--failure { color: var(--blood); }

.combat-death-pip {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(59,47,30,0.25);
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.combat-death-pip:hover { opacity: 0.75; }
.combat-death-pip--success.combat-death-pip--filled { background: var(--done-green); border-color: var(--done-green); }
.combat-death-pip--failure.combat-death-pip--filled { background: var(--blood); border-color: var(--blood); }
.combat-death-pip--success:not(.combat-death-pip--filled):hover { border-color: var(--done-green); }
.combat-death-pip--failure:not(.combat-death-pip--filled):hover { border-color: var(--blood); }

/* Stabilized / Dead indicators */
.combat-ds-indicator {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
}
.combat-ds-indicator--stable { background: var(--done-green); color: var(--parchment); }
.combat-ds-indicator--dead   { background: var(--blood-dark);  color: var(--parchment); }

/* Conditions */
.combat-conditions__header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.combat-conditions__label  { font-size: 0.78rem; font-weight: 700; color: var(--ink-muted); }
.combat-conditions__add-btn {
  font-size: 0.7rem; padding: 1px 7px; margin-left: auto;
  border: var(--border-ornate); color: var(--blood);
  background: transparent; border-radius: 2px; cursor: pointer;
  transition: background var(--transition-fast);
}
.combat-conditions__add-btn:hover { background: rgba(139,26,26,0.1); }
.combat-conditions__active { display: flex; flex-wrap: wrap; gap: 4px; min-height: 22px; margin-bottom: 6px; }
.combat-conditions__none   { font-size: 0.78rem; color: var(--ink-muted); font-style: italic; }

/* Condition badges */
.cond-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  background: var(--surface);
  border: var(--border-ornate);
  color: var(--ink);
  border-radius: 2px;
  padding: 2px 4px 2px 6px;
}
.cond-badge__remove {
  background: none; border: none; cursor: pointer;
  color: var(--blood); font-size: 0.65rem; padding: 0 1px; line-height: 1;
}
.cond-badge__remove:hover { color: var(--blood-dark); }

/* Condition picker */
.cond-picker {
  background: rgba(217,204,172,0.6);
  border: var(--border-ornate);
  border-radius: 2px;
  padding: 8px;
  margin-top: 4px;
}
.cond-picker__grid {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px;
}
.cond-pick-btn {
  font-family: var(--font-body);
  font-size: 0.7rem;
  padding: 3px 7px;
  border: 1px solid rgba(59,47,30,0.2);
  border-radius: 2px;
  background: var(--parchment);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.cond-pick-btn:hover { border-color: var(--blood); color: var(--blood); }
.cond-pick-btn--active {
  background: rgba(139,26,26,0.12);
  border-color: var(--blood);
  color: var(--blood);
  font-weight: 700;
}
.cond-picker__exhaustion {
  display: flex; align-items: center; gap: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(59,47,30,0.12);
}
.cond-picker__exhaust-label  { font-size: 0.75rem; color: var(--ink-muted); }
.cond-picker__exhaust-select {
  font-size: 0.75rem; padding: 2px 4px;
  border: var(--border-ornate); border-radius: 2px;
  background: var(--parchment); color: var(--ink);
}
.cond-picker__exhaust-btn { font-size: 0.72rem; padding: 2px 8px; }

/* ── Weapons ──────────────────────────────────────────────────── */
.weapon-card {
  border: var(--border-ornate);
  border-radius: 2px;
  margin-bottom: 6px;
  overflow: hidden;
  background: rgba(232,220,200,0.5);
}
/* Expanded weapon card: dark leather interior so metallic buttons pop */
.weapon-card--open {
  background: rgba(42,26,16,0.96);
  border-color: rgba(196,146,42,0.4);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.3), var(--shadow-md);
}
.weapon-card--open .weapon-card__header {
  background: rgba(59,38,18,0.9);
}
.weapon-card--open .weapon-card__header:hover { background: rgba(80,50,20,0.9); }
/* 4-column grid: name+type | to-hit tag | dice | chevron */
.weapon-card__header {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(217,204,172,0.7);
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.weapon-card__header:hover { background: rgba(196,146,42,0.1); }
.weapon-card__col-name { display: flex; flex-direction: column; gap: 1px; }
.weapon-card__name    { font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.weapon-card__dmgtype { font-size: 0.65rem; color: var(--ink-muted); }
/* to-hit tag uses fv-tag but gold-tinted */
.weapon-card__tohit.fv-tag {
  background: rgba(196,146,42,0.12);
  color: var(--gold-dark);
  border-color: rgba(196,146,42,0.35);
  font-size: 0.72rem;
  font-weight: 700;
}
.weapon-card__dice    { font-size: 0.75rem; font-weight: 700; color: var(--ink); }
.weapon-card__chevron { font-size: 0.8rem; color: var(--ink-muted); transition: transform var(--transition-fast); }
.weapon-card--open .weapon-card__chevron { transform: rotate(180deg); }
/* Property tag chips */
.weapon-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; position: relative; z-index: 1; }

.weapon-card__detail  {
  padding: 12px 14px 14px;
  background: transparent;
  border-top: 1px solid rgba(196,146,42,0.2);
  position: relative;
}
.weapon-card__detail[hidden] { display: none; }

/* Text inside dark weapon card: light parchment */
.weapon-card--open .weapon-card__name    { color: var(--parchment); }
.weapon-card--open .weapon-card__dmgtype { color: rgba(232,184,75,0.7); }
.weapon-card--open .weapon-card__dice    { color: var(--gold-light); }
.weapon-card--open .weapon-card__tohit.fv-tag {
  background: rgba(196,146,42,0.18);
  border-color: rgba(196,146,42,0.45);
  color: var(--gold-light);
}
.weapon-card--open .weapon-card__chevron { color: rgba(232,184,75,0.6); }

.weapon-card__stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; position: relative; z-index: 1; }
.weapon-card__stat { display: flex; flex-direction: column; align-items: center; }
.weapon-card__stat-val   { font-size: 0.9rem; font-weight: 700; color: var(--gold-light); }
.weapon-card__stat-label { font-size: 0.6rem; color: rgba(232,184,75,0.7); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 900; }
.weapon-card__properties { font-size: 0.72rem; color: rgba(232,184,75,0.7); font-style: italic; margin-bottom: 4px; position: relative; z-index: 1; }
.weapon-card__description { font-size: 0.78rem; color: var(--parchment); margin-bottom: 8px; position: relative; z-index: 1; }

/* Weapon action buttons */
.weapon-card__actions {
  display: flex;
  gap: 8px;
  padding-top: 10px;
  position: relative;
  z-index: 2;
}
.weapon-card__actions .btn-metal {
  flex: 1;
  justify-content: center;
  min-height: 44px;
  font-size: 0.8rem;
}

/* Property tag pills — gold-tinted on dark bg */
.weapon-property-tag,
.weapon-card--open .fv-tag,
.weapon-card--open .weapon-property-tag {
  display: inline-block;
  font-size: 0.65rem;
  padding: 1px 6px;
  background: rgba(196,146,42,0.12);
  border: 1px solid rgba(196,146,42,0.35);
  border-radius: 2px;
  color: rgba(232,184,75,0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Spells ───────────────────────────────────────────────────── */
.spells-header {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  padding: 6px 8px;
  background: rgba(74,122,155,0.08);
  border: var(--border-arcane);
  border-radius: 2px;
}
.spells-header__stat { font-size: 0.78rem; color: var(--ink-muted); }
.spells-header__stat strong { color: var(--spell-accent); }

.spell-group { margin-bottom: 10px; }
.spell-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: rgba(74,122,155,0.06);
  margin-bottom: 4px;
}
.spell-group__label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--spell-accent);
  font-weight: 900;
}

/* Spell slot pips — gold radial gradient, glow, clickable */
.spell-slot-pips { display: flex; gap: 4px; align-items: center; }
.spell-slot-pip {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--gold-dark);
  background: radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold-dark));
  box-shadow: 0 0 6px rgba(196,146,42,0.55), inset 0 1px 1px rgba(255,255,255,0.25);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}
.spell-slot-pip:hover { transform: scale(1.1); }
.spell-slot-pip--used {
  background: transparent;
  border-color: var(--gold-dark);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);
}
.spell-slot-count { font-size: 0.7rem; font-weight: 700; color: var(--ink-muted); margin-left: auto; }

/* Spell cards — 4-column grid: level | name+sub | dmg-tag | chevron */
.spell-card {
  border: var(--border-arcane);
  border-radius: 2px;
  margin-bottom: 3px;
  background: rgba(232,220,200,0.5);
  overflow: hidden;
}
/* Expanded spell card: dark arcane interior so arcane buttons pop */
.spell-card--open {
  background: rgba(14,22,40,0.96);
  border-color: rgba(100,140,200,0.35);
  box-shadow: inset 0 0 24px rgba(20,40,80,0.4), var(--shadow-md), 0 0 12px rgba(100,140,200,0.1);
}
.spell-card--open .spell-card__main {
  background: rgba(20,30,55,0.9);
}
.spell-card--open .spell-card__main:hover { background: rgba(28,40,70,0.9); }
.spell-card__main {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}
.spell-card__main:hover { background: rgba(74,122,155,0.07); }

/* Column 1: level badge */
.spell-card__level-badge {
  width: 22px;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 0;
  background: rgba(74,122,155,0.15);
  border: 1px solid rgba(74,122,155,0.35);
  border-radius: 2px;
  color: var(--spell-accent);
  flex-shrink: 0;
}

/* Column 2: name + concentration dot + school/cast-time */
.spell-card__col-name {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.spell-card__name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 4px;
}
.spell-card__sub {
  font-size: 0.65rem;
  color: var(--ink-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Concentration dot — gold circle with glow */
.spell-conc-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 5px rgba(196,146,42,0.6);
  flex-shrink: 0;
}

/* Column 3: damage/range tag */
.spell-card__dmg-tag { font-size: 0.62rem; }

/* Column 4: chevron */
.spell-card__chevron {
  font-size: 0.8rem;
  color: var(--ink-muted);
  transition: transform var(--transition-fast);
}
.spell-card--open .spell-card__chevron { transform: rotate(180deg); }

/* Meta tags in expanded detail */
.spell-card__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }

/* Spell detail area */
.spell-card__detail {
  padding: 10px 14px 12px;
  background: transparent;
  border-top: 1px solid rgba(100,140,200,0.2);
  position: relative;
}
.spell-card__detail[hidden] { display: none; }

/* Cosmic aura overlay — rendered behind content */
.spell-card--open .spell-card__detail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 40%, rgba(80,100,180,0.12) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Text inside dark spell card: light */
.spell-card--open .spell-card__name  { color: var(--parchment); }
.spell-card--open .spell-card__sub   { color: rgba(180,200,220,0.7); }
.spell-card--open .spell-card__chevron { color: rgba(140,180,220,0.6); }
.spell-card--open .spell-card__level-badge {
  background: rgba(100,140,200,0.2);
  border-color: rgba(100,140,200,0.4);
  color: #C8DEF1;
}
/* Arcane tags on dark bg */
.spell-card--open .fv-tag.arcane,
.spell-card--open .spell-card__tag {
  background: rgba(74,122,155,0.18);
  border-color: rgba(100,140,200,0.4);
  color: rgba(200,222,240,0.9);
}

.spell-card__meta {
  display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
  position: relative; z-index: 1;
}
.spell-card__tag {
  font-size: 0.68rem;
  padding: 2px 5px;
  border-radius: 2px;
  background: rgba(74,122,155,0.1);
  color: var(--spell-accent);
  border: var(--border-arcane);
}
.spell-card__tag--conc  { background: rgba(196,146,42,0.12); color: var(--gold); border-color: rgba(196,146,42,0.3); }
.spell-card__tag--ritual{ background: rgba(139,26,26,0.08);  color: var(--blood); border-color: rgba(139,26,26,0.25); }
.spell-card__description { font-size: 0.78rem; color: var(--ink); position: relative; z-index: 1; }
.spell-card--open .spell-card__description { color: rgba(232,220,200,0.85); }
.spell-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}
.spell-card__actions .btn-metal.arcane {
  flex: 1;
  justify-content: center;
  min-height: 44px;
  font-size: 0.8rem;
}

/* Source badges */
.source-badge {
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 2px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.source-badge.srd {
  background: rgba(26,77,110,0.12);
  color: var(--archive-blue);
  border: 1px solid rgba(26,77,110,0.3);
}
.source-badge.homebrew {
  background: rgba(196,146,42,0.12);
  color: var(--gold);
  border: var(--border-gold);
}
.source-badge.manual {
  background: rgba(59,47,30,0.08);
  color: var(--ink-muted);
  border: 1px solid rgba(59,47,30,0.15);
}

/* ── Features ─────────────────────────────────────────────────── */
.feature-group { margin-bottom: 10px; }
.feature-group__header {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: var(--border-ornate);
}
.feature-card {
  border: var(--border-ornate);
  border-radius: 2px;
  margin-bottom: 4px;
  background: rgba(232,220,200,0.5);
  overflow: hidden;
}
.feature-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  background: rgba(217,204,172,0.7);
  transition: background var(--transition-fast);
}
.feature-card__name   { font-size: 0.83rem; font-weight: 700; color: var(--ink); }
.feature-card__badges { display: flex; align-items: center; gap: 5px; }
.feature-card__uses   {
  font-size: 0.72rem; color: var(--ink-muted);
  background: rgba(242,232,213,0.7);
  border: var(--border-ornate);
  padding: 1px 5px; border-radius: 2px;
}
.feature-card__recharge {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 2px;
  border: 1px solid;
}
.feature-card__recharge--short-rest { background: rgba(196,146,42,0.1); color: var(--gold); border-color: rgba(196,146,42,0.3); }
.feature-card__recharge--long-rest  { background: rgba(74,122,155,0.1); color: var(--spell-accent); border-color: rgba(74,122,155,0.25); }
.feature-card__roll-btn { font-size: 0.72rem; padding: 2px 7px; }
.feature-card__body { padding: 8px 10px; background: rgba(242,232,213,0.6); border-top: var(--border-ornate); }
.feature-card__body[hidden] { display: none; }
.feature-card__desc { font-size: 0.78rem; color: var(--ink); }

/* ── Inventory ────────────────────────────────────────────────── */
.inventory-currency {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.coin-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(217,204,172,0.7);
  border: var(--border-ornate);
  border-radius: 2px;
  padding: 5px 8px;
  min-width: 38px;
}
.coin-badge__amount { font-size: 0.9rem; font-weight: 700; color: var(--coin-color, var(--gold)); }
.coin-badge__label  { font-size: 0.6rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.inventory-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.inventory-table th {
  text-align: left;
  padding: 5px 8px;
  font-size: 0.7rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--border-ornate);
  background: rgba(217,204,172,0.7);
}
.inventory-row td { padding: 5px 8px; border-bottom: 1px solid rgba(59,47,30,0.08); vertical-align: middle; }
.inventory-row:hover td { background: rgba(196,146,42,0.06); }
.inventory-row__name { color: var(--ink); font-weight: 600; }
.inv-desc { display: block; font-size: 0.7rem; color: var(--ink-muted); font-style: italic; }
.inv-col-num    { text-align: right; color: var(--ink-muted); width: 40px; }
.inv-col-badges { width: 42px; }
.inv-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 2px;
  margin-right: 2px;
}
.inv-badge--equipped { background: rgba(139,26,26,0.12); color: var(--blood); border: var(--border-ornate); }
.inv-badge--attuned  { background: rgba(74,122,155,0.12); color: var(--spell-accent); border: var(--border-arcane); }

/* ── Backstory ────────────────────────────────────────────────── */
.backstory-block { margin-bottom: 12px; }
.backstory-block__label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--blood);
  display: block;
  margin-bottom: 4px;
}
.backstory-block__text { font-size: 0.82rem; color: var(--ink); line-height: 1.5; }
.backstory-empty       { color: var(--ink-muted); font-size: 0.78rem; }
.backstory-block__textarea {
  width: 100%;
  background: rgba(242,232,213,0.8);
  border: var(--border-ornate);
  border-radius: 2px;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--ink);
  resize: vertical;
  min-height: 60px;
  transition: border-color var(--transition-fast);
}
.backstory-block__textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--shadow-glow-gold);
}

/* ── Session log ──────────────────────────────────────────────── */
.session-list { list-style: none; }
.session-list__item {
  border: var(--border-ornate);
  border-radius: 2px;
  margin-bottom: 5px;
  background: rgba(232,220,200,0.5);
  overflow: hidden;
}
.session-list__btn {
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--transition-fast);
}
.session-list__btn:hover { background: rgba(196,146,42,0.08); }
.session-list__title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ink);
}
.session-list__date  { font-size: 0.72rem; color: var(--gold); font-weight: 700; }

.session-detail        { padding: 10px 12px; border-top: var(--border-ornate); background: rgba(242,232,213,0.6); }
.session-detail__notes { font-size: 0.82rem; color: var(--ink); line-height: 1.5; white-space: pre-wrap; margin-bottom: 8px; }
.session-detail__dm-notes {
  margin-top: 8px;
  padding: 8px;
  background: rgba(139,26,26,0.05);
  border: var(--border-ornate);
  border-radius: 2px;
  font-size: 0.78rem;
  color: var(--ink);
  white-space: pre-wrap;
}
.session-detail__dm-label { font-size: 0.7rem; font-weight: 700; color: var(--blood); display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Settings ─────────────────────────────────────────────────── */
.settings-section { margin-bottom: 16px; }
.settings-section__title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--blood);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: var(--border-ornate);
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(59,47,30,0.06);
  font-size: 0.83rem;
  color: var(--ink);
}
.settings-row label { cursor: pointer; }
.settings-row select {
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 3px 6px;
  background: var(--parchment);
  border: var(--border-ornate);
  border-radius: 2px;
  color: var(--ink);
}
.settings-row input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--blood);
}

/* ── Placeholder ──────────────────────────────────────────────── */
.placeholder-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
}
.placeholder-panel__icon { font-size: 3rem; opacity: 0.4; }
.placeholder-panel__title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--blood);
}
.placeholder-panel__msg { font-size: 0.85rem; color: var(--ink-muted); line-height: 1.5; }

/* ── Token Editor ─────────────────────────────────────────────── */
.token-editor { padding: 4px 0; }
.token-editor__label { font-size: 0.78rem; color: var(--ink-muted); margin-bottom: 3px; display: block; }
.token-editor__input {
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 6px 8px;
  border: var(--border-ornate);
  border-radius: 2px;
  background: rgba(242,232,213,0.8);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}
.token-editor__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: var(--shadow-glow-gold);
}
.token-editor__row { display: flex; gap: 10px; margin-bottom: 0; align-items: flex-start; }
.token-editor__actions { margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.token-editor__delete-btn { color: var(--blood); border-color: var(--blood); }
.token-editor__delete-btn:hover { background: rgba(139,26,26,0.1); }
.token-editor__divider { border: none; border-top: var(--border-ornate); margin: 16px 0 12px; }
.token-editor__section-heading {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 10px;
}
.token-editor__in-combat-note { font-size: 0.82rem; color: var(--done-green); margin: 0; }
.token-editor__status { margin-top: 10px; font-size: 0.82rem; min-height: 1.2em; }

/* ── Initiative Tracker visual overrides ─────────────────────── */

.it-round-badge {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  background: rgba(196,146,42,0.1);
  border: var(--border-gold);
  border-radius: 2px;
  padding: 2px 8px;
  white-space: nowrap;
}

.it-row {
  background: rgba(232,220,200,0.6);
  border: var(--border-ornate);
  border-radius: 2px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.it-row--active {
  border-left: 3px solid var(--gold) !important;
  background: rgba(196,146,42,0.12) !important;
  box-shadow: var(--shadow-glow-gold);
}

.it-row--active .it-name {
  color: var(--gold-dark);
  font-weight: 700;
}

.it-initiative-val,
.it-initiative-input {
  color: var(--ink);
}

.it-initiative-input {
  border: var(--border-ornate);
  border-radius: 2px;
  background: rgba(242,232,213,0.8);
}
.it-initiative-input:focus {
  border-color: var(--gold);
  box-shadow: var(--shadow-glow-gold);
}

/* Type badges: PC = done-green, NPC = blood-red */
.it-type-badge {
  border-radius: 2px;
}
.it-type-badge--pc {
  background: rgba(46,107,62,0.15);
  color: var(--done-green);
  border: 1px solid rgba(46,107,62,0.4);
}
.it-type-badge--npc {
  background: rgba(139,26,26,0.12);
  color: var(--blood);
  border: var(--border-ornate);
}

.it-hp-bar-wrap {
  background: rgba(59,47,30,0.12);
  border: 1px solid rgba(59,47,30,0.15);
  border-radius: 2px;
}

.it-hp-bar {
  border-radius: 2px;
}

.it-ac {
  color: var(--ink-muted);
}

.it-hp-label,
.it-hp-input {
  color: var(--ink);
}

.it-hp-input {
  background: rgba(242,232,213,0.8);
  border: var(--border-ornate);
  border-radius: 2px;
}
.it-hp-input:focus {
  border-color: var(--gold);
  outline: none;
}

/* Combat tab form */
.cs-combat-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--blood);
  padding-bottom: 4px;
  border-bottom: var(--border-ornate);
}

.cs-add-weapon-form {
  background: rgba(242,232,213,0.7);
  border: var(--border-ornate);
  border-radius: 2px;
}

.cs-add-weapon-form input,
.cs-add-weapon-form select {
  background: var(--parchment);
  border: var(--border-ornate);
  border-radius: 2px;
  color: var(--ink);
}

/* ── Global cleanup: no radius > 3px, no cold grays ─────────── */

/* HP bars — bars are rectangular in parchment aesthetic */
.hp-bar,
.hp-bar__fill,
.it-hp-bar-wrap,
.it-hp-bar,
.char-list__hp-bar,
.char-list__hp-fill,
.ov-bar-track,
.ov-bar-fill {
  border-radius: 2px !important;
}

/* Badge pills — squared, not rounded */
.badge,
.badge-pill,
.it-roll-banner,
.spell-slot-pip,
.sc-level-badge,
.sc-conc-badge,
.sc-ritual-badge {
  border-radius: 2px !important;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
  border-radius: 3px;
}

/* Remove blue/cold focus rings — use gold */
*:focus {
  outline: none;
}
*:focus-visible {
  outline: 2px solid rgba(196,146,42,0.5);
  outline-offset: 1px;
}

/* btn base class cleanup */
.btn {
  border-radius: 2px;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Roll initiative banner */
.it-roll-banner {
  border-radius: 2px !important;
  background: rgba(196,146,42,0.12) !important;
  border-color: rgba(196,146,42,0.4) !important;
  color: var(--gold) !important;
}

/* Ensure all modal inputs use warm focus */
.field input:focus,
.field select:focus,
.backstory-block__textarea:focus,
.token-editor__input:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: var(--shadow-glow-gold) !important;
}