/* ==========================================================================
   Mapwright - Character Sheet Styles (Virtual TTG System)
   D&D 5e Canonical Character Sheet Styling: Obsidian, Eldritch Gold & Brass
   Fonts: Cormorant Garamond (Headers), Figtree (UI), JetBrains Mono (Math/Dice)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Sheet Theme Tokens & Variables
   -------------------------------------------------------------------------- */
:root {
  --sheet-bg: var(--bg);
  --sheet-bg-surface: var(--panel2-solid);
  --sheet-bg-card: var(--panel-solid);
  --sheet-glass: var(--panel);
  --sheet-glass-border: var(--line);
  --sheet-border: var(--line);
  --sheet-border-subtle: var(--line-subtle);

  --sheet-brass: var(--brass);
  --sheet-brass-glow: var(--brass-glow);
  --sheet-brass-bright: var(--brass-bright);
  --sheet-accent: var(--accent);
  --sheet-accent-glow: rgba(45, 212, 191, 0.4);
  --sheet-hp-ok: var(--hp-ok);
  --sheet-hp-warn: #f59e0b;
  --sheet-hp-crit: var(--danger);
  --sheet-spell: #818cf8;
  --sheet-spell-glow: rgba(129, 140, 248, 0.5);
  --sheet-text: var(--fg);
  --sheet-text-muted: var(--muted);
  --sheet-text-dim: #64748b;
}

/* --------------------------------------------------------------------------
   1. Modal Container & Backdrop
   -------------------------------------------------------------------------- */
.sheet-modal {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sheet-modal[hidden] {
  display: none !important;
}

.sheet-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

.sheet-modal-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 56;
  width: min(1240px, 96vw);
  height: min(860px, 92vh);
  background: var(--sheet-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--sheet-glass-border);
  border-radius: var(--r-lg, 12px);
  box-shadow: 
    0 24px 64px rgba(0, 0, 0, 0.88),
    0 0 0 1px rgba(200, 166, 104, 0.15),
    0 0 32px rgba(200, 166, 104, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
  animation: sheetModalPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sheetModalPop {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.sheet-modal-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Main Layout Container (.ttg-sheet)
   -------------------------------------------------------------------------- */
.ttg-sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: var(--sheet-text);
  background: 
    radial-gradient(circle at top right, rgba(200, 166, 104, 0.05) 0%, transparent 55%),
    radial-gradient(circle at bottom left, rgba(45, 212, 191, 0.03) 0%, transparent 50%),
    var(--sheet-bg);
  overflow: hidden;
  height: 100%;
}

/* --------------------------------------------------------------------------
   3. Header Section (.ttg-head)
   -------------------------------------------------------------------------- */
.ttg-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  height: 62px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(20, 30, 42, 0.75) 0%, rgba(11, 16, 22, 0.9) 100%);
  border-bottom: 1px solid var(--sheet-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  user-select: none;
  cursor: move;
  position: relative;
  z-index: 2;
}

/* Avatar with Gold Ring */
.ttg-avatar {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  border: 2px solid var(--sheet-brass);
  color: #fff;
  font-family: var(--font-display, 'Cormorant Garamond', serif);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 0 2px rgba(11, 16, 22, 0.9),
    0 0 16px var(--sheet-brass-glow);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.ttg-avatar.turn-glow {
  border-color: var(--sheet-accent);
  box-shadow: 
    0 0 0 2px rgba(11, 16, 22, 0.9),
    0 0 20px var(--sheet-accent-glow);
  animation: turnPulse 2s infinite ease-in-out;
}

@keyframes turnPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(11, 16, 22, 0.9), 0 0 12px rgba(45, 212, 191, 0.4); }
  50% { box-shadow: 0 0 0 2px rgba(11, 16, 22, 0.9), 0 0 24px rgba(45, 212, 191, 0.85); }
}

.ttg-avatar[data-act="sheet-avatar-upload"] {
  cursor: pointer;
}

.ttg-avatar[data-act="sheet-avatar-upload"]:hover {
  border-color: var(--sheet-accent);
  box-shadow: 0 0 20px rgba(45, 212, 191, 0.6);
  transform: scale(1.03);
}

.ttg-ava-edit-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sheet-brass);
  color: #0b1016;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Identity & Subtitle */
.ttg-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.ttg-name-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ttg-name {
  margin: 0;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #f8fafc;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.ttg-name-wrap .tag {
  background: rgba(45, 212, 191, 0.15);
  border: 1px solid var(--sheet-accent);
  color: var(--sheet-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--r-sm, 5px);
  letter-spacing: 0.08em;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.3);
}

.ttg-sub {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 13px;
  color: var(--sheet-text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ttg-sub-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  flex-wrap: wrap;
}

/* Header Actions */
.ttg-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Pills (Inspiration, Rest) */
.ttg-pill {
  border: 1px solid rgba(200, 166, 104, 0.28);
  background: rgba(17, 27, 38, 0.85);
  color: #cbd5e1;
  border-radius: var(--r-sm, 5px);
  padding: 6px 14px;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ttg-pill:hover {
  border-color: var(--sheet-brass);
  color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.12);
  transform: translateY(-1px);
}

.ttg-pill.insp-active {
  background: linear-gradient(135deg, #c8a668 0%, #e2c78f 100%);
  border-color: #f0d8a5;
  color: #0b1016;
  font-weight: 700;
  box-shadow: 0 0 16px rgba(200, 166, 104, 0.75);
  animation: inspGlow 3s infinite alternate ease-in-out;
}

@keyframes inspGlow {
  from { box-shadow: 0 0 12px rgba(200, 166, 104, 0.6); }
  to { box-shadow: 0 0 22px rgba(200, 166, 104, 0.9); }
}

.ttg-pill.ttg-pill-dim {
  opacity: 0.6;
  cursor: default;
  border-style: dashed;
}
.ttg-pill.ttg-pill-dim:hover {
  transform: none;
  border-color: rgba(200, 166, 104, 0.28);
  color: #cbd5e1;
  background: rgba(17, 27, 38, 0.85);
}

.gold-active {
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4) !important;
}

/* Gear Button (.ttg-btn-gear, .ttg-icon-btn) */
.ttg-btn-gear,
.ttg-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(200, 166, 104, 0.25);
  background: rgba(17, 27, 38, 0.85);
  color: #cbd5e1;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ttg-btn-gear:hover,
.ttg-icon-btn:hover {
  border-color: var(--sheet-brass);
  color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.12);
  transform: translateY(-1px);
}

.ttg-btn-gear.active,
.ttg-icon-btn.active {
  background: var(--sheet-brass) !important;
  color: #0b1016 !important;
  border-color: #dfbe7d !important;
  box-shadow: 0 0 18px rgba(200, 166, 104, 0.8) !important;
  transform: rotate(45deg);
}

/* Close Button */
.ttg-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border: 1px solid var(--sheet-border);
  background: rgba(17, 27, 38, 0.85);
  color: var(--sheet-text-muted);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ttg-close-btn:hover {
  background: var(--sheet-hp-crit);
  border-color: var(--sheet-hp-crit);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.5);
}

/* --------------------------------------------------------------------------
   3.5 Upper Indicators Panel: Top Shelf (.ttg-top-shelf)
   -------------------------------------------------------------------------- */
.ttg-top-shelf {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(13, 19, 28, 0.88) 0%, rgba(9, 14, 20, 0.96) 100%);
  border-bottom: 1px solid var(--sheet-border);
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Left: 4 Vitals Badges */
.ttg-vitals-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 0 0 320px;
}

.ttg-vitals-badges .ttg-metric-badge {
  background: linear-gradient(180deg, #131c26 0%, #0d141d 100%);
  border: 1px solid rgba(200, 166, 104, 0.2);
  border-radius: 9px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ttg-vitals-badges .ttg-metric-badge:hover {
  transform: translateY(-1px);
  border-color: var(--sheet-brass);
  box-shadow: 0 0 10px var(--sheet-brass-glow);
}

.ttg-vitals-badges .ttg-metric-badge .lbl {
  font-size: 8.5px;
  color: var(--sheet-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ttg-vitals-badges .ttg-metric-badge.ac .lbl { color: #38bdf8; }
.ttg-vitals-badges .ttg-metric-badge.init .lbl { color: #f59e0b; }
.ttg-vitals-badges .ttg-metric-badge.spd .lbl { color: var(--sheet-hp-ok); }
.ttg-vitals-badges .ttg-metric-badge.pb .lbl { color: var(--sheet-brass); }

.ttg-vitals-badges .ttg-metric-badge .val {
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: #f8fafc;
  line-height: 1.1;
}

.ttg-vitals-badges .ttg-metric-badge.ac .val {
  color: #e0f2fe;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.ttg-vitals-badges .ttg-metric-badge .val-btn {
  background: #162230;
  border: 1px solid rgba(200, 166, 104, 0.3);
  border-radius: 6px;
  color: #f8fafc;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 15px;
  font-weight: 700;
  padding: 1px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ttg-vitals-badges .ttg-metric-badge .val-btn:hover {
  border-color: var(--sheet-brass);
  color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.15);
  box-shadow: 0 0 8px var(--sheet-brass-glow);
}

/* Right: 6 Ability Stats Cards */
.ttg-stats-badges {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  flex: 1;
}

.ttg-stats-badges .ttg-stat-card {
  background: linear-gradient(180deg, #141c27 0%, #0c131d 100%);
  border: 1px solid rgba(200, 166, 104, 0.2);
  border-radius: 9px;
  padding: 5px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  position: relative;
}

.ttg-stats-badges .ttg-stat-card:hover {
  border-color: var(--sheet-brass);
  box-shadow: 0 0 12px var(--sheet-brass-glow), 0 4px 10px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.ttg-stats-badges .ttg-stat-roll {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0;
}

.ttg-stats-badges .ttg-stat-lbl {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 9px;
  font-weight: 700;
  color: var(--sheet-brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ttg-stats-badges .ttg-stat-mod {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: #f8fafc;
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

.ttg-stats-badges .ttg-stat-val {
  font-size: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  color: var(--sheet-text-muted);
  background: rgba(6, 10, 15, 0.9);
  border: 1px solid rgba(200, 166, 104, 0.25);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.ttg-stats-badges .stat-inp {
  width: 34px;
  font-size: 11px;
  text-align: center;
  padding: 1px;
  margin-top: 1px;
  background: rgba(6, 10, 15, 0.9);
  border: 1px solid var(--sheet-brass);
  border-radius: 999px;
  color: #f8fafc;
}

/* --------------------------------------------------------------------------
   4. 3-Column Grid Layout (.ttg-cols, .ttg-sheet)
   -------------------------------------------------------------------------- */
.ttg-cols {
  display: grid;
  grid-template-columns: 280px 320px 1fr;
  gap: 14px;
  flex: 1;
  min-height: 0;
  height: auto;
  padding: 12px 18px 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.ttg-col,
.ttg-col-left,
.ttg-col-center,
.ttg-col-right,
.ttg-col-stats,
.ttg-col-combat,
.ttg-col-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Modular Card Block */
.ttg-block {
  background: var(--sheet-bg-card);
  border: 1px solid var(--sheet-border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  position: relative;
}

.ttg-block.skills-block {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.ttg-block-title {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sheet-brass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(200, 166, 104, 0.12);
  padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   5. Column 1: Stats, Saves & Skills (.ttg-col-stats)
   -------------------------------------------------------------------------- */
.ttg-stats-v,
.ttg-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* 6 Ability Cards (.ttg-stat-box, .ttg-stat-card) */
.ttg-stat-box,
.ttg-stat-card {
  background: linear-gradient(180deg, #131c26 0%, #0d141d 100%);
  border: 1px solid rgba(200, 166, 104, 0.18);
  border-radius: 10px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.ttg-stat-box:hover,
.ttg-stat-card:hover {
  border-color: var(--sheet-brass);
  box-shadow: 0 0 14px var(--sheet-brass-glow), 0 4px 12px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}

.ttg-stat-roll {
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.ttg-stat-roll:hover {
  background: rgba(200, 166, 104, 0.08);
}

.ttg-stat-lbl {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--sheet-brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ttg-stat-mod {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: #f8fafc;
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.ttg-stat-val {
  font-size: 11.5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 600;
  color: var(--sheet-text-muted);
  background: rgba(8, 12, 17, 0.85);
  border: 1px solid rgba(200, 166, 104, 0.2);
  border-radius: var(--r-sm, 5px);
  padding: 1px 9px;
  margin-top: 2px;
}

/* Saves 2-Column Grid (.ttg-saves-card, .ttg-saves-2col) */
.ttg-saves-card {
  padding: 10px 12px;
}

.ttg-saves-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
}

.ttg-saves-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ttg-save-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: rgba(13, 20, 29, 0.65);
  border: 1px solid rgba(200, 166, 104, 0.1);
  transition: all 0.15s ease;
}

.ttg-save-item:hover {
  background: rgba(200, 166, 104, 0.08);
  border-color: rgba(200, 166, 104, 0.25);
}

.ttg-save-name {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ttg-save-item:hover .ttg-save-name {
  color: #f1f5f9;
}

.ttg-save-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--sheet-brass);
}

/* Proficiencies Card (.ttg-prof-card) */
.ttg-prof-card {
  padding: 8px 10px;
  gap: 6px;
}

.ttg-prof-sections {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ttg-prof-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.ttg-prof-sec {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ttg-prof-sub {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--sheet-brass);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.ttg-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.ttg-chip {
  background: rgba(18, 27, 38, 0.85);
  border: 1px solid rgba(200, 166, 104, 0.2);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  color: #e2e8f0;
  line-height: 1.25;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ttg-chip:hover {
  border-color: var(--sheet-accent);
  background: rgba(45, 212, 191, 0.12);
  color: #fff;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.3);
}

.ttg-chip-empty {
  font-size: 10.5px;
  color: var(--sheet-text-dim);
  font-style: italic;
}

.ttg-inline-inp.prof-inp {
  width: 100%;
  font-size: 11px;
  padding: 3px 6px;
  background: rgba(8, 12, 17, 0.85);
  border: 1px solid rgba(200, 166, 104, 0.25);
  border-radius: 5px;
  color: #e2e8f0;
  box-sizing: border-box;
}

/* Compact Hit Dice & Death Saves in Health Card */
.ttg-hit-dice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid rgba(200, 166, 104, 0.1);
}

.ttg-hd-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--sheet-text-muted);
}

.ttg-hit-dice-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--sheet-brass);
}

.ttg-death-saves-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px dashed rgba(200, 166, 104, 0.1);
}

.ttg-death-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sheet-text-muted);
}

.ttg-death-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.death-dots-inline {
  display: flex;
  align-items: center;
  gap: 3px;
}

.death-dots-inline .death-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #475569;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.death-dots-inline .death-dot.succ.active,
.death-dots-inline .death-dot.succ.on {
  background: var(--sheet-hp-ok);
  border-color: var(--sheet-hp-ok);
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
}

.death-dots-inline .death-dot.fail.active,
.death-dots-inline .death-dot.fail.on {
  background: var(--sheet-hp-crit);
  border-color: var(--sheet-hp-crit);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.death-sep {
  font-size: 10px;
  color: var(--sheet-text-dim);
}

.ttg-pill-sm {
  padding: 2px 7px !important;
  font-size: 10.5px !important;
}

/* Saves Row & List (.ttg-saves-list, .ttg-save-row) */
.ttg-saves-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ttg-save-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-top: 1px dashed rgba(200, 166, 104, 0.15);
  padding-top: 5px;
  width: 100%;
}

.ttg-save-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #4a5d70;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.ttg-save-dot:hover {
  border-color: var(--sheet-brass);
  transform: scale(1.2);
}

.ttg-save-dot.readonly,
.ttg-skill-dot.readonly,
span.ttg-save-dot,
span.ttg-skill-dot {
  cursor: default !important;
  pointer-events: none !important;
}

.ttg-save-dot.readonly:hover,
.ttg-skill-dot.readonly:hover,
span.ttg-save-dot:hover,
span.ttg-skill-dot:hover {
  transform: none !important;
  border-color: inherit;
}

.ttg-save-dot.on,
.ttg-save-dot.active {
  background: var(--sheet-brass);
  border-color: var(--sheet-brass);
  box-shadow: 0 0 8px var(--sheet-brass-glow);
}

.ttg-save-btn {
  background: transparent;
  border: none;
  color: #cbd5e1;
  font-size: 11.5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.ttg-save-btn:hover {
  color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.12);
}

/* 18 Skills List (.ttg-skills-list) */
.ttg-skills-list {
  display: flex;
  flex-direction: column;
  gap: 1.5px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 2px;
}

.ttg-skill-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1.5px 4px;
  font-size: 12px;
  border-radius: 5px;
  transition: background 0.15s ease;
}

.ttg-skill-row:hover {
  background: rgba(200, 166, 104, 0.07);
}

.ttg-skill-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid #4a5d70;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.2s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  line-height: 1;
}

.ttg-skill-dot:hover {
  border-color: var(--sheet-brass);
  transform: scale(1.2);
}

/* 0 = empty, 1 = proficient, 2 = expertise */
.ttg-skill-dot.on,
.ttg-skill-dot[data-prof="1"] {
  background: var(--sheet-brass);
  border-color: var(--sheet-brass);
  box-shadow: 0 0 8px var(--sheet-brass-glow);
}

.ttg-skill-dot.expert,
.ttg-skill-dot[data-prof="2"] {
  background: var(--sheet-accent);
  border-color: #5eead4;
  box-shadow: 0 0 10px var(--sheet-accent-glow);
}

.ttg-skill-dot.expert::after,
.ttg-skill-dot[data-prof="2"]::after {
  content: '★';
  color: #0b1016;
  font-size: 8px;
  font-weight: 900;
}

.ttg-skill-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  color: #cbd5e1;
  padding: 1.5px 4px;
  border-radius: 5px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  transition: all 0.15s ease;
}

.ttg-skill-btn:hover {
  color: #fff;
}

.ttg-skill-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ttg-skill-stat {
  font-size: 9.5px;
  color: var(--sheet-text-dim);
  font-weight: 600;
  min-width: 26px;
  text-transform: uppercase;
}

.ttg-skill-mod {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  color: var(--sheet-brass);
  min-width: 28px;
  text-align: right;
  font-size: 13px;
}

.ttg-skill-passive {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  background: rgba(6, 10, 15, 0.7);
  border: 1px solid rgba(200, 166, 104, 0.15);
  border-radius: 4px;
  padding: 0 4px;
  min-width: 20px;
  text-align: center;
  margin-left: 4px;
  transition: all 0.15s ease;
}

.ttg-skill-btn:hover .ttg-skill-passive {
  color: var(--sheet-accent);
  border-color: rgba(45, 212, 191, 0.4);
}

/* --------------------------------------------------------------------------
   6. Column 2: Combat, Vitals, HP Hub & Weapons (.ttg-col-combat)
   -------------------------------------------------------------------------- */

/* Vitals Row (.ttg-vitals-row) */
.ttg-vitals-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ttg-metric-badge {
  background: linear-gradient(180deg, #131c26 0%, #0d141d 100%);
  border: 1px solid rgba(200, 166, 104, 0.2);
  border-radius: 10px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.ttg-metric-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.ttg-metric-badge .lbl {
  font-size: 9.5px;
  color: var(--sheet-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Shield Styling for Armor Class */
.ttg-metric-badge.ac {
  border-color: rgba(56, 189, 248, 0.4);
  background: radial-gradient(circle at center top, rgba(56, 189, 248, 0.12) 0%, #0d141d 75%);
}

.ttg-metric-badge.ac .lbl {
  color: #38bdf8;
}

.ttg-metric-badge.ac .val {
  color: #e0f2fe;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.ttg-metric-badge.init {
  border-color: rgba(245, 158, 11, 0.35);
}
.ttg-metric-badge.init .lbl { color: #f59e0b; }

.ttg-metric-badge.spd {
  border-color: rgba(46, 204, 113, 0.35);
}
.ttg-metric-badge.spd .lbl { color: var(--sheet-hp-ok); }

.ttg-metric-badge.pb {
  border-color: rgba(200, 166, 104, 0.35);
}
.ttg-metric-badge.pb .lbl { color: var(--sheet-brass); }

.ttg-metric-badge .val {
  font-size: 19px;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: #f8fafc;
}

.ttg-metric-badge .val-btn {
  background: #162230;
  border: 1px solid rgba(200, 166, 104, 0.3);
  border-radius: 7px;
  color: #f8fafc;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 16px;
  font-weight: 700;
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ttg-metric-badge .val-btn:hover {
  border-color: var(--sheet-brass);
  color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.15);
  box-shadow: 0 0 10px var(--sheet-brass-glow);
}

/* HP Hub & Card (.ttg-hp-hub, .ttg-hp-card) */
.ttg-hp-card {
  padding: 8px 10px;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

.ttg-hp-hub {
  background: linear-gradient(180deg, #131c26 0%, #0c131d 100%);
  border: 1px solid rgba(200, 166, 104, 0.22);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.ttg-hp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ttg-hp-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sheet-text-muted);
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ttg-hp-numbers {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ttg-hp-numbers .cur {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1;
}

.ttg-hp-numbers .sep {
  color: var(--sheet-text-dim);
  font-size: 13px;
}

.ttg-hp-numbers .max {
  font-size: 12px;
  color: var(--sheet-text-muted);
}

.ttg-hp-numbers .tmp {
  font-size: 10.5px;
  color: #38bdf8;
  margin-left: 6px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.12);
  padding: 0 4px;
  border-radius: var(--r-sm, 5px);
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ttg-hp-bar-wrap {
  height: 6px;
  margin: 1px 0 3px;
  background: #080d12;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.ttg-hp-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

/* HP Quick Grid (Row 1) & Custom Row (Row 2) */
.ttg-hp-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
}

.ttg-hp-custom-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
}

.ttg-hp-apply-inp {
  flex: 1;
  min-width: 0;
  height: 26px;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  box-sizing: border-box;
}

.ttg-btn-dmg,
.ttg-btn-heal {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  white-space: nowrap;
}

/* HP Quick Adjustment & Unified Actions */
.ttg-hp-quick-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.ttg-hp-unified-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ttg-hp-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #0d141d;
  border: 1px solid rgba(200, 166, 104, 0.25);
  border-radius: 7px;
  padding: 2px 4px;
}

.ttg-hp-input-group .ttg-hp-apply-inp {
  width: 44px;
  border: none;
  background: transparent;
  color: #f8fafc;
  padding: 1px 0;
  font-size: 13px;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
}

.ttg-hp-input-group .ttg-hp-apply-inp:focus {
  outline: none;
}

.ttg-hp-input-group .ttg-hp-btn {
  padding: 2px 7px;
  font-size: 12px;
}

.ttg-hp-apply-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.ttg-hp-btn {
  background: #141f2c;
  border: 1px solid var(--sheet-border);
  border-radius: 7px;
  padding: 4px 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.ttg-hp-btn:hover {
  transform: translateY(-1px);
}

.ttg-hp-btn.dmg:hover,
.ttg-btn-dmg:hover {
  border-color: var(--sheet-hp-crit);
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.18);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.35);
}

.ttg-hp-btn.heal:hover,
.ttg-btn-heal:hover {
  border-color: var(--sheet-hp-ok);
  color: #86efac;
  background: rgba(46, 204, 113, 0.18);
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.35);
}

/* Compact Two-Row Hit Dice & Death Saves Box (.ttg-hd-ds-box) */
.ttg-hd-ds-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid rgba(200, 166, 104, 0.15);
}

.ttg-hd-row,
.ttg-ds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  font-size: 11px;
}

.ttg-hd-info,
.ttg-ds-info {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.ttg-hd-lbl,
.ttg-ds-lbl {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sheet-text-muted);
  white-space: nowrap;
}

.ttg-hit-dice-val,
.ttg-hd-ds-box .ttg-hit-dice-val {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--sheet-brass);
}

/* Миниатюрные аккуратные точки спасов */
.death-dots-inline {
  display: flex;
  align-items: center;
  gap: 3px;
}

.death-dots-inline .death-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #475569;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.death-dots-inline .death-dot.succ.on,
.death-dots-inline .death-dot.succ.active {
  background: var(--sheet-hp-ok);
  border-color: var(--sheet-hp-ok);
  box-shadow: 0 0 5px rgba(46, 204, 113, 0.7);
}

.death-dots-inline .death-dot.fail.on,
.death-dots-inline .death-dot.fail.active {
  background: var(--sheet-hp-crit);
  border-color: var(--sheet-hp-crit);
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.7);
}

.death-sep {
  font-size: 9px;
  color: var(--sheet-text-dim);
}

/* Кнопки-пилюли микро-размера */
.ttg-pill-xs {
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Опасность при 0 HP */
.ttg-ds-row.ttg-ds-danger {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  padding: 2px 4px;
}

/* Hit Dice & Death Saves (.ttg-hit-dice-box, .ttg-death-saves) */
.ttg-combat-aux-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ttg-hit-dice-box,
.ttg-death-saves {
  background: #111b26;
  border: 1px solid var(--sheet-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.ttg-hit-dice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ttg-hit-dice-row .ttg-hit-dice-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
}

/* Death Saves Tracker */
.death-saves-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}

.death-saves-row .lbl {
  color: var(--sheet-text-muted);
  font-weight: 600;
}

.death-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.death-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid #4a5d70;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.death-dot:hover {
  transform: scale(1.25);
}

.death-dot.succ.active,
.death-dot.succ.on {
  background: var(--sheet-hp-ok);
  border-color: var(--sheet-hp-ok);
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
}

.death-dot.fail.active,
.death-dot.fail.on {
  background: var(--sheet-hp-crit);
  border-color: var(--sheet-hp-crit);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

/* --------------------------------------------------------------------------
   Class Unique Resources Card (.ttg-resources-card)
   -------------------------------------------------------------------------- */
.ttg-resources-card {
  background: linear-gradient(180deg, #131c26 0%, #0d151f 100%);
  border: 1px solid rgba(200, 166, 104, 0.22);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.ttg-res-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: rgba(9, 14, 20, 0.65);
  border: 1px solid rgba(200, 166, 104, 0.12);
  border-radius: 8px;
  padding: 6px 8px;
}

.ttg-res-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ttg-res-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.ttg-res-die-badge {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  color: var(--sheet-accent, #2dd4bf);
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 4px;
  padding: 0 4px;
}

.ttg-res-roll-btn {
  background: transparent;
  border: 1px solid rgba(200, 166, 104, 0.3);
  border-radius: 4px;
  color: var(--sheet-brass);
  cursor: pointer;
  font-size: 11px;
  padding: 1px 5px;
  transition: all 0.15s ease;
}

.ttg-res-roll-btn:hover {
  background: rgba(200, 166, 104, 0.2);
  transform: scale(1.08);
}

.ttg-res-dots-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 2px 0;
}

.ttg-res-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #4a5d70;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.ttg-res-dot:hover {
  border-color: var(--sheet-accent, #2dd4bf);
  transform: scale(1.15);
}

.ttg-res-dot.active {
  background: var(--sheet-accent, #2dd4bf);
  border-color: #5eead4;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.6);
}

.ttg-res-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ttg-res-step-btn {
  background: #141f2c;
  border: 1px solid var(--sheet-border);
  border-radius: 5px;
  color: #cbd5e1;
  cursor: pointer;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  transition: all 0.15s ease;
}

.ttg-res-step-btn:hover {
  border-color: var(--sheet-brass);
  color: #fff;
  background: rgba(200, 166, 104, 0.15);
}

.ttg-res-val {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.ttg-res-max {
  font-size: 11px;
  color: var(--sheet-text-muted);
}

/* Weapons List (.ttg-weapons-list, .weapons-list, .weapons-section) */
.ttg-weapons-list,
.weapons-list,
.weapons-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.weapons-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.weapons-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--sheet-brass);
  letter-spacing: 0.08em;
}

.weapon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, #131c26 0%, #0d141e 100%);
  border: 1px solid rgba(200, 166, 104, 0.16);
  border-radius: 10px;
  padding: 9px 12px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.weapon-card:hover {
  border-color: rgba(200, 166, 104, 0.35);
  box-shadow: 0 0 12px rgba(200, 166, 104, 0.15);
  transform: translateY(-1px);
}

.weapon-info {
  flex: 1;
  min-width: 0;
}

.weapon-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weapon-sub {
  font-size: 11.5px;
  color: var(--sheet-text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weapon-rolls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.weapon-btn {
  background: #141f2c;
  border: 1px solid #283a4f;
  border-radius: 7px;
  padding: 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-width: 60px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.weapon-btn:hover {
  transform: translateY(-1px);
}

.weapon-btn.atk:hover {
  border-color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

.weapon-btn.atk .wlbl {
  color: #38bdf8;
}

.weapon-btn.dmg:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

.weapon-btn.dmg .wlbl {
  color: #f59e0b;
}

.weapon-btn .wlbl {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--sheet-text-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.weapon-btn .wval {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
}

.weapon-del {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.15s ease;
}

.weapon-del:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.weapon-add-box {
  background: #0f1822;
  border: 1px dashed rgba(200, 166, 104, 0.4);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   7. Column 3: Tabs Navigation & Tab Body (.ttg-col-tabs, .ttg-right)
   -------------------------------------------------------------------------- */
.ttg-col.ttg-right,
.ttg-col-tabs {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.ttg-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  border-bottom: 1px solid var(--sheet-border);
  padding-bottom: 6px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.ttg-tabs::-webkit-scrollbar {
  display: none;
}

.ttg-tab,
.ttg-tab-btn {
  background: rgba(17, 27, 38, 0.85);
  border: 1px solid var(--sheet-border);
  border-radius: 6px;
  color: var(--sheet-text-muted);
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 4px 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ttg-tab:hover,
.ttg-tab-btn:hover {
  color: #f8fafc;
  border-color: rgba(200, 166, 104, 0.35);
  background: #141f2c;
  transform: translateY(-1px);
}

.ttg-tab.active,
.ttg-tab-btn.active {
  background: #1e2b38;
  border-color: var(--sheet-brass);
  color: var(--sheet-brass);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(200, 166, 104, 0.25);
}

.ttg-tabbody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

/* --- Tab: Spells & Accordion --- */
.spells-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spells-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.spells-stat-badge {
  flex: 1 1 120px;
  background: #0f1822;
  border: 1px solid var(--sheet-border);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12px;
  color: #cbd5e1;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.spells-stat-badge.prep-badge {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.12) 0%, rgba(15, 24, 34, 0.95) 100%);
  border-color: rgba(200, 166, 104, 0.35);
  color: #f1f5f9;
}

.spells-stat-badge.prep-badge b {
  color: var(--sheet-brass-bright, #dfbe7d);
}

.spells-stat-badge.edit-mode {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spells-stat-badge.rollable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.spells-stat-badge.rollable:hover {
  border-color: var(--sheet-spell);
  color: #e0e7ff;
  background: rgba(129, 140, 248, 0.12);
  box-shadow: 0 0 12px var(--sheet-spell-glow);
}

.spell-levels-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.spell-level-group {
  border: 1px solid var(--sheet-border);
  border-radius: 10px;
  overflow: hidden;
  background: #0f1822;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.spell-level-group.open {
  border-color: rgba(129, 140, 248, 0.35);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.spell-level-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: #141f2c;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.spell-level-header:hover {
  background: #1a2838;
}

.spell-level-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spell-level-chevron {
  color: var(--sheet-brass);
  font-size: 12px;
  width: 14px;
  text-align: center;
}

.spell-level-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
}

.spell-count-tag {
  font-size: 11px;
  background: var(--sheet-bg, #090d14);
  color: var(--sheet-text-muted);
  padding: 1px 7px;
  border-radius: var(--r-sm, 5px);
  border: 1px solid var(--sheet-border);
}

.spell-slot-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Spell Slot Bubbles (Violet Glow / Dimmed Spent) */
.spell-slot-bubbles {
  display: flex;
  align-items: center;
  gap: 6px;
}

.spell-slot-bubble {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--sheet-spell);
  background: var(--sheet-spell);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 8px var(--sheet-spell-glow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.spell-slot-bubble:hover {
  transform: scale(1.25);
  box-shadow: 0 0 12px rgba(129, 140, 248, 0.9);
}

.spell-slot-bubble.spent {
  background: transparent;
  border-color: #475569;
  box-shadow: none;
  transform: none;
}

.spell-slot-bubble.ready {
  background: var(--sheet-spell);
  border-color: #a5b4fc;
}

.spell-slot-ctrl-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid #334960;
  background: #111b26;
  color: var(--sheet-brass);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s ease;
}

.spell-slot-ctrl-btn:hover {
  background: var(--sheet-brass);
  color: #0b1118;
  border-color: var(--sheet-brass);
}

.spell-level-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(11, 17, 24, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.spell-empty-hint {
  font-size: 11.5px;
  font-style: italic;
  color: var(--sheet-text-muted);
  padding: 4px 0;
}

.spell-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(18, 27, 38, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 7px 10px;
  gap: 10px;
  transition: all 0.15s ease;
}

.spell-row:hover {
  background: rgba(22, 34, 48, 0.9);
  border-color: rgba(200, 166, 104, 0.25);
  transform: translateX(2px);
}

.spell-row.unprepared {
  opacity: 0.6;
}

.spell-row.unprepared:hover {
  opacity: 0.9;
}

.spell-prep-star {
  background: transparent;
  border: none;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  border-radius: 4px;
}

.spell-prep-star.is-prepared {
  color: var(--sheet-brass-bright, #dfbe7d);
  text-shadow: 0 0 8px rgba(223, 190, 125, 0.6);
}

.spell-prep-star.is-unprepared {
  color: rgba(148, 163, 184, 0.4);
}

.spell-prep-star:hover {
  transform: scale(1.25);
  color: var(--sheet-brass-bright, #dfbe7d);
}

.spell-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.spell-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #f8fafc;
}

.spell-name-text {
  font-weight: 600;
  color: #f8fafc;
}

.spell-icon {
  font-size: 12px;
  color: var(--sheet-spell);
}

.spell-icon-img {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(200, 166, 104, 0.25);
  background: rgba(10, 15, 22, 0.6);
  vertical-align: middle;
}

.spell-row-info {
  font-size: 11px;
  color: var(--sheet-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Warlock Pact Magic Box */
.warlock-pact-box {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.25) 0%, rgba(30, 27, 75, 0.4) 100%);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 0 15px rgba(168, 85, 247, 0.1);
  margin-bottom: 4px;
}

.warlock-pact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.warlock-pact-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.warlock-pact-icon {
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}

.warlock-pact-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.warlock-pact-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: #e9d5ff;
  letter-spacing: 0.02em;
}

.warlock-pact-desc {
  font-size: 12px;
  color: #c084fc;
}

.warlock-rest-btn {
  background: rgba(220, 38, 38, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.warlock-rest-btn:hover {
  background: rgba(220, 38, 38, 0.35) !important;
  border-color: #ef4444 !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

.warlock-pact-slots {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 23, 42, 0.4);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.pact-bubbles .pact-bubble {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #a855f7;
  background: #a855f7;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pact-bubbles .pact-bubble:hover {
  transform: scale(1.18);
  box-shadow: 0 0 14px rgba(192, 132, 252, 0.9);
}

.pact-bubbles .pact-bubble.spent {
  background: rgba(15, 23, 42, 0.7);
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: none;
}

.warlock-pact-hint {
  font-size: 11px;
  color: #94a3b8;
  font-style: italic;
}

/* Empty Spellcaster Class Placeholder */
.spells-empty-class-box {
  background: linear-gradient(180deg, #131c27 0%, #0c1219 100%);
  border: 1px dashed rgba(200, 166, 104, 0.3);
  border-radius: 14px;
  padding: 36px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.spells-empty-class-icon {
  font-size: 32px;
  filter: drop-shadow(0 0 10px rgba(200, 166, 104, 0.4));
}

.spells-empty-class-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--sheet-brass-bright, #dfbe7d);
}

.spells-empty-class-desc {
  max-width: 440px;
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
}

.spells-empty-class-actions {
  margin-top: 6px;
}

.spell-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.spell-roll-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid rgba(129, 140, 248, 0.4);
  background: rgba(129, 140, 248, 0.12);
  color: #c7d2fe;
  cursor: pointer;
  transition: all 0.15s ease;
}

.spell-roll-btn:hover {
  background: var(--sheet-spell);
  color: #0b1016;
  border-color: var(--sheet-spell);
  box-shadow: 0 0 10px var(--sheet-spell-glow);
}

.spell-del-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s ease;
}

.spell-del-btn:hover {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

.spell-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
}

.spell-add-row input {
  flex: 1 1 120px;
  min-width: 90px;
}

.spell-add-name {
  flex: 2 1 150px !important;
}

.spell-add-dmg {
  flex: 1 1 80px !important;
}

.spell-add-info {
  flex: 2 1 150px !important;
}

/* --- Features Tab (.ttg-features-list, .features-section, .ttg-feature-card) --- */
.ttg-features-list,
.features-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ttg-feature-card {
  background: #111b26;
  border: 1px solid var(--sheet-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.15s ease;
}

.ttg-feature-card.collapsed {
  padding: 6px 10px;
}

.ttg-feature-card.open {
  border-color: rgba(200, 166, 104, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ttg-feature-card:hover {
  border-color: rgba(200, 166, 104, 0.3);
}

.ttg-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
  border-radius: 6px;
  padding: 3px 4px;
}

.ttg-feature-head:hover {
  background: rgba(200, 166, 104, 0.08);
}

.ttg-feature-name {
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.ttg-feature-source {
  font-size: 10.5px;
  color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.1);
  border: 1px solid rgba(200, 166, 104, 0.25);
  border-radius: var(--r-sm, 5px);
  padding: 1px 7px;
}

.ttg-feature-desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: #cbd5e1;
}

/* --- Subtabs (.ttg-subtabs, .ttg-subtab-btn) --- */
.ttg-subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.ttg-subtab-btn {
  background: rgba(14, 23, 33, 0.85);
  border: 1px solid var(--sheet-border);
  border-radius: 6px;
  color: var(--sheet-text-muted);
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.ttg-subtab-btn:hover {
  color: #f8fafc;
  border-color: rgba(200, 166, 104, 0.35);
  background: #141f2c;
  transform: translateY(-1px);
}

.ttg-subtab-btn.active {
  background: #1e2b38;
  border-color: var(--sheet-brass);
  color: var(--sheet-brass);
  font-weight: 700;
  box-shadow: 0 0 8px rgba(200, 166, 104, 0.25);
}

.ttg-feature-cat-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
}

.ttg-feature-cat-badge.class {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.ttg-feature-cat-badge.race {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.ttg-feature-cat-badge.feat {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.ttg-feature-cat-badge.story {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* --- Inventory & Gear Sections --- */
.ttg-currency-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: linear-gradient(180deg, #111a26 0%, #0a111a 100%);
  border: 1px solid var(--sheet-border);
  border-radius: 9px;
  padding: 6px 10px;
  gap: 8px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.ttg-currency-bar .coin-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px;
  border-radius: 6px;
}

.ttg-currency-bar .coin-name {
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.ttg-currency-bar .coin-cell.cp .coin-name { color: #d97706; }
.ttg-currency-bar .coin-cell.sp .coin-name { color: #cbd5e1; }
.ttg-currency-bar .coin-cell.ep .coin-name { color: #38bdf8; }
.ttg-currency-bar .coin-cell.gp .coin-name { color: #fbbf24; text-shadow: 0 0 6px rgba(251, 191, 36, 0.35); }
.ttg-currency-bar .coin-cell.pp .coin-name { color: #c084fc; }

.ttg-currency-bar .coin-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.ttg-currency-bar .coin-inp {
  width: 48px;
  padding: 2px 4px;
  font-size: 12px;
  text-align: center;
}

.ttg-currency-bar .coin-sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.gear-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-body, 'Figtree', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sheet-brass);
  padding: 4px 2px 3px;
  border-bottom: 1px solid rgba(200, 166, 104, 0.2);
  margin-top: 4px;
  margin-bottom: 4px;
}

.gear-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #121c27 0%, #0d141e 100%);
  border: 1px solid var(--sheet-border);
  border-radius: 8px;
  padding: 7px 12px;
  gap: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
}

.gear-item-card:hover {
  border-color: rgba(200, 166, 104, 0.45);
  box-shadow: 0 0 10px rgba(200, 166, 104, 0.15), 0 3px 8px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

.gear-item-card.is-unequipped {
  opacity: 0.72;
}

.gear-item-card.is-unequipped:hover {
  opacity: 0.95;
}

.gear-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gear-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.gear-item-icon {
  font-size: 15px;
  line-height: 1;
}

.gear-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
}

.gear-item-cat {
  font-size: 10px;
  font-weight: 600;
  color: var(--sheet-text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
}

.gear-item-sub {
  font-size: 11px;
  color: var(--sheet-text-muted);
  line-height: 1.35;
}

.gear-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gear-equip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(14, 23, 33, 0.85);
  border: 1px solid var(--sheet-border);
  border-radius: 20px;
  padding: 3px 9px;
  color: var(--sheet-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.gear-equip-btn .gear-equip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #475569;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: all 0.2s ease;
}

.gear-equip-btn.active,
.gear-equip-btn.equipped {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

.gear-equip-btn.active .gear-equip-dot,
.gear-equip-btn.equipped .gear-equip-dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

.gear-equip-btn:hover {
  border-color: var(--sheet-brass);
  color: #f8fafc;
}

.ttg-qty-picker {
  display: inline-flex;
  align-items: center;
  background: rgba(10, 16, 24, 0.9);
  border: 1px solid var(--sheet-border);
  border-radius: 6px;
  overflow: hidden;
}

.ttg-qty-picker .ttg-qty-btn {
  background: transparent;
  border: none;
  color: var(--sheet-text-muted);
  font-size: 12px;
  font-weight: 700;
  width: 22px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.ttg-qty-picker .ttg-qty-btn:hover {
  background: rgba(200, 166, 104, 0.15);
  color: var(--sheet-brass);
}

.ttg-qty-picker .ttg-qty-val {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
  min-width: 20px;
  text-align: center;
  padding: 0 3px;
}

/* --- Conditions Grid in Effects Tab --- */
.ttg-conds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ttg-cond-card {
  background: linear-gradient(180deg, #111a26 0%, #0d141e 100%);
  border: 1px solid var(--sheet-border);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.ttg-cond-card:hover {
  border-color: rgba(200, 166, 104, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.ttg-cond-card.active {
  background: linear-gradient(180deg, #1a2332 0%, #111b27 100%);
  border-color: var(--sheet-brass);
  box-shadow: 0 0 10px rgba(200, 166, 104, 0.3), inset 0 0 12px rgba(200, 166, 104, 0.1);
}

.ttg-cond-card.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--sheet-brass);
  box-shadow: 0 0 6px var(--sheet-brass);
}

.ttg-cond-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ttg-cond-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #f8fafc;
}

.ttg-cond-card.active .ttg-cond-title {
  color: var(--sheet-brass);
}

.ttg-cond-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #334155;
  transition: all 0.2s ease;
}

.ttg-cond-card.active .ttg-cond-status-dot {
  background: var(--sheet-brass);
  box-shadow: 0 0 6px var(--sheet-brass);
}

.ttg-cond-desc {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--sheet-text-muted);
}

.ttg-items-list,
.inventory-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ttg-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #111b26;
  border: 1px solid var(--sheet-border);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 10px;
}

.ttg-item-qty {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  color: var(--sheet-brass);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   8. Inline Inputs in Gear Edit Mode (.sheet-edit-mode .ttg-inline-inp)
   -------------------------------------------------------------------------- */
.ttg-inline-inp {
  background: rgba(15, 24, 34, 0.95);
  border: 1px solid rgba(200, 166, 104, 0.35);
  border-radius: 6px;
  color: #f8fafc;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  outline: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ttg-inline-inp:focus {
  border-color: var(--sheet-accent);
  box-shadow: 0 0 10px var(--sheet-accent-glow);
}

.ttg-inline-inp.name-inp {
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  width: 100%;
  max-width: 320px;
  padding: 4px 10px;
}

.ttg-inline-inp.sub-inp {
  width: 110px;
  font-size: 12px;
}

.ttg-inline-inp.lvl-inp {
  width: 60px;
  font-size: 12px;
  text-align: center;
}

.ttg-inline-inp.stat-inp {
  width: 48px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 4px;
}

.ttg-inline-inp.metric-inp {
  width: 52px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 4px;
}

.ttg-inline-inp.hp-inp {
  width: 58px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 4px;
}

.ttg-inline-inp.ava-url-inp {
  width: 190px;
  font-size: 11.5px;
}

.ttg-inline-inp.spell-stat-sel {
  padding: 2px 6px;
  font-size: 12px;
}

/* Mini Color Picker */
.ttg-color-picker-mini {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 4px;
}

.ttg-color-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ttg-color-btn:hover {
  transform: scale(1.25);
  border-color: #fff;
}

.ttg-color-btn.active {
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
  transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   9. Form Grid & Utilities (.fgrid, .field, .dots)
   -------------------------------------------------------------------------- */
.ttg-tabbody .fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ttg-tabbody .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ttg-tabbody .field.two,
.ttg-tabbody .field.wide,
.ttg-tabbody .wide {
  grid-column: span 2;
}

.ttg-tabbody .field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--sheet-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ttg-tabbody textarea.inp {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.ttg-tabbody .dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ttg-tabbody .dots button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.ttg-tabbody .dots button:hover {
  transform: scale(1.2);
}

.ttg-tabbody .dots button[aria-pressed="true"] {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.ttg-tabbody .chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #cbd5e1;
  cursor: pointer;
}

.ttg-tabbody .hint {
  font-size: 12px;
  color: var(--sheet-text-muted);
  font-style: italic;
}

.ttg-tabbody .empty {
  background: rgba(15, 24, 34, 0.5);
  border: 1px dashed var(--sheet-border);
  border-radius: 10px;
  padding: 18px;
  color: var(--sheet-text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Slim Elegant Scrollbars
   -------------------------------------------------------------------------- */
.ttg-col::-webkit-scrollbar,
.ttg-col-stats::-webkit-scrollbar,
.ttg-col-combat::-webkit-scrollbar,
.ttg-col-tabs::-webkit-scrollbar,
.ttg-skills-list::-webkit-scrollbar,
.ttg-tabbody::-webkit-scrollbar {
  width: 5px;
}

.ttg-col::-webkit-scrollbar-track,
.ttg-col-stats::-webkit-scrollbar-track,
.ttg-col-combat::-webkit-scrollbar-track,
.ttg-col-tabs::-webkit-scrollbar-track,
.ttg-skills-list::-webkit-scrollbar-track,
.ttg-tabbody::-webkit-scrollbar-track {
  background: rgba(11, 16, 22, 0.5);
  border-radius: 4px;
}

.ttg-col::-webkit-scrollbar-thumb,
.ttg-col-stats::-webkit-scrollbar-thumb,
.ttg-col-combat::-webkit-scrollbar-thumb,
.ttg-col-tabs::-webkit-scrollbar-thumb,
.ttg-skills-list::-webkit-scrollbar-thumb,
.ttg-tabbody::-webkit-scrollbar-thumb {
  background: #22303f;
  border-radius: 4px;
}

.ttg-col::-webkit-scrollbar-thumb:hover,
.ttg-col-stats::-webkit-scrollbar-thumb:hover,
.ttg-col-combat::-webkit-scrollbar-thumb:hover,
.ttg-col-tabs::-webkit-scrollbar-thumb:hover,
.ttg-skills-list::-webkit-scrollbar-thumb:hover,
.ttg-tabbody::-webkit-scrollbar-thumb:hover {
  background: var(--sheet-brass);
}

/* --------------------------------------------------------------------------
   11. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .sheet-modal-card {
    width: 98vw;
    height: 96vh;
    border-radius: 12px;
  }
  .ttg-stats-bar {
    grid-template-columns: repeat(3, 1fr);
  }
  .ttg-cols {
    grid-template-columns: 1fr;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .ttg-block.skills-block {
    flex: none;
    height: 380px;
  }
}

@media (max-width: 600px) {
  .ttg-stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   12. D&D 2024 Weapon Mastery & Compendium Spell Picker
   -------------------------------------------------------------------------- */
.ttg-weapon-mastery-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.15) 0%, rgba(223, 190, 125, 0.08) 100%);
  border: 1px solid rgba(200, 166, 104, 0.45);
  color: var(--sheet-brass-bright, #dfbe7d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 7px;
  border-radius: var(--r-sm, 5px);
  cursor: help;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.ttg-weapon-mastery-badge:hover {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.28) 0%, rgba(223, 190, 125, 0.18) 100%);
  border-color: rgba(223, 190, 125, 0.8);
  box-shadow: 0 0 8px rgba(200, 166, 104, 0.4);
  transform: translateY(-1px);
}

.ttg-btn-compendium {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid rgba(200, 166, 104, 0.35);
  color: var(--sheet-brass, #c8a668);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.ttg-btn-compendium:hover {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.2) 0%, rgba(30, 41, 59, 0.9) 100%);
  border-color: var(--sheet-brass, #c8a668);
  color: #fff;
  box-shadow: 0 0 10px rgba(200, 166, 104, 0.3);
}

/* Compendium Picker Overlay & Modal */
.ttg-compendium-picker-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 12, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: sheetModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ttg-compendium-picker {
  background: #101721;
  border: 1px solid rgba(200, 166, 104, 0.35);
  border-radius: 14px;
  width: 100%;
  max-width: 660px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  box-shadow: 
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 30px rgba(200, 166, 104, 0.12);
  overflow: hidden;
}

.ttg-picker-sticky-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #101721;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(200, 166, 104, 0.18);
}

.ttg-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, #16202c 0%, #101721 100%);
}

.ttg-picker-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--sheet-brass-bright, #dfbe7d);
  letter-spacing: 0.04em;
}

.ttg-picker-close {
  background: transparent;
  border: none;
  color: var(--sheet-text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.ttg-picker-close:hover {
  color: #fff;
  transform: scale(1.1);
}

.ttg-picker-search-bar {
  padding: 12px 18px 8px;
  background: #101721;
}

.ttg-picker-search {
  width: 100%;
  background: #090e15;
  border: 1px solid #233140;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: #f8fafc;
  outline: none;
  transition: all 0.2s ease;
}

.ttg-picker-search:focus {
  border-color: var(--sheet-brass);
  box-shadow: 0 0 8px rgba(200, 166, 104, 0.3);
}

.ttg-picker-level-filters {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 18px 12px;
  overflow-x: auto;
}

.ttg-filter-pill {
  background: #16222f;
  border: 1px solid var(--sheet-border, var(--line));
  color: var(--sheet-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-sm, 5px);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.ttg-filter-pill:hover {
  border-color: rgba(200, 166, 104, 0.4);
  color: #f8fafc;
}

.ttg-filter-pill.active {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.3) 0%, rgba(200, 166, 104, 0.15) 100%);
  border-color: var(--sheet-brass);
  color: var(--sheet-brass-bright, #dfbe7d);
  box-shadow: 0 0 8px rgba(200, 166, 104, 0.25);
}

.ttg-picker-list {
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 52vh;
}

.ttg-picker-empty {
  text-align: center;
  padding: 30px;
  color: var(--sheet-text-dim);
  font-size: 13.5px;
}

.ttg-spell-card {
  background: linear-gradient(180deg, #141e2a 0%, #0d141d 100%);
  border: 1px solid rgba(200, 166, 104, 0.15);
  border-radius: 9px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: all 0.2s ease;
}

.ttg-spell-card:hover {
  border-color: rgba(200, 166, 104, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.ttg-spell-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ttg-spell-title-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ttg-spell-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #f8fafc;
}

.ttg-spell-name-en {
  font-size: 12px;
  font-weight: 400;
  color: var(--sheet-text-muted);
  font-style: italic;
}

.ttg-spell-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.ttg-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.4;
}

.ttg-badge-lvl {
  background: rgba(129, 140, 248, 0.15);
  border: 1px solid rgba(129, 140, 248, 0.35);
  color: #a5b4fc;
}

.ttg-badge-school {
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: #5eead4;
}

.ttg-badge-dmg {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-family: 'JetBrains Mono', monospace;
}

.ttg-spell-meta {
  font-size: 11.5px;
  color: var(--sheet-text-muted);
}

.ttg-spell-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 9px;
  border-radius: 5px;
  border-left: 2px solid rgba(200, 166, 104, 0.4);
}

.ttg-spell-higher {
  font-size: 11.5px;
  color: #e2e8f0;
  line-height: 1.4;
  background: rgba(200, 166, 104, 0.08);
  padding: 5px 9px;
  border-radius: 5px;
  border-left: 2px solid rgba(200, 166, 104, 0.7);
  margin-top: 4px;
}

.ttg-spell-higher strong {
  color: #f1c40f;
}

.ttg-add-spell-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Magic Items Compendium & Rarity Badges */
.ttg-badge.rarity-common {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

.ttg-badge.rarity-uncommon {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.ttg-badge.rarity-rare {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.ttg-badge.rarity-very-rare {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

.ttg-badge.rarity-legendary {
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.45);
  color: #fb923c;
}

.ttg-badge.rarity-artifact {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

.ttg-badge.rarity-varies {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.ttg-badge-type {
  background: rgba(100, 116, 139, 0.15);
  border: 1px solid rgba(100, 116, 139, 0.35);
  color: #94a3b8;
}

.ttg-badge-attunement {
  background: rgba(217, 119, 6, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fcd34d;
}

.ttg-badge-cost {
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #facc15;
}

.ttg-magic-item-card {
  background: linear-gradient(180deg, #141e2a 0%, #0d141d 100%);
  border: 1px solid rgba(200, 166, 104, 0.15);
  border-radius: 9px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.2s ease;
}

.ttg-magic-item-card:hover {
  border-color: rgba(200, 166, 104, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

/* Class Filter Checkbox & Spell Picker Controls */
.ttg-class-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
}

.ttg-class-filter-label input[type="checkbox"] {
  accent-color: var(--sheet-brass, #c8a668);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.ttg-class-filter-label b {
  color: var(--sheet-brass-bright, #dfbe7d);
}

/* Spell Card Availability & Disabled States */
.ttg-spell-card.spell-card-unavailable {
  opacity: 0.6;
  filter: grayscale(0.25);
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(255, 255, 255, 0.06);
}

.ttg-spell-card.spell-card-unavailable:hover {
  opacity: 0.85;
  filter: none;
  border-color: rgba(239, 68, 68, 0.3);
}

/* Buttons and Badges inside Spell Cards */
.spell-learn-btn.locked {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  cursor: not-allowed;
  white-space: nowrap;
  flex-shrink: 0;
}

.spell-learn-btn.learned {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(45, 212, 191, 0.12);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: #5eead4;
  white-space: nowrap;
  flex-shrink: 0;
}

.spell-learn-btn.prepared-gold,
.ttg-opt-picked-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.3) 0%, rgba(200, 166, 104, 0.15) 100%) !important;
  border: 1px solid var(--sheet-brass, #c8a668) !important;
  color: var(--sheet-brass-bright, #dfbe7d) !important;
  box-shadow: 0 0 10px rgba(200, 166, 104, 0.25);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.spell-learn-btn.prepared-gold:hover,
.ttg-opt-picked-btn:hover {
  background: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fca5a5 !important;
}

.ttg-badge-conc {
  background: rgba(245, 158, 11, 0.14);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
}

.ttg-badge-save {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
}

/* ==========================================================================
   SECTION 13: LEVEL UP WIZARD & BESTIARY SEARCH (D&D 2024)
   ========================================================================== */

/* Level Up Header Pill */
.ttg-pill-levelup {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.25), rgba(212, 164, 55, 0.15)) !important;
  border-color: rgba(200, 166, 104, 0.6) !important;
  color: #fce7b0 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 6px rgba(200, 166, 104, 0.4);
  box-shadow: 0 0 10px rgba(200, 166, 104, 0.15);
  animation: ttg-levelup-pulse 2.5s infinite ease-in-out;
}

.ttg-pill-levelup:hover {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.45), rgba(212, 164, 55, 0.3)) !important;
  border-color: #ffd875 !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(200, 166, 104, 0.4);
}

@keyframes ttg-levelup-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(200, 166, 104, 0.15); border-color: rgba(200, 166, 104, 0.5); }
  50% { box-shadow: 0 0 16px rgba(200, 166, 104, 0.35); border-color: #ffd875; }
}

/* Level Up Wizard Modal */
.ttg-levelup-modal {
  max-width: 620px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.ttg-levelup-banner {
  background: linear-gradient(135deg, rgba(200, 166, 104, 0.15), rgba(15, 23, 42, 0.6));
  border: 1px solid rgba(200, 166, 104, 0.25);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  text-align: center;
}

.ttg-levelup-levels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
}

.ttg-lvl-from {
  color: var(--sheet-text-muted);
}

.ttg-lvl-arrow {
  color: var(--sheet-brass);
  font-size: 20px;
}

.ttg-lvl-to {
  color: #fce7b0;
  text-shadow: 0 0 10px rgba(200, 166, 104, 0.4);
}

.ttg-levelup-prof {
  margin-top: 4px;
  font-size: 12px;
  color: #94a3b8;
}

.ttg-levelup-body {
  overflow-y: auto;
  max-height: calc(85vh - 200px);
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ttg-levelup-section {
  background: rgba(18, 27, 38, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px;
}

.ttg-levelup-sec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--sheet-brass);
  margin-bottom: 8px;
}

.ttg-hp-mode-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ttg-hp-chip {
  background: rgba(15, 23, 42, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #f1f5f9;
}

.ttg-hp-chip:hover {
  border-color: rgba(200, 166, 104, 0.4);
  background: rgba(200, 166, 104, 0.08);
}

.ttg-hp-chip.active {
  border-color: var(--sheet-brass);
  background: rgba(200, 166, 104, 0.18);
  box-shadow: 0 0 12px rgba(200, 166, 104, 0.25);
}

.ttg-hp-chip-title {
  font-size: 11px;
  color: var(--sheet-text-muted);
  text-transform: uppercase;
  font-weight: 600;
}

.ttg-hp-chip-val {
  font-size: 16px;
  font-weight: 800;
  color: #fce7b0;
}

.ttg-hp-chip-sub {
  font-size: 11px;
  color: #94a3b8;
}

.ttg-subclass-selector {
  margin-bottom: 8px;
}

.ttg-subclass-select {
  width: 100%;
}

.ttg-subclass-card-preview {
  background: rgba(11, 17, 24, 0.6);
  border: 1px solid rgba(200, 166, 104, 0.25);
  border-radius: 6px;
  padding: 10px 12px;
}

.ttg-subclass-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ttg-subclass-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #f8fafc;
}

.ttg-subclass-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 8px;
}

.ttg-subclass-features-list {
  font-size: 11.5px;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 10px;
  border-radius: 4px;
  border-left: 2px solid var(--sheet-brass);
}

.ttg-subclass-features-list ul {
  margin: 4px 0 0 16px;
  padding: 0;
}

.ttg-subclass-features-list li {
  margin-bottom: 3px;
}

.ttg-levelup-feats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ttg-levelup-feat-item {
  font-size: 12px;
  color: #f1f5f9;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ttg-levelup-feat-item.subfeat {
  border-color: rgba(200, 166, 104, 0.3);
  background: rgba(200, 166, 104, 0.08);
}

.ttg-levelup-feat-item.racefeat {
  border-color: rgba(45, 212, 191, 0.35);
  background: rgba(45, 212, 191, 0.08);
}

.ttg-levelup-racial-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(45, 212, 191, 0.15);
  border: 1px solid rgba(45, 212, 191, 0.35);
  color: #5eead4;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.ttg-hp-bonus-tag {
  display: inline-block;
  background: rgba(46, 204, 113, 0.15);
  border: 1px solid rgba(46, 204, 113, 0.3);
  color: #86efac;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

.ttg-levelup-slots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.ttg-levelup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ttg-levelup-apply-btn {
  background: linear-gradient(135deg, #c8a668, #b38b48) !important;
  color: #0b1118 !important;
  font-weight: 700 !important;
  box-shadow: 0 0 12px rgba(200, 166, 104, 0.3);
}

.ttg-levelup-apply-btn:hover {
  background: linear-gradient(135deg, #ffd875, #c8a668) !important;
  box-shadow: 0 0 16px rgba(200, 166, 104, 0.5);
}

/* Level Up Wizard: ASI & Feat Section */
.ttg-levelup-asi-feat-section {
  border-color: rgba(200, 166, 104, 0.35);
  background: rgba(24, 30, 42, 0.7);
}

.ttg-asi-toggle-row {
  margin-bottom: 12px;
}

.ttg-asi-box, .ttg-feat-box {
  background: rgba(11, 17, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ttg-asi-type-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ttg-asi-type-chips .ttg-pill {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  transition: all 0.15s ease;
}

.ttg-asi-type-chips .ttg-pill:hover {
  background: rgba(200, 166, 104, 0.15);
  border-color: rgba(200, 166, 104, 0.4);
}

.ttg-asi-type-chips .ttg-pill.active {
  background: rgba(200, 166, 104, 0.25);
  border-color: var(--sheet-brass);
  color: #fce7b0;
  font-weight: 700;
}

.ttg-asi-selectors-grid {
  display: grid;
  gap: 10px;
}

.ttg-asi-selectors-grid.double {
  grid-template-columns: 1fr 1fr;
}

.ttg-sublabel {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 4px;
  font-weight: 600;
}

.ttg-feat-card-preview {
  margin-top: 6px;
}

.ttg-badge.feat-prereq {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.ttg-feat-stat-pick {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

/* Level Up Wizard: Spells Section */
.ttg-levelup-spells-section {
  border-color: rgba(147, 51, 234, 0.35);
  background: rgba(28, 22, 45, 0.6);
}

.ttg-levelup-spells-info {
  font-size: 11.5px;
  color: #cbd5e1;
  margin-bottom: 8px;
  line-height: 1.4;
}

.ttg-spell-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}

.ttg-spells-preview-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.ttg-spell-preview-card {
  background: rgba(11, 17, 24, 0.7);
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
}

.ttg-spell-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #e9d5ff;
  margin-bottom: 4px;
}

.ttg-spell-preview-desc {
  font-size: 11px;
  color: #cbd5e1;
  line-height: 1.4;
}

/* Bestiary Side Panel Search & Limit */
.bestiary-search-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.bestiary-search-inp {
  flex: 1;
}

.bestiary-search-clear {
  padding: 0 8px;
  font-size: 12px;
}

.bestiary-limit-note {
  grid-column: 1 / -1;
  font-size: 11px;
  font-style: italic;
  color: var(--sheet-text-muted);
  text-align: center;
  padding: 6px 0;
}

/* --------------------------------------------------------------------------
   Responsive Layout for Virtual TTG Character Sheet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ttg-cols {
    grid-template-columns: 260px 290px 1fr;
    gap: 10px;
    padding: 10px 14px;
  }
  .ttg-vitals-badges {
    flex: 0 0 280px;
  }
}

@media (max-width: 900px) {
  .ttg-top-shelf {
    flex-direction: column;
    gap: 10px;
    padding: 10px 14px;
  }
  .ttg-vitals-badges {
    flex: none;
    width: 100%;
  }
  .ttg-cols {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: 10px 12px;
  }
}

@media (max-width: 600px) {
  .ttg-vitals-badges {
    grid-template-columns: repeat(2, 1fr);
  }
  .ttg-stats-badges {
    grid-template-columns: repeat(3, 1fr);
  }
}