/* Project Redoubt: Classic CRPG Aesthetic */
:root {
  --bg-dark: #0f1115;
  --bg-panel: #181b22;
  --bg-card: #20242e;
  --bg-hover: #292f3c;
  --border-gold: #b38b47;
  --border-bronze: #695232;
  --border-muted: #3a3f4d;
  --text-gold: #e2be78;
  --text-light: #e6e8eb;
  --text-dim: #9aa1af;
  --accent-crimson: #a82e2e;
  --accent-crimson-hover: #c43838;
  --accent-gold-hover: #c79c53;
  --accent-green: #388e3c;
  --accent-blue: #1976d2;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: 'Inter', sans-serif;
  height: 100vh;
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Cinzel', serif;
  color: var(--text-gold);
  letter-spacing: 0.5px;
}

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

/* TOP HUD (Developer Header & Old Navigation - Removed in favor of streamlined [Menus] & immersive combat) */
#top-hud {
  display: none !important;
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand .icon {
  font-size: 28px;
  color: var(--border-gold);
}
.brand h1 {
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.1;
}
.brand .subtitle {
  font-size: 0.72rem;
  color: var(--text-dim);
}

.resources-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.res-badge {
  background-color: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.8rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 5px;
}
.res-badge.highlight {
  border-color: var(--border-gold);
  background: rgba(179, 139, 71, 0.15);
}
.res-badge strong {
  color: var(--text-gold);
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-sound {
  background: #181b22;
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-sound:hover {
  background: #252b3b;
  border-color: #ffd27a;
  box-shadow: 0 0 8px rgba(179, 139, 71, 0.25);
}
.btn-sound.muted {
  border-color: var(--border-muted);
  color: var(--text-dim);
  opacity: 0.7;
}

.nav-tabs {
  display: flex;
  gap: 6px;
}

.tab-btn {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 6px 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab-btn:hover {
  color: var(--text-gold);
  border-color: var(--border-gold);
}
.tab-btn.active {
  background: linear-gradient(180deg, #3d3322 0%, #201a12 100%);
  color: var(--text-gold);
  border-color: var(--border-gold);
  box-shadow: 0 0 8px rgba(179, 139, 71, 0.3);
}

/* MAIN CONTENT */
#main-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.view-panel {
  display: none;
  height: 100%;
  padding: 8px 14px;
  overflow-y: auto;
}
.view-panel.active {
  display: block;
}

/* BUTTONS */
.btn-action {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid var(--border-gold);
  background: #2b2e38;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-action:hover {
  background: var(--bg-hover);
  border-color: #ffd27a;
}
.btn-action.primary-gold {
  background: linear-gradient(180deg, #8a6a34 0%, #57411f 100%);
  color: #fff;
  border-color: var(--border-gold);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.btn-action.primary-gold:hover {
  background: linear-gradient(180deg, #aa8241 0%, #6e5227 100%);
}
.btn-action.primary-crimson {
  background: linear-gradient(180deg, var(--accent-crimson) 0%, #691a1a 100%);
  color: #fff;
  border-color: #cf4242;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.btn-action.primary-crimson:hover {
  background: linear-gradient(180deg, var(--accent-crimson-hover) 0%, #852222 100%);
}
.btn-action.warning {
  background: #a65814;
  border-color: #e07e24;
}

/* BASTION VIEW */
.bastion-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  height: 100%;
}

.diorama-container {
  background: var(--bg-panel);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}
.diorama-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.diorama-header h2 {
  font-size: 1.05rem;
}

#bastion-canvas {
  background: #090b0e;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
}
.diorama-legend {
  margin-top: 10px;
  display: flex;
  gap: 16px;
  font-size: 0.78rem;
  color: var(--text-dim);
  justify-content: center;
}

.facilities-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.facilities-panel h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-muted);
  padding-bottom: 6px;
}

.facilities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.facility-card {
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s;
}
.facility-card:hover {
  border-color: var(--border-gold);
}
.facility-card.damaged {
  border-color: var(--accent-crimson);
  background: rgba(168, 46, 46, 0.15);
}
.fac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fac-header h4 {
  font-size: 0.95rem;
  margin: 0;
}
.fac-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: #2e3342;
  color: var(--text-gold);
}
.fac-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.fac-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}
.fac-order-select {
  background: #11141a;
  border: 1px solid var(--border-gold);
  color: var(--text-light);
  padding: 4px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.8rem;
}

/* EXPEDITION VIEW */
.expedition-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  height: 100%;
}

.expedition-roster-panel {
  background: var(--bg-panel);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 14px;
  overflow-y: auto;
}
.expedition-roster-panel h2 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.roster-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hero-card {
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.hero-portrait {
  width: 70px;
  height: 70px;
  border-radius: 4px;
  border: 2px solid var(--border-gold);
  object-fit: cover;
  background: #000;
}
.hero-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hero-info h4 {
  font-size: 0.95rem;
  margin: 0;
}
.hero-sub {
  font-size: 0.75rem;
  color: var(--text-dim);
}
.hero-hp {
  font-size: 0.8rem;
  color: #4caf50;
}
.hero-mastery {
  font-size: 0.75rem;
  color: var(--text-gold);
}

.expedition-controls-panel {
  display: flex;
  flex-direction: column;
}
.box-gold {
  background: var(--bg-panel);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 16px;
}
.box-gold h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.box-gold .desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.pace-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.pace-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}
.pace-content strong {
  font-size: 0.85rem;
  color: var(--text-light);
  display: block;
}
.pace-content span {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.expedition-timeline {
  margin-bottom: 20px;
}
.expedition-timeline h4 {
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.timeline-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.timeline-steps li {
  font-size: 0.8rem;
  padding: 6px 10px;
  background: var(--bg-card);
  border-left: 3px solid var(--border-muted);
}
.timeline-steps li.active {
  border-left-color: var(--border-gold);
  background: rgba(179, 139, 71, 0.15);
}

/* COMBAT VIEW */
.combat-layout {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 0;
  height: auto;
}

.combat-grid-container {
  background: var(--bg-panel);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
/* COMBAT HEADER (Top panel removed in favor of clean, immersive tactical viewport) */
.combat-header {
  display: none !important;
}

/* COMBAT TOP PANEL (Streamlined navigation & Jukebox controls) */
.combat-top-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 19, 26, 0.94);
  border: 1px solid #3a4458;
  border-radius: 6px;
  padding: 6px 12px;
  width: 1060px;
  max-width: 100%;
  margin: 0 auto 6px auto;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.combat-top-panel-left,
.combat-top-panel-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.combat-top-panel-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.combat-panel-menu-btn {
  background: linear-gradient(180deg, #2b3548 0%, #1a202c 100%);
  border: 1px solid #d4af37;
  color: #f7fafc;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.combat-panel-menu-btn:hover {
  background: linear-gradient(180deg, #3d4a63 0%, #252e3e 100%);
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  transform: translateY(-1px);
}

.combat-panel-menu-btn .menu-hotkey {
  font-family: monospace;
  font-size: 0.72rem;
  color: #a0aec0;
}

.combat-panel-aux-btn {
  background: rgba(32, 36, 46, 0.9);
  border: 1px solid var(--border-muted);
  color: var(--text-light);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.combat-panel-aux-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-gold);
  color: var(--text-gold);
}

.combat-jukebox-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 27, 34, 0.85);
  border: 1px solid rgba(58, 68, 88, 0.7);
  padding: 3px 8px;
  border-radius: 20px;
}

.combat-jukebox-btn {
  background: rgba(36, 44, 58, 0.8);
  border: 1px solid #3a4458;
  color: #e2e8f0;
  font-size: 0.78rem;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.combat-jukebox-btn:hover {
  background: #3b4861;
  border-color: #d4af37;
  color: #ffd700;
  transform: scale(1.08);
}

.combat-jukebox-btn.combat-jukebox-mute.muted {
  color: #e53e3e;
  border-color: rgba(229, 62, 62, 0.5);
  background: rgba(45, 20, 24, 0.8);
}

.combat-jukebox-btn.combat-jukebox-open {
  width: auto;
  border-radius: 12px;
  padding: 0 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 600;
  color: #d4af37;
}

.combat-jukebox-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: rgba(13, 17, 23, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 14px;
  cursor: pointer;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.combat-jukebox-pill:hover {
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
}

.combat-jukebox-eq {
  font-size: 0.82rem;
  animation: eqPulse 1.8s infinite ease-in-out;
}

.combat-jukebox-prefix {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  color: #a0aec0;
  letter-spacing: 0.5px;
}

.combat-jukebox-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes eqPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.15); opacity: 1; }
}
.turn-tracker {
  font-size: 0.9rem;
  color: var(--text-light);
}
.turn-tracker strong {
  color: var(--text-gold);
}

.combat-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-action.btn-combat-util {
  background: rgba(32, 36, 46, 0.9);
  border: 1px solid var(--border-muted);
  color: var(--text-light);
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-action.btn-combat-util:hover {
  background: var(--bg-hover);
  border-color: var(--border-gold);
  color: var(--text-gold);
}

.btn-action.btn-combat-util.view-active {
  background: linear-gradient(180deg, #1b3a4b 0%, #0d222e 100%);
  border-color: #4dd0e1;
  color: #e0f7fa;
  box-shadow: 0 0 10px rgba(77, 208, 225, 0.4);
}

#combat-canvas {
  background: #090b0e;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  display: block;
  margin: 0 auto;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
  cursor: crosshair;
}

.action-tray {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(22, 27, 34, 0.96);
  border: 1px solid var(--border-bronze);
  border-radius: 4px;
  padding: 8px 12px;
  position: sticky;
  bottom: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
}
.action-tray-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}
.tray-slots {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.action-slot {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
}
.action-slot .label {
  color: var(--text-dim);
}
.action-slot .status.available {
  color: #4caf50;
  font-weight: 600;
}
.action-slot .status.spent {
  color: #f44336;
}
.weapon-mastery-tag {
  font-size: 0.8rem;
  color: var(--text-gold);
}
.controls-hint {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-style: italic;
}

.action-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.action-buttons-group .btn-action {
  font-size: 0.78rem;
  padding: 6px 12px;
}
.action-buttons-group .btn-action.active-mode {
  border-color: #ffd54f;
  background: linear-gradient(180deg, #5e4a1a 0%, #3d2f10 100%);
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.4);
}
.action-buttons-group .btn-action.active-disengage {
  border-color: #64b5f6 !important;
  background: linear-gradient(180deg, #1565c0 0%, #0d47a1 100%) !important;
  color: #e3f2fd !important;
  box-shadow: 0 0 12px rgba(100, 181, 246, 0.6) !important;
}
.action-buttons-group .btn-action.active-dash {
  border-color: #4fc3f7 !important;
  background: linear-gradient(180deg, #0277bd 0%, #01579b 100%) !important;
  color: #e1f5fe !important;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.6) !important;
}
.action-buttons-group .btn-action.stand-action-ready {
  border-color: #ba68c8 !important;
  background: linear-gradient(180deg, #6a1b9a 0%, #4a148c 100%) !important;
  color: #f3e5f5 !important;
  box-shadow: 0 0 12px rgba(186, 104, 200, 0.6) !important;
  animation: pulse-stand-ready 1.8s infinite ease-in-out;
}
@keyframes pulse-stand-ready {
  0% { box-shadow: 0 0 6px rgba(186, 104, 200, 0.4); }
  50% { box-shadow: 0 0 14px rgba(186, 104, 200, 0.85); }
  100% { box-shadow: 0 0 6px rgba(186, 104, 200, 0.4); }
}
.btn-action.end-turn-btn {
  background: linear-gradient(180deg, #9c6818 0%, #5e3c09 100%);
  border: 1px solid #ffd54f;
  color: #ffffff;
  font-weight: 700;
  margin-left: auto;
  box-shadow: 0 2px 8px rgba(255, 213, 79, 0.25);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-action.end-turn-btn:hover {
  background: linear-gradient(180deg, #ba7f22 0%, #7d510f 100%);
  border-color: #ffe082;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.55);
  transform: translateY(-1px);
}

/* Secondary Tactics Drawer & Mobile Components - Desktop Defaults */
.secondary-actions-drawer {
  display: contents;
}
#btn-close-tactics {
  display: none !important;
}
.secondary-actions-drawer.open #btn-close-tactics,
body.layout-mobile .secondary-actions-drawer.open #btn-close-tactics {
  display: inline-flex !important;
}
.action-back-btn {
  border-color: #ffd54f !important;
  color: #fff8e1 !important;
}
.btn-more-tactics {
  display: none !important;
}
.mobile-flank-tabs {
  display: none !important;
}
.mobile-flank-backdrop {
  display: none !important;
}

.btn-action.special-spell {
  background: linear-gradient(180deg, #273859 0%, #152238 100%);
  border-color: #64b5f6;
  color: #e3f2fd;
}
.btn-action.special-spell:hover {
  background: linear-gradient(180deg, #324773 0%, #1d2d4a 100%);
  border-color: #90caf9;
}

/* Grimoire & Spellcasting Sub-Menu Architecture */
.btn-action.spellcasting-main-btn {
  background: linear-gradient(180deg, #1e3357 0%, #0f1c33 100%);
  border: 1px solid #64b5f6;
  color: #e3f2fd;
  box-shadow: 0 0 10px rgba(100, 181, 246, 0.45);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-action.spellcasting-main-btn:hover:not(.spent):not(:disabled) {
  background: linear-gradient(180deg, #2b477a 0%, #172a4d 100%);
  border-color: #90caf9;
  box-shadow: 0 0 16px rgba(144, 202, 249, 0.7);
  transform: translateY(-1px);
}
.btn-action.spellcasting-main-btn .spell-slot-badge {
  background: rgba(100, 181, 246, 0.22);
  border: 1px solid rgba(100, 181, 246, 0.6);
  color: #80d8ff;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.action-buttons-group.spellcasting-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(16, 24, 38, 0.95) 0%, rgba(10, 15, 25, 0.98) 100%);
  border: 1px solid rgba(100, 181, 246, 0.35);
  border-radius: 5px;
  padding: 6px 10px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.7), inset 0 0 12px rgba(100, 181, 246, 0.1);
  animation: fadeInSpellTray 0.2s ease-out;
}
@keyframes fadeInSpellTray {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.btn-action.back-action-btn {
  background: linear-gradient(180deg, #4d3a17 0%, #2b1f0b 100%) !important;
  border: 1px solid #ffd54f !important;
  color: #fff8e1 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.45) !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer !important;
  transition: all 0.2s ease;
}
.btn-action.back-action-btn:hover {
  background: linear-gradient(180deg, #6e5220 0%, #3d2b0e 100%) !important;
  border-color: #fff9c4 !important;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.75) !important;
  transform: translateY(-1px);
  color: #ffffff !important;
}

.spell-subgroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.spell-subgroup-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #90caf9;
  padding: 0 4px;
  text-transform: uppercase;
  user-select: none;
  opacity: 0.85;
}
.cantrips-subgroup .spell-subgroup-label {
  color: #81c784;
}
.leveled-subgroup .spell-subgroup-label {
  color: #ba68c8;
}

.spell-subgroup-divider {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.5) 50%, transparent 100%);
  margin: 0 2px;
}

.btn-action.cantrip-spell {
  font-size: 0.76rem;
  padding: 5px 10px;
}
.btn-action.nature-cantrip {
  background: linear-gradient(180deg, #1b3d22 0%, #0e2313 100%);
  border-color: #66bb6a;
  color: #e8f5e9;
}
.btn-action.nature-cantrip:hover:not(.spent):not(:disabled) {
  background: linear-gradient(180deg, #275730 0%, #15361d 100%);
  border-color: #81c784;
  box-shadow: 0 0 12px rgba(102, 187, 106, 0.6);
}
.btn-action.frost-cantrip {
  background: linear-gradient(180deg, #143d4e 0%, #0a232e 100%);
  border-color: #4fc3f7;
  color: #e1f5fe;
}
.btn-action.frost-cantrip:hover:not(.spent):not(:disabled) {
  background: linear-gradient(180deg, #1d566e 0%, #0f3546 100%);
  border-color: #81d4fa;
  box-shadow: 0 0 12px rgba(79, 195, 247, 0.6);
}

.spell-slot-badge.cantrip-badge {
  background: rgba(76, 175, 80, 0.25);
  border-color: #81c784;
  color: #a5d6a7;
}
.btn-action.stealth {
  background: linear-gradient(180deg, #4a148c 0%, #1a0033 100%);
  border-color: #ba68c8;
  color: #f3e5f5;
  box-shadow: 0 0 6px rgba(186, 104, 200, 0.3);
}
.btn-action.stealth:hover {
  background: linear-gradient(180deg, #6a1b9a 0%, #2e0854 100%);
  border-color: #e1bee7;
  box-shadow: 0 0 12px rgba(225, 190, 231, 0.5);
}
.btn-action.stealth.is-hidden {
  background: linear-gradient(180deg, #7b1fa2 0%, #311b92 100%);
  border-color: #e040fb;
  color: #ffffff;
  animation: pulseStealth 2s infinite;
}
@keyframes pulseStealth {
  0% { box-shadow: 0 0 6px rgba(224, 64, 251, 0.4); }
  50% { box-shadow: 0 0 16px rgba(224, 64, 251, 0.85); border-color: #ffffff; }
  100% { box-shadow: 0 0 6px rgba(224, 64, 251, 0.4); }
}
.btn-action.taunt {
  background: linear-gradient(180deg, #593522 0%, #361f12 100%);
  border-color: #ff9800;
  color: #ffe0b2;
}
.btn-action.offhand-action {
  background: linear-gradient(180deg, #5c281e 0%, #30140f 100%);
  border-color: #ff8a65;
  color: #fbe9e7;
  box-shadow: 0 0 6px rgba(255, 138, 101, 0.35);
}
.btn-action.offhand-action:hover:not(.spent) {
  background: linear-gradient(180deg, #7b3528 0%, #441c15 100%);
  border-color: #ffab91;
  box-shadow: 0 0 12px rgba(255, 171, 145, 0.55);
  transform: translateY(-1px);
}
.btn-action.offhand-action.active-mode {
  border-color: #ffd54f !important;
  background: linear-gradient(180deg, #8d3b2b 0%, #4e1f17 100%) !important;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.65) !important;
}

/* Universal Grayed-out state for spent actions & bonus actions */
.btn-action.spent:not(.back-action-btn),
.btn-action:disabled:not(.end-turn-btn):not(#btn-end-turn):not(.back-action-btn),
.btn-action.action-cost-spent:not(.back-action-btn),
.btn-action.bonus-cost-spent:not(.back-action-btn) {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.9) brightness(0.65) !important;
  border-color: rgba(140, 140, 140, 0.25) !important;
  color: #8c8c8c !important;
  box-shadow: none !important;
  transform: none !important;
  transition: opacity 0.2s ease, filter 0.2s ease, border-color 0.2s ease !important;
}

.btn-action.spent:hover,
.btn-action:disabled:hover,
.btn-action.action-cost-spent:hover,
.btn-action.bonus-cost-spent:hover {
  background: inherit !important;
  border-color: rgba(140, 140, 140, 0.25) !important;
  color: #8c8c8c !important;
  box-shadow: none !important;
  transform: none !important;
}
.btn-action.action-surge {
  background: linear-gradient(180deg, #7c5208 0%, #4a3003 100%);
  border-color: #ffd54f;
  color: #fff8e1;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
  font-weight: 600;
}
.btn-action.action-surge:hover:not(:disabled):not(.spent) {
  background: linear-gradient(180deg, #9e680a 0%, #634004 100%);
  border-color: #ffe082;
  box-shadow: 0 0 14px rgba(255, 224, 130, 0.7);
  transform: translateY(-1px);
}
.btn-action.action-surge.spent {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: grayscale(0.6);
  box-shadow: none;
}
.btn-action.inspiration-action {
  background: linear-gradient(180deg, #5c3882 0%, #30174a 100%);
  border: 1px solid #e0b0ff;
  color: #fff9e6;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(224, 176, 255, 0.45);
  transition: all 0.2s ease;
  position: relative;
}
.btn-action.inspiration-action:hover:not(:disabled):not(.spent) {
  background: linear-gradient(180deg, #7c4cae 0%, #46226c 100%);
  border-color: #ffd54f;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.7);
  transform: translateY(-1px);
}
.btn-action.inspiration-action.empowered-active {
  background: linear-gradient(180deg, #b8860b 0%, #684804 100%) !important;
  border-color: #fff275 !important;
  color: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 242, 117, 0.85) !important;
  animation: pulse-inspiration 1.6s infinite ease-in-out;
}
@keyframes pulse-inspiration {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.95); }
}
.portrait-inspiration-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: radial-gradient(circle, #ffe082 0%, #f57f17 100%);
  color: #211103;
  font-size: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px #ffd54f;
  border: 1px solid #fff9c4;
  z-index: 10;
  cursor: help;
  animation: pulse-badge 2s infinite ease-in-out;
}
.init-inspiration-star {
  position: absolute;
  top: -3px;
  right: -3px;
  font-size: 12px;
  filter: drop-shadow(0 0 4px #ffd54f);
  z-index: 5;
  animation: pulse-badge 2s infinite ease-in-out;
}
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); box-shadow: 0 0 12px #ffeb3b; }
}
.btn-action.taunt:hover {
  background: linear-gradient(180deg, #754428 0%, #4a2815 100%);
  border-color: #ffb74d;
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}

.combat-sidebar {
  background: var(--bg-panel);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  height: 750px;
  max-height: 750px;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.combat-sidebar h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-muted);
  padding-bottom: 6px;
  flex-shrink: 0;
}
.log-scrollbox {
  flex: 1;
  min-height: 0;
  background: #0d0f14;
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  padding: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-gold) #0d0f14;
}

/* Custom CRPG Gold & Bronze Scrollbar */
.log-scrollbox::-webkit-scrollbar {
  width: 9px;
}
.log-scrollbox::-webkit-scrollbar-track {
  background: #080a0d;
  border-radius: 4px;
  border-left: 1px solid #1c202a;
}
.log-scrollbox::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b38b47 0%, #695232 100%);
  border-radius: 4px;
  border: 1px solid #4a3b22;
  box-shadow: inset 0 0 4px rgba(255, 213, 79, 0.3);
}
.log-scrollbox::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e2be78 0%, #8c6e43 100%);
  box-shadow: 0 0 6px rgba(226, 190, 120, 0.6);
}

.log-entry.system { color: #8bc34a; }
.log-entry.hit { color: #ffd54f; }
.log-entry.miss { color: #90a4ae; }
.log-entry.mastery { color: #64b5f6; }
.log-entry.artillery { color: #ff8a65; font-weight: bold; }
.log-entry.tactics { color: #ce93d8; font-weight: bold; }
.log-entry.critical { color: #ff1744; font-weight: bold; }
.log-entry.heal { color: #81c784; }

/* MODAL */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
#victory-spoils-modal,
#loot-modal,
#levelup-modal,
#campfire-modal {
  z-index: 1500;
}
.modal-overlay.hidden { display: none; }
.modal-card {
  background: var(--bg-panel);
  border: 2px solid var(--border-gold);
  border-radius: 8px;
  width: 520px;
  max-width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-bronze);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h2 { font-size: 1.15rem; margin: 0; }
.close-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.5rem;
  cursor: pointer;
}
.modal-body {
  padding: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.event-card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 12px;
}
.event-card-box h4 {
  font-size: 1rem;
  margin-bottom: 6px;
}
.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border-muted);
  display: flex;
  justify-content: flex-end;
}

/* Party Level & XP Progression HUD */
.hud-xp-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(13, 16, 23, 0.85);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 3px 12px;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.15);
}
.xp-level-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: var(--text-gold);
  letter-spacing: 0.5px;
}
.xp-bar-track {
  width: 75px;
  height: 7px;
  background: #11141b;
  border: 1px solid #3b4556;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd54f 0%, #ff9800 100%);
  border-radius: 3px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(255, 213, 79, 0.5);
}
.xp-numbers {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  color: var(--text-light);
}

/* Illuminated Level Up Modal */
/* Illuminated Level Up Modal (Widescreen 1020px Responsive Layout) */
.levelup-card {
  max-width: 1020px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #181d27 0%, #0d1017 100%);
  border: 2px solid var(--border-gold);
  box-shadow: 0 0 45px rgba(255, 213, 79, 0.28), 0 16px 50px rgba(0, 0, 0, 0.95);
  border-radius: 10px;
  overflow: hidden;
}
.levelup-banner {
  text-align: center;
  padding: 14px 20px 8px;
  border-bottom: 1px solid var(--border-gold);
  background: linear-gradient(180deg, rgba(255, 213, 79, 0.12) 0%, transparent 100%);
  flex-shrink: 0;
}
.levelup-stars {
  color: var(--border-gold);
  font-size: 0.95rem;
  letter-spacing: 6px;
  margin-bottom: 3px;
}
.levelup-banner h2 {
  font-size: 1.5rem;
  color: var(--text-gold);
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 0 14px rgba(255, 213, 79, 0.45);
}
.levelup-subtitle {
  font-size: 0.82rem;
  color: #81c784;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
}

/* Hero Tabs Across Top (Astrid, Selena, Aurora, Mycelia, Valeriya) */
.levelup-hero-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0;
  border-bottom: 1px solid rgba(212, 163, 89, 0.3);
  overflow-x: auto;
  background: rgba(11, 14, 20, 0.7);
  flex-shrink: 0;
}
.levelup-hero-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(212, 163, 89, 0.35);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: rgba(22, 28, 38, 0.85);
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.2s ease;
  user-select: none;
  white-space: nowrap;
}
.levelup-hero-tab:hover {
  background: rgba(35, 45, 62, 0.95);
  color: var(--text-gold);
  border-color: rgba(212, 163, 89, 0.65);
}
.levelup-hero-tab.active {
  background: linear-gradient(180deg, #2a3547 0%, #18202d 100%);
  color: #ffd54f;
  border-color: #ffd54f;
  font-weight: 600;
  box-shadow: 0 -3px 12px rgba(255, 213, 79, 0.18);
}
.levelup-tab-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--border-gold);
  object-fit: cover;
  flex-shrink: 0;
}
.levelup-tab-info {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.levelup-tab-name {
  font-family: 'Cinzel', serif;
  font-size: 0.86rem;
  font-weight: 600;
}
.levelup-tab-status {
  font-size: 0.68rem;
  color: #81c784;
}
.levelup-tab-status.pending {
  color: #ffb74d;
}

.levelup-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
}

/* Card-Based Archetype Grid */
.levelup-card-grid,
.archetype-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
}

.archetype-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1a202c 0%, #10141d 100%);
  border: 1.5px solid rgba(212, 163, 89, 0.35);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.archetype-card:hover {
  border-color: rgba(255, 213, 79, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 213, 79, 0.2);
}
.archetype-card.selected {
  border-color: #ffd54f;
  background: linear-gradient(180deg, #242e3f 0%, #151b25 100%);
  box-shadow: 0 0 28px rgba(255, 213, 79, 0.35), 0 8px 26px rgba(0, 0, 0, 0.85);
}
.archetype-selected-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffd54f;
  color: #12161f;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.55);
}
.archetype-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(212, 163, 89, 0.2);
  padding-bottom: 10px;
}
.archetype-icon {
  font-size: 1.9rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 213, 79, 0.4));
}
.archetype-title-group {
  flex: 1;
  min-width: 0;
}
.archetype-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #ffd54f;
  margin: 0 0 2px;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.3);
}
.archetype-tagline {
  font-size: 0.76rem;
  color: #a5d6a7;
  font-style: italic;
  margin: 0;
  line-height: 1.3;
}
.archetype-desc {
  font-size: 0.78rem;
  color: #cfd8dc;
  line-height: 1.4;
  margin: 6px 0 12px;
}

.archetype-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd54f;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 8px 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.archetype-perks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.archetype-perk-item {
  font-size: 0.76rem;
  color: #eceff1;
  background: rgba(255, 213, 79, 0.08);
  border-left: 3px solid #ffd54f;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  line-height: 1.35;
}

/* Mechanical Spell Preview Cards */
.archetype-spells {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.spell-preview-card {
  background: rgba(13, 17, 24, 0.9);
  border: 1px solid rgba(128, 222, 234, 0.35);
  border-radius: 6px;
  padding: 8px 10px;
  transition: all 0.2s ease;
}
.spell-preview-card:hover {
  border-color: rgba(128, 222, 234, 0.7);
  background: rgba(20, 26, 38, 0.95);
}
.spell-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 4px;
}
.spell-preview-name {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  color: #80deea;
  font-weight: 600;
}
.spell-preview-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.spell-preview-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  color: #cfd8dc;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.spell-preview-badge.tier {
  background: rgba(186, 104, 200, 0.2);
  color: #ce93d8;
  border-color: #ba68c8;
}
.spell-preview-badge.action {
  background: rgba(255, 213, 79, 0.15);
  color: #ffd54f;
  border-color: #ffd54f;
}
.spell-preview-badge.concentration {
  background: rgba(255, 112, 67, 0.22);
  color: #ffab91;
  border-color: #ff7043;
}
.spell-preview-badge.dc {
  background: rgba(77, 208, 225, 0.18);
  color: #80deea;
  border-color: #4dd0e1;
}
.spell-preview-badge.cutscene {
  background: rgba(239, 83, 80, 0.22);
  color: #ef9a9a;
  border-color: #ef5350;
}
.spell-preview-details {
  font-size: 0.74rem;
  color: #b0bec5;
  line-height: 1.35;
  margin-top: 2px;
}
.spell-preview-tooltip {
  font-size: 0.7rem;
  color: #90a4ae;
  margin-top: 3px;
  font-style: italic;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 3px;
}

.btn-select-archetype {
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  border: 1px solid var(--border-gold);
  background: rgba(255, 213, 79, 0.15);
  color: #ffd54f;
}
.btn-select-archetype:hover {
  background: #ffd54f;
  color: #12161f;
}
.archetype-card.selected .btn-select-archetype {
  background: #ffd54f;
  color: #12161f;
  border-color: #ffd54f;
}

.levelup-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(26, 32, 44, 0.7);
  border: 1px solid rgba(212, 163, 89, 0.3);
  border-radius: 6px;
  padding: 10px 14px;
}
.levelup-hero-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  object-fit: cover;
  flex-shrink: 0;
}
.levelup-hero-details h4 {
  font-size: 1rem;
  color: var(--text-gold);
  margin: 0 0 3px;
}
.levelup-hero-details p {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.35;
}
.levelup-perk-tag {
  display: inline-block;
  background: rgba(255, 213, 79, 0.15);
  border: 1px solid #ffd54f;
  border-radius: 3px;
  color: #ffd54f;
  font-size: 0.72rem;
  padding: 1px 6px;
  margin-top: 4px;
  font-weight: 600;
}

/* Mission Progress Navigation & Act Tabs */
.mission-nav-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
}
.act-tab-strip {
  display: flex;
  gap: 4px;
  align-items: center;
}
.act-tab {
  background: rgba(22, 26, 36, 0.9);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.act-tab:hover {
  color: var(--text-gold);
  border-color: var(--border-gold);
}
.act-tab.active {
  background: linear-gradient(180deg, #3d3322 0%, #201a12 100%);
  color: var(--text-gold);
  border-color: var(--border-gold);
  font-weight: bold;
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.25);
}
.btn-camp-rest {
  background: linear-gradient(180deg, #4d2b15 0%, #2a140a 100%);
  border: 1px solid #d97736;
  border-radius: 4px;
  color: #ffb076;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: bold;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 6px;
  box-shadow: 0 0 8px rgba(217, 119, 54, 0.35);
}
.btn-camp-rest:hover {
  background: linear-gradient(180deg, #66391a 0%, #3d1b0d 100%);
  border-color: #ff9854;
  color: #fff;
  box-shadow: 0 0 12px rgba(255, 152, 84, 0.55);
}

.mission-ribbon {
  display: flex;
  gap: 6px;
  align-items: center;
}
.mission-pill {
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: 20px;
  color: var(--text-dim);
  font-family: 'Cinzel', serif;
  font-size: 0.73rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.mission-pill:hover {
  color: var(--text-gold);
  border-color: var(--border-gold);
}
.mission-pill.active {
  background: linear-gradient(180deg, #3d3322 0%, #201a12 100%);
  color: var(--text-gold);
  border-color: var(--border-gold);
  font-weight: bold;
}
.mission-pill.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Campfire Long Rest Modal */
.campfire-card {
  max-width: 740px;
  width: 95%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at center top, #2b1d14 0%, #15100d 80%, #0d0a08 100%);
  border: 2px solid #e07a38;
  box-shadow: 0 0 35px rgba(224, 122, 56, 0.45);
  border-radius: 12px;
  overflow: hidden;
}
.campfire-scene-banner {
  position: relative;
  width: 100%;
  height: 300px;
  max-height: 42vh;
  overflow: hidden;
  border-bottom: 2px solid rgba(224, 122, 56, 0.4);
  box-shadow: inset 0 -20px 30px rgba(0, 0, 0, 0.85);
}
.campfire-backdrop-blur {
  position: absolute;
  top: -25px;
  left: -25px;
  right: -25px;
  bottom: -25px;
  background-size: cover;
  background-position: center 25%;
  filter: blur(28px) brightness(0.35) saturate(1.4);
  z-index: 0;
  pointer-events: none;
  transition: background-image 0.6s ease-in-out;
}
.campfire-scene-banner.retroanime-framed {
  border: 1px solid rgba(255, 183, 77, 0.45);
  box-shadow: 0 0 25px rgba(224, 122, 56, 0.25), inset 0 0 40px rgba(0, 0, 0, 0.9);
}
.campfire-scene-banner.stage5-slumber-mode {
  border-color: rgba(183, 148, 244, 0.6);
  box-shadow: 0 0 30px rgba(183, 148, 244, 0.35), inset 0 0 40px rgba(13, 10, 25, 0.95);
}
.campfire-scene-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.95) contrast(1.05);
  animation: campfire-banner-pan 20s infinite alternate ease-in-out;
}
.campfire-scene-img.retroanime-cutscene-framing {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.85);
  transition: opacity 0.4s ease-in-out, transform 0.5s ease-out;
}
@keyframes campfire-banner-pan {
  0% { transform: scale(1) translateY(0); }
  100% { transform: scale(1.04) translateY(-3px); }
}
.campfire-scene-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px 8px;
  background: linear-gradient(to top, rgba(13, 10, 8, 0.95) 0%, rgba(13, 10, 8, 0.6) 60%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}
.campfire-stage-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffb74d;
  background: rgba(30, 20, 15, 0.85);
  border: 1px solid rgba(255, 183, 77, 0.5);
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 10px rgba(224, 122, 56, 0.3);
}
.campfire-scene-caption {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: #ffd4b2;
  font-style: italic;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  max-width: 60%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campfire-header {
  text-align: center;
  border-bottom: 1px solid rgba(224, 122, 56, 0.3);
  padding: 12px 16px;
}
.campfire-flame-icon {
  font-size: 2rem;
  margin-bottom: 2px;
  animation: campfire-flicker 1.8s infinite alternate;
}
@keyframes campfire-flicker {
  0% { transform: scale(1); filter: drop-shadow(0 0 6px #ff7b25); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 16px #ffae42); }
}
.campfire-subtitle {
  color: #d4a373;
  font-size: 0.85rem;
  margin-top: 4px;
}
.campfire-banter-box {
  background: rgba(18, 12, 9, 0.85);
  border: 1px solid rgba(224, 122, 56, 0.35);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 12px 0;
  line-height: 1.6;
  color: #ffd4b2;
  max-height: 230px;
  overflow-y: auto;
}
.campfire-banter-box::-webkit-scrollbar {
  width: 6px;
}
.campfire-banter-box::-webkit-scrollbar-track {
  background: rgba(13, 10, 8, 0.6);
  border-radius: 4px;
}
.campfire-banter-box::-webkit-scrollbar-thumb {
  background: rgba(224, 122, 56, 0.5);
  border-radius: 4px;
}
.campfire-banter-line {
  margin-bottom: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.campfire-banter-line:last-child {
  margin-bottom: 0;
}
.campfire-vignette-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: bold;
  color: #ffb74d;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 183, 77, 0.3);
  padding-bottom: 4px;
}
.campfire-banter-speaker {
  font-family: 'Cinzel', serif;
  font-weight: bold;
  color: #ffb74d;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  width: fit-content;
}
.campfire-mood-badge {
  font-size: 0.68rem;
  color: #ffe082;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(230, 81, 0, 0.32);
  border: 1px solid rgba(255, 183, 77, 0.45);
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.campfire-banter-action {
  font-family: 'Georgia', serif;
  font-size: 0.84rem;
  color: #e2e8f0;
  font-style: italic;
  margin: 2px 0 4px 6px;
  padding-left: 8px;
  border-left: 2px solid rgba(255, 158, 88, 0.5);
  line-height: 1.45;
}
.campfire-banter-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #fff4e6;
  font-style: normal;
  display: block;
}
.campfire-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.campfire-benefit-item {
  background: rgba(30, 20, 15, 0.65);
  border: 1px solid rgba(224, 122, 56, 0.25);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.84rem;
  color: #e0d0c0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.campfire-benefit-item span {
  font-size: 1.1rem;
}

.tab-btn.locked {
  opacity: 0.65;
  border-style: dashed;
}

/* War Council & Regional Storylines */
.war-room-container {
  margin-top: 24px;
  background: linear-gradient(180deg, #181c26 0%, #12151d 100%);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.war-room-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.war-room-header h3 {
  font-family: 'Cinzel', serif;
  color: var(--text-gold);
  margin: 0 0 4px 0;
  font-size: 1.15rem;
}
.war-room-subtitle {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin: 0;
}
.war-room-status-badge {
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid var(--border-gold);
  color: #ffd700;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: 'Cinzel', serif;
  font-weight: 600;
}
.war-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 16px;
}
.war-branch-card {
  background: #1e2330;
  border: 1px solid var(--border-muted);
  border-top: 3px solid #d4af37;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s ease;
}
.war-branch-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}
.war-branch-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.war-branch-icon {
  font-size: 1.6rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.war-branch-title-group h4 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: #ffd54f;
}
.war-branch-advocate {
  font-size: 0.78rem;
  color: #a0aec0;
  margin-top: 2px;
}
.war-branch-desc {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.45;
  margin-bottom: 12px;
}
.war-branch-stages-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.war-stage-pill {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-muted);
  border-radius: 4px;
  font-size: 0.7rem;
  text-align: center;
  padding: 4px 2px;
  color: var(--text-dim);
}
.war-stage-pill.active {
  background: rgba(212, 175, 55, 0.25);
  border-color: #ffd700;
  color: #ffd700;
  font-weight: 600;
}
.war-stage-pill.completed {
  background: rgba(76, 175, 80, 0.25);
  border-color: #4caf50;
  color: #81c784;
}
.war-branch-actions {
  display: flex;
  gap: 8px;
}
.war-btn-launch {
  flex: 1;
  background: linear-gradient(180deg, #3d3322 0%, #201a12 100%);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.war-btn-launch:hover {
  background: linear-gradient(180deg, #57482f 0%, #30261a 100%);
  border-color: #ffe082;
  color: #fff;
}
.war-btn-decision {
  flex: 1;
  background: linear-gradient(180deg, #4a2810 0%, #291206 100%);
  border: 1px solid #ff9800;
  color: #ffb74d;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.35);
}

/* Council Decision Modal */
.council-card {
  max-width: 780px;
  background: radial-gradient(circle at center top, #242838 0%, #131620 80%, #0c0e14 100%);
  border: 2px solid #ffd700;
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
}
.council-header {
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 12px;
}
.council-crest-icon {
  font-size: 2.4rem;
  margin-bottom: 4px;
}
.council-subtitle {
  color: #ffd54f;
  font-size: 0.85rem;
}
.council-situation {
  background: rgba(10, 12, 18, 0.7);
  border-left: 3px solid #ffd700;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #e2e8f0;
  margin: 14px 0;
}
.council-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.council-choice-card {
  background: rgba(26, 32, 44, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.2s;
}
.council-choice-card:hover {
  border-color: #ffd700;
  background: rgba(35, 43, 60, 0.95);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25);
}
.council-choice-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.council-choice-header h4 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 0.98rem;
  color: #ffd54f;
}
.council-advocate-tag {
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
  color: #90cdf4;
}
.council-choice-desc {
  font-size: 0.85rem;
  color: #cbd5e0;
  line-height: 1.5;
  margin-bottom: 12px;
}
.council-choice-rewards {
  background: rgba(0, 0, 0, 0.45);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.8rem;
  color: #68d391;
  margin-bottom: 14px;
  border-left: 2px solid #48bb78;
}
.council-btn-select {
  background: linear-gradient(180deg, #3d3322 0%, #201a12 100%);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: bold;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.council-btn-select:hover {
  background: linear-gradient(180deg, #5a4b2c 0%, #302414 100%);
  border-color: #ffd700;
  color: #fff;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* Mission Info Banner - Hidden in combat mode to remove continuity clutter */
.mission-info-banner {
  display: none !important;
}

.mission-info-banner h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffd54f;
  margin-bottom: 3px;
  letter-spacing: 0.5px;
}
.mission-info-banner p {
  font-size: 0.82rem;
  color: #c7b89d;
  margin: 0;
}
.mission-focus-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill-tag {
  background: linear-gradient(135deg, #241d14 0%, #181510 100%);
  border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ffd54f;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Tooltip Telemetry */
.target-tooltip {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: 280px;
  background: rgba(14, 18, 26, 0.95);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 7px 11px;
  font-size: 0.78rem;
  color: var(--text-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 90;
  user-select: none;
  line-height: 1.35;
}
.target-tooltip.hidden { display: none; }
.target-tooltip .tt-header {
  font-family: 'Cinzel', serif;
  font-weight: bold;
  color: var(--text-gold);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-muted);
  padding-bottom: 2px;
}
.controls-hint {
  font-size: 0.75rem;
  color: var(--text-gold);
  font-style: italic;
}

/* Tactical Cover Indicators (D&D 5e 2024 RAW) */
.tt-cover-none {
  color: #38d9a9;
  font-weight: 600;
}
.tt-cover-half {
  color: #ffd54f;
  font-weight: 600;
}
.tt-cover-three-quarters {
  color: #b388ff;
  font-weight: 600;
}
.tt-cover-total {
  color: #ff5252;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 82, 82, 0.4);
}

/* Slick Isometric Canvas Framing */
#combat-canvas {
  background: radial-gradient(circle at 50% 45%, #141722 0%, #090b10 100%);
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.9), 0 6px 20px rgba(0,0,0,0.8);
  cursor: default;
}

/* ==========================================
   📖 ILLUMINATED STORYBOOK TOME & CHRONICLE
   ========================================== */
.storybook-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(10, 7, 4, 0.96) 0%, rgba(3, 2, 1, 0.99) 100%);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.storybook-modal-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important;
}

/* Grand Illuminated Tome Wrapper (Responsive Folio without scrollbars) */
.storybook-tome-wrapper {
  width: min(1320px, 98vw);
  max-width: 98vw;
  height: min(870px, 96vh);
  max-height: 96vh;
  background: radial-gradient(circle at 50% 40%, #24160a 0%, #120904 100%);
  border: 5px solid #b8860b;
  outline: 3px solid #5a3d0f;
  outline-offset: -8px;
  border-radius: 14px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.98), 0 0 50px rgba(184, 134, 11, 0.3), inset 0 0 35px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  overflow-anchor: none;
  scroll-behavior: auto;
}

/* Global scrollbar suppression across the illuminated chronicle */
.storybook-modal-overlay *,
.storybook-tome-wrapper * {
  scrollbar-width: none !important;
}
.storybook-modal-overlay *::-webkit-scrollbar,
.storybook-tome-wrapper *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Embossed Cast-Brass Corner Brackets */
.tome-corner-bracket {
  position: absolute;
  width: 38px;
  height: 38px;
  pointer-events: none;
  z-index: 10;
  border-color: #ffd54f;
  border-style: solid;
}
.tome-corner-bracket.top-left {
  top: 4px; left: 4px;
  border-width: 4px 0 0 4px;
  border-top-left-radius: 8px;
  box-shadow: -2px -2px 6px rgba(255, 213, 79, 0.4);
}
.tome-corner-bracket.top-right {
  top: 4px; right: 4px;
  border-width: 4px 4px 0 0;
  border-top-right-radius: 8px;
  box-shadow: 2px -2px 6px rgba(255, 213, 79, 0.4);
}
.tome-corner-bracket.bottom-left {
  bottom: 4px; left: 4px;
  border-width: 0 0 4px 4px;
  border-bottom-left-radius: 8px;
  box-shadow: -2px 2px 6px rgba(255, 213, 79, 0.4);
}
.tome-corner-bracket.bottom-right {
  bottom: 4px; right: 4px;
  border-width: 0 4px 4px 0;
  border-bottom-right-radius: 8px;
  box-shadow: 2px 2px 6px rgba(255, 213, 79, 0.4);
}

/* Top Book Header & Navigation */
.storybook-top-bar {
  height: 40px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #301f12 0%, #1a0f07 100%);
  border-bottom: 2px solid #8c6820;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  position: relative;
  z-index: 5;
  gap: 10px;
}
.tome-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffd54f;
  text-shadow: 0 0 10px rgba(255, 213, 79, 0.6);
  white-space: nowrap;
  flex-shrink: 0;
}
.tome-sigil {
  color: #e5c158;
  font-size: 0.85rem;
}

/* Hanging Bookmark Ribbon Tabs */
.tome-bookmark-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.tome-bookmark-tabs::-webkit-scrollbar {
  display: none;
}

.story-bookmark-tab {
  background: linear-gradient(180deg, #422a15 0%, #241408 100%);
  border: 1px solid #8c6720;
  border-top: none;
  border-radius: 0 0 5px 5px;
  color: #d7ccc8;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: bold;
  padding: 3px 6px 4px 6px;
  cursor: pointer;
  letter-spacing: 0.5px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}
.story-bookmark-tab:hover {
  background: linear-gradient(180deg, #614022 0%, #3a2210 100%);
  color: #ffd54f;
  border-color: #ffd54f;
  transform: translateY(2px);
}
.story-bookmark-tab.active {
  background: linear-gradient(180deg, #8c6720 0%, #523b0f 100%);
  color: #fff9c4;
  border-color: #ffd54f;
  box-shadow: 0 4px 10px rgba(255, 213, 79, 0.35);
  transform: translateY(3px);
}
.story-bookmark-tab.story-bookmark-adversary {
  background: linear-gradient(180deg, #3d1b28 0%, #1f0b14 100%);
  color: #ffb4a2;
  border-color: #d84315;
}
.story-bookmark-tab.story-bookmark-adversary:hover {
  background: linear-gradient(180deg, #5c273a 0%, #2f101f 100%);
  color: #ffe0b2;
  border-color: #ff7043;
}
.story-bookmark-tab.story-bookmark-adversary.active {
  background: linear-gradient(180deg, #7b1fa2 0%, #4a148c 100%);
  color: #f3e5f5;
  border-color: #ba68c8;
  box-shadow: 0 4px 10px rgba(186, 104, 200, 0.4);
}


.tome-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-story-nav {
  background: #2b1f13;
  border: 1px solid #94712a;
  border-radius: 4px;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.btn-story-nav:hover {
  background: #4a341e;
  border-color: #ffd54f;
  transform: translateY(-1px);
}
.btn-story-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.story-page-indicator {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: #d7ccc8;
  letter-spacing: 1.5px;
  min-width: 100px;
  text-align: center;
}

.btn-story-skip {
  background: transparent;
  border: 1px dashed #7a5e2d;
  border-radius: 4px;
  color: #bcaaa4;
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-story-skip:hover {
  color: #ffd54f;
  border-color: #ffd54f;
}

.btn-story-close {
  background: transparent;
  border: none;
  color: #d7ccc8;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}
.btn-story-close:hover { color: #ff5252; }

/* Sub-Page Ribbon Tabs Bar: [ 📜 I. Tale ] [ 💬 II. Parlance ] [ ⚔️ III. Dilemma ] [ ⛺ IV. Preparation ] */
.story-folio-tabs-bar {
  background: linear-gradient(180deg, #241408 0%, #160d05 100%);
  border-bottom: 1.5px solid #8c6820;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 16px;
  position: relative;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.story-folio-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.story-folio-tab {
  background: linear-gradient(180deg, #382412 0%, #201308 100%);
  border: 1px solid #8c6720;
  border-radius: 4px;
  color: #c9b09a;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 14px;
  cursor: pointer;
  letter-spacing: 0.6px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.story-folio-tab:hover {
  background: linear-gradient(180deg, #573a1d 0%, #301d0c 100%);
  color: #ffd54f;
  border-color: #ffd54f;
  transform: translateY(-1px);
}
.story-folio-tab.active {
  background: linear-gradient(180deg, #9e7526 0%, #5e4313 100%);
  color: #fff9c4;
  border-color: #ffd54f;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

/* Open Folio (Two-page spread container) */
.storybook-folio {
  flex: 1;
  display: flex;
  background: radial-gradient(circle at 50% 40%, #fdf6e7 0%, #f1e4c7 60%, #e2d1ae 100%);
  position: relative;
  overflow: hidden;
  min-height: 0;
}

/* Sub-page Folio Spread Panels */
.story-folio-spread {
  display: none;
  width: 100%;
  height: 100%;
  flex: 1;
  position: relative;
  min-height: 0;
}
.story-folio-spread.active {
  display: flex;
  flex-direction: row;
}

.tome-page {
  flex: 1;
  padding: 12px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #8c6720 transparent;
  min-height: 0;
}
.tome-page::-webkit-scrollbar {
  width: 5px;
}
.tome-page::-webkit-scrollbar-track {
  background: transparent;
}
.tome-page::-webkit-scrollbar-thumb {
  background: #8c6720;
  border-radius: 4px;
}

/* Page Left: Scenic Setting Art & Heraldry */
.page-left {
  background: radial-gradient(circle at 65% 35%, #faf3e1 0%, #ede1c8 100%);
  box-shadow: inset -18px 0 30px rgba(90, 65, 35, 0.18);
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  overflow: hidden;
  scrollbar-width: none;
}

/* Gothic / JRPG Arched Scenic Setting Frame */
.scene-arch-frame {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.arch-filigree-crown {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: #8c6720;
  letter-spacing: 5px;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
.scene-img-viewport {
  width: 100%;
  height: 270px;
  max-height: 38vh;
  border: 3px solid #8c6720;
  outline: 2px solid #5a3d0f;
  outline-offset: 3px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 10px 25px rgba(50, 30, 15, 0.35), inset 0 0 15px rgba(0,0,0,0.5);
  overflow: hidden;
  background: #0d1117;
}
.story-scene-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  transition: transform 0.8s ease;
}
.scene-arch-frame:hover .story-scene-img {
  transform: scale(1.02);
}
.scene-vignette-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(18, 12, 6, 0.6) 100%);
  pointer-events: none;
}

/* Dynamic Atmospheric Illustration Pipeline */
.story-scene-container {
  position: relative;
  overflow: hidden;
}

.story-scene-crossfade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
  z-index: 2;
}

.story-scene-crossfade.active-crossfade {
  opacity: 1;
}

.story-atmospheric-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.story-tension-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.65);
  animation: tensionPulse 2.4s ease-in-out infinite alternate;
  transition: opacity 0.4s ease;
}

@keyframes tensionPulse {
  0% {
    box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.6);
  }
  50% {
    box-shadow: inset 0 0 48px rgba(139, 0, 0, 0.7);
  }
  100% {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.75);
  }
}

.story-hazard-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  mix-blend-mode: color-dodge;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.story-hazard-glow.glow-toxic {
  background: radial-gradient(circle at 50% 60%, rgba(46, 125, 50, 0.42) 0%, rgba(27, 94, 32, 0.18) 60%, transparent 80%);
  animation: toxicPulse 3s ease-in-out infinite;
}

@keyframes toxicPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.95; }
}

.story-hazard-glow.glow-arcane {
  background: radial-gradient(circle at 50% 50%, rgba(123, 31, 162, 0.45) 0%, rgba(74, 20, 140, 0.18) 65%, transparent 85%);
  animation: arcanePulse 2.8s ease-in-out infinite;
}

@keyframes arcanePulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.92; }
}

.story-hazard-glow.glow-water {
  background: radial-gradient(circle at 50% 65%, rgba(2, 119, 189, 0.4) 0%, rgba(1, 87, 155, 0.18) 60%, transparent 80%);
  animation: waterPulse 2.5s ease-in-out infinite;
}

@keyframes waterPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.92; }
}

.story-hazard-glow.glow-amber {
  background: radial-gradient(circle at 50% 40%, rgba(230, 81, 0, 0.35) 0%, rgba(255, 111, 0, 0.12) 60%, transparent 80%);
}

/* Companion Cameo Reactions */
.hero-cameo-inset.cameo-alarmed {
  border-color: #ff5722;
  box-shadow: 0 0 16px rgba(255, 87, 34, 0.75);
  animation: cameoShake 0.45s ease-in-out 1;
}

@keyframes cameoShake {
  0%, 100% { transform: scale(1.05) rotate(0deg); }
  20% { transform: scale(1.08) rotate(-4deg); }
  40% { transform: scale(1.08) rotate(4deg); }
  60% { transform: scale(1.06) rotate(-2deg); }
  80% { transform: scale(1.06) rotate(2deg); }
}

.hero-cameo-inset.cameo-triumphant {
  border-color: #ffd700;
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 193, 7, 0.4);
  animation: cameoTriumph 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;
}

@keyframes cameoTriumph {
  0% { transform: scale(0.95); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1.06); }
}

.hero-cameo-inset.cameo-grim {
  border-color: #78909c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  filter: grayscale(35%) contrast(1.1);
}

/* Illuminated Stage Banner for Tri-Stage Vignettes */
.story-stage-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  margin: 3px 0 5px 0;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.35s ease;
  box-sizing: border-box;
}

.story-stage-banner.stage-setup {
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.05) 0%, rgba(212, 175, 55, 0.22) 50%, rgba(184, 134, 11, 0.05) 100%);
  border-top: 1px solid rgba(184, 134, 11, 0.45);
  border-bottom: 1px solid rgba(184, 134, 11, 0.45);
  color: #5c3e10;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

.story-stage-banner.stage-complication {
  background: linear-gradient(90deg, rgba(183, 28, 28, 0.08) 0%, rgba(216, 67, 21, 0.25) 50%, rgba(183, 28, 28, 0.08) 100%);
  border-top: 1.5px solid rgba(216, 67, 21, 0.6);
  border-bottom: 1.5px solid rgba(216, 67, 21, 0.6);
  color: #7f0000;
  text-shadow: 0 0 6px rgba(255, 87, 34, 0.4);
  animation: complicationGlow 2.5s ease-in-out infinite alternate;
}

@keyframes complicationGlow {
  0% { border-color: rgba(216, 67, 21, 0.4); }
  100% { border-color: rgba(255, 87, 34, 0.85); box-shadow: 0 0 10px rgba(216, 67, 21, 0.2); }
}

.story-stage-banner.stage-resolution {
  background: linear-gradient(90deg, rgba(46, 125, 50, 0.08) 0%, rgba(255, 215, 0, 0.22) 50%, rgba(46, 125, 50, 0.08) 100%);
  border-top: 1.5px solid rgba(184, 134, 11, 0.65);
  border-bottom: 1.5px solid rgba(184, 134, 11, 0.65);
  color: #2e541b;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.story-stage-banner.stage-review {
  background: linear-gradient(90deg, rgba(55, 71, 79, 0.08) 0%, rgba(120, 144, 156, 0.22) 50%, rgba(55, 71, 79, 0.08) 100%);
  border-top: 1px solid rgba(84, 110, 122, 0.5);
  border-bottom: 1px solid rgba(84, 110, 122, 0.5);
  color: #263238;
}

.stage-banner-sigil {
  color: #d4af37;
  font-size: 0.8rem;
}

.story-stage-banner.stage-complication .stage-banner-sigil {
  color: #ff5722;
}

.story-stage-banner.stage-resolution .stage-banner-sigil {
  color: #ffd700;
}

/* Viewpoint Companion Cameo Medallion - Enlarged High-Clarity Showcase */
.hero-cameo-inset {
  position: absolute;
  bottom: 8px;
  right: 12px;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  border: 3.5px solid #ffd54f;
  outline: 2px solid #5a3d0f;
  outline-offset: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 213, 79, 0.55);
  overflow: hidden;
  background: #181109;
  z-index: 5;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero-cameo-inset:hover {
  transform: scale(1.08);
}
.cameo-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cartographic Landmark & Danger Plaque */
.cartographic-plaque {
  width: 100%;
  margin-top: 6px;
  background: linear-gradient(90deg, rgba(238, 226, 202, 0.9) 0%, rgba(246, 237, 218, 0.95) 50%, rgba(238, 226, 202, 0.9) 100%);
  border: 1px solid #b8860b;
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 2px 8px rgba(100, 70, 35, 0.1);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.plaque-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plaque-sigil {
  font-size: 0.95rem;
}
.plaque-title {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: #2c1e10;
  margin: 0;
  letter-spacing: 0.5px;
}
.plaque-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.7rem;
}
.threat-stamp {
  font-family: 'Cinzel', serif;
  font-weight: bold;
  color: #c62828;
  background: rgba(198, 40, 40, 0.08);
  border: 1px solid rgba(198, 40, 40, 0.25);
  border-radius: 4px;
  padding: 2px 7px;
}
.atmosphere-stamp {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: #4e342e;
}

/* Companion Chronicle Badge (Left page bottom) */
.character-chronicle-badge {
  width: 100%;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(140, 100, 40, 0.2);
  border-radius: 6px;
  padding: 6px 14px;
  box-shadow: 0 2px 6px rgba(100, 75, 45, 0.06);
}
.char-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.character-chronicle-badge h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.98rem;
  color: #2c1e10;
  margin: 0;
}
.char-class-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: bold;
  letter-spacing: 0.8px;
  color: #795548;
  background: rgba(140, 100, 40, 0.12);
  border: 1px solid rgba(140, 100, 40, 0.25);
  padding: 1px 7px;
  border-radius: 8px;
}
.char-motto-quote {
  font-family: 'Georgia', 'Palatino', serif;
  font-size: 0.88rem;
  color: #38220f;
  font-style: italic;
  line-height: 1.35;
  margin: 2px 0 0 0;
}

/* Spine Gutter with Hanging Satin Bookmark Ribbon */
.tome-spine-gutter {
  width: 28px;
  background: linear-gradient(90deg, rgba(60,40,20,0.2) 0%, rgba(30,18,8,0.55) 50%, rgba(60,40,20,0.2) 100%);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.35);
  position: relative;
  display: flex;
  justify-content: center;
}
.tome-ribbon-tail {
  width: 14px;
  height: 100%;
  background: linear-gradient(90deg, #880e4f 0%, #b71c1c 50%, #880e4f 100%);
  border-left: 1px solid #ffd54f;
  border-right: 1px solid #ffd54f;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Page Right: Narrative Prose, Dialogue & Scholar's Tactical Codex */
.page-right {
  background: radial-gradient(circle at 35% 35%, #faf3e1 0%, #eee3c9 100%);
  box-shadow: inset 18px 0 30px rgba(90, 65, 35, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  overflow: hidden;
  scrollbar-width: none;
}

.page-header-ribbon {
  text-align: center;
  margin-bottom: 0px;
}
.chapter-ornate-crest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.crest-leaf {
  color: #b8860b;
  font-size: 0.88rem;
}
.chapter-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #8c6820;
}
.page-story-title {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: #1a1208;
  text-align: center;
  margin: 0px 0 1px 0;
  text-shadow: 0 1px 1px rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
}
.ornate-subdivider {
  display: flex;
  align-items: center;
  justify-content: center;
}
.subdivider-sigil {
  font-size: 0.65rem;
  color: #b8860b;
  letter-spacing: 2px;
}

/* Narrative Body */
.story-narrative-body {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  padding-right: 2px;
  margin-bottom: 2px;
}
.narrative-text {
  font-family: 'Georgia', 'Palatino', serif;
  font-size: 0.85rem;
  line-height: 1.34;
  color: #24190f;
  margin: 0;
}
.narrative-text.drop-cap::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 2.1rem;
  float: left;
  line-height: 0.8;
  margin-right: 5px;
  margin-top: 1px;
  color: #8c6820;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(100, 60, 20, 0.25);
}

/* JRPG Companion Dialogue Box with Expressive Speech Portraits */
.story-dialogue-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 242, 230, 0.98) 100%);
  border: 1.5px solid #c89b3c;
  border-left: 5px solid #8c6820;
  border-radius: 8px;
  padding: 4px 10px;
  margin: 2px 0 3px 0;
  box-shadow: 0 2px 10px rgba(80, 55, 25, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  min-height: unset;
  box-sizing: border-box;
}
.story-dialogue-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(80, 55, 25, 0.2), inset 0 0 12px rgba(255, 255, 255, 0.95);
  border-color: #d4af37;
}
.dialogue-portrait-medallion {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  margin-right: 6px;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(135deg, #fdf1c8 0%, #d4af37 40%, #8c6820 80%, #3e2808 100%);
  box-shadow: 0 3px 8px rgba(45, 30, 10, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.9);
  border: 1px solid #ffe599;
  box-sizing: border-box;
}
.dialogue-speech-portrait {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: cover;
  object-position: top center;
  display: block;
  background-color: #1a1a1a;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.45);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.dialogue-speech-portrait.portrait-pop {
  animation: portraitPopAnim 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes portraitPopAnim {
  0% { transform: scale(0.94); opacity: 0.7; }
  50% { transform: scale(1.03); }
  100% { transform: scale(1.0); opacity: 1; }
}
.dialogue-mood-tag {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2b1810 0%, #4a2c18 100%);
  border: 1px solid #d4af37;
  color: #ffd700;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 6px;
  letter-spacing: 0.6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  z-index: 2;
}
.dialogue-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-left: 8px;
}
.dialogue-header-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.dialogue-speaker {
  font-family: 'Cinzel', serif;
  font-size: 0.94rem;
  font-weight: 800;
  color: #3b220c;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}
.dialogue-title-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  font-weight: 700;
  color: #7b581d;
  background: rgba(184, 134, 11, 0.16);
  border: 1px solid rgba(184, 134, 11, 0.4);
  border-radius: 4px;
  padding: 2px 7px;
}
.dialogue-stepper {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dialogue-step-indicator {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  color: #8c6820;
  font-weight: 700;
}
.btn-dialogue-step {
  background: linear-gradient(135deg, #ffffff 0%, #f4ebd9 100%);
  border: 1.5px solid #b8860b;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: bold;
  color: #5a4014;
  padding: 2px 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.btn-dialogue-step:hover {
  background: #fff8eb;
  border-color: #d4af37;
  color: #2b1810;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.dialogue-quote {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Georgia', serif;
  font-size: 0.88rem;
  font-style: normal;
  color: #1a0f05;
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0.1px;
}

/* ==========================================
   FOLIO SPREAD 2: GRAND CHARACTER SHOWCASE & PARLANCE
   ========================================== */
.grand-character-showcase {
  width: 100%;
  max-width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  box-sizing: border-box;
}
.showcase-arch-crown {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  color: #8c6720;
  letter-spacing: 4px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  font-weight: 700;
}
.grand-portrait-frame {
  position: relative;
  width: 210px;
  height: 255px;
  border-radius: 12px;
  border: 4px solid #b8860b;
  outline: 2px solid #5a3d0f;
  outline-offset: 3px;
  box-shadow: 0 12px 30px rgba(45, 25, 10, 0.45), 0 0 20px rgba(212, 175, 55, 0.35);
  background: #120b05;
  overflow: visible;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}
.grand-portrait-frame:hover {
  transform: scale(1.03);
  box-shadow: 0 16px 36px rgba(45, 25, 10, 0.55), 0 0 28px rgba(255, 215, 0, 0.55);
}
.grand-speech-portrait {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  object-position: top center;
  display: block;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}
.grand-portrait-glow {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: inset 0 0 20px rgba(255, 213, 79, 0.2);
}
.grand-mood-tag {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2b1810 0%, #4a2c18 100%);
  border: 1.5px solid #ffd54f;
  color: #ffd700;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 14px;
  border-radius: 12px;
  letter-spacing: 1.4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.65), 0 0 12px rgba(255, 213, 79, 0.4);
  white-space: nowrap;
  z-index: 5;
}
.grand-speaker-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin-top: 10px;
}
.grand-speaker-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.grand-speaker-name {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #2b180d;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85);
}
.grand-speaker-title {
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #7b581d;
  background: rgba(184, 134, 11, 0.16);
  border: 1px solid rgba(184, 134, 11, 0.4);
  padding: 2px 10px;
  border-radius: 6px;
  letter-spacing: 0.6px;
}
.parlance-listener-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  color: #5d4037;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed rgba(140, 100, 40, 0.35);
  padding: 3px 12px;
  border-radius: 12px;
}
.parlance-listener-badge strong {
  color: #3e2808;
}

/* Dialogue Transcript History Thread */
#story-spread-parlance .tome-page {
  padding: 12px 20px;
  min-height: 0;
}
#story-spread-parlance .page-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

/* Dialogue Transcript History Thread & Parlance Container */
.story-dialogue-transcript-card,
.story-parlance-container {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(246, 238, 222, 0.94) 100%);
  border: 1.5px solid rgba(184, 134, 11, 0.38);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  max-height: none;
  overflow-y: auto;
  box-shadow: inset 0 1px 4px rgba(60, 40, 20, 0.08);
  box-sizing: border-box;
}
.transcript-header-line {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #7a5015;
  letter-spacing: 0.8px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.25);
  padding-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.transcript-sigil {
  font-size: 0.88rem;
}
.story-dialogue-thread,
.parlance-dialogue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.transcript-bubble,
.dialogue-bubble {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  border: 1px solid rgba(184, 134, 11, 0.18);
  background: rgba(255, 255, 255, 0.55);
  box-sizing: border-box;
}
.transcript-bubble:hover,
.dialogue-bubble:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.4);
}
.transcript-bubble.active-line,
.dialogue-bubble.active-line {
  background: rgba(212, 175, 55, 0.24);
  border-left: 4px solid #b8860b;
  border-color: rgba(184, 134, 11, 0.45);
}
.transcript-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.transcript-speaker-tag {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  color: #4a300d;
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  display: block;
}
.transcript-speaker-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.64rem;
  font-weight: 700;
  color: #7b581d;
  background: rgba(184, 134, 11, 0.14);
  border: 1px solid rgba(184, 134, 11, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
}
.transcript-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Georgia', serif;
  font-style: normal;
  color: #1a0f05;
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
}

/* ==========================================
   FOLIO SPREAD 3: THE CROSSROAD DILEMMA ART
   ========================================== */
.dilemma-scene-arch {
  margin-top: 4px;
}
.dilemma-briefing-plaque {
  margin-top: 8px;
}
.dilemma-stakes-text {
  font-family: 'Georgia', serif;
  font-size: 0.78rem;
  color: #4e342e;
  line-height: 1.35;
  margin: 0;
}

/* ==========================================
   FOLIO SPREAD 4: VANGUARD READINESS & PREPARATION
   ========================================== */
.vanguard-readiness-frame {
  width: 100%;
  max-width: 480px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  box-sizing: border-box;
}
.vanguard-summary-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 237, 218, 0.96) 100%);
  border: 1.5px solid #8c6720;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(80, 50, 20, 0.15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.summary-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.summary-sigil {
  font-size: 1.3rem;
}
.summary-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #2b180d;
  margin: 0;
  font-weight: 700;
}
.summary-desc {
  font-family: 'Georgia', serif;
  font-size: 0.86rem;
  color: #4a3420;
  line-height: 1.4;
  margin: 0;
}
.vanguard-rules-tip {
  background: rgba(184, 134, 11, 0.12);
  border-left: 4px solid #b8860b;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  font-size: 0.78rem;
  color: #3e2808;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.vanguard-rules-tip strong {
  font-family: 'Cinzel', serif;
  color: #7b581d;
}

/* ==========================================
   PERSISTENT BOTTOM ACTION BAR ACROSS SPREADS
   ========================================== */
.storybook-bottom-bar {
  height: 44px;
  background: linear-gradient(180deg, #1c1007 0%, #100803 100%);
  border-top: 2px solid #8c6820;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  position: relative;
  z-index: 6;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.btn-story-footer-menu {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #8c6720;
  border-radius: 4px;
  color: #d7ccc8;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: bold;
  padding: 5px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-story-footer-menu:hover {
  background: rgba(184, 134, 11, 0.25);
  color: #ffd54f;
  border-color: #ffd54f;
}
.folio-spread-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.folio-spread-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3e2714;
  border: 1.5px solid #8c6720;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.folio-spread-dot:hover {
  border-color: #ffd54f;
  transform: scale(1.15);
}
.folio-spread-dot.active {
  background: #ffd54f;
  border-color: #fff9c4;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.85);
  transform: scale(1.25);
}

/* ==========================================
   STORYBOOK INTERACTIVE DECISIONS & SKILL CHECKS
   ========================================== */
.story-decision-panel {
  background: linear-gradient(135deg, rgba(255, 252, 245, 0.95) 0%, rgba(246, 237, 220, 0.98) 100%);
  border: 1.5px solid #c89b3c;
  border-left: 5px solid #b8860b;
  border-radius: 8px;
  padding: 6px 10px;
  margin: 2px 0;
  box-shadow: 0 2px 10px rgba(80, 55, 25, 0.1), inset 0 0 8px rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.25s ease;
}
.story-decision-panel.hidden {
  display: none !important;
}

.decision-prompt-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
  padding-bottom: 2px;
}
.decision-sigil {
  font-size: 0.88rem;
  color: #b8860b;
  text-shadow: 0 0 5px rgba(212, 175, 55, 0.4);
}
.decision-header-text {
  display: flex;
  flex-direction: column;
}
.decision-title {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #3e2808;
  margin: 0;
  letter-spacing: 0.5px;
}
.decision-sub {
  font-family: 'Georgia', serif;
  font-size: 0.68rem;
  font-style: italic;
  color: #6d4c1b;
}

/* Choice Cards List: 2-Column Responsive Grid */
.story-choices-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}

.story-choice-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf4e6 100%);
  border: 1.5px solid #d4af37;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(90, 60, 20, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  position: relative;
  text-align: left;
  min-height: 68px;
}
.story-choice-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #ffd54f;
  box-shadow: 0 3px 10px rgba(184, 134, 11, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #fff9ee 100%);
}
.story-choice-card:active:not(:disabled) {
  transform: translateY(0);
}
.story-choice-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(30%);
}
.story-choice-card.selected-choice {
  border-color: #ff9800;
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.4);
}
.story-choice-card.attention-pulse {
  animation: choiceAttentionPulse 0.9s ease-in-out 2;
}
@keyframes choiceAttentionPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 152, 0, 0); }
  50% { transform: scale(1.03); box-shadow: 0 0 16px rgba(255, 152, 0, 0.9), 0 0 4px #ffd54f; border-color: #ff9800; }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(255, 152, 0, 0); }
}

.choice-cameo-wrap {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid #b8860b;
  outline: 1px solid #5a3d0f;
  outline-offset: 1px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  background: #181008;
}
.choice-cameo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.choice-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.choice-title-line {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.choice-title {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #2b180d;
  margin: 0;
}
.choice-desc {
  font-family: 'Georgia', serif;
  font-size: 0.66rem;
  color: #4a3420;
  margin: 0;
  line-height: 1.16;
}

/* Badges */
.choice-badge-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  flex-wrap: wrap;
}
.choice-check-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  font-weight: 700;
  color: #7a4e0a;
  background: rgba(212, 175, 55, 0.18);
  border: 1px solid #d4af37;
  border-radius: 3px;
  padding: 1px 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.choice-reward-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: #2e7d32;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: 3px;
  padding: 1px 4px;
}
.choice-safe-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  color: #5d4037;
  background: rgba(121, 85, 72, 0.1);
  border: 1px solid rgba(121, 85, 72, 0.3);
  border-radius: 3px;
  padding: 1px 4px;
}

/* Animated Parchment d20 Dice Tray */
.story-dice-tray {
  background: radial-gradient(circle at 40% 40%, #2f1b0e 0%, #150a04 100%);
  border: 2px solid #d4af37;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), inset 0 0 16px rgba(0, 0, 0, 0.7);
  color: #fdf5e6;
  margin: 4px 0;
  animation: trayFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes trayFadeIn {
  0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.story-dice-tray.hidden {
  display: none !important;
}

.dice-tray-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.d20-visual-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
}
.story-d20-die {
  position: relative;
  width: 52px;
  height: 52px;
  background: transparent;
  border: none;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.story-d20-die svg.die-svg-poly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.story-d20-die.rolling {
  animation: d20PolyTumble 0.16s infinite linear;
}
.story-d20-die.nat-20 svg.die-svg-poly {
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.95));
}
.story-d20-die.nat-20 .d20-value {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 235, 59, 0.8);
}
.story-d20-die.nat-1 svg.die-svg-poly {
  filter: drop-shadow(0 0 10px rgba(244, 67, 54, 0.85));
}
.story-d20-die.nat-1 .d20-value {
  color: #ff8a80;
  text-shadow: 0 0 6px rgba(244, 67, 54, 0.8);
}
.d20-value {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff4bf;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.95);
  margin-top: 2px;
  user-select: none;
}

.dice-breakdown-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dice-check-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffd54f;
  letter-spacing: 0.5px;
}
.dice-calc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
}
.dice-calc-num {
  font-weight: bold;
  color: #ffffff;
}
.dice-calc-op {
  color: #ffca28;
  font-weight: bold;
}
.dice-calc-total {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffd54f;
  text-shadow: 0 0 6px rgba(255, 213, 79, 0.6);
}
.dice-calc-target {
  font-size: 0.76rem;
  color: #cfd8dc;
  margin-left: 4px;
}
.dice-calc-target strong {
  color: #fff;
}
.dice-result-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: 2px;
}
.dice-result-badge.success {
  background: rgba(76, 175, 80, 0.25);
  border: 1px solid #4caf50;
  color: #a5d6a7;
  text-shadow: 0 0 4px rgba(76, 175, 80, 0.6);
}
.dice-result-badge.fail {
  background: rgba(244, 67, 54, 0.25);
  border: 1px solid #f44336;
  color: #ef9a9a;
}
.dice-result-badge.rolling-text {
  background: rgba(255, 193, 7, 0.2);
  border: 1px solid #ffc107;
  color: #ffe082;
}
.dice-result-badge.complication-pending {
  background: rgba(255, 152, 0, 0.25);
  border: 1px solid #ff9800;
  color: #ffcc80;
}
.dice-result-badge.inspiration-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(255, 215, 0, 0.3) 100%);
  border: 1px solid #ffd54f;
  color: #fff9c4;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.dice-result-badge.rerolling-text {
  background: rgba(255, 215, 0, 0.25);
  border: 1px solid #ffd54f;
  color: #fff59d;
  animation: pulseGold 0.8s infinite alternate;
}

/* Storybook Heroic Inspiration Prompt Panel */
.story-inspiration-prompt {
  margin-top: 10px;
  background: radial-gradient(circle at 50% 30%, #3d2711 0%, #1c0e04 100%);
  border: 1.5px solid #ffd54f;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 4px 18px rgba(255, 213, 79, 0.25), inset 0 0 12px rgba(255, 213, 79, 0.1);
  animation: trayFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.story-inspiration-prompt.hidden {
  display: none !important;
}
.inspiration-prompt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.inspiration-star-icon {
  font-size: 1.1rem;
  color: #ffd54f;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.8);
  animation: starPulse 1.8s infinite ease-in-out;
}
@keyframes starPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px #ffd54f); }
  50% { transform: scale(1.2); filter: drop-shadow(0 0 9px #ffca28); }
}
.inspiration-prompt-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 0.95rem;
  color: #fdf5e6;
  font-style: italic;
  line-height: 1.35;
  margin: 0 0 8px 0;
}
.inspiration-prompt-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-story-inspiration {
  background: linear-gradient(135deg, #ffd54f 0%, #d4af37 50%, #aa7c11 100%);
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #1a0e04;
  letter-spacing: 0.6px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 213, 79, 0.4);
  transition: all 0.2s ease;
}
.btn-story-inspiration:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 213, 79, 0.7);
  background: linear-gradient(135deg, #ffe082 0%, #ffd54f 50%, #c4941d 100%);
}
.btn-story-decline {
  background: rgba(40, 25, 15, 0.7);
  border: 1px solid #78909c;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: #cfd8dc;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-story-decline:hover {
  background: rgba(60, 40, 25, 0.9);
  color: #fff;
  border-color: #b0bec5;
}

/* Choice card & outcome badges */
.choice-inspiration-badge {
  background: rgba(255, 215, 0, 0.15);
  border: 1px solid #ffd54f;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  text-shadow: 0 0 4px rgba(255, 213, 79, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.story-inspiration-star {
  display: inline-block;
  color: #ffd54f;
  font-size: 0.95rem;
  margin-left: 4px;
  text-shadow: 0 0 6px rgba(255, 213, 79, 0.8);
  animation: starPulse 2s infinite ease-in-out;
  cursor: help;
}
.outcome-inspiration-tag {
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid #ffd54f;
  color: #d4af37;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
}
.outcome-inspiration-tag.hidden {
  display: none !important;
}

/* =========================================================
   STORYBOOK NPC ENCOUNTER & MORAL CROSSROADS STYLES
   ========================================================= */
.story-npc-encounter-card {
  margin: 2px 0 3px 0;
  padding: 4px 8px;
  background: linear-gradient(135deg, rgba(35, 22, 12, 0.92) 0%, rgba(20, 12, 6, 0.96) 100%);
  border: 1.5px solid #8d6e63;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(141, 110, 99, 0.2);
  animation: trayFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.story-npc-encounter-card.hidden {
  display: none !important;
}
.npc-encounter-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.npc-encounter-portrait {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #ffd54f;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 6px rgba(255, 213, 79, 0.4);
  flex-shrink: 0;
}
.npc-encounter-meta {
  flex: 1;
  min-width: 0;
}
.npc-encounter-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.npc-encounter-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffd54f;
  margin: 0;
  letter-spacing: 0.5px;
}
.npc-encounter-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.npc-encounter-badge.npc-allied, .npc-encounter-badge.npc-friendly {
  background: rgba(46, 125, 50, 0.35);
  border: 1px solid #81c784;
  color: #a5d6a7;
}
.npc-encounter-badge.npc-neutral {
  background: rgba(255, 179, 0, 0.25);
  border: 1px solid #ffd54f;
  color: #ffe082;
}
.npc-encounter-badge.npc-hostile, .npc-encounter-badge.npc-boss {
  background: rgba(198, 40, 40, 0.35);
  border: 1px solid #e57373;
  color: #ffcdd2;
}
.npc-encounter-badge.npc-nemesis {
  background: rgba(142, 36, 170, 0.35);
  border: 1px solid #ce93d8;
  color: #e1bee7;
  animation: pulsePurple 1.5s infinite alternate;
}
.npc-encounter-badge.npc-companion {
  background: rgba(212, 175, 55, 0.35);
  border: 1px solid #ffd54f;
  color: #fff9c4;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
}
@keyframes pulsePurple {
  0% { box-shadow: 0 0 4px rgba(186, 104, 200, 0.4); }
  100% { box-shadow: 0 0 12px rgba(186, 104, 200, 0.9); }
}
.npc-encounter-sub {
  font-family: 'Crimson Pro', serif;
  font-size: 0.76rem;
  font-style: italic;
  color: #d7ccc8;
  margin-top: 1px;
}
.npc-encounter-quote {
  font-family: 'Crimson Pro', serif;
  font-size: 0.76rem;
  font-style: italic;
  line-height: 1.18;
  color: #fdf5e6;
  margin: 0;
  padding-left: 6px;
  border-left: 2px solid #ffd54f;
}

/* Companion Unlock Celebration Banner */
.story-companion-unlock-banner {
  margin-top: 14px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(80, 50, 10, 0.95) 0%, rgba(30, 20, 5, 0.98) 100%);
  border: 2px solid #ffd54f;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff9c4;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  box-shadow: 0 0 20px rgba(255, 213, 79, 0.5), inset 0 0 12px rgba(255, 213, 79, 0.3);
  animation: bannerPulse 2s infinite alternate;
}
.story-companion-unlock-banner.hidden {
  display: none !important;
}
@keyframes bannerPulse {
  0% { transform: scale(1); box-shadow: 0 0 14px rgba(255, 213, 79, 0.4); }
  100% { transform: scale(1.01); box-shadow: 0 0 25px rgba(255, 213, 79, 0.7); }
}
.unlock-star {
  font-size: 1.3rem;
  color: #ffd54f;
  text-shadow: 0 0 10px #ffd54f;
}

/* Moral Crossroads Card Styling */
.story-choice-card.is-crossroads-mercy {
  border-color: #ffd54f;
  background: linear-gradient(135deg, rgba(60, 45, 15, 0.85) 0%, rgba(25, 18, 5, 0.9) 100%);
}
.story-choice-card.is-crossroads-mercy:hover {
  border-color: #ffe082;
  box-shadow: 0 4px 18px rgba(255, 213, 79, 0.4);
}
.story-choice-card.is-crossroads-slay {
  border-color: #e57373;
  background: linear-gradient(135deg, rgba(60, 15, 15, 0.85) 0%, rgba(30, 5, 5, 0.9) 100%);
}
.story-choice-card.is-crossroads-slay:hover {
  border-color: #ff8a80;
  box-shadow: 0 4px 18px rgba(229, 115, 115, 0.4);
}

/* Outcome Callout Panel */
.story-outcome-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(243, 235, 218, 0.98) 100%);
  border: 1.5px solid #2e7d32;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 4px 0;
  box-shadow: 0 4px 14px rgba(46, 125, 50, 0.15);
  animation: trayFadeIn 0.35s ease;
}
.story-outcome-panel.complication {
  border-color: #c62828;
  border-left-color: #e53935;
  box-shadow: 0 4px 14px rgba(198, 40, 40, 0.15);
}
.story-outcome-panel.hidden {
  display: none !important;
}

.outcome-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.outcome-seal {
  font-size: 1.1rem;
  color: #2e7d32;
}
.story-outcome-panel.complication .outcome-seal {
  color: #c62828;
}
.outcome-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.outcome-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1b5e20;
  margin: 0;
}
.story-outcome-panel.complication .outcome-title {
  color: #b71c1c;
}
.outcome-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #e8f5e9;
  border: 1px solid #81c784;
  color: #2e7d32;
}
.story-outcome-panel.complication .outcome-badge {
  background: #ffebee;
  border-color: #e57373;
  color: #c62828;
}
.outcome-desc {
  font-family: 'Georgia', serif;
  font-size: 0.82rem;
  color: #2b180d;
  margin: 0 0 6px 0;
  line-height: 1.4;
}
.outcome-perks-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.perk-pill {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #1565c0;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 12px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.perk-pill.gold {
  color: #7a4e0a;
  background: #fff8e1;
  border-color: #ffd54f;
}

/* Scholar's Tactical Codex Marginalia (D&D 2024 Rules Callout) */
.story-mechanic-callout {
  background: linear-gradient(90deg, rgba(232, 218, 192, 0.9) 0%, rgba(246, 238, 216, 0.95) 100%);
  border: 1px solid #8c6720;
  border-radius: 6px;
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
  box-shadow: 0 2px 6px rgba(130, 95, 40, 0.1);
}
.mechanic-wax-seal {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #e53935 0%, #8e0000 100%);
  border: 1px solid #ffd54f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffd54f;
  font-size: 0.62rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.mechanic-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.mechanic-header-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mechanic-details strong {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: #4e342e;
}
.codex-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #7b581d;
  background: rgba(184, 134, 11, 0.16);
  border: 1px solid rgba(184, 134, 11, 0.4);
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.6px;
}
.mechanic-details span {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: #5d4037;
  line-height: 1.18;
}

/* Page Action Row */
.page-action-row {
  margin-top: auto;
  padding-top: 2px;
  display: flex;
  justify-content: flex-end;
}

.btn-story-primary {
  background: linear-gradient(180deg, #d4af37 0%, #8c6820 100%);
  border: 2px solid #ffd54f;
  border-radius: 6px;
  color: #170f07;
  font-family: 'Cinzel', serif;
  font-size: 0.86rem;
  font-weight: bold;
  padding: 6px 16px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(184, 134, 11, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-story-primary:hover {
  background: linear-gradient(180deg, #ffd700 0%, #a07828 100%);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(255, 215, 0, 0.6);
}
.btn-story-primary .arrow {
  font-size: 1.05rem;
  transition: transform 0.2s;
}
.btn-story-primary:hover .arrow {
  transform: translateX(4px);
}

.btn-sound.story-btn {
  background: linear-gradient(180deg, #3d2c1c 0%, #20140c 100%);
  border-color: #b8860b;
  color: #ffd54f;
  font-weight: bold;
}
.btn-sound.story-btn:hover {
  background: linear-gradient(180deg, #573f27 0%, #2e1d10 100%);
  border-color: #ffd54f;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.4);
}

/* =========================================================
   OVERLAND EXPEDITION & ROUTE FOLIO STYLES (Act I–IV)
   ========================================================= */
.travel-map-viewport {
  width: 100%;
  max-width: 520px;
  background: radial-gradient(circle at 50% 40%, #fbf4e2 0%, #edd9b4 100%);
  border: 2px solid #8c6720;
  border-radius: 8px;
  box-shadow: inset 0 0 16px rgba(90, 65, 35, 0.25), 0 4px 14px rgba(40, 25, 10, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 6px;
}

.travel-map-canvas-wrap {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
}

.travel-map-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.travel-map-legend-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 4px 8px;
  background: rgba(90, 65, 35, 0.12);
  border-top: 1px solid rgba(140, 103, 32, 0.3);
}

.map-legend-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #5a3d0f;
  letter-spacing: 0.5px;
}

/* Travel D20 Dice Tray */
.travel-d20-tray {
  width: 100%;
  max-width: 520px;
  background: radial-gradient(circle at 40% 40%, #2f1b0e 0%, #150a04 100%);
  border: 2px solid #d4af37;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), inset 0 0 14px rgba(0, 0, 0, 0.7);
  color: #fdf5e6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.travel-d20-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  padding-bottom: 3px;
}

.dice-section-sigil {
  font-size: 0.9rem;
}

.dice-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffd54f;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Advantage Staking Panel */
.travel-advantage-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed rgba(212, 175, 55, 0.25);
  flex-wrap: wrap;
}

.btn-travel-advantage {
  background: linear-gradient(135deg, rgba(60, 40, 20, 0.8) 0%, rgba(30, 18, 8, 0.9) 100%);
  border: 1.5px solid #d4af37;
  border-radius: 5px;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-travel-advantage:hover {
  background: linear-gradient(135deg, rgba(90, 60, 30, 0.9) 0%, rgba(45, 28, 12, 0.95) 100%);
  border-color: #ffd54f;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
}

.btn-travel-advantage.active-advantage {
  background: linear-gradient(135deg, #ffd54f 0%, #b8860b 100%);
  color: #1a0e04;
  border-color: #fff;
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.8);
}

.travel-adv-stock-label {
  font-family: 'Crimson Pro', serif;
  font-size: 0.75rem;
  font-style: italic;
  color: #cfd8dc;
}

/* Right Page Landscape Viewport */
.travel-landscape-arch {
  margin-bottom: 6px;
}

.travel-landscape-viewport {
  height: 150px;
  max-height: 25vh;
}

/* Route Cards List */
.travel-routes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.travel-route-card {
  background: linear-gradient(135deg, #ffffff 0%, #faf4e6 100%);
  border: 1.5px solid #d4af37;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(90, 60, 20, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  position: relative;
  text-align: left;
}

.travel-route-card:hover {
  transform: translateY(-1px);
  border-color: #ffd54f;
  box-shadow: 0 3px 10px rgba(184, 134, 11, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #fff9ee 100%);
}

.travel-route-card.selected-route {
  border-color: #ff9800;
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.45);
}

.travel-route-card.attention-pulse {
  animation: choiceAttentionPulse 0.9s ease-in-out 2;
}

.travel-advocate-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #b8860b;
  outline: 1px solid #5a3d0f;
  outline-offset: 1px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  background: #181008;
}

.travel-advocate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.travel-route-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.travel-route-title-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.travel-route-name {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #3e2808;
}

.travel-check-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 700;
  color: #7a4e0a;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid #d4af37;
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.travel-advocate-quote {
  font-family: 'Crimson Pro', serif;
  font-size: 0.74rem;
  font-style: italic;
  color: #5c3b12;
  line-height: 1.25;
  margin: 0;
}

.travel-perk-preview {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.travel-route-roll-hint {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #b71c1c;
  background: rgba(183, 28, 28, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(183, 28, 28, 0.28);
  margin-left: auto;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: all 0.18s ease;
}

.travel-route-card:hover .travel-route-roll-hint {
  background: #b71c1c;
  color: #ffffff;
  border-color: #b71c1c;
  box-shadow: 0 2px 6px rgba(183, 28, 28, 0.35);
}

.travel-route-card.rolling-choice {
  border-color: #ffd54f !important;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.6) !important;
  animation: choiceRollingGlow 0.4s ease-in-out infinite alternate;
}

@keyframes choiceRollingGlow {
  0% { transform: scale(1); box-shadow: 0 0 8px rgba(255, 213, 79, 0.4); }
  100% { transform: scale(1.015); box-shadow: 0 0 16px rgba(255, 213, 79, 0.8); }
}

/* Travel Outcome Card */
.travel-outcome-card {
  margin-top: 6px;
  background: linear-gradient(135deg, rgba(255, 252, 245, 0.95) 0%, rgba(246, 237, 220, 0.98) 100%);
  border: 1.5px solid #d4af37;
  border-left: 5px solid #4caf50;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 3px 12px rgba(80, 55, 25, 0.15);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: trayFadeIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.travel-outcome-card.fail {
  border-left-color: #f44336;
}

.travel-outcome-card.hidden {
  display: none !important;
}

.outcome-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.outcome-icon {
  font-size: 1.2rem;
}

.outcome-text-wrap {
  display: flex;
  flex-direction: column;
}

.outcome-title {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2e1d09;
  margin: 0;
}

.outcome-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #2e7d32;
}

.outcome-desc {
  font-family: 'Crimson Pro', serif;
  font-size: 0.8rem;
  color: #4e3619;
  line-height: 1.3;
  margin: 0;
}

.travel-outcome-rewards {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.travel-reward-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #8c6720;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid #d4af37;
  border-radius: 3px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Responsive Folio Spreads for Compact Screens */
@media (max-width: 860px) {
  .story-folio-spread.active {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
  .tome-spine-gutter {
    display: none !important;
  }
  .grand-portrait-frame {
    width: 170px;
    height: 210px;
  }
  .story-choices-list {
    grid-template-columns: 1fr !important;
  }
  .story-folio-tabs {
    gap: 4px;
  }
  .story-folio-tab {
    font-size: 0.65rem;
    padding: 2px 8px;
  }
}

/* ==========================================
   PROGRESSIVE HUD GUIDANCE STYLES
   (Non-destructive: highlights recommended actions without hiding combat commands)
   ========================================== */
/* Stage 1: Minimal Movement Prologue Guidance */
.hud-prologue-move #slot-speed {
  animation: pulseSlot 1.5s infinite;
  font-weight: bold;
  color: #ffeb3b !important;
  text-shadow: 0 0 8px rgba(255, 235, 59, 0.6);
}

/* Stage 2: Attack Introduction Guidance */
.hud-prologue-attack #btn-attack-action {
  animation: pulseGoldBtn 1.5s infinite;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.85);
}

@keyframes pulseGoldBtn {
  0% { box-shadow: 0 0 6px rgba(255, 213, 79, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 18px rgba(255, 213, 79, 0.85); transform: scale(1.04); }
  100% { box-shadow: 0 0 6px rgba(255, 213, 79, 0.4); transform: scale(1); }
}

/* Cleave Mastery Primed State (Secondary Foe in Reach) */
#btn-attack-action.cleave-primed,
.btn-action.cleave-primed {
  border-color: #ffb74d !important;
  background: linear-gradient(180deg, #422912 0%, #241407 100%) !important;
  color: #ffe0b2 !important;
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.5) !important;
}

@keyframes pulseSlot {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); color: #ffd54f; }
  100% { transform: scale(1); }
}

/* ==========================================
   TACTICAL FLANK PORTRAIT PANELS & VIEWPORT FRAME
   ========================================== */
.combat-viewport-frame {
  position: relative;
  display: block;
  margin: 0 auto 6px auto;
  width: 1060px;
  height: 580px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--border-gold);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.6);
  background: #080c10;
  box-sizing: border-box;
}

.combat-canvas-viewport {
  position: relative;
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: pan-x pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.combat-canvas-viewport.canvas-dragging {
  cursor: grabbing !important;
}

#combat-canvas {
  display: block;
  margin: 0;
  width: var(--canvas-width, 1060px);
  height: var(--canvas-height, 580px);
  aspect-ratio: 1060 / 580;
  max-width: none;
  max-height: none;
  object-fit: fill;
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.12s ease-out, height 0.12s ease-out;
}

/* Desktop Zoom HUD Buttons */
.combat-zoom-controls {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin: 0 4px;
}
.btn-zoom-btn {
  font-size: 0.72rem !important;
  padding: 3px 8px !important;
  min-height: 28px !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  border-radius: 4px !important;
  cursor: pointer;
  touch-action: manipulation;
}

.tactical-flank-panel {
  position: absolute;
  top: 10px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.tactical-flank-panel.flank-left {
  left: 10px;
  width: 175px;
}

.tactical-flank-panel.flank-right {
  right: 10px;
  width: 185px;
  align-items: flex-end;
}

.flank-header-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-gold);
  background: rgba(10, 14, 20, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  padding: 3px 9px;
  width: fit-content;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.flank-roster-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  pointer-events: none;
}

/* Individual Unit Card */
.combatant-portrait-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(16, 20, 28, 0.88) 0%, rgba(10, 13, 18, 0.92) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 22px 6px 6px 22px;
  padding: 3px 9px 3px 3px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  user-select: none;
  position: relative;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  width: 100%;
  box-sizing: border-box;
}

.combatant-portrait-card.monster-card {
  border-radius: 6px 22px 22px 6px;
  padding: 3px 3px 3px 9px;
  flex-direction: row-reverse;
  border-color: rgba(140, 59, 59, 0.5);
  background: linear-gradient(135deg, rgba(24, 14, 16, 0.88) 0%, rgba(14, 10, 12, 0.92) 100%);
}

.combatant-portrait-card:hover {
  background: linear-gradient(135deg, rgba(30, 38, 52, 0.95) 0%, rgba(18, 24, 34, 0.98) 100%);
  border-color: var(--border-gold);
  transform: translateX(4px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.75);
}

.combatant-portrait-card.monster-card:hover {
  background: linear-gradient(135deg, rgba(46, 20, 24, 0.95) 0%, rgba(26, 12, 16, 0.98) 100%);
  transform: translateX(-4px);
  border-color: #ff5252;
  box-shadow: 0 6px 16px rgba(255, 82, 82, 0.35);
}

.combatant-portrait-card.is-active-turn {
  border-color: #ffd54f;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.75);
  background: linear-gradient(90deg, rgba(62, 48, 20, 0.95) 0%, rgba(26, 32, 45, 0.95) 100%);
}

.combatant-portrait-card.is-selected-target {
  border-color: #ff5252;
  box-shadow: 0 0 14px rgba(255, 82, 82, 0.85);
  animation: pulseTargetCard 1.5s infinite;
  position: relative;
}

.combatant-portrait-card.monster-card.is-selected-target::after {
  content: "LOCKED • CLICK TO STRIKE";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #ffe082;
  letter-spacing: 0.5px;
  background: rgba(18, 22, 32, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #ff5252;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

/* Spell Primed Portrait Cards */
.combatant-portrait-card.spell-target-primed {
  position: relative;
  border-width: 2px !important;
  animation: pulseSpellTargetCard 1.3s infinite !important;
}

.combatant-portrait-card.spell-target-nature {
  border-color: #81c784 !important;
  box-shadow: 0 0 16px rgba(129, 199, 132, 0.9) !important;
}
.combatant-portrait-card.spell-target-nature::after {
  content: "🌸 PRIMED • CLICK TO HEAL";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #a5d6a7;
  background: rgba(10, 28, 14, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #81c784;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-arcane {
  border-color: #ce93d8 !important;
  box-shadow: 0 0 16px rgba(206, 147, 216, 0.9) !important;
}
.combatant-portrait-card.spell-target-arcane::after {
  content: "🔮 PRIMED • CLICK TO FIRE";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #e1bee7;
  background: rgba(30, 10, 38, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #ce93d8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-shatter {
  border-color: #f06292 !important;
  box-shadow: 0 0 16px rgba(240, 98, 146, 0.9) !important;
}
.combatant-portrait-card.spell-target-shatter::after {
  content: "💥 BURST CENTER • CLICK TO DETONATE";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #f8bbd0;
  background: rgba(40, 10, 25, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #f06292;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-thorn {
  border-color: #66bb6a !important;
  box-shadow: 0 0 16px rgba(102, 187, 106, 0.9) !important;
}
.combatant-portrait-card.spell-target-thorn::after {
  content: "🌿 PRIMED • THORN WHIP (30ft)";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #c8e6c9;
  background: rgba(14, 35, 18, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #66bb6a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-frost {
  border-color: #29b6f6 !important;
  box-shadow: 0 0 16px rgba(41, 182, 246, 0.9) !important;
}
.combatant-portrait-card.spell-target-frost::after {
  content: "❄️ PRIMED • RAY OF FROST (60ft)";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #b3e5fc;
  background: rgba(10, 25, 40, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #29b6f6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-moonbeam {
  border-color: #80deea !important;
  box-shadow: 0 0 16px rgba(128, 222, 234, 0.9) !important;
}
.combatant-portrait-card.spell-target-moonbeam::after {
  content: "🌙 PRIMED • MOONBEAM (2d10)";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #e0f7fa;
  background: rgba(0, 37, 40, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #80deea;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-lightning {
  border-color: #ffd600 !important;
  box-shadow: 0 0 16px rgba(255, 214, 0, 0.9) !important;
}
.combatant-portrait-card.spell-target-lightning::after {
  content: "⚡ BLAST CENTER • CALL LIGHTNING";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #fffde7;
  background: rgba(45, 35, 5, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #ffd600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.combatant-portrait-card.spell-target-fireball {
  border-color: #ff3d00 !important;
  box-shadow: 0 0 18px rgba(255, 61, 0, 0.95) !important;
}
.combatant-portrait-card.spell-target-fireball::after {
  content: "🔥 BLAST CENTER • FIREBALL (8d6)";
  position: absolute;
  top: -9px;
  right: 8px;
  font-size: 8.5px;
  font-family: monospace;
  font-weight: bold;
  color: #fbe9e7;
  background: rgba(50, 15, 5, 0.95);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid #ff3d00;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

@keyframes pulseSpellTargetCard {
  0% { box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); }
  50% { box-shadow: 0 0 16px rgba(255, 255, 255, 0.85); }
  100% { box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); }
}

/* Active spell button styling */
.action-buttons-group .btn-action.active-spell {
  animation: pulseSpellBtn 1.8s infinite;
}
.action-buttons-group .btn-action.active-spell.nature-spell {
  border-color: #81c784 !important;
  background: linear-gradient(180deg, #1b5e20 0%, #0d3310 100%) !important;
  color: #e8f5e9 !important;
  box-shadow: 0 0 12px rgba(129, 199, 132, 0.7) !important;
}
.action-buttons-group .btn-action.active-spell.nature-cantrip {
  border-color: #66bb6a !important;
  background: linear-gradient(180deg, #1b5e20 0%, #0a2e0e 100%) !important;
  color: #e8f5e9 !important;
  box-shadow: 0 0 12px rgba(102, 187, 106, 0.75) !important;
}
.action-buttons-group .btn-action.active-spell.frost-cantrip {
  border-color: #29b6f6 !important;
  background: linear-gradient(180deg, #01579b 0%, #002744 100%) !important;
  color: #e1f5fe !important;
  box-shadow: 0 0 12px rgba(41, 182, 246, 0.75) !important;
}
.action-buttons-group .btn-action.active-spell.thunder-spell {
  border-color: #00e5ff !important;
  background: linear-gradient(180deg, #006064 0%, #00363a 100%) !important;
  color: #e0f7fa !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.7) !important;
}
.action-buttons-group .btn-action.active-spell.arcane-spell {
  border-color: #ce93d8 !important;
  background: linear-gradient(180deg, #4a148c 0%, #2a0845 100%) !important;
  color: #f3e5f5 !important;
  box-shadow: 0 0 12px rgba(206, 147, 216, 0.7) !important;
}
.action-buttons-group .btn-action.active-spell.shatter-spell {
  border-color: #f06292 !important;
  background: linear-gradient(180deg, #880e4f 0%, #4a0024 100%) !important;
  color: #fce4ec !important;
  box-shadow: 0 0 12px rgba(240, 98, 146, 0.7) !important;
}
.action-buttons-group .btn-action.active-spell.moonbeam-spell {
  border-color: #80deea !important;
  background: linear-gradient(180deg, #004d40 0%, #00251a 100%) !important;
  color: #e0f2f1 !important;
  box-shadow: 0 0 12px rgba(128, 222, 234, 0.8) !important;
}
.action-buttons-group .btn-action.active-spell.lightning-spell {
  border-color: #ffd600 !important;
  background: linear-gradient(180deg, #f57f17 0%, #3e2723 100%) !important;
  color: #fffde7 !important;
  box-shadow: 0 0 14px rgba(255, 214, 0, 0.8) !important;
}
.action-buttons-group .btn-action.active-spell.fireball-spell {
  border-color: #ff3d00 !important;
  background: linear-gradient(180deg, #bf360c 0%, #3e1b00 100%) !important;
  color: #fbe9e7 !important;
  box-shadow: 0 0 14px rgba(255, 61, 0, 0.85) !important;
}

/* Cantrip badges & Storybook Styling */
.cantrip-badge {
  background: rgba(255, 215, 0, 0.18) !important;
  border: 1px solid #ffd54f !important;
  color: #fff9c4 !important;
  font-size: 0.72rem !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
}
.storybook-cantrip-badge {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: bold;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.storybook-cantrip-badge.druidcraft {
  background: rgba(46, 125, 50, 0.35);
  border: 1px solid #81c784;
  color: #c8e6c9;
  box-shadow: 0 0 8px rgba(129, 199, 132, 0.4);
}
.storybook-cantrip-badge.magehand {
  background: rgba(123, 31, 162, 0.35);
  border: 1px solid #ba68c8;
  color: #e1bee7;
  box-shadow: 0 0 8px rgba(186, 104, 200, 0.4);
}
.choice-btn.is-cantrip {
  border-width: 1.5px !important;
}
.choice-btn.is-cantrip.druidcraft {
  border-color: #81c784 !important;
  background: linear-gradient(180deg, rgba(27, 94, 32, 0.3) 0%, rgba(13, 51, 16, 0.4) 100%) !important;
}
.choice-btn.is-cantrip.druidcraft:hover {
  border-color: #a5d6a7 !important;
  box-shadow: 0 0 12px rgba(129, 199, 132, 0.5) !important;
}
.choice-btn.is-cantrip.magehand {
  border-color: #ba68c8 !important;
  background: linear-gradient(180deg, rgba(74, 20, 140, 0.3) 0%, rgba(42, 8, 69, 0.4) 100%) !important;
}
.choice-btn.is-cantrip.magehand:hover {
  border-color: #ce93d8 !important;
  box-shadow: 0 0 12px rgba(186, 104, 200, 0.5) !important;
}
@keyframes pulseSpellBtn {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@keyframes pulseTargetCard {
  0% { box-shadow: 0 0 6px rgba(255, 82, 82, 0.4); }
  50% { box-shadow: 0 0 14px rgba(255, 82, 82, 0.9); border-color: #ff1744; }
  100% { box-shadow: 0 0 6px rgba(255, 82, 82, 0.4); }
}

.combatant-portrait-card.is-slain {
  opacity: 0.38;
  filter: grayscale(100%);
  cursor: default;
  pointer-events: none;
}

.card-avatar-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border-bronze);
  flex-shrink: 0;
  background: #000;
}

.is-active-turn .card-avatar-wrapper {
  border-color: #ffd54f;
}

.combatant-portrait-card.monster-card .card-avatar-wrapper {
  border-color: #8c3b3b;
}

.card-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.card-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.card-name {
  font-size: 0.74rem;
  font-weight: bold;
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95px;
}

.is-active-turn .card-name {
  color: #ffd54f;
}

.card-ac-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-gold);
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  white-space: nowrap;
}

.card-distance-badge {
  font-size: 0.65rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: bold;
  white-space: nowrap;
}

.card-distance-badge.in-reach {
  background: rgba(46, 125, 50, 0.4);
  color: #a5d6a7;
  border: 1px solid #43a047;
}

.card-distance-badge.out-reach {
  background: rgba(90, 40, 20, 0.3);
  color: #ffb74d;
  border: 1px solid #8d4f20;
}

.card-hp-track {
  width: 100%;
  height: 4px;
  background: #11141a;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #282f3d;
}

.card-hp-fill {
  height: 100%;
  background: #4caf50;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.monster-card .card-hp-fill {
  background: #e53935;
}

.card-hp-text {
  font-size: 0.65rem;
  color: var(--text-dim);
}

.card-slain-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.75);
  color: #ff5252;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 1px solid #ff5252;
}

.card-condition-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}

.card-condition-badge {
  font-size: 0.58rem;
  font-family: monospace;
  font-weight: bold;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1.2;
}

.card-condition-badge.vexed {
  background: rgba(74, 20, 140, 0.75);
  color: #ce93d8;
  border: 1px solid #ba68c8;
}

.card-condition-badge.sapped {
  background: rgba(27, 94, 32, 0.75);
  color: #a5d6a7;
  border: 1px solid #81c784;
}

.card-condition-badge.slowed {
  background: rgba(0, 96, 100, 0.75);
  color: #80deea;
  border: 1px solid #4dd0e1;
}

.card-condition-badge.prone {
  background: rgba(230, 81, 0, 0.75);
  color: #ffe082;
  border: 1px solid #ffb74d;
}

.card-condition-badge.poisoned {
  background: rgba(27, 94, 32, 0.75);
  color: #69f0ae;
  border: 1px solid #00e676;
}

.card-condition-badge.restrained {
  background: rgba(191, 54, 12, 0.75);
  color: #ffb74d;
  border: 1px solid #ff9800;
}

.card-condition-badge.dodge {
  background: rgba(30, 58, 95, 0.85);
  color: #90caf9;
  border: 1px solid #42a5f5;
  box-shadow: 0 0 4px rgba(66, 165, 245, 0.4);
}

.card-condition-badge.dash {
  background: rgba(2, 119, 189, 0.85);
  color: #b3e5fc;
  border: 1px solid #4fc3f7;
  box-shadow: 0 0 4px rgba(79, 195, 247, 0.4);
}

/* ==========================================================================
   Spell Slot Tracker & Daily Spell System (SRD 5.2)
   ========================================================================== */

.spell-slots-tracker-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(135deg, rgba(22, 28, 38, 0.95) 0%, rgba(14, 18, 26, 0.98) 100%);
  border: 1px solid var(--border-bronze);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.spell-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  padding-bottom: 4px;
}

.slot-tracker-title {
  font-size: 0.76rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  color: var(--text-gold);
  text-transform: uppercase;
}

.slot-tracker-sub {
  font-size: 0.68rem;
  color: var(--text-dim);
  font-style: italic;
}

.spell-slot-tiers {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.spell-tier-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.spell-tier-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #b0bec5;
  text-transform: uppercase;
}

.slot-pips-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.slot-pip {
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-sizing: border-box;
}

.slot-pip.level-1 {
  background: linear-gradient(135deg, #43a047, #a5d6a7);
  border: 1px solid #81c784;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.75), inset 0 0 3px #ffffff;
}

.slot-pip.level-2 {
  background: linear-gradient(135deg, #8e24aa, #ce93d8);
  border: 1px solid #ba68c8;
  box-shadow: 0 0 9px rgba(171, 71, 188, 0.85), inset 0 0 3px #ffffff;
}

.slot-pip.spent {
  background: #181d27;
  border: 1px solid #37474f;
  box-shadow: none;
  opacity: 0.45;
  transform: rotate(45deg) scale(0.85);
}

/* Mini Spell Pips in Tactical Portrait Bar */
.mini-slot-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

.mini-slot-pip {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border-radius: 1px;
  box-sizing: border-box;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.mini-slot-pip.level-1 {
  background: #4caf50;
  box-shadow: 0 0 3px rgba(76, 175, 80, 0.8);
}

.mini-slot-pip.level-2 {
  background: #ba68c8;
  box-shadow: 0 0 4px rgba(186, 104, 200, 0.85);
}

.mini-slot-pip.spent {
  background: #263238;
  box-shadow: none;
  opacity: 0.35;
}

/* Action Tray Spell Buttons */
.action-btn.nature-spell {
  border-color: #388e3c;
  background: linear-gradient(180deg, rgba(30, 70, 32, 0.85) 0%, rgba(18, 42, 20, 0.95) 100%);
}

.action-btn.nature-spell:hover:not(:disabled) {
  border-color: #81c784;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.6);
  background: linear-gradient(180deg, rgba(46, 105, 50, 0.9) 0%, rgba(27, 60, 30, 0.98) 100%);
}

.action-btn.thunder-spell {
  border-color: #00838f;
  background: linear-gradient(180deg, rgba(16, 68, 77, 0.85) 0%, rgba(10, 41, 46, 0.95) 100%);
}

.action-btn.thunder-spell:hover:not(:disabled) {
  border-color: #4dd0e1;
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.6);
  background: linear-gradient(180deg, rgba(24, 98, 110, 0.9) 0%, rgba(14, 58, 65, 0.98) 100%);
}

.action-btn.arcane-spell {
  border-color: #7b1fa2;
  background: linear-gradient(180deg, rgba(63, 22, 85, 0.85) 0%, rgba(38, 12, 51, 0.95) 100%);
}

.action-btn.arcane-spell:hover:not(:disabled) {
  border-color: #ba68c8;
  box-shadow: 0 0 10px rgba(186, 104, 200, 0.65);
  background: linear-gradient(180deg, rgba(92, 32, 124, 0.9) 0%, rgba(54, 17, 74, 0.98) 100%);
}

.action-btn.shatter-spell {
  border-color: #c2185b;
  background: linear-gradient(180deg, rgba(90, 18, 52, 0.85) 0%, rgba(53, 10, 30, 0.95) 100%);
}

.action-btn.shatter-spell:hover:not(:disabled) {
  border-color: #f06292;
  box-shadow: 0 0 12px rgba(240, 98, 146, 0.7);
  background: linear-gradient(180deg, rgba(125, 25, 72, 0.9) 0%, rgba(72, 14, 41, 0.98) 100%);
}

.action-btn.moonbeam-spell, .btn-action.moonbeam-spell {
  border-color: #00838f;
  background: linear-gradient(180deg, rgba(0, 77, 85, 0.85) 0%, rgba(0, 40, 45, 0.95) 100%);
  color: #e0f7fa;
}
.action-btn.moonbeam-spell:hover:not(:disabled), .btn-action.moonbeam-spell:hover:not(:disabled) {
  border-color: #80deea;
  box-shadow: 0 0 12px rgba(128, 222, 234, 0.7);
  background: linear-gradient(180deg, rgba(0, 105, 115, 0.9) 0%, rgba(0, 55, 60, 0.98) 100%);
}

.action-btn.lightning-spell, .btn-action.lightning-spell {
  border-color: #f57f17;
  background: linear-gradient(180deg, rgba(100, 65, 5, 0.85) 0%, rgba(55, 35, 0, 0.95) 100%);
  color: #fffde7;
}
.action-btn.lightning-spell:hover:not(:disabled), .btn-action.lightning-spell:hover:not(:disabled) {
  border-color: #ffd600;
  box-shadow: 0 0 12px rgba(255, 214, 0, 0.7);
  background: linear-gradient(180deg, rgba(140, 90, 10, 0.9) 0%, rgba(80, 50, 0, 0.98) 100%);
}

.action-btn.fireball-spell, .btn-action.fireball-spell {
  border-color: #d84315;
  background: linear-gradient(180deg, rgba(110, 30, 10, 0.85) 0%, rgba(60, 15, 5, 0.95) 100%);
  color: #fbe9e7;
}
.action-btn.fireball-spell:hover:not(:disabled), .btn-action.fireball-spell:hover:not(:disabled) {
  border-color: #ff5722;
  box-shadow: 0 0 14px rgba(255, 87, 34, 0.75);
  background: linear-gradient(180deg, rgba(160, 45, 15, 0.9) 0%, rgba(90, 25, 10, 0.98) 100%);
}

.action-btn .spell-slot-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.25);
  vertical-align: middle;
}

/* ==========================================
   ILLUMINATED MAGIC ITEM LOOT & TREASURE STYLES
   ========================================== */
.loot-card {
  max-width: 640px;
  width: 95%;
  max-height: min(92vh, 720px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #181d26 0%, #0d0f15 100%);
  border: 2px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(255, 213, 79, 0.35), 0 20px 60px rgba(0, 0, 0, 0.95);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.loot-sunburst {
  position: absolute;
  top: -150px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 500px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 213, 79, 0.12) 0deg,
    transparent 25deg,
    rgba(255, 213, 79, 0.22) 50deg,
    transparent 75deg,
    rgba(255, 213, 79, 0.12) 100deg,
    transparent 125deg,
    rgba(255, 213, 79, 0.22) 150deg,
    transparent 175deg,
    rgba(255, 213, 79, 0.12) 200deg,
    transparent 225deg,
    rgba(255, 213, 79, 0.22) 250deg,
    transparent 275deg,
    rgba(255, 213, 79, 0.12) 300deg,
    transparent 325deg,
    rgba(255, 213, 79, 0.22) 350deg,
    rgba(255, 213, 79, 0.12) 360deg
  );
  border-radius: 50%;
  animation: rotateSunburst 28s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes rotateSunburst {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loot-header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 16px 20px 10px;
  border-bottom: 1px solid rgba(212, 163, 89, 0.35);
  background: linear-gradient(180deg, rgba(255, 213, 79, 0.12) 0%, transparent 100%);
  flex-shrink: 0;
}

.loot-stars {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  letter-spacing: 4px;
  color: #ffd54f;
  text-shadow: 0 0 10px rgba(255, 213, 79, 0.6);
  margin-bottom: 6px;
}

.loot-item-icon-wrapper {
  display: flex;
  justify-content: center;
  margin: 4px 0 6px;
}

.loot-item-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 2.5px solid #ffd54f;
  background: radial-gradient(circle, #2a2012 0%, #100f0d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1rem;
  box-shadow: 0 0 22px rgba(255, 213, 79, 0.65), inset 0 0 10px rgba(255, 213, 79, 0.4);
  animation: floatLootIcon 3s ease-in-out infinite;
}

@keyframes floatLootIcon {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.03); }
}

.loot-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  color: #ffd54f;
  letter-spacing: 1.2px;
  margin: 4px 0 6px;
  text-shadow: 0 0 14px rgba(255, 213, 79, 0.5);
}

.loot-rarity-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.loot-rarity-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
}

.rarity-uncommon {
  border: 1px solid #81c784;
  color: #a5d6a7;
  background: rgba(76, 175, 80, 0.2);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.45);
}

.rarity-rare {
  border: 1px solid #64b5f6;
  color: #90caf9;
  background: rgba(33, 150, 243, 0.2);
  box-shadow: 0 0 12px rgba(33, 150, 243, 0.45);
}

.rarity-legendary {
  border: 1px solid #ffd54f;
  color: #ffe082;
  background: rgba(255, 213, 79, 0.25);
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.7);
}

.loot-attunement-badge {
  font-size: 0.72rem;
  color: #b0bec5;
  border: 1px dashed #78909c;
  border-radius: 12px;
  padding: 2px 8px;
  font-style: italic;
}

.loot-body {
  position: relative;
  z-index: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Custom Themed Gold Scrollbar */
.loot-body::-webkit-scrollbar {
  width: 6px;
}
.loot-body::-webkit-scrollbar-track {
  background: rgba(10, 14, 20, 0.7);
  border-radius: 4px;
}
.loot-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.45);
  border-radius: 4px;
}
.loot-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 213, 79, 0.8);
}

.loot-lore-quote {
  font-family: 'MedievalSharp', cursive;
  font-size: 0.94rem;
  font-style: italic;
  color: #e0d5c1;
  background: rgba(0, 0, 0, 0.45);
  border-left: 3px solid #b8860b;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.loot-perks-box {
  background: rgba(20, 26, 36, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 6px;
  padding: 10px 14px;
}

.loot-perks-box h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  color: #ffd54f;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.loot-perks-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.82rem;
  color: #e0e0e0;
  line-height: 1.5;
}

.loot-perks-list strong {
  color: #81c784;
}

.loot-equip-section {
  margin-top: 2px;
}

.loot-equip-section h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  color: #ffd54f;
  margin: 0 0 2px;
}

.loot-equip-subtitle {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin: 0 0 8px;
}

.loot-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.loot-hero-card {
  background: rgba(20, 25, 35, 0.85);
  border: 1.5px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  text-align: left;
  user-select: none;
}

.loot-hero-card:hover {
  background: rgba(35, 45, 62, 0.95);
  border-color: #ffd54f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.loot-hero-card.is-selected {
  background: linear-gradient(135deg, rgba(65, 50, 20, 0.95) 0%, rgba(30, 25, 15, 0.95) 100%);
  border-color: #ffd54f;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.55);
}

.loot-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
}

.loot-hero-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border-gold);
  object-fit: cover;
  display: block;
}

.loot-hero-card.is-selected .loot-hero-avatar {
  border-color: #ffd54f;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.8);
}

.loot-hero-select-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffd54f;
  color: #1a1208;
  font-size: 11px;
  font-weight: 900;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
}

.loot-hero-card.is-selected .loot-hero-select-check {
  display: flex;
}

.loot-hero-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.loot-hero-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.loot-hero-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loot-hero-class-tag {
  font-size: 0.65rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.loot-hero-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 1px;
}

.loot-attune-gauge {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
}

.loot-attune-gem {
  font-size: 0.75rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.loot-attune-gem.filled {
  filter: drop-shadow(0 0 4px rgba(100, 200, 255, 0.7));
}

.loot-attune-gem.empty {
  opacity: 0.4;
  font-size: 0.65rem;
}

.loot-gauge-lbl {
  font-size: 0.68rem;
  font-family: monospace;
  color: #b0bec5;
  margin-left: 2px;
}

.loot-hero-stat-preview {
  font-size: 0.7rem;
  font-weight: 700;
  color: #81c784;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}

.loot-hero-card.slots-full {
  border-color: rgba(255, 167, 38, 0.5);
}

.loot-hero-card.prereq-failed {
  opacity: 0.75;
  border-color: rgba(239, 83, 80, 0.4);
}

.loot-hero-card.prereq-failed .loot-hero-stat-preview {
  color: #ef5350;
  background: rgba(239, 83, 80, 0.15);
  border-color: rgba(239, 83, 80, 0.3);
}

.loot-attunement-controls {
  margin-top: 8px;
}

.loot-attune-decision-box {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  padding: 8px 12px;
}

.loot-attune-warning {
  color: #ffb74d;
  font-size: 0.78rem;
  line-height: 1.4;
}

.loot-attune-ready {
  color: #a5d6a7;
  font-size: 0.8rem;
  padding: 5px 8px;
  background: rgba(46, 125, 50, 0.2);
  border-radius: 4px;
  border: 1px solid rgba(76, 175, 80, 0.4);
}

.loot-swap-dropdown {
  background: #1e293b;
  color: #ffd54f;
  border: 1px solid #ffd54f;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.8rem;
  font-weight: 500;
  outline: none;
  cursor: pointer;
}

.loot-swap-dropdown:focus {
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.5);
}

.loot-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid rgba(212, 163, 89, 0.3);
  background: rgba(10, 14, 20, 0.95);
  backdrop-filter: blur(10px);
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-shrink: 0;
}

/* ========================================================
   MULTI-DEVICE RESPONSIVE BREAKPOINTS FOR MAGIC ITEM WINDOW
   ======================================================== */

/* Mobile Phones (width <= 640px) */
@media (max-width: 640px) {
  .loot-card {
    width: 96%;
    max-height: 94vh;
    border-radius: 10px;
  }
  .loot-header {
    padding: 12px 14px 8px;
  }
  .loot-stars {
    font-size: 0.72rem;
    letter-spacing: 2px;
    margin-bottom: 4px;
  }
  .loot-item-icon-wrapper {
    margin: 2px 0 4px;
  }
  .loot-item-icon {
    width: 46px;
    height: 46px;
    font-size: 1.6rem;
  }
  .loot-header h2 {
    font-size: 1.22rem;
    margin: 2px 0 4px;
  }
  .loot-rarity-row {
    gap: 6px;
  }
  .loot-rarity-badge, .loot-attunement-badge {
    font-size: 0.68rem;
    padding: 2px 8px;
  }
  .loot-body {
    padding: 10px 12px;
    gap: 10px;
  }
  .loot-lore-quote {
    font-size: 0.86rem;
    padding: 6px 10px;
  }
  .loot-perks-box {
    padding: 8px 10px;
  }
  .loot-perks-list {
    font-size: 0.78rem;
    padding-left: 14px;
  }
  .loot-hero-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .loot-hero-card {
    padding: 6px 8px;
    gap: 8px;
  }
  .loot-hero-avatar-wrap, .loot-hero-avatar {
    width: 38px;
    height: 38px;
  }
  .loot-footer {
    flex-direction: column-reverse;
    padding: 10px 12px;
    gap: 8px;
  }
  .loot-footer button {
    width: 100%;
    justify-content: center;
    padding: 9px 14px;
    font-size: 0.88rem;
  }
}

/* Height-Constrained Laptops & Embedded 740px Iframe */
@media (max-height: 760px) {
  .loot-card {
    max-height: 94vh;
  }
  .loot-header {
    padding: 10px 16px 6px;
  }
  .loot-stars {
    display: none;
  }
  .loot-item-icon {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
  .loot-header h2 {
    font-size: 1.25rem;
    margin: 2px 0;
  }
  .loot-body {
    padding: 8px 14px;
    gap: 8px;
  }
  .loot-lore-quote {
    padding: 6px 10px;
    font-size: 0.84rem;
  }
  .loot-perks-box {
    padding: 6px 10px;
  }
  .loot-footer {
    padding: 8px 14px;
  }
}

/* Ultra-Short Displays / Mobile Landscape (height <= 520px) */
@media (max-height: 520px) {
  .loot-card {
    max-height: 96vh;
    width: 98%;
  }
  .loot-header {
    padding: 6px 12px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .loot-item-icon-wrapper {
    margin: 0 8px 0 0;
  }
  .loot-item-icon {
    width: 34px;
    height: 34px;
    font-size: 1.2rem;
  }
  .loot-header h2 {
    font-size: 1.05rem;
    margin: 0;
  }
  .loot-rarity-row {
    margin: 0;
  }
  .loot-lore-quote {
    display: none;
  }
  .loot-hero-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .loot-hero-card {
    padding: 4px 6px;
  }
  .loot-hero-avatar-wrap, .loot-hero-avatar {
    width: 30px;
    height: 30px;
  }
  .loot-footer {
    padding: 6px 10px;
  }
  .loot-footer button {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
}

/* Flank Left Avatar Equipped Badge */
.card-equip-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  font-size: 11px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(15, 20, 30, 0.95);
  border: 1.5px solid #ffd54f;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(255, 213, 79, 0.6);
  z-index: 2;
}

/* Expedition Roster Equipment Slot */
.hero-equip-row {
  margin-top: 8px;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(212, 175, 55, 0.45);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.hero-equip-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  color: #ffd54f;
  min-width: 0;
}

.hero-equip-name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-equip-bonus-tag {
  font-size: 0.68rem;
  color: #81c784;
  background: rgba(76, 175, 80, 0.2);
  padding: 1px 5px;
  border-radius: 2px;
}

.btn-swap-equip {
  font-size: 0.7rem;
  padding: 3px 8px;
  background: #2a2012;
  border: 1px solid #ffd54f;
  color: #ffd54f;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.btn-swap-equip:hover {
  background: #4a341e;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
}

/* Party Stash Armory Vault List */
.party-stash-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.stash-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(20, 24, 34, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  gap: 8px;
}

.stash-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stash-item-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.stash-item-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.stash-item-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: bold;
  color: #ffd54f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stash-item-perk {
  font-size: 0.72rem;
  color: #e0e0e0;
}

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

.stash-item-holder {
  font-size: 0.72rem;
  color: #81c784;
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid rgba(76, 175, 80, 0.3);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.stash-item-holder.in-stash {
  color: #ffb74d;
  background: rgba(255, 183, 77, 0.15);
  border-color: rgba(255, 183, 77, 0.3);
}

.stash-assign-select {
  font-size: 0.74rem;
  background: #161b24;
  color: #ffd54f;
  border: 1px solid #ffd54f;
  border-radius: 3px;
  padding: 3px 6px;
  cursor: pointer;
}

/* =========================================================
   TRAILSIDE SHORT REST & HIT DICE HEALING (D&D 2024 / 5e)
   ========================================================= */
.story-short-rest-panel {
  width: 100%;
  max-width: 520px;
  background: rgba(255, 250, 240, 0.82);
  border: 1px solid rgba(140, 100, 40, 0.28);
  border-radius: 8px;
  padding: 6px 10px;
  box-shadow: 0 2px 8px rgba(100, 75, 45, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}

.short-rest-header-line {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(140, 100, 40, 0.2);
  padding-bottom: 3px;
}

.short-rest-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.short-rest-title-wrap {
  display: flex;
  flex-direction: column;
}

.short-rest-title {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #2c1e10;
  margin: 0;
}

.short-rest-sub {
  font-size: 0.7rem;
  color: #6d4c41;
  font-style: italic;
}

.story-hit-dice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 5px;
}

.story-hit-die-card {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(140, 100, 40, 0.2);
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.2s ease;
}

.story-hit-die-card:hover {
  border-color: rgba(140, 100, 40, 0.45);
}

.story-hd-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.story-hd-hero-name {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: bold;
  color: #2c1e10;
}

.story-hd-die-badge {
  font-size: 0.68rem;
  font-weight: 600;
  color: #795548;
  background: rgba(121, 85, 72, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(121, 85, 72, 0.2);
}

.story-hd-hp-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story-hd-hp-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.story-hd-hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #43a047, #66bb6a);
  transition: width 0.3s ease;
}

.story-hd-hp-bar-fill.wounded {
  background: linear-gradient(90deg, #e53935, #fb8c00);
}

.story-hd-hp-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: #3e2723;
  display: flex;
  justify-content: space-between;
}

.story-hd-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.story-hd-remaining-count {
  font-size: 0.72rem;
  color: #5d4037;
  font-weight: 500;
}

.btn-spend-hit-die {
  background: linear-gradient(135deg, #d4af37 0%, #aa8c2c 100%);
  color: #1a120b;
  border: 1px solid #8c6418;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-spend-hit-die:hover:not(:disabled) {
  background: linear-gradient(135deg, #f3d568 0%, #c49c2d 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-spend-hit-die.full-vitality {
  background: linear-gradient(135deg, #81c784 0%, #4caf50 100%);
  color: #0d3810;
  border: 1px solid #2e7d32;
}

.btn-spend-hit-die.full-vitality:hover:not(:disabled) {
  background: linear-gradient(135deg, #a5d6a7 0%, #66bb6a 100%);
}

.btn-spend-hit-die:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
  transform: none;
}

.btn-spend-hit-die.full-vitality:disabled {
  background: rgba(76, 175, 80, 0.15);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.35);
  opacity: 0.85;
  filter: none;
  cursor: default;
}

.btn-test-wound {
  background: rgba(198, 40, 40, 0.12);
  color: #b71c1c;
  border: 1px solid rgba(198, 40, 40, 0.28);
  border-radius: 3px;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-test-wound:hover {
  background: rgba(198, 40, 40, 0.25);
  color: #7f0000;
  border-color: #b71c1c;
  transform: scale(1.04);
}

/* Dilemma Pre-Check Short Rest Shortcut Bar */
.story-dilemma-rest-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 248, 235, 0.94);
  border: 1px solid rgba(212, 168, 75, 0.55);
  border-left: 4px solid #b8860b;
  border-radius: 6px;
  padding: 6px 12px;
  margin-bottom: 8px;
  gap: 10px;
  box-shadow: 0 2px 6px rgba(100, 75, 45, 0.12);
}

.story-dilemma-rest-bar.hidden {
  display: none !important;
}

.rest-bar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #3e2709;
}

.rest-bar-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.rest-bar-text strong {
  color: #b71c1c;
}

.btn-dilemma-rest-link {
  background: linear-gradient(180deg, #3d2c1c 0%, #20150a 100%);
  border: 1px solid #ffd54f;
  color: #ffd54f;
  border-radius: 4px;
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-dilemma-rest-link:hover {
  background: linear-gradient(180deg, #5a4028 0%, #2e1d0f 100%);
  border-color: #fff;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.5);
  transform: translateY(-1px);
}

/* Campfire Modal Short Rest Hit Dice Tray */
.campfire-short-rest-tray {
  margin-top: 14px;
  padding: 12px;
  background: rgba(20, 15, 10, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
}

.campfire-tray-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  color: #ffd54f;
  margin-bottom: 8px;
  font-weight: 600;
}

.campfire-hit-dice-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.campfire-hd-card {
  background: rgba(30, 25, 20, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campfire-hd-card .hero-name {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: bold;
  color: #ffd54f;
}

/* =========================================================
   📜 ADVENTURE NAVIGATION MENU (CODEX, SHEETS, MAP, INVENTORY, JOURNAL)
   ========================================================= */
.adventure-nav-group {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(20, 15, 10, 0.6);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.btn-nav-quick {
  background: rgba(45, 35, 25, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #e0d0b0;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-nav-quick:hover {
  background: rgba(212, 175, 55, 0.25);
  color: #ffd54f;
  border-color: #ffd54f;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Master Overlay */
.adventure-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 7, 5, 0.88);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.adventure-menu-overlay.hidden {
  display: none !important;
}

.adventure-menu-window {
  width: 96%;
  max-width: 1260px;
  height: 90vh;
  max-height: 880px;
  background: #18120b;
  border: 2px solid #d4af37;
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.85), inset 0 0 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Grimoire Menu Header & Tab Ribbon */
.adv-menu-header {
  background: linear-gradient(180deg, #2a1f12 0%, #1a1208 100%);
  border-bottom: 2px solid #8c6428;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  min-height: 52px;
  box-sizing: border-box;
}

.adv-menu-tabs {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  height: 100%;
}

.adv-menu-tab {
  background: rgba(30, 20, 12, 0.8);
  border: 1px solid rgba(140, 100, 40, 0.4);
  border-bottom: none;
  color: #c0b090;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.adv-menu-tab:hover {
  color: #ffd54f;
  background: rgba(60, 40, 20, 0.9);
}

.adv-menu-tab.active {
  background: #faf3e0;
  color: #2c1e10;
  border-color: #d4af37;
  border-bottom: 2px solid #faf3e0;
  margin-bottom: -2px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.adv-menu-tab .hotkey-pill {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
  color: inherit;
  font-family: monospace;
}

.adv-menu-tab.active .hotkey-pill {
  background: rgba(140, 100, 40, 0.18);
  color: #8c6428;
}

.adv-close-btn {
  background: none;
  border: none;
  color: #e0d0b0;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  transition: color 0.2s ease, transform 0.2s ease;
}

.adv-close-btn:hover {
  color: #ff5252;
  transform: scale(1.15);
}

/* Menu Body & Panels */
.adv-menu-body {
  flex: 1;
  background: #faf3e0;
  color: #2c1e10;
  position: relative;
  overflow: hidden;
  display: flex;
}

.adv-panel {
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
}

.adv-panel.active {
  display: flex;
}

/* =========================================================
   1. AUTHENTIC D&D 2024 / 5E CHARACTER SHEETS
   ========================================================= */
.sheet-hero-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 18px;
  background: #111622;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sheet-hero-btn {
  background: #1a2233;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sheet-hero-btn:hover {
  border-color: #ffd700;
  background: #243048;
  color: #fff;
  transform: translateY(-2px);
}

.sheet-hero-btn.active {
  background: linear-gradient(135deg, #2a3752 0%, #1e273b 100%);
  color: #ffd700;
  border-color: #ffd700;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.35), inset 0 0 8px rgba(255, 215, 0, 0.15);
  transform: translateY(-2px);
}

.sheet-hero-btn.locked {
  opacity: 0.5;
  background: #141a24;
  border-color: #263142;
  cursor: not-allowed;
  font-style: italic;
}

.sheet-hero-btn img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #d4af37;
}

.character-sheet-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at 50% 0%, #151c2a 0%, #0e131d 55%, #090c13 100%);
  scrollbar-width: thin;
  scrollbar-color: #d4af37 #121824;
}

/* Authentic D&D Sheet Framing */
.dnd-sheet-frame {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Header Banner */
.dnd-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.85);
  border: 2px solid #8c6428;
  border-radius: 8px;
  align-items: center;
  box-shadow: 0 2px 8px rgba(100, 75, 45, 0.1);
}

.dnd-portrait-wrap {
  position: relative;
}

.dnd-portrait-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 2px solid #8c6428;
  object-fit: cover;
}

.dnd-char-name-group h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  color: #2c1e10;
  margin: 0 0 4px 0;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.dnd-char-summary-line {
  font-size: 0.85rem;
  color: #6d4c41;
  font-style: italic;
}

.dnd-header-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px;
  font-size: 0.8rem;
  border-left: 1px solid #d4c5a9;
  padding-left: 14px;
}

.dnd-field-item {
  display: flex;
  flex-direction: column;
}

.dnd-field-item label {
  font-size: 0.65rem;
  text-transform: uppercase;
  color: #8c6428;
  font-weight: 700;
}

.dnd-field-item span {
  font-weight: 600;
  color: #2c1e10;
}

.dnd-badges-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.dnd-prof-bonus-badge, .dnd-inspiration-badge {
  background: #2c1e10;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #d4af37;
  white-space: nowrap;
}

/* 3-Column Core Grid */
.dnd-columns-grid {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 14px;
}

/* Left Column: Ability Scores, Saves, Skills */
.dnd-left-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dnd-abilities-saves-wrap {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
}

.dnd-ability-scores-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dnd-ability-box {
  background: #fff;
  border: 2px solid #8c6428;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dnd-ability-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: #8c6428;
  text-transform: uppercase;
}

.dnd-ability-mod {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #2c1e10;
  margin: 1px 0;
}

.dnd-ability-score {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6d4c41;
  background: #faf3e0;
  border: 1px solid #d4c5a9;
  border-radius: 10px;
  padding: 1px 8px;
}

/* Saves & Skills Box */
.dnd-box-section {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #8c6428;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.dnd-box-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #8c6428;
  text-transform: uppercase;
  border-bottom: 1px solid #d4c5a9;
  padding-bottom: 3px;
  margin-bottom: 6px;
}

.dnd-prof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  padding: 2px 0;
}

.dnd-prof-left {
  display: flex;
  align-items: center;
  gap: 5px;
}

.dnd-pip {
  font-size: 0.65rem;
  color: #8c6428;
}

.dnd-pip.active {
  color: #2c1e10;
}

.dnd-prof-mod {
  font-weight: 700;
  color: #2c1e10;
}

.dnd-passive-box {
  background: #2c1e10;
  color: #ffd54f;
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
}

/* Middle Column: Vitals, Attacks, Spells */
.dnd-mid-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dnd-vitals-row {
  display: grid;
  grid-template-columns: 85px 85px 85px 1fr;
  gap: 8px;
}

.dnd-vital-card {
  background: #fff;
  border: 2px solid #8c6428;
  border-radius: 8px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.dnd-vital-val {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #2c1e10;
}

.dnd-vital-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  color: #8c6428;
  text-transform: uppercase;
}

.dnd-hp-card {
  background: #fff;
  border: 2px solid #8c6428;
  border-radius: 8px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dnd-hp-bar-track {
  width: 100%;
  height: 8px;
  background: #e0d0b0;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0;
}

.dnd-hp-bar-fill {
  height: 100%;
  background: #43a047;
  transition: width 0.3s ease;
}

.dnd-hp-bar-fill.wounded {
  background: #e53935;
}

.dnd-rest-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.dnd-death-saves {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.7rem;
}

.dnd-death-pips {
  display: flex;
  gap: 4px;
}

.death-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #8c6428;
  background: #fff;
}

/* Combat Attacks & Weapons */
.dnd-weapons-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 4px;
}

.dnd-weapons-table th {
  background: #ede1c8;
  color: #8c6428;
  font-size: 0.68rem;
  text-transform: uppercase;
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #c4b599;
}

.dnd-weapons-table td {
  padding: 5px 6px;
  border-bottom: 1px solid #e8dec8;
}

.dnd-mastery-tag {
  background: #2c1e10;
  color: #ffd54f;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Spellcasting Dossier */
.dnd-spell-dossier {
  background: #faf3e0;
  border: 1px solid #d4af37;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dnd-spell-stats-row {
  display: flex;
  gap: 12px;
  align-items: center;
  background: #ede1c8;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.dnd-slots-row {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 0.75rem;
}

.dnd-slot-pip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4a90e2;
  border: 1px solid #2a60a2;
}

.dnd-slot-pip.empty {
  background: #fff;
}

/* Right Column: Features, Traits & Relic */
.dnd-right-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dnd-features-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.78rem;
}

.dnd-feature-item {
  background: #fff;
  border: 1px solid #d4c5a9;
  border-radius: 5px;
  padding: 6px 8px;
}

.dnd-feature-name {
  font-weight: 700;
  color: #2c1e10;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  margin-bottom: 2px;
}

.dnd-feature-desc {
  font-size: 0.74rem;
  color: #5d4037;
  line-height: 1.4;
}

.dnd-attuned-relic-card {
  background: linear-gradient(135deg, #2c1e10 0%, #1a1208 100%);
  color: #e0d0b0;
  border: 1px solid #d4af37;
  border-radius: 6px;
  padding: 8px 10px;
}

.dnd-attuned-relic-card .relic-name {
  font-family: 'Cinzel', serif;
  color: #ffd54f;
  font-size: 0.85rem;
  font-weight: 700;
}

/* =========================================================
   2. REGIONAL CARTOGRAPHY MAP
   ========================================================= */
.map-view-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1e160e;
}

.map-act-selector {
  display: flex;
  background: #140d07;
  border-bottom: 2px solid #8c6428;
  padding: 8px 14px;
  gap: 8px;
  align-items: center;
}

.map-act-btn {
  background: #2a1f14;
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #d4c5a9;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.map-act-btn:hover {
  background: #3d2d1d;
  color: #ffd54f;
  border-color: #ffd54f;
}

.map-act-btn.active {
  background: #d4af37;
  color: #1a1208;
  border-color: #ffd54f;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.map-canvas-container {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  overflow: hidden;
  position: relative;
}

.map-parchment {
  position: relative;
  background: radial-gradient(circle at 50% 50%, #2e2316 0%, #1a1209 100%);
  border-right: 2px solid #8c6428;
  overflow: hidden;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
}

.map-compass-rose {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 2.2rem;
  opacity: 0.7;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.map-title-stamp {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffd54f;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.map-nodes-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-node-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s ease;
  z-index: 5;
}

.map-node-pin:hover {
  transform: translate(-50%, -50%) scale(1.15);
  z-index: 10;
}

.map-node-icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 2px solid #ffd54f;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.map-node-pin.cleared .map-node-icon-circle {
  background: #1b5e20;
  border-color: #81c784;
}

.map-node-pin.active-current .map-node-icon-circle {
  background: #d4af37;
  color: #1a1208;
  border-color: #fff;
  animation: pulse-beacon 1.6s infinite ease-in-out;
}

@keyframes pulse-beacon {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.8); }
  70% { box-shadow: 0 0 0 14px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.map-node-pin.locked .map-node-icon-circle {
  background: #3e2723;
  border-color: #6d4c41;
  opacity: 0.6;
}

.map-node-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.8);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  white-space: nowrap;
}

.map-location-dossier {
  background: #251b11;
  color: #e0d0b0;
  padding: 16px;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-location-dossier h3 {
  font-family: 'Cinzel', serif;
  color: #ffd54f;
  margin: 0 0 4px 0;
  font-size: 1.15rem;
}

.map-dossier-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.btn-map-deploy {
  background: #d4af37;
  color: #1a1208;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 800;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s ease;
}

.btn-map-deploy:hover {
  background: #ffe082;
  transform: translateY(-1px);
}

/* =========================================================
   3. CLASSIC D&D SHARED PARTY INVENTORY & RELIC ARMORY
   ========================================================= */
.inventory-view-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #151c2a 0%, #0e131d 55%, #090c13 100%);
  color: #cbd5e1;
  overflow: hidden;
  box-sizing: border-box;
}

/* --- TOP HEADER: WEALTH & CAPACITY LEDGER --- */
.inv-header-banner {
  background: linear-gradient(180deg, rgba(30, 22, 14, 0.95) 0%, rgba(18, 14, 9, 0.98) 100%);
  border-bottom: 2px solid #8c6428;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.inv-header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.inv-header-title-group h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffd700;
  margin: 0;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.inv-header-sub {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
}

/* 5-Coin D&D Currency Ledger */
.inv-currency-ledger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 8, 5, 0.7);
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.35);
}

.inv-coin-box {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.inv-coin-box.pp { color: #93c5fd; border-color: rgba(147, 197, 253, 0.35); background: rgba(59, 130, 246, 0.08); }
.inv-coin-box.gp { color: #ffd700; border-color: rgba(255, 215, 0, 0.45); background: rgba(245, 158, 11, 0.12); }
.inv-coin-box.ep { color: #6ee7b7; border-color: rgba(110, 231, 183, 0.35); background: rgba(16, 185, 129, 0.08); }
.inv-coin-box.sp { color: #e2e8f0; border-color: rgba(226, 232, 240, 0.35); background: rgba(148, 163, 184, 0.08); }
.inv-coin-box.cp { color: #fb923c; border-color: rgba(251, 146, 60, 0.35); background: rgba(234, 88, 12, 0.08); }

.inv-coin-unit {
  font-size: 0.65rem;
  opacity: 0.8;
  font-weight: 800;
}

.inv-net-worth-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffd700;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.inv-header-btn-row {
  display: flex;
  gap: 6px;
}

.btn-inv-utility {
  background: rgba(45, 32, 20, 0.8);
  border: 1px solid #b8860b;
  color: #e2e8f0;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-inv-utility:hover {
  background: #d4af37;
  color: #1a1208;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

/* Party Encumbrance Bar */
.inv-encumbrance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
}

.inv-encumbrance-track {
  flex: 1;
  height: 8px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.inv-encumbrance-fill {
  height: 100%;
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 3px;
}

.inv-encumbrance-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}

.inv-encumbrance-badge.normal {
  color: #69f0ae;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.inv-encumbrance-badge.burdened {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
}

.inv-encumbrance-badge.encumbered {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
}

/* --- MAIN 2-COLUMN BODY --- */
.inv-main-grid {
  display: grid;
  grid-template-columns: 370px 1fr;
  flex: 1;
  overflow: hidden;
  background: #0f172a;
}

/* LEFT COLUMN: ACTIVE SQUAD LOADOUT & ATTUNEMENT */
.inv-loadout-column {
  background: #111827;
  border-right: 2px solid #8c6428;
  padding: 12px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #8c6428 #111827;
}

.inv-col-header {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 4px;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inv-hero-gear-card {
  background: rgba(26, 34, 51, 0.85);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease;
}

.inv-hero-gear-card:hover {
  border-color: rgba(212, 175, 55, 0.45);
}

.inv-hero-gear-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inv-hero-thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1.5px solid #8c6428;
  object-fit: cover;
}

.inv-hero-name-col {
  flex: 1;
}

.inv-hero-gear-name {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #ffd700;
}

.inv-hero-gear-sub {
  font-size: 0.72rem;
  color: #94a3b8;
}

.inv-gear-slot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.inv-gear-slot-lbl {
  color: #94a3b8;
  font-weight: 600;
}

.inv-gear-slot-val {
  font-weight: 700;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 3 Attunement Slots Per Hero */
.inv-attunement-matrix {
  border-top: 1px dashed rgba(212, 175, 55, 0.25);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inv-attunement-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
}

.inv-attunement-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.73rem;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 4px;
  padding: 3px 8px;
}

.inv-attunement-slot.filled {
  border-color: rgba(255, 215, 0, 0.5);
  background: rgba(212, 175, 55, 0.08);
}

.btn-slot-action {
  font-size: 0.65rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  background: rgba(45, 35, 25, 0.8);
  border: 1px solid #b8860b;
  color: #ffd54f;
  transition: all 0.2s ease;
}

.btn-slot-action:hover {
  background: #d4af37;
  color: #1a1208;
}

/* RIGHT COLUMN: CATEGORIZED SHARED STASH & LEDGER */
.inv-stash-column {
  background: radial-gradient(ellipse at 50% 20%, #151d2c 0%, #0e141f 100%);
  padding: 12px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: #8c6428 #0e141f;
}

/* Category Filter Bar */
.inv-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.inv-filter-btn {
  background: #1a2233;
  color: #cbd5e1;
  border: 1px solid #334155;
  border-radius: 5px;
  padding: 4px 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inv-filter-btn:hover {
  border-color: #ffd700;
  background: #243048;
  color: #fff;
}

.inv-filter-btn.active {
  background: linear-gradient(135deg, #2a3752 0%, #1e273b 100%);
  color: #ffd700;
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.inv-search-bar {
  display: flex;
  align-items: center;
  background: #111622;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 4px 10px;
  gap: 8px;
}

.inv-search-bar input {
  background: transparent;
  border: none;
  color: #e2e8f0;
  font-size: 0.8rem;
  width: 100%;
  outline: none;
}

/* D&D Classic Inventory Ledger Table */
.inv-ledger-table-wrap {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #334155;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.8);
}

.inv-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  text-align: left;
}

.inv-ledger-table th {
  background: #1e293b;
  color: #ffd700;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 10px;
  border-bottom: 1px solid #475569;
  position: sticky;
  top: 0;
  z-index: 2;
}

.inv-ledger-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(51, 65, 85, 0.6);
  vertical-align: middle;
}

.inv-ledger-table tr:hover {
  background: rgba(30, 41, 59, 0.6);
}

.inv-item-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inv-item-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.inv-item-title-group {
  display: flex;
  flex-direction: column;
}

.inv-item-title {
  font-weight: 700;
  color: #f1f5f9;
}

.inv-item-desc {
  font-size: 0.7rem;
  color: #94a3b8;
  margin-top: 2px;
  max-width: 320px;
  line-height: 1.3;
}

/* Rarity Badges */
.inv-rarity-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid;
  display: inline-block;
}

.inv-rarity-badge.common { color: #94a3b8; border-color: #475569; background: rgba(71, 85, 105, 0.15); }
.inv-rarity-badge.uncommon { color: #10b981; border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.12); }
.inv-rarity-badge.rare { color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.12); }
.inv-rarity-badge.very-rare { color: #c084fc; border-color: rgba(192, 132, 252, 0.4); background: rgba(192, 132, 252, 0.12); }
.inv-rarity-badge.legendary { color: #f59e0b; border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.15); }

/* Interactive Action Buttons */
.btn-inv-use {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #fff;
  border: 1px solid #10b981;
  border-radius: 4px;
  padding: 3px 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-inv-use:hover {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

.btn-inv-attune {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  border: 1px solid #a78bfa;
  border-radius: 4px;
  padding: 3px 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-inv-attune:hover {
  background: #8b5cf6;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.5);
  transform: translateY(-1px);
}

.btn-inv-attune.attuned {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #6ee7b7;
}

/* Modals & Popovers for Consumables / Attunement */
.inv-action-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inv-modal-card {
  background: #1e2433;
  border: 2px solid #d4af37;
  border-radius: 8px;
  padding: 16px 20px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inv-modal-title {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffd700;
  margin: 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  padding-bottom: 6px;
}

.inv-modal-desc {
  font-size: 0.8rem;
  color: #cbd5e1;
  margin: 0;
}

.inv-target-hero-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inv-target-hero-btn {
  background: #111622;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 12px;
  color: #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}

.inv-target-hero-btn:hover {
  border-color: #ffd700;
  background: #243048;
}

.inv-modal-close-btn {
  align-self: flex-end;
  background: transparent;
  border: 1px solid #475569;
  color: #94a3b8;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
}

.inv-modal-close-btn:hover {
  color: #fff;
  border-color: #e2e8f0;
}

/* =========================================================
   4. CAMPAIGN JOURNAL & BESTIARY
   ========================================================= */
.journal-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.journal-subtabs {
  display: flex;
  background: #ede1c8;
  border-bottom: 2px solid #8c6428;
  padding: 6px 14px;
  gap: 6px;
}

.journal-subtab {
  background: #fdfbf7;
  border: 1px solid #c4b599;
  border-radius: 4px;
  padding: 6px 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4a3525;
  cursor: pointer;
  transition: all 0.2s ease;
}

.journal-subtab:hover {
  border-color: #8c6428;
  background: #fff;
}

.journal-subtab.active {
  background: #2c1e10;
  color: #ffd54f;
  border-color: #ffd54f;
}

.journal-subtab-content {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 10%, #fffdf8 0%, #faf3e0 100%);
}

.journal-quest-card {
  background: #fff;
  border: 1px solid #8c6428;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.journal-quest-card h4 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #2c1e10;
  margin: 0 0 6px 0;
}

.journal-step-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  padding: 3px 0;
}

.journal-step-check {
  font-size: 0.9rem;
  color: #2e7d32;
}

.journal-step-pending {
  font-size: 0.9rem;
  color: #d4af37;
}

.journal-bestiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.bestiary-card {
  background: #fff;
  border: 2px solid #8c6428;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bestiary-header {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #e0d0b0;
  padding-bottom: 6px;
}

.bestiary-header img {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #8c6428;
  object-fit: cover;
}

.bestiary-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #ede1c8;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}


/* ==========================================
   PARTY ROSTER & FORMATION PANEL STYLES
   ========================================== */
.roster-panel-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.roster-banner {
  background: linear-gradient(135deg, rgba(74, 50, 20, 0.95), rgba(40, 25, 10, 0.95));
  border: 2px solid #b8860b;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f7eed7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.roster-banner h3 {
  margin: 0 0 4px 0;
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  color: #ffd700;
}

.roster-banner p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}

.roster-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roster-section-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #4a3214;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid #c9a96e;
  padding-bottom: 6px;
}

.roster-counter-badge {
  background: #4a3214;
  color: #ffd700;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid #b8860b;
}

.active-party-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.active-hero-card {
  background: #fff;
  border: 2px solid #b8860b;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
}

.active-hero-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(184, 134, 11, 0.25);
}

.active-hero-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.active-hero-top img {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  border: 2px solid #b8860b;
  object-fit: cover;
}

.active-hero-meta {
  flex: 1;
}

.active-hero-meta h4 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #2c1e10;
}

.active-hero-meta .role-pill {
  font-size: 0.72rem;
  font-weight: 700;
  background: #ede1c8;
  color: #6b4c1b;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 3px;
}

.active-hero-vitals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #faf6ee;
  border: 1px solid #e0d0b0;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  font-size: 0.75rem;
}

.active-hero-vitals span {
  font-weight: 700;
  color: #4a3214;
}

.active-hero-quote {
  font-style: italic;
  font-size: 0.78rem;
  color: #6b5535;
  line-height: 1.3;
}

.active-hero-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-roster-bench {
  flex: 1;
  background: #ede1c8;
  border: 1px solid #b8860b;
  color: #4a3214;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-roster-bench:hover {
  background: #e0cca3;
  color: #20140c;
}

.btn-roster-inspect {
  flex: 1;
  background: linear-gradient(180deg, #4a3214, #2c1e10);
  border: 1px solid #ffd700;
  color: #ffd700;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-roster-inspect:hover {
  background: linear-gradient(180deg, #66461c, #3d2916);
}

.reserve-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.reserve-hero-card {
  background: #fff;
  border: 1px solid #c9a96e;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  position: relative;
  transition: all 0.15s;
}

.reserve-hero-card:hover {
  border-color: #b8860b;
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.18);
}

.reserve-hero-card.locked {
  background: #f3ede2;
  opacity: 0.8;
  border-style: dashed;
}

.btn-roster-deploy {
  flex: 1;
  background: linear-gradient(180deg, #ffd700, #c99700);
  border: 1px solid #8c6428;
  color: #2c1e10;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-roster-deploy:hover {
  background: linear-gradient(180deg, #ffea70, #deb010);
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

/* Filter pills */
.roster-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.roster-filter-btn {
  background: #ede1c8;
  border: 1px solid #b8860b;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #4a3214;
  cursor: pointer;
  transition: all 0.15s;
}

.roster-filter-btn.active, .roster-filter-btn:hover {
  background: #4a3214;
  color: #ffd700;
}

/* ==========================================
   FACTIONS CODEX STYLES
   ========================================== */
.factions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.faction-card {
  background: #fff;
  border: 2px solid #8c6428;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.faction-header {
  display: flex;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #e0d0b0;
  padding-bottom: 8px;
}

.faction-crest {
  font-size: 2rem;
  background: #faf6ee;
  border: 1px solid #c9a96e;
  border-radius: 8px;
  padding: 4px 8px;
}

.faction-titles h4 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #2c1e10;
}

.faction-titles .faction-leader {
  font-size: 0.78rem;
  color: #6b4c1b;
  margin-top: 2px;
}

.rep-bar-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rep-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 700;
}

.rep-bar-track {
  width: 100%;
  height: 8px;
  background: #e0d0b0;
  border-radius: 4px;
  overflow: hidden;
}

.rep-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.rep-friendly .rep-bar-fill { background: linear-gradient(90deg, #4caf50, #2e7d32); }
.rep-neutral .rep-bar-fill { background: linear-gradient(90deg, #ffb300, #f57f17); }
.rep-suspicious .rep-bar-fill { background: linear-gradient(90deg, #fb8c00, #e65100); }
.rep-unfriendly .rep-bar-fill { background: linear-gradient(90deg, #039be5, #01579b); }
.rep-hostile .rep-bar-fill { background: linear-gradient(90deg, #e53935, #b71c1c); }

.rep-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.rep-badge.rep-friendly { background: #e8f5e9; color: #1b5e20; }
.rep-badge.rep-neutral { background: #fff8e1; color: #f57f17; }
.rep-badge.rep-suspicious { background: #fff3e0; color: #e65100; }
.rep-badge.rep-unfriendly { background: #e1f5fe; color: #0277bd; }
.rep-badge.rep-hostile { background: #ffebee; color: #b71c1c; }

.faction-perk-box {
  background: #faf6ee;
  border-left: 3px solid #b8860b;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: #4a3214;
  line-height: 1.35;
}

/* ==========================================
   NOTABLE NPCS DIRECTORY STYLES
   ========================================== */
.npc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.npc-card {
  background: #fff;
  border: 2px solid #8c6428;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.npc-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.npc-portrait {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #8c6428;
  object-fit: cover;
}

.npc-meta h4 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: #2c1e10;
}

.npc-meta .npc-title {
  font-size: 0.75rem;
  color: #6b4c1b;
}

.npc-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 3px;
}

.npc-badge.npc-allied { background: #e8f5e9; color: #2e7d32; }
.npc-badge.npc-suspicious { background: #fff3e0; color: #e65100; }
.npc-badge.npc-neutral { background: #fff8e1; color: #f57f17; }
.npc-badge.npc-unfriendly { background: #e1f5fe; color: #0277bd; }
.npc-badge.npc-hostile { background: #ffebee; color: #c62828; }
.npc-badge.npc-nemesis { background: #311b92; color: #e1bee7; }

.npc-quote {
  font-style: italic;
  font-size: 0.78rem;
  color: #5c4424;
  border-left: 2px solid #c9a96e;
  padding-left: 8px;
  margin: 2px 0;
}

.npc-bio {
  font-size: 0.78rem;
  color: #3d2c1c;
  line-height: 1.35;
}

.npc-tactics {
  font-size: 0.75rem;
  background: #ede1c8;
  padding: 4px 8px;
  border-radius: 4px;
  color: #4a3214;
  font-weight: 600;
}

/* ==========================================================================
   VOICE & COMBAT SPEECH BUBBLES
   ========================================================================== */
.combat-speech-bubble {
  position: absolute;
  z-index: 1200;
  max-width: 240px;
  background: radial-gradient(circle at 40% 30%, #fffdf7 0%, #faeed1 100%);
  color: #2b1d0c;
  border: 2px solid #b8860b;
  border-radius: 12px;
  padding: 8px 12px;
  font-family: 'Cinzel', serif, 'Georgia';
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 10px rgba(255, 215, 0, 0.4);
  pointer-events: none;
  animation: speechBubblePop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transform-origin: bottom center;
}

.combat-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 24px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #b8860b;
}

.combat-speech-bubble.bubble-monster {
  background: radial-gradient(circle at 40% 30%, #2e1a1a 0%, #150909 100%);
  color: #ffb4a2;
  border: 2px solid #d32f2f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 12px rgba(255, 23, 68, 0.5);
}

.combat-speech-bubble.bubble-monster::after {
  border-top-color: #d32f2f;
}

.combat-speech-bubble.bubble-flank-left::after {
  bottom: auto;
  top: 18px;
  left: -8px;
  border-left: none;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid #b8860b;
}

.combat-speech-bubble .bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-bottom: 3px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.25);
  padding-bottom: 2px;
}

.combat-speech-bubble .bubble-speaker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7a480e;
  font-weight: 800;
}

.omnivoice-hd-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(139, 92, 246, 0.4);
}

.combat-speech-bubble.has-omnivoice {
  border-color: #a78bfa;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(139, 92, 246, 0.45);
}

.combat-speech-bubble.bubble-monster .bubble-speaker {
  color: #ff8a80;
}

.combat-speech-bubble .bubble-text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  font-size: 0.84rem;
  line-height: 1.35;
  color: #221408;
}

.combat-speech-bubble.bubble-monster .bubble-text {
  color: #ffebee;
}

.combat-speech-bubble.fade-out {
  animation: speechBubbleFade 0.35s ease-out forwards;
}

@keyframes speechBubblePop {
  0% {
    opacity: 0;
    transform: scale(0.6) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes speechBubbleFade {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.85) translateY(-8px);
  }
}

/* ==========================================================================
   MODERN DARK-FANTASY CHARACTER SHEET DOSSIER
   ========================================================================== */
.sheet-paper {
  background: linear-gradient(180deg, #131926 0%, #0d121c 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65), inset 0 0 24px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
}

/* Gilded highlight bar */
.sheet-paper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, #d4af37 20%, #fff2af 50%, #d4af37 80%, transparent 100%);
  border-radius: 10px 10px 0 0;
}

/* Modern Header Dossier */
.sheet-header {
  display: flex;
  gap: 20px;
  align-items: center;
  background: linear-gradient(135deg, rgba(26, 35, 51, 0.85) 0%, rgba(18, 24, 36, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  position: relative;
}

.sheet-header-portrait {
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #d4af37;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.25), 0 4px 12px rgba(0, 0, 0, 0.6);
  position: relative;
  background: #090c12;
}

.sheet-header-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.sheet-header-portrait:hover img {
  transform: scale(1.05);
}

.sheet-header-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.sheet-char-name-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.sheet-char-name {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff4bf;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.sheet-char-title {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.sheet-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 0.8rem;
  color: #cbd5e1;
  margin-top: 4px;
}

.sheet-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 23, 42, 0.6);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sheet-meta-item strong {
  color: #ffd700;
  font-weight: 600;
}

.sheet-char-quote {
  margin-top: 6px;
  font-style: italic;
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.35;
}

.sheet-voice-btn {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(74, 20, 140, 0.3) 0%, rgba(126, 87, 194, 0.2) 100%);
  color: #e9d5ff;
  border: 1px solid #a855f7;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: fit-content;
}

.sheet-voice-btn:hover {
  background: linear-gradient(135deg, rgba(126, 87, 194, 0.45) 0%, rgba(147, 51, 234, 0.4) 100%);
  border-color: #c084fc;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.4);
}

/* Tier & Progression Ribbon */
.sheet-tier-ribbon {
  background: linear-gradient(90deg, rgba(20, 27, 40, 0.9) 0%, rgba(29, 39, 58, 0.9) 50%, rgba(20, 27, 40, 0.9) 100%);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  text-align: center;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.tier-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tier-stat-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tier-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffd700;
}

/* Main 3-Column Grid */
.sheet-main-grid {
  display: grid;
  grid-template-columns: 290px 1fr 310px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1080px) {
  .sheet-main-grid {
    grid-template-columns: 1fr;
  }
}

.sheet-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Reusable Modern Sheet Box */
.sheet-box {
  background: rgba(18, 24, 36, 0.85);
  border: 1px solid #2d3748;
  border-radius: 8px;
  padding: 14px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  position: relative;
}

.sheet-box-title {
  font-family: 'Cinzel', serif;
  font-size: 0.86rem;
  font-weight: 800;
  color: #ffd700;
  letter-spacing: 0.8px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 6px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 1. Ability Scores Grid */
.ability-scores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ability-score-box {
  background: linear-gradient(180deg, #1e2738 0%, #131924 100%);
  border: 1px solid #3b4861;
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: all 0.2s ease;
}

.ability-score-box:hover {
  border-color: #ffd700;
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.25);
}

.ability-name {
  font-size: 0.68rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 1px;
}

.ability-mod {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #fff4bf;
  margin: 2px 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.ability-base {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.85);
  padding: 1px 8px;
  border-radius: 10px;
  border: 1px solid #334155;
}

/* 2. Saving Throws List */
.saving-throws-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}

.save-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.45);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.save-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #4a5568;
  background: transparent;
  flex-shrink: 0;
}

.save-pip.proficient {
  background: #10b981;
  border-color: #34d399;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
}

/* 3. 18 D&D Skills List */
.skills-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #3b4861 transparent;
}

.skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.76rem;
  color: #cbd5e1;
  transition: background 0.15s ease;
}

.skill-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.skill-name-col {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid #4a5568;
  background: transparent;
  flex-shrink: 0;
}

.skill-dot.proficient {
  background: #10b981;
  border-color: #34d399;
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.6);
}

.skill-dot.expertise {
  background: #ffd700;
  border-color: #fff2af;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}

.skill-total {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  color: #f1f5f9;
}

/* 4. Combat Vitals Matrix */
.vitals-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.vital-card {
  background: linear-gradient(180deg, #1a2233 0%, #111722 100%);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.vital-card.ac-card {
  border-color: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2);
}

.vital-val {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff4bf;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.vital-lbl {
  font-size: 0.68rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* HP Bar Track */
.sheet-hp-track {
  width: 100%;
  height: 14px;
  background: #0f141f;
  border: 1px solid #2d3748;
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.sheet-hp-fill {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 5. Attacks & Weapon Masteries (D&D 2024) */
.attacks-deck {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.attack-weapon-card {
  background: linear-gradient(135deg, rgba(26, 35, 51, 0.7) 0%, rgba(17, 23, 34, 0.9) 100%);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  transition: border-color 0.2s ease;
}

.attack-weapon-card:hover {
  border-color: #d4af37;
}

.weapon-info-col strong {
  color: #f1f5f9;
  font-size: 0.85rem;
}

.weapon-subtag {
  font-size: 0.7rem;
  color: #94a3b8;
}

.mastery-badge {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 800;
  color: #ffd700;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 2px 8px;
  border-radius: 4px;
}

.weapon-stats-col {
  text-align: right;
}

.weapon-tohit {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 800;
  color: #10b981;
}

.weapon-dmg {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f8fafc;
}

/* 6. Spellcasting Dossier */
.spell-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
  margin-bottom: 10px;
}

.spell-stat-lbl {
  font-size: 0.65rem;
  color: #94a3b8;
  text-transform: uppercase;
}

.spell-stat-val {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #c084fc;
}

.spell-slots-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spell-slot-chip {
  background: rgba(88, 28, 135, 0.25);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: #e9d5ff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.spell-slot-chip .slot-gem {
  color: #c084fc;
  filter: drop-shadow(0 0 4px #a855f7);
}

/* 7. Class Features Deck */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 290px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #3b4861 transparent;
}

.feature-item {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
}

.feature-name {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #ffd700;
  margin-bottom: 2px;
}

.feature-desc {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
}

/* Attuned Relic Tile */
.attuned-relic-tile {
  display: flex;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
  border: 1px solid #b8860b;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 0 10px rgba(184, 134, 11, 0.2);
}

/* ==========================================
   2.10 INITIATIVE TRACKER RIBBON & D&D ROLL MODAL
   ========================================== */

/* Tracker Bar on top of Canvas */
.initiative-tracker-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 19, 26, 0.94);
  border: 1px solid #3a4458;
  border-bottom: 2px solid #232a36;
  border-radius: 6px 6px 0 0;
  padding: 6px 12px;
  width: 1060px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.initiative-tracker-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.8px;
  padding-right: 10px;
  border-right: 1px solid #3a4458;
  white-space: nowrap;
}

.initiative-tracker-badge .d20-icon {
  font-size: 1.05rem;
  animation: d20Glow 2.5s infinite ease-in-out;
}

@keyframes d20Glow {
  0%, 100% { filter: drop-shadow(0 0 2px #d4af37); }
  50% { filter: drop-shadow(0 0 7px #ffd700); }
}

.initiative-queue-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a4458 transparent;
  padding: 4px 2px;
  width: 100%;
}

.turn-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a202c;
  border: 1px solid #4a5568;
  border-radius: 6px;
  padding: 4px 8px;
  min-width: 105px;
  max-width: 140px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  user-select: none;
  flex-shrink: 0;
}

.turn-card.hero {
  border-color: #5c6b8c;
}

.turn-card.monster {
  border-color: #8c4a4a;
}

.turn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
  border-color: #e2e8f0;
}

/* Active Turn Halo */
.turn-card.active-turn {
  background: linear-gradient(135deg, #242c3d 0%, #1a2333 100%);
  border-color: #ffd700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.45), inset 0 0 6px rgba(255, 215, 0, 0.2);
  transform: translateY(-2px) scale(1.04);
}

.turn-card.active-turn::after {
  content: "ACTIVE";
  position: absolute;
  top: -7px;
  right: 6px;
  background: #ffd700;
  color: #111;
  font-size: 0.55rem;
  font-weight: 900;
  padding: 0 4px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  font-family: 'Inter', sans-serif;
}

.turn-card.downed {
  opacity: 0.4;
  filter: grayscale(1);
  border-color: #4a5568 !important;
}

.turn-card-portrait {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  background: #0f131a;
  border: 1px solid #718096;
  flex-shrink: 0;
}

.turn-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.turn-card-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.turn-card-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f7fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn-card-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1px;
}

.turn-card-init {
  font-size: 0.65rem;
  font-weight: 800;
  color: #ecc94b;
  font-family: 'Cinzel', serif;
}

.turn-card-hp {
  font-size: 0.62rem;
  color: #cbd5e0;
}

.turn-card-hp-bar {
  width: 100%;
  height: 3px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  margin-top: 2px;
  overflow: hidden;
}

.turn-card-hp-fill {
  height: 100%;
  background: #48bb78;
  transition: width 0.25s ease;
}

.turn-card.monster .turn-card-hp-fill {
  background: #e53e3e;
}

/* Initiative Roll Modal */
.initiative-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.88);
  backdrop-filter: blur(5px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: initFadeIn 0.25s ease;
}

@keyframes initFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.initiative-modal-card {
  background: #141821;
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 22px 28px;
  width: 90%;
  max-width: 820px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(212, 175, 55, 0.12);
  color: #e2e8f0;
}

.initiative-modal-header {
  text-align: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.initiative-title-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd700;
  letter-spacing: 1.5px;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.4);
  padding: 2px 10px;
  border-radius: 12px;
  margin-bottom: 6px;
}

.initiative-modal-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.7rem;
  color: #f7fafc;
  margin: 4px 0;
}

.initiative-modal-desc {
  font-size: 0.84rem;
  color: #a0aec0;
  margin: 0;
}

.initiative-roll-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  max-height: 380px;
  overflow-y: auto;
  padding: 4px;
}

.init-roll-card {
  position: relative;
  background: #1a202c;
  border: 1px solid #4a5568;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  transition: transform 0.3s ease, border-color 0.3s ease, order 0.4s ease;
  overflow: hidden;
}

.init-roll-card.hero {
  border-color: #4299e1;
}

.init-roll-card.monster {
  border-color: #e53e3e;
}

.init-roll-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #718096;
  color: #ffd700;
  padding: 1px 6px;
  border-radius: 8px;
}

.init-roll-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  margin: 6px auto 6px auto;
  border: 2px solid #718096;
  display: block;
}

.init-roll-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #f7fafc;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Authentic Polyhedral Die Silhouette Component */
.die-silhouette-container {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 4px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
}

.die-silhouette-container svg.die-svg-poly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* D20 Dice Badge & Overlaid Value on Silhouette Face */
.init-d20-badge,
.die-val-overlay {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff4bf;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
  margin: 0;
  margin-top: 2px;
  user-select: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: auto;
  height: auto;
}

.die-silhouette-container.monster .init-d20-badge,
.die-silhouette-container.monster .die-val-overlay {
  color: #ffd6d6;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95);
}

/* Rolling Tumble Animation */
.die-silhouette-container.rolling {
  animation: d20PolyTumble 0.16s infinite linear;
}

@keyframes d20PolyTumble {
  0% { transform: rotate(0deg) scale(0.94); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(0.94); }
}

/* Natural 20 Golden Crown Flare */
.die-silhouette-container.nat-20 {
  animation: nat20Pulse 1.8s infinite ease-in-out;
}
.die-silhouette-container.nat-20 svg.die-svg-poly {
  filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.95));
}
.die-silhouette-container.nat-20 .init-d20-badge,
.die-silhouette-container.nat-20 .die-val-overlay {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.9), 0 0 18px rgba(255, 235, 59, 0.8);
}

@keyframes nat20Pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* Natural 1 Smolder */
.die-silhouette-container.nat-1 svg.die-svg-poly {
  filter: drop-shadow(0 0 8px rgba(244, 67, 54, 0.75));
}
.die-silhouette-container.nat-1 .init-d20-badge,
.die-silhouette-container.nat-1 .die-val-overlay {
  color: #ff8a80;
  text-shadow: 0 0 6px rgba(244, 67, 54, 0.8);
}

.init-formula {
  font-size: 0.72rem;
  color: #a0aec0;
  margin-top: 4px;
}

.init-total-pill {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #f7fafc;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.5);
  padding: 2px 8px;
  border-radius: 4px;
}

.initiative-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.25);
  padding-top: 14px;
}



/* =========================================================
   2.11 RETRO ANIME CUTSCENE ENGINE & CINEMA THEATER
   ========================================================= */

/* Fullscreen Cinematic Letterboxed Overlay */
.anime-cutscene-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #000;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  animation: animeOverlayFadeIn 0.25s ease-out;
}

.anime-cutscene-overlay.hidden {
  display: none !important;
}

/* Explicit Fullscreen Mode (Campfires, Game Over Defeat, Milestone, Theater) */
.anime-cutscene-overlay.anime-layout-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #000;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

/* Non-Obstructive Dynamic Manga Action Cut-In Mode (Combat Crits & Spells) */
.anime-cutscene-overlay.anime-layout-cutin {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: transparent;
  pointer-events: none;
  display: block;
  overflow: hidden;
}

/* Hide Letterbox Bars in Cut-in Mode */
.anime-layout-cutin .anime-letterbox-bar {
  display: none !important;
}

@keyframes animeOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.anime-letterbox-bar {
  height: 9vh;
  background: #05070a;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.95);
}

.anime-letterbox-bar.top {
  border-bottom: 2px solid #d4af37;
}

.anime-letterbox-bar.bottom {
  border-top: 2px solid #d4af37;
}

.anime-viewport-container {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0d14;
}

/* Widescreen Upper Banner in Cut-in Mode */
.anime-layout-cutin .anime-viewport-container {
  position: absolute;
  top: 62px;
  left: 0;
  width: 100%;
  height: 210px;
  max-height: 210px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.95) 0%, rgba(16, 23, 34, 0.90) 50%, rgba(8, 12, 18, 0.95) 100%);
  border-top: 2px solid #ffd700;
  border-bottom: 2px solid #ffd700;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 215, 0, 0.25);
  pointer-events: auto;
  box-sizing: border-box;
  display: block;
  animation: animeCutInSlide 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Diagonal Slash Variant */
.anime-layout-cutin .anime-viewport-container.cutin-style-diagonal,
.cutin-style-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%);
}

/* Entrance Animation for Cut-In Banner */
@keyframes animeCutInSlide {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.anime-backdrop-blur {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(35px) brightness(0.28) saturate(1.3);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  transform: scale(1.08);
}

.anime-cutscene-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
}

/* Portrait Fullscreen Letterbox / Pillarbox Mode */
.anime-layout-fullscreen .anime-cutscene-img.is-portrait,
.anime-cutscene-img.is-portrait {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100vh;
  object-fit: contain !important;
  object-position: center;
}

/* Image Framing in Cut-in Mode */
.anime-layout-cutin .anime-cutscene-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
}

.anime-layout-cutin .anime-cutscene-img.is-portrait,
.anime-layout-fullscreen .anime-cutscene-img.is-portrait,
.anime-cutscene-img.is-portrait {
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.anime-cutscene-img.is-portrait.animate-zoom-in,
.anime-cutscene-img.is-portrait.animate-pan-down,
.anime-cutscene-img.is-portrait.animate-pan-up,
.anime-cutscene-img.is-portrait.animate-pan-left,
.anime-cutscene-img.is-portrait.animate-pan-right {
  animation: animePortraitSubtle 4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes animePortraitSubtle {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.02); }
}

/* Ken Burns Parallax Animation Modes */
.anime-cutscene-img.animate-zoom-in {
  animation: animeZoomIn 4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.anime-cutscene-img.animate-zoom-out {
  animation: animeZoomOut 4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.anime-cutscene-img.animate-pan-left {
  animation: animePanLeft 4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.anime-cutscene-img.animate-pan-right {
  animation: animePanRight 4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

.anime-cutscene-img.animate-pan-up {
  animation: animePanUp 4s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes animeZoomIn {
  0% { transform: scale(1.0); }
  100% { transform: scale(1.035); }
}

@keyframes animeZoomOut {
  0% { transform: scale(1.04); }
  100% { transform: scale(1.01); }
}

@keyframes animePanLeft {
  0% { transform: scale(1.03) translateX(1.5%); }
  100% { transform: scale(1.03) translateX(-1.5%); }
}

@keyframes animePanRight {
  0% { transform: scale(1.03) translateX(-1.5%); }
  100% { transform: scale(1.03) translateX(1.5%); }
}

@keyframes animePanUp {
  0% { transform: scale(1.03) translateY(1.5%); }
  100% { transform: scale(1.03) translateY(-1.5%); }
}

/* Canvas Speedlines Overlay */
.anime-speedline-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Authentic CRT Scanlines & 90s Film Grain (Disabled for clean image presentation) */
.anime-crt-overlay {
  display: none !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background: none !important;
  opacity: 0 !important;
}

/* Impact White Flash */
.anime-impact-flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
}

.anime-impact-flash.flash-active {
  animation: animeFlash 0.3s ease-out;
}

@keyframes animeFlash {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* Top Anime Title & Kanji Header */
.anime-header-strip {
  position: absolute;
  top: 18px;
  left: 36px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9);
}

.anime-badge-tag {
  background: rgba(229, 62, 62, 0.9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.4);
}

.anime-title-text {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.anime-kanji-stamp {
  font-family: serif;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

/* Bottom Retro Fansub Subtitle Banner */
.anime-subtitle-strip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  text-align: center;
  max-width: 82%;
  background: rgba(8, 11, 16, 0.82);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 8px;
  padding: 10px 26px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.85);
}

.anime-subtitle-quote {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  margin: 0 0 3px 0;
}

.anime-subtitle-desc {
  font-size: 0.9rem;
  color: #e2e8f0;
  margin: 0;
}

.btn-skip-anime {
  position: absolute;
  bottom: 20px;
  right: 28px;
  z-index: 9;
  background: rgba(20, 24, 33, 0.85);
  color: #ecc94b;
  border: 1px solid #ecc94b;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-skip-anime:hover {
  background: #ecc94b;
  color: #000;
  box-shadow: 0 0 12px rgba(236, 201, 75, 0.7);
}

/* =========================================================
   DYNAMIC MANGA CUT-IN BANNER FORMATTING & ACCENTS
   ========================================================= */

/* Cut-in Header Strip Formatting inside 210px Banner */
.anime-layout-cutin .anime-header-strip {
  position: absolute;
  top: 14px;
  left: 24px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95);
}

.anime-layout-cutin .anime-badge-tag {
  background: rgba(229, 62, 62, 0.9);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.anime-layout-cutin .anime-title-text {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
}

.anime-layout-cutin .anime-kanji-stamp {
  font-family: serif;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.5);
}

/* Cut-in Subtitle Strip Formatting inside 210px Banner */
.anime-layout-cutin .anime-subtitle-strip {
  position: absolute;
  bottom: 12px;
  left: 24px;
  transform: none;
  z-index: 8;
  text-align: left;
  max-width: 68%;
  background: rgba(8, 12, 18, 0.88);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 6px;
  padding: 6px 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.85);
}

.anime-layout-cutin .anime-subtitle-quote {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
  margin: 0 0 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.anime-layout-cutin .anime-subtitle-desc {
  font-size: 0.82rem;
  color: #e2e8f0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Skip Button in Cut-In Mode */
.anime-layout-cutin .btn-skip-anime {
  position: absolute;
  top: 14px;
  bottom: auto;
  right: 24px;
  z-index: 10;
  pointer-events: auto;
  background: rgba(20, 24, 33, 0.9);
  color: #ecc94b;
  border: 1px solid #ecc94b;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.anime-layout-cutin .btn-skip-anime:hover {
  background: #ecc94b;
  color: #000;
  box-shadow: 0 0 12px rgba(236, 201, 75, 0.7);
}

/* High-Impact Screen Shake Animation */
@keyframes cutinShake {
  0% { transform: translate(0, 0); }
  15% { transform: translate(-6px, 3px); }
  30% { transform: translate(5px, -4px); }
  45% { transform: translate(-4px, 2px); }
  60% { transform: translate(4px, -2px); }
  75% { transform: translate(-2px, 1px); }
  90% { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); }
}

.cutin-shake,
.anime-viewport-container.cutin-shake,
#anime-cutscene-overlay.cutin-shake .anime-viewport-container {
  animation: cutinShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* =========================================================
   CINEMATIC FULLSCREEN TAKEOVER FOR ALL CUTSCENES
   Per user direction: Cutscenes take up the whole screen
   rather than being squished into the top 210px banner.
   ========================================================= */
#anime-cutscene-overlay.anime-layout-cutin {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #000;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-letterbox-bar {
  display: block !important;
  height: 9vh;
  background: #05070a;
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.95);
}

#anime-cutscene-overlay.anime-layout-cutin .anime-letterbox-bar.top {
  border-bottom: 2px solid #d4af37;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-letterbox-bar.bottom {
  border-top: 2px solid #d4af37;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-viewport-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0a0d14;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
  clip-path: none;
  animation: none;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-cutscene-img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: center center;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-cutscene-img.is-portrait,
#anime-cutscene-overlay .anime-cutscene-img.is-portrait {
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-header-strip {
  position: absolute;
  top: 18px;
  left: 36px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 14px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

#anime-cutscene-overlay.anime-layout-cutin .anime-badge-tag {
  background: rgba(229, 62, 62, 0.9);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.4);
}

#anime-cutscene-overlay.anime-layout-cutin .anime-title-text {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-kanji-stamp {
  font-family: serif;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.45);
}

#anime-cutscene-overlay.anime-layout-cutin .anime-subtitle-strip {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  text-align: center;
  max-width: 82%;
  background: rgba(8, 11, 16, 0.82);
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 8px;
  padding: 10px 26px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.85);
}

#anime-cutscene-overlay.anime-layout-cutin .anime-subtitle-quote {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  margin: 0 0 3px 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#anime-cutscene-overlay.anime-layout-cutin .anime-subtitle-desc {
  font-size: 0.9rem;
  color: #e2e8f0;
  margin: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#anime-cutscene-overlay.anime-layout-cutin .btn-skip-anime {
  position: absolute;
  bottom: 20px;
  right: 28px;
  top: auto;
  z-index: 9;
  background: rgba(20, 24, 33, 0.85);
  color: #ecc94b;
  border: 1px solid #ecc94b;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

#anime-cutscene-overlay.anime-layout-cutin .btn-skip-anime:hover {
  background: #ecc94b;
  color: #000;
  box-shadow: 0 0 12px rgba(236, 201, 75, 0.7);
}

/* =========================================================
   ANIME THEATER GALLERY (GRIMOIRE / ADVENTURE MENU TAB)
   ========================================================= */

.theater-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 24px;
}

.theater-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding-bottom: 14px;
}

.theater-main-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ecc94b;
  margin: 0 0 2px 0;
  letter-spacing: 1px;
}

.theater-sub-title {
  font-size: 0.82rem;
  color: #a0aec0;
  margin: 0;
}

.theater-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theater-filter-pill {
  background: #141821;
  color: #cbd5e0;
  border: 1px solid #4a5568;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theater-filter-pill:hover,
.theater-filter-pill.active {
  background: #ecc94b;
  color: #0f131a;
  border-color: #ecc94b;
  box-shadow: 0 0 10px rgba(236, 201, 75, 0.35);
}

.theater-settings-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: rgba(15, 19, 26, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  padding: 8px 16px;
}

.theater-strip-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #ecc94b;
}

.theater-toggle-label {
  font-size: 0.8rem;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.theater-toggle-label input {
  accent-color: #ecc94b;
  cursor: pointer;
}

.theater-select-label {
  font-size: 0.8rem;
  color: #e2e8f0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theater-select-input {
  background: #141821;
  color: #ecc94b;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}

.theater-select-input:focus {
  outline: none;
  border-color: #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.theater-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 6px;
}

.theater-card {
  background: #141821;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.theater-card:hover {
  transform: translateY(-3px);
  border-color: #ecc94b;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7), 0 0 14px rgba(236, 201, 75, 0.3);
}

.theater-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

.theater-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.theater-card-thumb.portrait-thumb {
  object-position: center 18%;
}

.theater-card:hover .theater-card-thumb {
  transform: scale(1.05);
}

.theater-play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.theater-card:hover .theater-play-overlay {
  opacity: 1;
}

.theater-play-icon {
  font-size: 2rem;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
}

.theater-play-text {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}

.theater-type-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #718096;
  color: #fff;
}

.theater-type-badge.combat {
  background: rgba(229, 62, 62, 0.85);
  border-color: #feb2b2;
}

.theater-type-badge.campfire {
  background: rgba(221, 107, 32, 0.85);
  border-color: #fbd38d;
}

.theater-type-badge.ensemble {
  background: rgba(214, 158, 46, 0.85);
  border-color: #fefcbf;
}

.theater-type-badge.game_over {
  background: rgba(183, 28, 28, 0.90);
  border-color: #ff5252;
  color: #ffebee;
}

.theater-card-info {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.theater-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.theater-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #f7fafc;
  margin: 0;
}

.theater-kanji {
  font-size: 0.75rem;
  color: #ecc94b;
  font-family: serif;
}

.theater-card-desc {
  font-size: 0.78rem;
  color: #a0aec0;
  margin: 0;
  line-height: 1.35;
}

.theater-card-quote {
  font-size: 0.74rem;
  color: #ffd700;
  font-style: italic;
  margin: 4px 0 0 0;
}

/* ==========================================================================
   FLOATING NOTIFICATION TOAST (QUICK SAVE / AUTO SAVE / LEVEL UP)
   ========================================================================== */
.game-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: linear-gradient(135deg, rgba(20, 26, 38, 0.96) 0%, rgba(13, 17, 26, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 8px;
  padding: 10px 24px;
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff4bf;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 15px rgba(212, 175, 55, 0.3);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 0.5px;
}

.game-toast.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  pointer-events: none;
}

.game-toast.toast-success {
  border-color: #34d399;
  color: #ecfdf5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 15px rgba(52, 211, 153, 0.35);
}

.game-toast.toast-quicksave {
  border-color: #a855f7;
  color: #faf5ff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 15px rgba(168, 85, 247, 0.4);
}

/* ==========================================================================
   CHRONICLE ARCHIVES & MULTI-SLOT SAVE/LOAD SYSTEM
   ========================================================================== */
.saves-view-layout {
  padding: 16px 20px;
  max-width: 1140px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(85vh - 70px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3b4861 #090c13;
}

.saves-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  background: linear-gradient(135deg, rgba(26, 35, 51, 0.9) 0%, rgba(18, 24, 36, 0.95) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}

.saves-header-left h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff4bf;
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
}

.saves-header-left p {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0;
}

.saves-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-save-action {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(30, 41, 59, 0.85);
  color: #f1f5f9;
}

.btn-save-action:hover {
  transform: translateY(-1px);
  border-color: #ffd700;
  background: rgba(45, 60, 85, 0.95);
  box-shadow: 0 2px 10px rgba(255, 215, 0, 0.25);
  color: #fff;
}

.btn-save-action.primary-save {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  border-color: #ffd700;
  color: #0d121c;
  font-weight: 800;
}

.btn-save-action.primary-save:hover {
  background: linear-gradient(135deg, #d4af37 0%, #ffe066 100%);
  box-shadow: 0 0 14px rgba(255, 215, 0, 0.45);
}

.btn-save-action.quicksave-btn {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.7) 0%, rgba(126, 34, 206, 0.8) 100%);
  border-color: #c084fc;
  color: #f3e8ff;
}

.btn-save-action.quicksave-btn:hover {
  background: linear-gradient(135deg, rgba(126, 34, 206, 0.85) 0%, rgba(168, 85, 247, 0.95) 100%);
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.45);
}

/* Save Grid & Cards */
.save-slots-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffd700;
  letter-spacing: 0.8px;
  margin: 10px 0 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.save-slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.save-card {
  background: linear-gradient(180deg, rgba(26, 35, 51, 0.9) 0%, rgba(17, 23, 34, 0.95) 100%);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
  position: relative;
}

.save-card:hover {
  border-color: #d4af37;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.15);
}

.save-card.pinned-autosave {
  border-color: rgba(52, 211, 153, 0.5);
  background: linear-gradient(180deg, rgba(20, 36, 30, 0.9) 0%, rgba(13, 23, 20, 0.95) 100%);
}

.save-card.pinned-quicksave {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(180deg, rgba(30, 20, 44, 0.9) 0%, rgba(18, 13, 28, 0.95) 100%);
}

.save-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.save-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

.save-slot-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #4a5568;
  background: rgba(15, 23, 42, 0.8);
  color: #94a3b8;
  white-space: nowrap;
}

.save-slot-badge.badge-auto {
  border-color: #059669;
  background: rgba(5, 150, 105, 0.2);
  color: #34d399;
}

.save-slot-badge.badge-quick {
  border-color: #9333ea;
  background: rgba(147, 51, 234, 0.2);
  color: #c084fc;
}

.save-slot-title {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: #f1f5f9;
  line-height: 1.25;
}

.save-timestamp {
  font-size: 0.7rem;
  color: #64748b;
  white-space: nowrap;
}

.save-card-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.5);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.save-card-location strong {
  color: #ffd700;
}

/* Party Member Previews in Save Card */
.save-party-preview {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}

.save-hero-thumb {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #4a5568;
  overflow: hidden;
  background: #090c12;
  flex-shrink: 0;
}

.save-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.save-hero-hp-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #0f172a;
}

.save-hero-hp-fill {
  height: 100%;
  background: #10b981;
}

.save-meta-chips {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 2px;
}

.save-meta-chips span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Save Card Action Buttons */
.save-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-card-load {
  flex: 1;
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 5px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid #34d399;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.2s ease;
}

.btn-card-load:hover {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
  transform: translateY(-1px);
}

.btn-card-tool {
  font-size: 0.72rem;
  padding: 5px 8px;
  border-radius: 5px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid #334155;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-card-tool:hover {
  background: rgba(51, 65, 85, 0.9);
  border-color: #64748b;
  color: #fff;
}

.btn-card-tool.danger:hover {
  background: rgba(185, 28, 28, 0.8);
  border-color: #ef4444;
  color: #fee2e2;
}

.empty-saves-state {
  text-align: center;
  padding: 36px 20px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed #334155;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.88rem;
}

/* =========================================================
   DISCRETE MENU BUTTONS (COMBAT & STORYBOOK) & STORY STATS
   ========================================================= */
.btn-nav-quick.btn-nav-master {
  background: linear-gradient(180deg, #3d2a14 0%, #201408 100%);
  border: 1px solid #ffd54f;
  color: #ffd54f;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.3);
}
.btn-nav-quick.btn-nav-master:hover {
  background: linear-gradient(180deg, #5a3e1c 0%, #301f0d 100%);
  border-color: #fff9c4;
  color: #fff9c4;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.6);
  transform: translateY(-1px);
}

.btn-action.secondary-menu {
  background: linear-gradient(180deg, #2b1f13 0%, #171009 100%);
  border: 1px solid #c89b3c;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.btn-action.secondary-menu:hover {
  background: linear-gradient(180deg, #44311e 0%, #24190e 100%);
  border-color: #ffd54f;
  color: #fff9c4;
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.btn-story-nav.story-menu-btn {
  background: linear-gradient(180deg, #442b15 0%, #201309 100%);
  border: 1.5px solid #ffd54f;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 213, 79, 0.25);
  flex-shrink: 0;
}
.btn-story-nav.story-menu-btn:hover {
  background: linear-gradient(180deg, #66411f 0%, #351d0d 100%);
  border-color: #fff9c4;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.6);
}

.btn-story-footer-menu {
  background: linear-gradient(180deg, #3a2615 0%, #1c1108 100%);
  border: 1.5px solid #d4af37;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}
.btn-story-footer-menu:hover {
  background: linear-gradient(180deg, #573a1e 0%, #2e1c0d 100%);
  border-color: #ffd54f;
  color: #fff9c4;
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.5);
}

.page-action-row {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}

.btn-action.btn-combat-util {
  background: linear-gradient(180deg, #1e2430 0%, #11141b 100%);
  border: 1px solid var(--border-bronze);
  color: #dcd6c8;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
}
.btn-action.btn-combat-util:hover {
  background: linear-gradient(180deg, #2b3344 0%, #181d26 100%);
  border-color: #ffd27a;
  color: #ffd54f;
  box-shadow: 0 0 8px rgba(179, 139, 71, 0.3);
  transform: translateY(-1px);
}
.btn-action.btn-combat-util.muted {
  border-color: var(--border-muted);
  color: var(--text-dim);
  opacity: 0.7;
}
.btn-action.btn-combat-util.view-active {
  border-color: #38d9a9;
  color: #a7f3d0;
  background: linear-gradient(180deg, #134e4a 0%, #064e3b 100%);
  box-shadow: 0 0 10px rgba(56, 217, 169, 0.4);
}

.combat-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}


.sheet-story-banner {
  margin: 10px 0 14px 0;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.12) 0%, rgba(15, 23, 42, 0.4) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #e2e8f0;
}
.sheet-story-banner .story-loc {
  color: #ffd54f;
  font-weight: 700;
}
.sheet-story-banner .story-tag {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.sheet-story-banner .story-tag.active {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
  border: 1px solid #10b981;
}
.sheet-story-banner .story-tag.reserve {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid #f59e0b;
}
.sheet-story-banner .story-tag.locked {
  background: rgba(100, 116, 139, 0.2);
  color: #cbd5e1;
  border: 1px solid #64748b;
}

/* Contextual Action Button & Pulse */
.btn-action.contextual-action-btn {
  background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
  border: 1.5px solid #f39c12;
  color: #fff8e7;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(243, 156, 18, 0.45);
  animation: pulseContextual 1.8s infinite ease-in-out;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-action.contextual-action-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  border-color: #ffd54f;
  box-shadow: 0 0 16px rgba(255, 213, 79, 0.75);
  transform: translateY(-1px);
}
@keyframes pulseContextual {
  0%, 100% { box-shadow: 0 0 8px rgba(243, 156, 18, 0.4); }
  50% { box-shadow: 0 0 18px rgba(255, 213, 79, 0.85); }
}

/* Death Saves and Slain Status Badges */
.card-slain-badge.dead-badge {
  background: #b71c1c !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.card-slain-badge.stable-badge {
  background: #2e7d32 !important;
  color: #e8f5e9 !important;
  font-weight: 700;
}
.card-slain-badge.danger-badge {
  background: linear-gradient(135deg, #b71c1c 0%, #ff1744 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0.8px;
  animation: criticalDeathDangerPulse 0.8s ease-in-out infinite alternate;
}

.combatant-portrait-card.hero-card.critical-danger {
  border-color: #ff1744 !important;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.75), inset 0 0 10px rgba(183, 28, 28, 0.5) !important;
  animation: portraitCriticalDangerPulse 0.9s ease-in-out infinite alternate;
}

.card-death-saves-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.7rem;
  margin-top: 3px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.25s ease;
}

.card-death-saves-row.critical-danger {
  background: rgba(183, 28, 28, 0.35);
  border: 1px solid #ff1744;
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.6);
  animation: criticalDeathDangerPulse 0.8s ease-in-out infinite alternate;
}

.card-death-saves-row .save-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid #4a5568;
  background: rgba(15, 23, 42, 0.6);
  display: inline-block;
  transition: all 0.25s ease;
}

.card-death-saves-row .save-pip.succ {
  border-color: #2e7d32;
}

.card-death-saves-row .save-pip.succ.filled {
  background: #4caf50;
  border-color: #81c784;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.8);
}

.card-death-saves-row .save-pip.fail {
  border-color: #7f1d1d;
}

.card-death-saves-row .save-pip.fail.filled {
  background: #ff1744;
  border-color: #ff5252;
  box-shadow: 0 0 8px rgba(255, 23, 68, 0.95);
  animation: deathSavePipThrob 1.1s ease-in-out infinite;
}

@keyframes deathSavePipThrob {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px #ff1744; }
}

@keyframes criticalDeathDangerPulse {
  0% { box-shadow: 0 0 4px rgba(255, 23, 68, 0.4); border-color: #b71c1c; }
  100% { box-shadow: 0 0 14px rgba(255, 23, 68, 0.95); border-color: #ff1744; }
}

@keyframes portraitCriticalDangerPulse {
  0% { box-shadow: 0 0 8px rgba(183, 28, 28, 0.5); }
  100% { box-shadow: 0 0 20px rgba(255, 23, 68, 0.9); }
}
.btn-raise-dead {
  background: linear-gradient(135deg, #6a1b9a 0%, #8e24aa 100%);
  border: 1px solid #ce93d8;
  color: #f3e5f5;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0 8px rgba(156, 39, 176, 0.4);
}
.btn-raise-dead:hover {
  background: linear-gradient(135deg, #8e24aa 0%, #ab47bc 100%);
  box-shadow: 0 0 14px rgba(206, 147, 216, 0.7);
  transform: translateY(-1px);
}

/* ==========================================
   TOTAL PARTY KILL (TPK) BITTER GAME OVER CINEMATIC MODAL
   ========================================== */
.tpk-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, rgba(38, 10, 10, 0.96) 0%, rgba(15, 5, 5, 0.98) 65%, #050202 100%);
  z-index: 15000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  animation: tpkFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

@keyframes tpkFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.tpk-modal-card {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: linear-gradient(180deg, #180d0d 0%, #0d0808 60%, #150a0a 100%);
  border: 2px solid #8b0000;
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(183, 28, 28, 0.65), inset 0 0 35px rgba(0, 0, 0, 0.9);
  padding: 32px 36px;
  color: #e0e0e0;
  text-align: center;
  box-sizing: border-box;
  animation: tpkSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tpkSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.tpk-header {
  margin-bottom: 24px;
}

.tpk-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #8b0000 0%, #4a0000 100%);
  color: #ffcdd2;
  border: 1px solid #ef5350;
  border-radius: 20px;
  padding: 5px 18px;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  box-shadow: 0 0 16px rgba(239, 83, 80, 0.4);
}

.tpk-modal-card h1 {
  font-family: 'Cinzel', serif;
  font-size: 2.35rem;
  color: #ff5252;
  margin: 0 0 8px 0;
  text-shadow: 0 0 25px rgba(255, 82, 82, 0.7), 0 2px 4px #000;
  letter-spacing: 1.5px;
}

.tpk-subtitle {
  font-size: 1.05rem;
  color: #cfd8dc;
  font-style: italic;
  margin: 0 auto;
  max-width: 680px;
  line-height: 1.5;
}

/* Memorial Grid of Fallen Champions */
.tpk-memorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.tpk-hero-tomb {
  background: linear-gradient(180deg, #241414 0%, #150a0a 100%);
  border: 1px solid #5c2020;
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease;
}

.tpk-hero-tomb:hover {
  transform: translateY(-2px);
  border-color: #b71c1c;
}

.tpk-avatar-wrap {
  position: relative;
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

.tpk-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #8b0000;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.15);
  opacity: 0.75;
}

.tpk-avatar-skull {
  position: absolute;
  bottom: -4px;
  right: -4px;
  background: #110606;
  border: 1px solid #ff5252;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
}

.tpk-hero-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ff8a80;
  margin-bottom: 2px;
}

.tpk-hero-role {
  font-size: 0.72rem;
  color: #90a4ae;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.tpk-hero-epitaph {
  font-size: 0.76rem;
  color: #cfd8dc;
  font-style: italic;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  border-left: 2px solid #8b0000;
}

/* Chronicle Epitaph Box */
.tpk-epitaph-box {
  background: rgba(10, 4, 4, 0.75);
  border: 1px solid #4a1414;
  border-radius: 8px;
  padding: 16px 22px;
  margin-bottom: 20px;
  text-align: left;
}

.tpk-chronicle-text {
  font-size: 0.92rem;
  color: #d7ccc8;
  line-height: 1.6;
  margin-bottom: 12px;
  font-family: 'Georgia', serif;
}

.tpk-defeat-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  color: #b0bec5;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 10px;
}

.tpk-stat-pill {
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tpk-stat-pill strong {
  color: #ffd54f;
}

/* Actions Command Bar */
.tpk-actions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.btn-tpk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

.btn-tpk-restart {
  background: linear-gradient(135deg, #b71c1c 0%, #e53935 100%);
  border: 1px solid #ff8a80;
  color: #ffffff;
}
.btn-tpk-restart:hover {
  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.7);
  transform: translateY(-2px);
}

.btn-tpk-load {
  background: linear-gradient(135deg, #1565c0 0%, #1976d2 100%);
  border: 1px solid #90caf9;
  color: #ffffff;
}
.btn-tpk-load:hover {
  background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%);
  box-shadow: 0 0 20px rgba(33, 150, 243, 0.7);
  transform: translateY(-2px);
}

.btn-tpk-camp {
  background: linear-gradient(135deg, #4e342e 0%, #6d4c41 100%);
  border: 1px solid #bcaaa4;
  color: #efebe9;
}
.btn-tpk-camp:hover {
  background: linear-gradient(135deg, #5d4037 0%, #795548 100%);
  box-shadow: 0 0 16px rgba(188, 170, 164, 0.5);
  transform: translateY(-2px);
}

.btn-tpk-saves {
  background: linear-gradient(135deg, #263238 0%, #37474f 100%);
  border: 1px solid #78909c;
  color: #eceff1;
}
.btn-tpk-saves:hover {
  background: linear-gradient(135deg, #37474f 0%, #455a64 100%);
  box-shadow: 0 0 16px rgba(120, 144, 156, 0.5);
  transform: translateY(-2px);
}

/* =========================================================
   GROUP POOL ENCUMBRANCE & IN-COMBAT GROUP INVENTORY DRAWER
   ========================================================= */

.action-slot.encumbrance-slot .status.available {
  color: #34d399 !important;
}
.action-slot.encumbrance-slot .status.burdened {
  color: #fbbf24 !important;
}
.action-slot.encumbrance-slot .status.encumbered {
  color: #f87171 !important;
}

/* Combat Item Button */
.btn-action.item-action {
  background: linear-gradient(180deg, #382c16 0%, #20180a 100%);
  border: 1px solid #c99a32;
  color: #fde047;
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn-action.item-action:hover:not(.spent):not(:disabled) {
  background: linear-gradient(180deg, #533f1d 0%, #30230e 100%);
  border-color: #ffd700;
  box-shadow: 0 0 14px rgba(253, 224, 71, 0.45);
  transform: translateY(-1px);
}
.btn-action.item-action.active-mode {
  background: linear-gradient(180deg, #664d1f 0%, #3c2a0f 100%) !important;
  border-color: #fef08a !important;
  box-shadow: 0 0 16px rgba(254, 240, 138, 0.6) !important;
}

/* Combat Item Popover Drawer */
.combat-item-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  right: 8px;
  max-width: 720px;
  margin: 0 auto;
  z-index: 120;
  animation: combatItemSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.combat-item-popover.hidden {
  display: none;
}
@keyframes combatItemSlideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.combat-item-card {
  background: rgba(15, 23, 42, 0.97);
  border: 2px solid #d4af37;
  border-radius: 8px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.85), inset 0 0 20px rgba(212, 175, 55, 0.1);
  backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.combat-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}
.combat-item-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.combat-item-header-icon {
  font-size: 1.35rem;
}
.combat-item-header-text h4 {
  margin: 0;
  font-size: 0.95rem;
  color: #f1f5f9;
  letter-spacing: 0.5px;
}
.combat-item-header-sub {
  font-size: 0.72rem;
  color: #94a3b8;
}
.combat-item-close-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  color: #cbd5e1;
  font-size: 1.25rem;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.combat-item-close-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fca5a5;
}

.combat-item-body {
  padding: 10px 12px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.combat-item-body::-webkit-scrollbar {
  width: 6px;
}
.combat-item-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.35);
  border-radius: 3px;
}

.combat-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(30, 41, 59, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 6px;
  padding: 8px 12px;
  transition: all 0.15s ease;
}
.combat-item-row:hover {
  background: rgba(51, 65, 85, 0.75);
  border-color: rgba(212, 175, 55, 0.5);
}

.combat-item-info-col {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.combat-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.combat-item-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.combat-item-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.combat-item-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: #f8fafc;
}
.combat-item-stock-badge {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #ffd700;
  font-weight: 700;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
}
.combat-item-weight-badge {
  color: #94a3b8;
  font-size: 0.68rem;
}
.combat-item-desc {
  font-size: 0.72rem;
  color: #cbd5e1;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.combat-item-actions-col {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.btn-combat-item-use {
  background: linear-gradient(180deg, #1e3a29 0%, #112217 100%);
  border: 1px solid #10b981;
  color: #6ee7b7;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-combat-item-use:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a523a 0%, #162c1e 100%);
  border-color: #34d399;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
  transform: translateY(-1px);
}
.btn-combat-item-use.ally-target {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-color: #38bdf8;
  color: #7dd3fc;
}
.btn-combat-item-use.ally-target:hover:not(:disabled) {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: #7dd3fc;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}
.btn-combat-item-use.downed-ally {
  background: linear-gradient(180deg, #7f1d1d 0%, #450a0a 100%);
  border-color: #ef4444;
  color: #fca5a5;
  animation: pulseDownedAlly 1.2s infinite ease-in-out;
}
@keyframes pulseDownedAlly {
  0%, 100% { box-shadow: 0 0 6px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 14px rgba(239, 68, 68, 0.8); }
}
.btn-combat-item-use.offensive-throw {
  background: linear-gradient(180deg, #7c2d12 0%, #431407 100%);
  border-color: #f97316;
  color: #fdba74;
}
.btn-combat-item-use.offensive-throw:hover:not(:disabled) {
  background: linear-gradient(180deg, #9a3412 0%, #541c09 100%);
  border-color: #fb923c;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.45);
}
.btn-combat-item-use:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

/* ========================================================= */
/* 🏆 VICTORY SPOILS & XP ACCUMULATION MODAL STYLES         */
/* ========================================================= */
.victory-card {
  max-width: 640px;
  background: linear-gradient(180deg, #1b202c 0%, #0d0f15 100%);
  border: 2px solid var(--border-gold);
  border-radius: 12px;
  box-shadow: 0 0 50px rgba(255, 213, 79, 0.4), 0 20px 60px rgba(0, 0, 0, 0.95);
  position: relative;
  overflow: hidden;
}

.victory-sunburst {
  position: absolute;
  top: -160px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
  height: 500px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 213, 79, 0.15) 0deg,
    transparent 25deg,
    rgba(255, 213, 79, 0.15) 50deg,
    transparent 75deg,
    rgba(255, 213, 79, 0.15) 100deg,
    transparent 125deg,
    rgba(255, 213, 79, 0.15) 150deg,
    transparent 175deg,
    rgba(255, 213, 79, 0.15) 200deg,
    transparent 225deg,
    rgba(255, 213, 79, 0.15) 250deg,
    transparent 275deg,
    rgba(255, 213, 79, 0.15) 300deg,
    transparent 325deg,
    rgba(255, 213, 79, 0.15) 350deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: spinSunburst 25s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.victory-header {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 20px 24px 12px;
  border-bottom: 1px solid rgba(255, 213, 79, 0.3);
  background: linear-gradient(180deg, rgba(255, 213, 79, 0.12) 0%, transparent 100%);
}

.victory-stars {
  color: #ffd54f;
  font-size: 0.85rem;
  letter-spacing: 5px;
  text-shadow: 0 0 10px rgba(255, 213, 79, 0.8);
  margin-bottom: 4px;
}

.victory-header h2 {
  font-size: 1.55rem;
  color: #fff8e1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 16px rgba(255, 213, 79, 0.5);
  margin: 4px 0;
}

.victory-subtitle {
  font-size: 0.82rem;
  color: #b0bec5;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.victory-body {
  position: relative;
  z-index: 1;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* XP Accumulation Section */
.victory-xp-section {
  background: rgba(15, 18, 26, 0.85);
  border: 1px solid rgba(255, 213, 79, 0.4);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
}

.victory-xp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.victory-xp-level-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #ffd54f;
  font-size: 0.95rem;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.5);
}

.victory-xp-counter-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.victory-xp-awarded {
  font-size: 1.05rem;
  font-weight: 800;
  color: #69f0ae;
  text-shadow: 0 0 10px rgba(105, 240, 174, 0.7);
  animation: pulseGreen 1.5s ease-in-out infinite;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.victory-xp-total {
  font-size: 0.85rem;
  color: #cfd8dc;
}

.victory-xp-bar-track {
  width: 100%;
  height: 18px;
  background: #080a0f;
  border-radius: 9px;
  border: 1px solid #37474f;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}

.victory-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd54f 0%, #ffb300 50%, #00e676 100%);
  border-radius: 8px;
  position: relative;
  transition: width 0.08s linear;
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.8);
}

.xp-bar-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.45) 50%,
    transparent 100%
  );
  animation: xpShimmer 1.8s infinite;
}

@keyframes xpShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.victory-levelup-indicator {
  margin-top: 8px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(255, 213, 79, 0.2), rgba(255, 179, 0, 0.35), rgba(255, 213, 79, 0.2));
  border: 1px solid #ffd54f;
  border-radius: 6px;
  color: #fff9c4;
  text-align: center;
  font-size: 0.85rem;
  animation: levelupGlow 1.2s ease-in-out infinite alternate;
}

.victory-levelup-indicator.hidden {
  display: none !important;
}

@keyframes levelupGlow {
  0% { box-shadow: 0 0 6px rgba(255, 213, 79, 0.3); }
  100% { box-shadow: 0 0 18px rgba(255, 213, 79, 0.8); }
}

/* Spoils Grid */
.victory-spoils-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.spoil-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(17, 21, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}

.spoil-icon {
  font-size: 1.5rem;
}

.spoil-info {
  display: flex;
  flex-direction: column;
}

.spoil-label {
  font-size: 0.75rem;
  color: #90a4ae;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.spoil-val {
  font-size: 0.88rem;
  font-weight: 700;
  color: #eceff1;
}

.gold-spoil .spoil-val {
  color: #ffd54f;
}

/* Relic Spotlight */
.victory-relic-spotlight {
  background: linear-gradient(135deg, rgba(30, 20, 45, 0.85) 0%, rgba(15, 18, 28, 0.95) 100%);
  border: 1px solid #ba68c8;
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 0 15px rgba(186, 104, 200, 0.3);
}

.victory-relic-spotlight.hidden {
  display: none !important;
}

.relic-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.relic-crest {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e1bee7;
  letter-spacing: 1px;
}

.relic-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.relic-icon {
  font-size: 1.8rem;
  background: rgba(186, 104, 200, 0.2);
  border-radius: 8px;
  padding: 4px 8px;
  border: 1px solid rgba(186, 104, 200, 0.4);
}

.relic-text h4 {
  font-size: 0.95rem;
  color: #fff;
  margin: 0 0 2px;
}

.relic-text p {
  font-size: 0.78rem;
  color: #b0bec5;
  font-style: italic;
  margin: 0;
}

.victory-footer {
  position: relative;
  z-index: 1;
  padding: 12px 24px 18px;
  display: flex;
  justify-content: center;
}

.victory-claim-btn {
  padding: 12px 32px !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  border-radius: 6px !important;
  box-shadow: 0 4px 18px rgba(255, 213, 79, 0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.victory-claim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 213, 79, 0.6) !important;
}

/* Magic Missile Multi-Target Distribution Styles */
.combatant-portrait-card.mm-target-assigned {
  border-color: #e040fb !important;
  box-shadow: 0 0 12px rgba(224, 64, 251, 0.75), inset 0 0 8px rgba(186, 104, 200, 0.3) !important;
  transform: translateY(-2px);
}

.card-mm-assigned-badge {
  animation: mmBadgePulse 1.2s infinite alternate ease-in-out;
}

@keyframes mmBadgePulse {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(224, 64, 251, 0.5); }
  100% { transform: scale(1.08); box-shadow: 0 0 10px rgba(224, 64, 251, 0.9); }
}

#btn-unleash-mm {
  animation: mmUnleashGlow 1s infinite alternate ease-in-out;
}

@keyframes mmUnleashGlow {
  0% { box-shadow: 0 0 4px rgba(186, 104, 200, 0.5); border-color: #ab47bc; }
  100% { box-shadow: 0 0 14px rgba(224, 64, 251, 0.9); border-color: #ea80fc; }
}

/* =========================================================
   📱 AUTOMATIC MOBILE-OPTIMIZED LAYOUT & TOUCH SYSTEM
   Activated automatically via body.layout-mobile or @media query
   ========================================================= */

@media (max-width: 820px), ((hover: none) and (pointer: coarse) and (max-width: 1024px)) {
  /* Dynamic Viewport & App Container */
  html, body {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
  }

  #app-container {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow-x: hidden;
  }

  #main-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }

  .view-panel {
    padding: 6px 8px 16px;
    height: auto;
    min-height: 100%;
  }

  /* Mission Info Banner */
  .mission-info-banner {
    padding: 8px 10px;
    margin-bottom: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .mission-info-banner h2 {
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .mission-info-banner p {
    font-size: 0.72rem;
    line-height: 1.3;
  }
  .mission-focus-badges {
    flex-wrap: wrap;
    gap: 4px;
  }
  .pill-tag {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  /* Combat Header & Quick Controls */
  .combat-header {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
  }
  .turn-tracker {
    font-size: 0.8rem;
    line-height: 1.2;
  }
  .combat-actions-bar {
    gap: 4px;
    flex-wrap: wrap;
  }
  .combat-actions-bar .btn-action {
    font-size: 0.72rem;
    padding: 4px 8px;
    min-height: 36px;
  }
  .combat-actions-bar #btn-end-turn {
    display: none; /* End Turn is prominently in the Mobile Action Deck */
  }

  /* Combat Top Panel Responsive */
  .combat-top-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
  }
  .combat-jukebox-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
  .combat-jukebox-pill {
    max-width: 180px;
  }

  /* Initiative Ribbon */
  .initiative-tracker-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 6px;
    margin-bottom: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .initiative-tracker-badge {
    display: none; /* Hide label to maximize space for initiative cards */
  }
  .initiative-queue-track {
    gap: 4px;
    max-width: 100%;
  }
  .initiative-card {
    min-width: 48px;
    padding: 4px;
  }

  /* 🛡️ Mobile Flank Tabs & Drawers */
  .mobile-flank-tabs {
    display: flex !important;
    gap: 8px;
    margin-bottom: 6px;
    justify-content: center;
    width: 100%;
  }

  .btn-mobile-tab {
    background: rgba(26, 30, 40, 0.95);
    border: 1px solid var(--border-gold);
    color: var(--text-gold);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    touch-action: manipulation;
  }
  .btn-mobile-tab:hover, .btn-mobile-tab:active, .btn-mobile-tab.active {
    background: linear-gradient(180deg, #5e4a1a 0%, #3d2f10 100%);
    border-color: #ffd54f;
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.5);
  }
  .btn-mobile-tab.btn-mobile-guide {
    background: rgba(0, 176, 144, 0.18);
    border-color: rgba(0, 176, 144, 0.5);
    color: #34d399;
  }
  .btn-mobile-tab.btn-mobile-guide:hover, .btn-mobile-tab.btn-mobile-guide:active {
    background: linear-gradient(180deg, #00b090 0%, #00876f 100%);
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 176, 144, 0.5);
  }

  .mobile-flank-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 109;
    backdrop-filter: blur(3px);
  }
  .mobile-flank-backdrop.open {
    display: block !important;
  }

  /* Reposition Flank Panels to Slide-Up Bottom Sheets */
  .tactical-flank-panel {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: 75vh !important;
    max-height: 75dvh !important;
    z-index: 115 !important;
    background: rgba(15, 17, 21, 0.98) !important;
    border: 2px solid var(--border-gold) !important;
    border-bottom: none !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 14px 24px !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.9) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    transform: translateY(105%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: auto !important;
    box-sizing: border-box !important;
  }
  .tactical-flank-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border-gold);
    border-radius: 2px;
    margin: -8px auto 10px auto;
    opacity: 0.65;
  }
  .tactical-flank-panel.mobile-open {
    transform: translateY(0) !important;
  }
  .flank-header-badge {
    font-size: 0.85rem;
    padding: 5px 12px;
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
    border-radius: 6px;
  }
  .flank-roster-column {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }
  .combatant-portrait-card {
    pointer-events: auto !important;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
  }

  /* Single-Column Combat Layout */
  .combat-layout {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .combat-grid-container {
    padding: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Canvas Aspect-Fit Responsive Sizing & Massive Mobile Arena */
  .combat-zoom-controls.desktop-only {
    display: none !important;
  }
  .combat-viewport-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto 6px auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .combat-canvas-viewport {
    width: 100% !important;
    max-width: 100% !important;
    height: 44vh !important;
    height: 44dvh !important;
    min-height: 320px !important;
    max-height: 52vh !important;
    margin: 0 auto 6px auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    position: relative !important;
    border-radius: 8px !important;
    border: 2px solid var(--border-gold) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.6) !important;
    touch-action: pan-x pan-y !important;
    display: block !important;
    box-sizing: border-box !important;
    cursor: default !important;
  }
  #combat-canvas {
    width: var(--mobile-canvas-width, 1484px) !important;
    height: var(--mobile-canvas-height, 812px) !important;
    aspect-ratio: 1060 / 580 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: fill !important;
    display: block !important;
    margin: 0 !important;
    touch-action: pan-x pan-y !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: width 0.15s ease-out, height 0.15s ease-out;
  }

  /* Mobile Tactical Floating Zoom & Camera Control Bar */
  .mobile-map-quick-bar {
    display: flex !important;
    position: sticky !important;
    top: 8px !important;
    left: 8px !important;
    margin-bottom: -32px !important;
    width: max-content !important;
    z-index: 35;
    gap: 4px;
    background: rgba(15, 18, 24, 0.9);
    border: 1px solid var(--border-gold);
    border-radius: 20px;
    padding: 3px 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    pointer-events: auto;
  }
  .btn-map-control {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-gold);
    border-radius: 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    cursor: pointer;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.15s ease;
  }
  .btn-map-control:hover, .btn-map-control:active, .btn-map-control.active {
    background: rgba(184, 134, 11, 0.3);
    border-color: #ffd54f;
    color: #fff;
  }

  /* Target Telemetry Tooltip */
  .target-tooltip {
    max-width: 220px;
    font-size: 0.72rem;
    padding: 6px 8px;
    z-index: 100;
    pointer-events: none !important;
  }

  /* 🎮 Mobile Tactical Command Deck (Sticky Bottom Bar) */
  .action-tray {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 70 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px 8px 10px !important;
    border-radius: 10px 10px 0 0 !important;
    background: rgba(14, 17, 23, 0.98) !important;
    border: 1px solid var(--border-gold) !important;
    border-bottom: none !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.75) !important;
    max-height: 46vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Compact Telemetry Row */
  .action-tray-top {
    gap: 6px !important;
    padding-bottom: 4px !important;
    justify-content: space-between !important;
  }
  .tray-slots {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  .action-slot {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(32, 36, 46, 0.8) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
  }
  .controls-hint {
    display: none !important; /* Hide to reduce vertical footprint on mobile */
  }
  .weapon-mastery-tag {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    padding: 2px 6px !important;
    background: rgba(179, 139, 71, 0.15) !important;
    border-radius: 4px !important;
  }

  /* Primary Action Buttons Bar - Complete Mobile Character Action Deck */
  .action-buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100% !important;
    margin-top: 4px;
  }
  .action-buttons-group .btn-action {
    flex: 1 1 calc(50% - 6px);
    min-width: 130px;
    min-height: 44px;
    font-size: 0.76rem;
    padding: 6px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 5px;
    touch-action: manipulation;
    box-sizing: border-box;
  }
  /* Explicitly enforce display: none for elements hidden by JS or markup */
  .action-buttons-group[style*="display: none"],
  .action-buttons-group .btn-action[style*="display: none"],
  .action-buttons-group.hidden,
  .btn-action.hidden {
    display: none !important;
  }

  /* All secondary actions promoted directly to the Character Action Deck */
  .secondary-actions-drawer {
    display: contents !important;
  }
  .btn-more-tactics {
    display: none !important;
  }

  /* Character Action Deck: Prominent Ordering & Thematic Visual Accents */
  #btn-attack-action {
    order: 1;
    font-weight: 700;
  }
  #btn-swap-weapon {
    order: 2;
    border-color: #ffd54f !important;
    background: linear-gradient(180deg, #3d3320 0%, #201a10 100%) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  #btn-offhand-attack {
    order: 3;
    border-color: #4dd0e1 !important;
    background: linear-gradient(180deg, #16363d 0%, #0d2024 100%) !important;
    color: #e0f7fa !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  #btn-spellcasting-menu {
    order: 4;
    border-color: #ba68c8 !important;
    background: linear-gradient(180deg, #361f40 0%, #1f1224 100%) !important;
    color: #f3e5f5 !important;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
  #btn-action-surge {
    order: 5;
    border-color: #ffd54f !important;
    background: linear-gradient(180deg, #5e4308 0%, #302204 100%) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.4) !important;
  }
  #btn-cunning-disengage {
    order: 6;
    border-color: #ab47bc !important;
    background: linear-gradient(180deg, #381944 0%, #1f0c26 100%) !important;
    color: #f3e5f5 !important;
  }
  #btn-cunning-dash {
    order: 6;
    border-color: #4fc3f7 !important;
    background: linear-gradient(180deg, #0d3852 0%, #061d2b 100%) !important;
    color: #e1f5fe !important;
  }
  #btn-hide-action {
    order: 7;
    border-color: #7e57c2 !important;
    background: linear-gradient(180deg, #2b1f47 0%, #171126 100%) !important;
    color: #ede7f6 !important;
  }
  #btn-bonus-action {
    order: 8;
  }
  #btn-combat-item-action {
    order: 9;
  }
  #btn-contextual-action {
    order: 10;
  }
  #btn-heroic-inspiration {
    order: 11;
  }
  #btn-stand-action {
    order: 12;
  }
  #btn-dash-action {
    order: 13;
  }
  #btn-disengage-action {
    order: 14;
  }
  #btn-dodge-action {
    order: 15;
  }
  #btn-shove-action {
    order: 16;
  }
  #btn-artillery-action {
    order: 17;
  }
  #btn-end-turn-tray {
    order: 99;
    flex: 1 1 100% !important;
    min-height: 44px;
    margin-top: 4px;
    font-weight: 700;
  }

  /* Spellcasting Sub-Menu Tray: 2-Column Responsive Deck */
  .action-buttons-group.spellcasting-tray {
    display: flex;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .action-buttons-group.spellcasting-tray .btn-action {
    flex: 1 1 calc(50% - 6px) !important;
    min-height: 44px !important;
    font-size: 0.74rem !important;
  }
  .action-buttons-group.spellcasting-tray #btn-back-to-actions {
    flex: 1 1 100% !important;
    min-height: 40px !important;
    order: 0;
  }
  .action-buttons-group.spellcasting-tray .spell-subgroup {
    display: contents !important;
  }
  .action-buttons-group.spellcasting-tray .spell-subgroup-label,
  .action-buttons-group.spellcasting-tray .spell-subgroup-divider {
    flex: 1 1 100% !important;
    font-size: 0.7rem;
    color: var(--text-gold);
    font-family: 'Cinzel', serif;
    padding: 2px 4px;
    border-bottom: 1px solid rgba(255, 213, 79, 0.2);
    margin: 2px 0;
  }
  .action-buttons-group.spellcasting-tray #btn-end-turn-spell-tray {
    order: 99;
    flex: 1 1 100% !important;
    min-height: 44px;
    font-weight: 700;
  }

  /* Combat Consumables Popover */
  .combat-item-popover {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 70vh !important;
    z-index: 130 !important;
    border-radius: 14px 14px 0 0 !important;
  }
  .combat-item-card {
    max-width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }

  /* Combat Sidebar / Log Accordion */
  .combat-sidebar {
    margin-top: 6px !important;
    background: var(--bg-panel) !important;
    border: 1px solid var(--border-bronze) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  .combat-sidebar h3 {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
    background: #181b22 !important;
    margin: 0 !important;
    cursor: pointer !important;
    user-select: none !important;
  }
  .combat-sidebar .log-scrollbox {
    max-height: 110px !important;
    font-size: 0.74rem !important;
    padding: 6px 10px !important;
  }

  /* 📜 Adventure Codex Modal on Mobile */
  .adventure-menu-overlay {
    padding: 0 !important;
  }
  .adventure-menu-window {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .adv-menu-header {
    padding: 6px 10px !important;
  }
  .adv-menu-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    padding-bottom: 4px !important;
  }
  .adv-menu-tab {
    white-space: nowrap !important;
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    flex-shrink: 0 !important;
  }
  .adv-menu-tab .hotkey-pill {
    display: none !important; /* Hide keyboard shortcut hints on mobile */
  }

  /* Character Sheet Responsive Stacking */
  .sheet-main-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .character-sheet-scroll {
    padding: 8px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
  }

  /* Storybook Chronicle Tome on Mobile */
  .storybook-modal-overlay {
    padding: 0 !important;
  }
  .storybook-tome-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    overflow-anchor: none !important;
    scroll-behavior: auto !important;
  }
  .storybook-top-bar {
    padding: 6px 10px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
  }
  .tome-controls {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
    max-width: 100% !important;
  }
  .btn-story-nav {
    padding: 4px 8px !important;
    font-size: 0.72rem !important;
  }
  .story-page-indicator {
    font-size: 0.72rem !important;
    min-width: auto !important;
    letter-spacing: 0.5px !important;
  }
  .tome-bookmark-tabs {
    display: none !important; /* Hide tabs on small screens */
  }
  .storybook-folio {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 8px 8px 30px 8px !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: auto !important;
    flex: none !important;
  }
  .tome-spine-gutter {
    display: none !important;
  }
  .tome-page {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    border: none !important;
    box-shadow: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: none !important;
  }
  .page-left,
  .page-right {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: none !important;
    box-shadow: none !important;
  }
  .story-narrative-body {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: none !important;
  }
  .story-choices-list {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .story-choice-card {
    min-height: 44px !important;
    padding: 6px 10px !important;
  }
  .btn-dialogue-step {
    min-height: 32px !important;
    padding: 4px 10px !important;
  }
  .scene-img-viewport {
    max-height: 220px !important;
  }

  /* General Dialog & Event Modals */
  .modal-overlay {
    padding: 10px !important;
  }
  .modal-card {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    border-radius: 8px !important;
    margin: auto !important;
  }
  .victory-spoils-grid {
    grid-template-columns: 1fr !important;
  }
  .campfire-scene-banner {
    max-height: 180px !important;
  }

  /* Anime Cutscene Non-Obstructive Scale */
  .anime-cutscene-overlay {
    max-width: 100vw !important;
    padding: 0 !important;
  }
  .anime-viewport-container {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Specific Helper for body.layout-mobile class (when dynamically detected) */
body.layout-mobile .secondary-actions-drawer {
  display: contents !important;
}
body.layout-mobile .btn-more-tactics {
  display: none !important;
}
/* Non-mobile default hides mobile map controls */
.mobile-map-quick-bar {
  display: none;
}

body.layout-mobile .combat-zoom-controls.desktop-only {
  display: none !important;
}
body.layout-mobile .combat-viewport-frame {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto 6px auto !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}
body.layout-mobile .combat-canvas-viewport {
  height: 44vh !important;
  height: 44dvh !important;
  min-height: 320px !important;
  max-height: 52vh !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-x pan-y !important;
  display: block !important;
  cursor: default !important;
}
body.layout-mobile #combat-canvas {
  width: var(--mobile-canvas-width, 1484px) !important;
  height: var(--mobile-canvas-height, 812px) !important;
  max-width: none !important;
  max-height: none !important;
  touch-action: pan-x pan-y !important;
  display: block !important;
}
body.layout-mobile .mobile-map-quick-bar {
  display: flex !important;
  position: sticky !important;
  top: 8px !important;
  left: 8px !important;
  margin-bottom: -32px !important;
  width: max-content !important;
}
body.layout-mobile .tactical-flank-panel {
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
body.layout-mobile .character-sheet-scroll {
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}
body.layout-mobile .storybook-tome-wrapper {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  overflow-anchor: none !important;
  scroll-behavior: auto !important;
}
body.layout-mobile .storybook-folio,
body.layout-mobile .tome-page,
body.layout-mobile .page-left,
body.layout-mobile .page-right,
body.layout-mobile .story-narrative-body {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  flex: none !important;
}
body.layout-mobile .story-choices-list {
  grid-template-columns: 1fr !important;
}

/* ==========================================================================
   BASTION FLOORPLAN & WHIMSICAL LO-FI CITADEL MANAGEMENT STYLES
   ========================================================================== */

/* Bastion Floorplan Mount Container */
.bastion-floorplan-mount {
  width: 100%;
  height: 720px;
  min-height: 620px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85), 0 0 0 1px #8c6820;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 900px) {
  .bastion-floorplan-mount {
    height: auto;
    min-height: 520px;
  }
}

/* Bastion Floorplan Main Shell */
.bastion-floorplan-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #0f1115;
  color: #e6e8eb;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* 1. TOP HUD BAR */
.bastion-top-bar {
  background: linear-gradient(180deg, #1c1813 0%, #120f0c 100%);
  border-bottom: 2px solid #8c6820;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  z-index: 10;
  box-sizing: border-box;
}

.bastion-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bastion-sigil-emblem {
  font-size: 1.8rem;
  color: #ffd54f;
  text-shadow: 0 0 10px rgba(255, 213, 79, 0.4);
}

.bastion-title-block h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: #ffd54f;
  margin: 0;
  line-height: 1.2;
}

.bastion-citadel-subtitle {
  font-size: 0.72rem;
  color: #c4a468;
  display: block;
}

.bastion-turn-cadence-pill {
  background: #251d14;
  border: 1px solid #8c6820;
  border-radius: 20px;
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: #e2be78;
}

.bastion-turn-cadence-pill .cadence-val {
  color: #ffd54f;
}

/* Stronghold 4-Resource Strip */
.bastion-resources-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.bastion-res-pill {
  background: #181512;
  border: 1px solid #5a3d0f;
  border-radius: 6px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #d7ccc8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.bastion-res-pill strong {
  color: #ffd54f;
}

.bastion-res-pill.res-lumber strong {
  color: #c89666;
}

.bastion-res-pill.res-ore strong {
  color: #b0bec5;
}

.bastion-res-pill.res-reagents strong {
  color: #81c784;
}

/* Top Actions */
.bastion-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-bastion-control {
  background: #241c14;
  border: 1px solid #8c6820;
  color: #ffd54f;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-bastion-control:hover {
  background: #382c1e;
  border-color: #ffd54f;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.3);
}

.btn-bastion-action.primary-gold {
  background: linear-gradient(180deg, #c79c53 0%, #8c6820 100%);
  border: 1px solid #ffd54f;
  color: #120904;
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.btn-bastion-action.primary-gold:hover {
  background: linear-gradient(180deg, #e5b969 0%, #a67c2e 100%);
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.5);
}

/* 2. TIER NAVIGATION FILTER STRIP */
.bastion-tier-nav-bar {
  background: #15110d;
  border-bottom: 1px solid #4a3314;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 5;
}

.tier-tabs-scroll-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.tier-tabs-scroll-track::-webkit-scrollbar {
  display: none;
}

.bastion-tier-tab {
  background: transparent;
  border: 1px solid #4a351a;
  border-radius: 4px;
  color: #bcaaa4;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
}

.bastion-tier-tab:hover {
  color: #ffd54f;
  border-color: #8c6820;
}

.bastion-tier-tab.active {
  background: linear-gradient(180deg, #3a2816 0%, #1e140b 100%);
  border-color: #ffd54f;
  color: #ffd54f;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.25);
}

.bastion-quick-stats {
  display: flex;
  gap: 14px;
  font-size: 0.8rem;
  color: #d7ccc8;
  white-space: nowrap;
}

/* 3. MAIN WORKSPACE (Split-Pane on Desktop) */
.bastion-main-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}

/* 3A. CENTRAL ISOMETRIC CANVAS CONTAINER */
.bastion-canvas-container {
  position: relative;
  background: radial-gradient(circle at 50% 50%, #f7f1e1 0%, #ebdcc0 60%, #deb887 100%);
  border: 3px solid #8c6820;
  outline: 2px solid #4a320f;
  outline-offset: -5px;
  border-radius: 8px;
  box-shadow: inset 0 0 40px rgba(74, 50, 15, 0.35), 0 10px 30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Architectural Drafting Blueprint Texture */
.parchment-grid-texture {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(140, 104, 32, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 104, 32, 0.1) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 1;
}

/* 2.5D Isometric Canvas */
.bastion-floorplan-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  cursor: crosshair;
}

.bastion-ambient-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Cast-Brass Rivets */
.bastion-rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff176 0%, #d4af37 40%, #8c6820 80%, #3e2709 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  z-index: 8;
  pointer-events: none;
}
.bastion-rivet.rivet-tl { top: 9px; left: 9px; }
.bastion-rivet.rivet-tr { top: 9px; right: 9px; }
.bastion-rivet.rivet-bl { bottom: 9px; left: 9px; }
.bastion-rivet.rivet-br { bottom: 9px; right: 9px; }

/* Architectural Brass Corner Brackets */
.bastion-brass-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #b8860b;
  border-style: solid;
  pointer-events: none;
  z-index: 8;
}
.bastion-brass-corner.corner-tl { top: 7px; left: 7px; border-width: 3px 0 0 3px; border-top-left-radius: 4px; box-shadow: -1px -1px 4px rgba(255, 213, 79, 0.3); }
.bastion-brass-corner.corner-tr { top: 7px; right: 7px; border-width: 3px 3px 0 0; border-top-right-radius: 4px; box-shadow: 1px -1px 4px rgba(255, 213, 79, 0.3); }
.bastion-brass-corner.corner-bl { bottom: 7px; left: 7px; border-width: 0 0 3px 3px; border-bottom-left-radius: 4px; box-shadow: -1px 1px 4px rgba(255, 213, 79, 0.3); }
.bastion-brass-corner.corner-br { bottom: 7px; right: 7px; border-width: 0 3px 3px 0; border-bottom-right-radius: 4px; box-shadow: 1px 1px 4px rgba(255, 213, 79, 0.3); }

/* Architectural Compass Rose */
.bastion-compass-rose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 72px;
  height: 72px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
  filter: drop-shadow(0 2px 6px rgba(50, 30, 10, 0.4));
}
.bastion-compass-rose .compass-svg {
  width: 100%;
  height: 100%;
}

/* Scale & RAW Sizing Legend */
.bastion-scale-legend {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(36, 22, 10, 0.85);
  border: 1px solid #8c6820;
  border-radius: 6px;
  padding: 6px 12px;
  z-index: 6;
  color: #f5eedc;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.scale-unit-caption {
  font-size: 0.72rem;
  color: #ffd54f;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.raw-size-chips {
  display: flex;
  gap: 8px;
  font-size: 0.7rem;
}

.raw-size-chip {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.cramped-dot { background: #81c784; }
.roomy-dot { background: #64b5f6; }
.vast-dot { background: #ba68c8; }

/* Canvas Zoom Toolbar */
.bastion-canvas-toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  gap: 4px;
  z-index: 6;
}

.toolbar-btn {
  background: rgba(30, 20, 12, 0.85);
  border: 1px solid #8c6820;
  border-radius: 4px;
  color: #ffd54f;
  padding: 4px 8px;
  font-size: 0.75rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s;
}

.toolbar-btn:hover {
  background: #3e2709;
  border-color: #ffd54f;
}

/* 3B. INSPECTION DRAWER (#bastion-inspection-drawer) */
.bastion-inspection-drawer {
  background: #181512;
  border: 2px solid #8c6820;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Empty State */
.drawer-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  text-align: center;
  color: #a1887f;
}

.empty-sigil {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.5;
}

.drawer-empty-state h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #ffd54f;
  margin-bottom: 8px;
}

.drawer-empty-state p {
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Drawer Content Pane */
.drawer-content-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-header {
  background: linear-gradient(180deg, #281d14 0%, #1a130b 100%);
  border-bottom: 2px solid #8c6820;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.drawer-tier-strip {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.chamber-tier-badge {
  font-size: 0.68rem;
  background: #3e2709;
  color: #ffd54f;
  border: 1px solid #8c6820;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.chamber-status-badge {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-rubble_filled { background: #4e342e; color: #ffab91; border: 1px solid #8d6e63; }
.status-flooded { background: #01579b; color: #81d4fa; border: 1px solid #0288d1; }
.status-overgrown { background: #1b5e20; color: #a5d6a7; border: 1px solid #388e3c; }
.status-cleared { background: #37474f; color: #cfd8dc; border: 1px solid #607d8b; }
.status-established { background: #b8860b; color: #120904; border: 1px solid #ffd54f; font-weight: bold; }

.drawer-room-name {
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: #ffd54f;
  margin: 2px 0 0 0;
}

.drawer-room-flavor {
  font-size: 0.76rem;
  color: #bcaaa4;
  margin: 2px 0 0 0;
  line-height: 1.3;
}

.btn-drawer-close {
  background: transparent;
  border: none;
  color: #bcaaa4;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.2s;
}
.btn-drawer-close:hover { color: #ff5252; }

/* Scrollable Drawer Body */
.drawer-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: #8c6820 #181512;
}

.drawer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  color: #ffd54f;
  margin: 0;
  border-bottom: 1px solid #4a351a;
  padding-bottom: 4px;
}

/* Dimensions Grid */
.dimension-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.dim-stat-card {
  background: #201a14;
  border: 1px solid #4a351a;
  border-radius: 4px;
  padding: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dim-label {
  font-size: 0.65rem;
  color: #a1887f;
}

.dim-val {
  font-size: 0.85rem;
  color: #e6e8eb;
}

.raw-size-highlight {
  color: #ffd54f;
  font-weight: bold;
}

/* Excavation Cost Box */
.excavation-cost-box {
  background: #201a14;
  border: 1px solid #5a3d0f;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cost-items-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cost-pill {
  background: #15110d;
  border: 1px solid #4a351a;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #d7ccc8;
}

.cost-pill strong { color: #ffd54f; }
.cost-pill.sufficient strong { color: #81c784; }
.cost-pill.insufficient strong { color: #ef5350; }

.turn-duration-row {
  font-size: 0.75rem;
  color: #bcaaa4;
}

/* Established Facility Card */
.facility-card-established {
  background: radial-gradient(circle at 50% 50%, rgba(255, 179, 0, 0.12) 0%, rgba(36, 26, 16, 0.9) 100%);
  border: 1.5px solid #b8860b;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 0 15px rgba(255, 179, 0, 0.2);
  animation: amberHearthFlicker 4s ease-in-out infinite alternate;
}

@keyframes amberHearthFlicker {
  0% { box-shadow: 0 0 10px rgba(255, 179, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 179, 0, 0.38); }
  100% { box-shadow: 0 0 12px rgba(255, 179, 0, 0.25); }
}

.fac-est-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fac-est-title-group {
  flex: 1;
}

.fac-est-name {
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  color: #ffd54f;
  margin: 0;
}

.fac-est-category {
  font-size: 0.7rem;
  color: #c4a468;
}

.fac-est-boon {
  background: rgba(20, 15, 10, 0.6);
  border-left: 2px solid #ffd54f;
  padding: 4px 8px;
  font-size: 0.74rem;
  color: #e2be78;
}

/* Form Controls */
.bastion-select-dark {
  width: 100%;
  background: #1e1711;
  border: 1px solid #8c6820;
  border-radius: 4px;
  color: #ffd54f;
  font-family: inherit;
  font-size: 0.8rem;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
}
.bastion-select-dark:focus {
  border-color: #ffd54f;
  box-shadow: 0 0 6px rgba(255, 213, 79, 0.4);
}

/* Companion Cameo Card */
.companion-station-card {
  background: #201a14;
  border: 1px solid #5a3d0f;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.companion-cameo-frame {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #ffd54f;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 213, 79, 0.4);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: #120904;
}

.companion-cameo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.companion-info-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.companion-name {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  color: #ffd54f;
  margin: 0;
}

/* Preferred Synergy Active Banner */
.synergy-active-banner {
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.15) 0%, rgba(255, 213, 79, 0.28) 50%, rgba(184, 134, 11, 0.15) 100%);
  border: 1.5px solid #ffd54f;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 0 12px rgba(255, 213, 79, 0.35);
  animation: amberHearthFlicker 3s infinite alternate;
}

.synergy-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffd54f;
  font-size: 0.8rem;
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.synergy-description {
  font-size: 0.74rem;
  color: #f5eedc;
  margin: 0;
  line-height: 1.35;
}

/* Whimsical Banter Speech Bubble */
.companion-banter-bubble {
  background: #fdf8eb;
  border: 1.5px solid #c4a468;
  border-radius: 8px;
  padding: 10px 14px;
  position: relative;
  color: #3e2709;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  margin-top: 4px;
}

.bubble-quill-icon {
  position: absolute;
  top: -8px;
  left: 14px;
  font-size: 0.9rem;
}

.banter-quote {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0;
  font-style: normal;
  color: #1a0f05;
}

/* 4. RESPONSIVE BREAKPOINTS */

/* Tablet (768px <= width < 1024px) */
@media (max-width: 1023px) {
  .bastion-main-workspace {
    grid-template-columns: 1fr;
    position: relative;
  }

  .bastion-inspection-drawer {
    position: absolute;
    top: 14px;
    right: 14px;
    bottom: 14px;
    width: 360px;
    max-width: 85vw;
    z-index: 20;
    transform: translateX(0);
  }

  .bastion-inspection-drawer.collapsed {
    transform: translateX(110%);
    pointer-events: none;
    opacity: 0;
  }
}

/* Mobile Devices & Phone Viewports (< 768px / body.layout-mobile) */
@media (max-width: 767px), (max-height: 500px) {
  .bastion-top-bar {
    padding: 6px 10px;
    gap: 8px;
  }

  .bastion-header-brand {
    width: 100%;
    justify-content: space-between;
  }

  .bastion-resources-strip {
    width: 100%;
    justify-content: space-between;
    gap: 4px;
  }

  .bastion-res-pill {
    padding: 2px 6px;
    font-size: 0.72rem;
  }

  .bastion-tier-nav-bar {
    padding: 4px 8px;
  }

  .bastion-main-workspace {
    padding: 6px;
    grid-template-columns: 1fr;
    height: auto;
    flex: 1;
  }

  .bastion-canvas-container {
    height: 54vh;
    height: 54dvh;
    min-height: 280px;
  }

  /* Bottom-Sheet Inspection Drawer */
  .bastion-inspection-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: 78vh;
    max-height: 78dvh;
    border-radius: 16px 16px 0 0;
    border-width: 2px 0 0 0;
    z-index: 1200;
    transform: translateY(0);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.95);
  }

  .bastion-inspection-drawer.collapsed {
    transform: translateY(105%);
    pointer-events: none;
    opacity: 0;
  }

  .drawer-drag-handle.mobile-only {
    width: 44px;
    height: 5px;
    background: #8c6820;
    border-radius: 3px;
    margin: 8px auto 4px auto;
    display: block;
  }
}

/* =========================================================
   🧭 BATTLEFIELD SYMBOLS & GRID CODEX STYLING
   ========================================================= */
.grid-legend-window {
  border: 1px solid var(--border-gold, #c5a059);
  background: radial-gradient(circle at top, #1e2430 0%, #0d1117 100%);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.9), 0 0 25px rgba(212, 168, 75, 0.2);
  border-radius: 8px;
}

.legend-filter-btn {
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Cinzel', serif;
}

.legend-filter-btn:hover {
  background: rgba(212, 168, 75, 0.15);
  border-color: #ffd54f;
  color: #fff;
}

.legend-filter-btn.active {
  background: linear-gradient(180deg, #b8860b 0%, #7d5700 100%);
  border-color: #ffd54f;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
}

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid rgba(255, 213, 79, 0.4);
  border-radius: 12px;
  padding: 3px 9px;
  font-size: 0.74rem;
  color: #f1f5f9;
  cursor: pointer;
  transition: all 0.15s ease;
}

.active-chip:hover {
  background: rgba(212, 168, 75, 0.25);
  border-color: #ffd54f;
  transform: translateY(-1px);
}

.grid-legend-category-section {
  margin-bottom: 1.25rem;
}

.grid-legend-category-title {
  font-family: 'Cinzel', serif;
  font-size: 0.92rem;
  color: #ffd54f;
  border-bottom: 1px solid rgba(212, 168, 75, 0.3);
  padding-bottom: 4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.grid-legend-cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

.grid-legend-card {
  display: flex;
  gap: 10px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  align-items: flex-start;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.grid-legend-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(212, 168, 75, 0.4);
}

.legend-card-glyph {
  font-size: 1.35rem;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.legend-card-body {
  flex: 1;
}

.legend-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 2px;
}

.legend-card-name {
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
}

.legend-card-badge {
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.legend-badge-elevation { background: rgba(38, 166, 154, 0.25); color: #80cbc4; border: 1px solid rgba(38, 166, 154, 0.4); }
.legend-badge-cover { background: rgba(255, 179, 0, 0.25); color: #ffe082; border: 1px solid rgba(255, 179, 0, 0.4); }
.legend-badge-hazard { background: rgba(229, 57, 53, 0.25); color: #ff8a80; border: 1px solid rgba(229, 57, 53, 0.4); }
.legend-badge-prop { background: rgba(142, 36, 170, 0.25); color: #ce93d8; border: 1px solid rgba(142, 36, 170, 0.4); }
.legend-badge-reticle { background: rgba(30, 136, 229, 0.25); color: #90caf9; border: 1px solid rgba(30, 136, 229, 0.4); }
.legend-badge-status { background: rgba(251, 140, 0, 0.25); color: #ffcc80; border: 1px solid rgba(251, 140, 0, 0.4); }

.legend-card-desc {
  font-size: 0.76rem;
  line-height: 1.42;
  color: #cbd5e1;
}

.legend-card-rule {
  font-size: 0.72rem;
  color: #ffd54f;
  margin-top: 3px;
  font-family: monospace;
}

.btn-mobile-legend {
  border-color: #ffd54f !important;
  color: #ffd54f !important;
}

.btn-mobile-legend:hover {
  background: rgba(255, 213, 79, 0.15) !important;
}

/* Tooltip Tile Inspection */
.target-tooltip .tt-tile-body {
  font-size: 0.76rem;
  line-height: 1.35;
}
.target-tooltip .tt-tile-body.hidden {
  display: none;
}
.target-tooltip .tt-body.hidden {
  display: none;
}

/* ========================================================= */
/* ⚡ WASTELAND-STYLE BRANCHING STORYLINE & FACTION STYLES    */
/* ========================================================= */

.crossroads-card {
  max-width: 860px !important;
  width: 95% !important;
  background: #14110e !important;
  border: 2px solid #ffb300 !important;
  box-shadow: 0 0 35px rgba(255, 179, 0, 0.45), inset 0 0 20px rgba(0, 0, 0, 0.8) !important;
  border-radius: 10px !important;
  color: #e2e8f0;
  padding: 0 !important;
  overflow: hidden;
}

.crossroads-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, #2b1f13 0%, #17120c 100%);
  border-bottom: 2px solid #8c6428;
  padding: 18px 24px;
}

.crossroads-alert-icon {
  font-size: 2.2rem;
  color: #ffb300;
  animation: pulse-glow 2s infinite ease-in-out;
}

.crossroads-title-wrap h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  margin: 0;
  color: #ffd54f;
  letter-spacing: 1px;
}

.crossroads-subtitle {
  margin: 4px 0 0 0;
  font-size: 0.82rem;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.crossroads-body {
  padding: 20px 24px;
  max-height: 72vh;
  overflow-y: auto;
}

.crossroads-context {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #f1f5f9;
  background: rgba(0, 0, 0, 0.45);
  border-left: 3px solid #ffb300;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 20px;
}

.crossroads-debates-container {
  margin-bottom: 20px;
  background: rgba(18, 14, 10, 0.7);
  border: 1px solid #5a4225;
  border-radius: 8px;
  padding: 14px 16px;
}

.crossroads-debates-header {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  color: #ffb300;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.crossroads-debates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.crossroads-debate-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #3d2c18;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s ease;
}

.crossroads-debate-card:hover {
  border-color: #8c6428;
}

.crossroads-debate-hero-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crossroads-debate-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid #d4af37;
  object-fit: cover;
  flex-shrink: 0;
}

.crossroads-debate-hero-info {
  display: flex;
  flex-direction: column;
}

.crossroads-debate-hero-name {
  font-size: 0.82rem;
  font-weight: bold;
  color: #ffd54f;
}

.crossroads-debate-hero-stance {
  font-size: 0.68rem;
  color: #94a3b8;
  font-style: italic;
}

.crossroads-debate-quote {
  font-size: 0.76rem;
  line-height: 1.35;
  color: #e2e8f0;
  font-style: italic;
  border-left: 2px solid #5a4225;
  padding-left: 6px;
  margin-top: 2px;
}

.crossroads-choices-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.crossroads-choice-box {
  background: #1e1914;
  border: 1.5px solid #5a4225;
  border-radius: 8px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.crossroads-choice-box:hover {
  border-color: #ffd54f;
  box-shadow: 0 4px 20px rgba(255, 213, 79, 0.25);
  transform: translateY(-2px);
}

.crossroads-choice-top {
  margin-bottom: 14px;
}

.crossroads-choice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.crossroads-advocate-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffd54f;
  object-fit: cover;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.3);
}

.crossroads-choice-title {
  font-family: 'Cinzel', serif;
  font-size: 1.12rem;
  color: #ffd54f;
  margin: 0;
}

.crossroads-advocate-name {
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
}

.crossroads-quote-block {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #e2e8f0;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 12px;
  border-radius: 6px;
  font-style: italic;
  margin-bottom: 12px;
  border-left: 2px solid #8c6428;
}

.crossroads-section-label {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.crossroads-benefits-list, .crossroads-fallout-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.crossroads-benefits-list li {
  color: #a7f3d0;
  margin-bottom: 3px;
}

.crossroads-fallout-list li {
  color: #fca5a5;
  margin-bottom: 3px;
}

.crossroads-btn-choose {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #4a3214 0%, #2a1b0a 100%);
  border: 1.5px solid #ffd54f;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.crossroads-btn-choose:hover {
  background: linear-gradient(180deg, #6d4a1c 0%, #3d270e 100%);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.45);
}

.crossroads-footer {
  background: #100d0a;
  border-top: 1px solid #3d2b17;
  padding: 12px 24px;
  text-align: center;
}

.crossroads-warning-text {
  font-size: 0.8rem;
  color: #f59e0b;
  font-weight: 600;
}

/* Faction Badges & Meter Styling */
.badge-sovereign { background: rgba(255, 215, 0, 0.25); color: #ffd54f; border: 1px solid #ffd54f; }
.badge-favored { background: rgba(76, 175, 80, 0.25); color: #81c784; border: 1px solid #81c784; }
.badge-neutral { background: rgba(148, 163, 184, 0.25); color: #cbd5e1; border: 1px solid #94a3b8; }
.badge-distrusted { background: rgba(255, 152, 0, 0.25); color: #ffb74d; border: 1px solid #ffb74d; }
.badge-nemesis { background: rgba(244, 67, 54, 0.25); color: #e57373; border: 1px solid #e57373; }

/* Mission Ribbon Branch Nodes */
.mission-pill.branch-choice {
  border-color: #ffd54f !important;
  background: linear-gradient(180deg, rgba(255, 213, 79, 0.25) 0%, rgba(30, 25, 20, 0.9) 100%) !important;
}

.mission-pill.fallen-ruin {
  opacity: 0.45 !important;
  text-decoration: line-through !important;
  filter: grayscale(80%) !important;
  border-color: #ef4444 !important;
  cursor: not-allowed !important;
}

/* ========================================================= */
/* 📜 GRAND EPILOGUE SLIDESHOW STYLING                       */
/* ========================================================= */

.epilogue-slideshow-window {
  max-width: 920px;
  width: 95%;
  background: #14110e;
  border: 2px solid #ffd54f;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(255, 213, 79, 0.4), inset 0 0 25px rgba(0, 0, 0, 0.9);
  color: #e2e8f0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.epilogue-header {
  background: linear-gradient(180deg, #2b1f13 0%, #17120c 100%);
  border-bottom: 2px solid #8c6428;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.epilogue-chapter-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffb300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.epilogue-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  color: #ffd54f;
  margin: 2px 0 0 0;
}

.epilogue-slide-counter {
  font-size: 0.8rem;
  color: #94a3b8;
  font-weight: 600;
}

.epilogue-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 768px) {
  .epilogue-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.epilogue-art-frame {
  position: relative;
  border: 2px solid #8c6428;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.epilogue-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.epilogue-badge-overlay {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(20, 17, 14, 0.88);
  border: 1px solid #ffd54f;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
}

.epilogue-narrative-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.epilogue-lead-text {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #fef08a;
  margin: 0;
}

.epilogue-body-text {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #cbd5e1;
  margin: 0;
}

.epilogue-consequence-tag {
  font-size: 0.76rem;
  color: #64748b;
  font-style: italic;
  margin-top: 6px;
}

.epilogue-footer {
  background: #100d0a;
  border-top: 1px solid #3d2b17;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* =========================================================
   ⚔️ FIELD PRIMER & COMBAT TUTORIAL STYLES
   ========================================================= */

.tutorial-window {
  max-width: 860px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 50% 20%, #1a1e27 0%, #11141a 75%, #0b0d12 100%);
  border: 2px solid var(--border-gold, #b38b47);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.85), 0 0 20px rgba(179, 139, 71, 0.25);
  border-radius: 8px;
  overflow: hidden;
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-gold, #b38b47);
  padding: 0.85rem 1.25rem;
  background: rgba(15, 17, 21, 0.95);
}

.tutorial-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tutorial-header-title h3 {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.15rem;
  color: #ffd54f;
  letter-spacing: 0.5px;
}

.tutorial-modal-subtitle {
  font-size: 0.76rem;
  color: #94a3b8;
  display: block;
  margin-top: 2px;
}

.tutorial-sigil {
  color: var(--border-gold, #b38b47);
  font-size: 1.2rem;
  text-shadow: 0 0 8px rgba(255, 213, 79, 0.5);
}

.tutorial-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.25rem;
  background: rgba(20, 24, 33, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tutorial-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.tutorial-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.tutorial-dot:hover {
  background: rgba(255, 213, 79, 0.4);
  border-color: #ffd54f;
}

.tutorial-dot.active {
  background: #ffd54f;
  border-color: #ffd54f;
  box-shadow: 0 0 10px rgba(255, 213, 79, 0.65);
  transform: scale(1.15);
}

.tutorial-category-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #ffd54f;
  background: rgba(179, 139, 71, 0.18);
  border: 1px solid rgba(179, 139, 71, 0.45);
  padding: 2px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tutorial-body-scroll {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  max-height: calc(90vh - 160px);
}

.tutorial-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tutorial-card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.6rem;
}

.tutorial-card-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: #fef08a;
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutorial-card-desc {
  font-size: 0.86rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
}

.tutorial-grid-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}

.tutorial-feature-box {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.tutorial-feature-box:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 213, 79, 0.35);
}

.tutorial-feature-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.badge-action { color: #f87171; }
.badge-bonus { color: #60a5fa; }
.badge-reaction { color: #c084fc; }
.badge-move { color: #4ade80; }
.badge-gold { color: #fde047; }
.badge-cover { color: #38bdf8; }

.tutorial-feature-text {
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.45;
}

.tutorial-feature-text strong {
  color: #f8fafc;
}

.tutorial-callout {
  background: rgba(245, 158, 11, 0.1);
  border-left: 3px solid #f59e0b;
  padding: 0.65rem 0.9rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.82rem;
  color: #fef3c7;
  line-height: 1.4;
}

.tutorial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.25rem;
  background: rgba(12, 14, 18, 0.95);
  border-top: 1px solid var(--border-bronze, #695232);
}

.tutorial-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #94a3b8;
  cursor: pointer;
  user-select: none;
}

.tutorial-toggle-wrap input[type="checkbox"] {
  accent-color: #ffd54f;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.tutorial-footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tutorial-page-indicator {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  color: #ffd54f;
  font-weight: 600;
  min-width: 80px;
  text-align: center;
}

@media (max-width: 640px) {
  .tutorial-grid-features {
    grid-template-columns: 1fr;
  }
  .tutorial-footer {
    flex-direction: column;
    gap: 10px;
  }
  .tutorial-footer-left, .tutorial-footer-right {
    width: 100%;
    justify-content: space-between;
  }
}





/* ==========================================================================
   PROJECT REDOUBT - 16-BIT RETRO JRPG SOUNDTRACK ENGINE & JUKEBOX STYLING
   ========================================================================== */

/* Combat Actions Bar Pill / Button */
.btn-action.btn-combat-util.ost-combat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(32, 36, 46, 0.9) 0%, rgba(20, 24, 32, 0.95) 100%);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-action.btn-combat-util.ost-combat-pill:hover {
  background: rgba(179, 139, 71, 0.25);
  box-shadow: 0 0 8px rgba(179, 139, 71, 0.4);
  transform: translateY(-1px);
}

.btn-action.btn-combat-util.ost-combat-pill .ost-eq-icon {
  font-size: 0.95rem;
}

/* Top Navigation HUD Pill (When visible) */
.ost-hud-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(24, 27, 34, 0.85);
  border: 1px solid var(--border-bronze);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ost-hud-pill:hover {
  border-color: var(--border-gold);
  background: rgba(32, 36, 46, 0.95);
}

.ost-pill-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ost-pill-content .ost-eq-icon {
  font-size: 1rem;
}

.ost-info-text {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
}

.ost-info-text .ost-tag {
  color: var(--text-dim);
}

.ost-info-text strong {
  color: var(--text-gold);
  font-weight: 600;
}

.ost-quick-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--text-light);
  transition: background 0.15s;
}

.ost-quick-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ost-quick-toggle.muted {
  opacity: 0.45;
  filter: grayscale(1);
}

/* Modal Backdrop & Container */
.ost-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: fadeIn 0.2s ease-out;
}

.ost-modal-backdrop.hidden {
  display: none !important;
}

.ost-modal-card {
  background: linear-gradient(145deg, #151820 0%, #1d222e 100%);
  border: 2px solid var(--border-gold);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85), 0 0 24px rgba(179, 139, 71, 0.22);
  border-radius: 8px;
  width: 780px;
  max-width: 95vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
}

.ost-modal-header {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-bronze);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.3);
}

.ost-modal-title-group h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  color: var(--text-gold);
  margin: 2px 0 4px 0;
}

.ost-modal-title-group p {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.ost-badge-pill {
  display: inline-block;
  background: rgba(179, 139, 71, 0.2);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-bottom: 4px;
}

.ost-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}

.ost-modal-close:hover {
  color: #ff6b6b;
}

.ost-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Now Playing Banner */
.ost-now-playing-box {
  background: rgba(24, 28, 38, 0.85);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: inset 0 0 12px rgba(179, 139, 71, 0.1);
}

.ost-now-playing-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ost-disc-icon {
  font-size: 2.2rem;
  animation: ostDiscSpin 9s linear infinite;
  display: inline-block;
}

@keyframes ostDiscSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#ost-modal-np-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  color: var(--text-gold);
  margin: 0 0 2px 0;
}

.ost-modal-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin: 0;
}

.badge-loop {
  background: rgba(76, 175, 80, 0.15);
  border: 1px solid #4caf50;
  color: #81c784;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Controls Bar */
.ost-modal-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(15, 18, 24, 0.75);
  padding: 10px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-muted);
}

.ost-control-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-light);
}

.ost-control-row input[type="range"] {
  accent-color: var(--border-gold);
  cursor: pointer;
  width: 140px;
}

.ost-control-row input[type="checkbox"] {
  accent-color: var(--border-gold);
  cursor: pointer;
}

/* Track List Grid */
.ost-track-list-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ost-track-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-muted);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ost-track-card:hover {
  border-color: var(--border-gold);
  background: var(--bg-hover);
  transform: translateX(3px);
}

.ost-track-card.active {
  border-color: var(--border-gold);
  background: rgba(179, 139, 71, 0.18);
  box-shadow: 0 0 12px rgba(179, 139, 71, 0.25);
}

.ost-track-num {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  color: var(--text-dim);
  font-weight: 700;
  width: 26px;
}

.ost-track-card.active .ost-track-num {
  color: var(--text-gold);
}

.ost-track-details {
  flex: 1;
  min-width: 0;
}

.ost-track-details h4 {
  font-size: 0.92rem;
  margin: 0 0 2px 0;
  color: var(--text-light);
}

.ost-track-card.active .ost-track-details h4 {
  color: var(--text-gold);
}

.ost-track-scene {
  font-size: 0.74rem;
  color: var(--text-gold);
  display: block;
  margin-bottom: 2px;
}

.ost-track-mood {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ost-track-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ost-dur {
  font-size: 0.8rem;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.ost-play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--border-gold);
  border: none;
  color: #111;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
  line-height: 1;
}

.ost-play-btn:hover {
  transform: scale(1.12);
  background: var(--text-gold);
}

/* Modal Footer */
.ost-modal-footer {
  padding: 12px 22px;
  border-top: 1px solid var(--border-bronze);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.3);
}

.ost-link-btn {
  color: var(--text-gold);
  text-decoration: none;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s;
}

.ost-link-btn:hover {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 640px) {
  .ost-now-playing-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ost-modal-controls {
    flex-direction: column;
    align-items: flex-start;
  }
  .ost-track-mood {
    display: none;
  }
}

/* =========================================================
   CARTOGRAPHY & EXPEDITION CHRONICLE SUBSYSTEM
   ========================================================= */
.carto-subsystem-wrapper {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.carto-map-pin {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  user-select: none;
}

.carto-map-pin:hover {
  transform: translate(-50%, -50%) scale(1.18) !important;
  z-index: 10 !important;
}

.carto-map-pin.pulse-pin > div:first-child {
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  animation: cartoPulse 2s infinite;
}

.carto-map-pin.selected-pin > div:first-child {
  box-shadow: 0 0 14px 4px rgba(255, 215, 0, 0.9), 0 3px 8px rgba(0, 0, 0, 0.8) !important;
  border-color: #ffffff !important;
}

@keyframes cartoPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(255, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
  }
}

.carto-mode-btn {
  transition: all 0.2s ease;
}

.carto-mode-btn:hover:not(.active) {
  background: #f0e6d2 !important;
  color: #2c1e10 !important;
}

.carto-dossier-card {
  transition: all 0.25s ease;
}

/* =========================================================
   OPTIONS & AUDIO SETTINGS MENU
   ========================================================= */
.options-layout {
  padding: 20px 24px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  color: #e2e8f0;
}

.options-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.options-title {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  color: #ffd54f;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.options-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  margin: 4px 0 0 0;
}

.options-status-badge {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 18px;
  margin-bottom: 20px;
}

.options-card {
  background: #111622;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.options-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.98rem;
  color: #ffd54f;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 8px;
  margin: 0;
}

.options-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.options-row:last-child {
  border-bottom: none;
}

.options-label-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.options-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
}

.options-desc {
  font-size: 0.74rem;
  color: #94a3b8;
  line-height: 1.35;
}

.options-slider-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}

.options-slider {
  flex: 1;
  accent-color: #ffd54f;
  height: 6px;
  cursor: pointer;
}

.options-val-badge {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 44px;
  text-align: right;
  color: #ffd54f;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.25);
}

.options-toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.options-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  cursor: pointer;
  margin: 0;
}

.options-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.options-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #243048;
  border: 1px solid #334155;
  transition: 0.25s;
  border-radius: 22px;
}

.options-toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #94a3b8;
  transition: 0.25s;
  border-radius: 50%;
}

.options-toggle input:checked + .options-toggle-slider {
  background-color: #8c6428;
  border-color: #ffd54f;
}

.options-toggle input:checked + .options-toggle-slider:before {
  transform: translateX(22px);
  background-color: #ffd54f;
}

.options-pill-group {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
  background: #0c1017;
}

.options-pill-btn {
  background: transparent;
  color: #cbd5e1;
  border: none;
  border-right: 1px solid rgba(212, 175, 55, 0.2);
  padding: 6px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.options-pill-btn:last-child {
  border-right: none;
}

.options-pill-btn:hover:not(.active) {
  background: #1a2436;
  color: #ffd54f;
}

.options-pill-btn.active {
  background: linear-gradient(135deg, #2a3752 0%, #1e273b 100%);
  color: #ffd54f;
  box-shadow: inset 0 0 6px rgba(255, 215, 0, 0.3);
}

.options-action-btn {
  background: #1a2233;
  color: #e2e8f0;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.options-action-btn:hover {
  border-color: #ffd54f;
  color: #ffd54f;
  background: #243048;
}

.options-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(212, 175, 55, 0.3);
  margin-top: 8px;
}

.options-danger-btn {
  background: rgba(185, 28, 28, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.options-danger-btn:hover {
  background: rgba(185, 28, 28, 0.4);
  color: #fff;
  border-color: #ef4444;
}

@media (max-width: 768px) {
  .options-grid {
    grid-template-columns: 1fr;
  }
  .options-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .options-slider-group {
    width: 100%;
  }
}

/* ==========================================================================
   MILESTONE 3: COMPANION LIVING QUARTERS & SLICE-OF-LIFE VIGNETTE UI
   ========================================================================== */

#drawer-quarters-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.quarters-header-banner {
  background: linear-gradient(135deg, rgba(32, 26, 20, 0.95), rgba(16, 12, 10, 0.98));
  border: 1px solid #d4af37;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.quarters-cameo {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.quarters-cameo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffd54f;
  background: #120904;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffd54f;
  box-shadow: 0 0 8px rgba(255, 213, 79, 0.4);
}

.quarters-cameo-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quarters-hero-name {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffd54f;
}

.quarters-chamber-tag {
  font-size: 0.72rem;
  color: #b0bec5;
  font-style: italic;
}

.quarters-comfort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  padding: 4px 0;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.quarters-stars {
  color: #ffd54f;
  letter-spacing: 2px;
  font-size: 0.95rem;
}

.quarters-affinity-meter {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.quarters-affinity-bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.quarters-affinity-fill {
  height: 100%;
  background: linear-gradient(90deg, #ffb300, #ff80ab);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.quarters-affinity-text {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #cfd8dc;
}

.quarters-affinity-sub {
  font-size: 0.68rem;
  color: #ffd54f;
  font-weight: 600;
  text-align: right;
}

.quarters-decor-panel {
  background: rgba(20, 16, 12, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 6px;
  padding: 8px 10px;
}

.quarters-decor-toggles {
  display: flex;
  gap: 6px;
  margin: 6px 0;
}

.btn-decor-toggle {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-family: 'Cinzel', serif;
  background: rgba(30, 25, 20, 0.9);
  border: 1px solid #5a4522;
  color: #d7ccc8;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-decor-toggle.active {
  background: rgba(212, 175, 55, 0.25);
  border-color: #ffd54f;
  color: #ffd54f;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(255, 213, 79, 0.3);
}

.quarters-decor-summary {
  font-size: 0.72rem;
  color: #b0bec5;
  font-style: italic;
  line-height: 1.35;
}

.quarters-perks-card {
  background: rgba(18, 22, 28, 0.85);
  border: 1px solid #37474f;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.75rem;
}

.quarters-rest-headline {
  font-weight: 600;
  color: #81c784;
  margin-bottom: 4px;
}

.quarters-buff-row {
  color: #cfd8dc;
  line-height: 1.4;
}

.quarters-upgrade-card {
  background: rgba(26, 20, 14, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quarters-cost-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 4px 0;
}

.quarters-cost-pill {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #ffd54f;
  color: #ffd54f;
}

.quarters-cost-pill.insufficient {
  border-color: #ef5350;
  color: #ef5350;
}

.quarters-vignette-card {
  background: linear-gradient(135deg, rgba(50, 20, 40, 0.9), rgba(20, 10, 25, 0.95));
  border: 1.5px solid #e040fb;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
}

/* Vignette Modal Presentation */
.vignette-modal-window {
  max-width: 680px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  background: #120e0a;
  border: 2px solid #ffd54f;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 213, 79, 0.3);
  color: #e0d5c1;
  font-family: 'Cinzel', serif;
  position: relative;
}

.vignette-art-banner {
  position: relative;
  height: 160px;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background: #0a0604;
}

.vignette-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.vignette-banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(18, 14, 10, 0.98), transparent);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.vignette-speaker-cameo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vignette-speaker-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffd54f;
  background: #1a0f05;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffd54f;
}

.vignette-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vignette-prose {
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #e6dbca;
  font-style: italic;
}

.vignette-dialogue {
  border-left: 4px solid #ffd54f;
  padding: 10px 14px;
  background: rgba(255, 213, 79, 0.08);
  border-radius: 0 6px 6px 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
}

.vignette-speaker-tag {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  display: block;
}

.vignette-skillcheck-banner {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  text-align: center;
  border: 1px solid #ffd54f;
  background: rgba(255, 213, 79, 0.15);
  color: #ffd54f;
}

.vignette-skillcheck-banner.success {
  border-color: #81c784;
  background: rgba(129, 199, 132, 0.15);
  color: #81c784;
}

.vignette-skillcheck-banner.failure {
  border-color: #ef5350;
  background: rgba(239, 83, 80, 0.15);
  color: #ef9a9a;
}

.vignette-choices-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.vignette-choice-btn {
  text-align: left;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(30, 24, 18, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.4);
  color: #f5eedc;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vignette-choice-btn:hover {
  background: rgba(45, 34, 22, 0.95);
  border-color: #ffd54f;
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.vignette-choice-btn.selected {
  border-color: #40c4ff;
  background: rgba(64, 196, 255, 0.15);
}

.vignette-choice-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.choice-text {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ffd54f;
}

.choice-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 0.72rem;
}

.choice-check-tag {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(64, 196, 255, 0.15);
  border: 1px solid #40c4ff;
  color: #40c4ff;
}

.choice-approval-tag {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 128, 171, 0.15);
  border: 1px solid #ff80ab;
  color: #ff80ab;
}

.choice-ideology-tag {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255, 213, 79, 0.15);
  border: 1px solid #ffd54f;
  color: #ffd54f;
}

.vignette-resolution-card {
  background: rgba(20, 26, 22, 0.9);
  border: 1.5px solid #81c784;
  border-radius: 6px;
  padding: 12px;
}

.vignette-rewards-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  margin: 8px 0;
  color: #c8e6c9;
}

/* ==========================================================================
   MILESTONE 4: EXPEDITION BOARD & STRATEGIC WAR TABLE MODAL STYLING
   ========================================================================== */

#expedition-board-modal {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.88);
  backdrop-filter: blur(8px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.expedition-board-window {
  max-width: 1080px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #0f131a;
  border: 2px solid #b38b47;
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.9), inset 0 0 24px rgba(179, 139, 71, 0.12);
  color: #e6e8eb;
  font-family: 'Inter', sans-serif;
  overflow: hidden;
}

/* Header & Telemetry */
.exp-board-header {
  padding: 1.25rem 1.5rem 0.85rem;
  background: linear-gradient(180deg, #181d26 0%, #0f131a 100%);
  border-bottom: 1px solid rgba(179, 139, 71, 0.35);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.exp-board-title {
  margin: 0 0 4px 0;
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  color: #ffd54f;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exp-board-subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
  font-style: italic;
  max-width: 900px;
  line-height: 1.35;
}

.exp-board-telemetry-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0.65rem 1.5rem;
  background: rgba(15, 23, 42, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.exp-telemetry-pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.exp-telemetry-pill.ready { color: #81c784; border-color: rgba(76, 175, 80, 0.4); }
.exp-telemetry-pill.warning { color: #ffb74d; border-color: rgba(255, 152, 0, 0.4); }
.exp-telemetry-pill.pacing { color: #64b5f6; border-color: rgba(33, 150, 243, 0.4); }

/* Navigation Tab Bar */
.exp-board-tabs {
  display: flex;
  background: #121721;
  border-bottom: 1.5px solid rgba(179, 139, 71, 0.4);
  padding: 0 1.5rem;
  gap: 8px;
}

.exp-board-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #94a3b8;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.exp-board-tab:hover {
  color: #ffd54f;
  background: rgba(255, 255, 255, 0.03);
}

.exp-board-tab.active {
  color: #ffd54f;
  border-bottom-color: #ffd54f;
  background: rgba(179, 139, 71, 0.12);
}

/* Card Viewports & Grids */
.exp-board-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.exp-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.25rem;
}

/* Card Styling */
.exp-quest-card, .exp-contract-card {
  background: #151a24;
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.exp-quest-card:hover, .exp-contract-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  border-color: #b38b47;
}

.exp-card-banner {
  height: 90px;
  position: relative;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.exp-card-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(21, 26, 36, 0.95) 100%);
  display: flex;
  align-items: flex-end;
  padding: 10px 14px;
  gap: 12px;
}

.exp-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #ffd54f;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.exp-card-header-text h4 {
  margin: 0;
  font-size: 1rem;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
}

.exp-card-advocate {
  font-size: 0.78rem;
  color: #cbd5e1;
}

.exp-card-content {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.exp-card-desc {
  margin: 0;
  font-size: 0.82rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.exp-theme-tag {
  font-size: 0.75rem;
  color: #94a3b8;
  font-style: italic;
}

/* 3-Stage Progress Timeline */
.exp-timeline-strip {
  display: flex;
  gap: 6px;
  margin: 4px 0;
  flex-wrap: wrap;
}

.exp-stage-step {
  flex: 1;
  min-width: 100px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.72rem;
  text-align: center;
  color: #94a3b8;
}

.exp-stage-step.active {
  background: rgba(255, 213, 79, 0.15);
  border-color: #ffd54f;
  color: #ffd54f;
  font-weight: 700;
}

.exp-stage-step.completed {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
  color: #81c784;
}

/* Rewards Callout Box */
.exp-reward-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(179, 139, 71, 0.35);
  border-left: 3px solid #ffd54f;
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
}

.exp-reward-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exp-reward-icon {
  font-size: 1.1rem;
}

.exp-upgrade-subdesc {
  font-size: 0.72rem;
  color: #94a3b8;
  font-style: italic;
  padding-left: 26px;
}

.exp-spoils-line {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 4px;
  font-weight: 600;
  color: #ffd54f;
  font-size: 0.75rem;
}

/* Contract Details */
.exp-contract-header {
  padding: 12px 14px 8px;
  background: linear-gradient(180deg, #1e293b 0%, #151a24 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.exp-contract-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.exp-contract-title-row h4 {
  margin: 0;
  font-size: 1rem;
  color: #ffd54f;
  font-family: 'Cinzel', serif;
}

.exp-contract-loc {
  font-size: 0.76rem;
  color: #94a3b8;
  margin-top: 2px;
}

.exp-contract-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.exp-contract-cost-strip {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.25);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #94a3b8;
}

.exp-contract-cost-strip strong {
  color: #e6e8eb;
}

/* Threat Badges */
.badge-threat {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.badge-threat-easy {
  background: rgba(76, 175, 80, 0.2);
  border: 1px solid #4caf50;
  color: #81c784;
}

.badge-threat-medium {
  background: rgba(33, 150, 243, 0.2);
  border: 1px solid #2196f3;
  color: #64b5f6;
}

.badge-threat-hard {
  background: rgba(255, 152, 0, 0.2);
  border: 1px solid #ff9800;
  color: #ffb74d;
}

.badge-threat-deadly {
  background: rgba(244, 67, 54, 0.25);
  border: 1px solid #f44336;
  color: #e57373;
}

/* Action Buttons */
.exp-card-action-bar {
  margin-top: auto;
  padding-top: 6px;
}

.btn-exp-action {
  width: 100%;
  padding: 9px 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-exp-deploy {
  background: linear-gradient(180deg, #b38b47 0%, #85612c 100%);
  color: #0b0d11;
  border: 1px solid #ffd54f;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.btn-exp-deploy:hover {
  background: linear-gradient(180deg, #ffd54f 0%, #b38b47 100%);
  box-shadow: 0 4px 12px rgba(255, 213, 79, 0.4);
  transform: translateY(-1px);
}

.btn-exp-decision {
  background: linear-gradient(180deg, #4a148c 0%, #311b92 100%);
  color: #ffd54f;
  border: 1px solid #ba68c8;
}

.btn-exp-decision:hover {
  background: linear-gradient(180deg, #6a1b9a 0%, #4a148c 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(186, 104, 200, 0.4);
}

.btn-exp-done {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border: 1px solid #4caf50;
  opacity: 0.85;
  cursor: default;
}

/* Mobile & Tablet Responsive Query */
@media (max-width: 768px) {
  #expedition-board-modal {
    padding: 0.5rem;
  }
  .expedition-board-window {
    width: 100vw;
    max-height: 98vh;
    border-radius: 4px;
  }
  .exp-board-header {
    padding: 0.85rem 1rem 0.65rem;
  }
  .exp-board-title {
    font-size: 1.1rem;
  }
  .exp-board-telemetry-strip {
    padding: 0.5rem 1rem;
    gap: 6px;
  }
  .exp-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .exp-board-body {
    padding: 0.85rem 1rem;
  }
}

/* =========================================================
   MILENSTONE 6: DEFENSE ARCADE MINIGAMES & FACILITY SIEGES
   ========================================================= */
.defense-minigame-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 12, 0.88);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 11000;
  padding: 1rem;
  box-sizing: border-box;
  animation: defenseModalFadeIn 0.25s ease-out forwards;
}

@keyframes defenseModalFadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

.defense-minigame-container {
  background: radial-gradient(circle at 50% 10%, #1e2430 0%, #0d1117 100%);
  border: 2px solid #8c6428;
  border-radius: 12px;
  width: 100%;
  max-width: 740px;
  color: #e2e8f0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), 0 0 25px rgba(255, 213, 79, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.defense-minigame-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid rgba(140, 100, 40, 0.4);
}

.defense-minigame-badge {
  display: inline-block;
  background: #c62828;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.defense-minigame-title {
  margin: 0;
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  color: #ffd54f;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.defense-minigame-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 2px;
}

.defense-minigame-close-btn {
  background: transparent;
  border: 1px solid #475569;
  color: #cbd5e1;
  font-size: 1.5rem;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.defense-minigame-close-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fff;
}

.defense-minigame-body {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.defense-minigame-canvas-wrap {
  position: relative;
  width: 100%;
  height: 220px;
  background: #090c10;
  border: 1px solid #334155;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.defense-minigame-canvas-wrap canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.defense-minigame-feedback {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  padding: 6px 16px;
  border-radius: 20px;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  z-index: 10;
}

.defense-minigame-feedback.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.defense-minigame-feedback.positive {
  background: rgba(22, 101, 52, 0.9);
  color: #bbf7d0;
  border: 1px solid #4ade80;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.35);
}

.defense-minigame-feedback.negative {
  background: rgba(153, 27, 27, 0.9);
  color: #fecaca;
  border: 1px solid #f87171;
  box-shadow: 0 0 15px rgba(248, 113, 113, 0.35);
}

.defense-minigame-stats-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.defense-stat-pill {
  flex: 1;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: #94a3b8;
  text-align: center;
}

.defense-stat-pill strong {
  color: #ffd54f;
  margin-left: 4px;
}

.defense-action-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.defense-btn {
  background: #1e293b;
  border: 1px solid #475569;
  color: #e2e8f0;
  padding: 8px 18px;
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.defense-btn:hover {
  background: #334155;
  border-color: #ffd54f;
  color: #fff;
  transform: translateY(-1px);
}

.defense-btn-action {
  background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
  border-color: #f59e0b;
  color: #fff;
  padding: 10px 24px;
  font-size: 0.95rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.defense-btn-action:hover {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border-color: #fef08a;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.defense-btn-autoresolve {
  width: 100%;
  background: rgba(79, 70, 229, 0.15);
  border: 1px dashed #6366f1;
  color: #c7d2fe;
  padding: 7px 12px;
  font-size: 0.8rem;
  margin-top: 4px;
}

.defense-btn-autoresolve:hover {
  background: rgba(79, 70, 229, 0.3);
  border-color: #818cf8;
  color: #fff;
}

.defense-btn-primary {
  background: linear-gradient(180deg, #15803d 0%, #166534 100%);
  border: 1px solid #22c55e;
  color: #fff;
  padding: 12px 28px;
  font-size: 1rem;
}

.defense-btn-primary:hover {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

/* Selena Tension Meter */
.tension-display-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.tension-display-wrap label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #cbd5e1;
}

.tension-meter-bar-outer {
  position: relative;
  width: 100%;
  height: 24px;
  background: #0f172a;
  border: 2px solid #475569;
  border-radius: 12px;
  overflow: hidden;
}

.tension-meter-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #38bdf8 0%, #f59e0b 70%, #ef4444 100%);
  border-radius: 10px;
  transition: width 0.05s linear;
}

.tension-meter-sweetspot {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(74, 222, 128, 0.35);
  border-left: 2px solid #4ade80;
  border-right: 2px solid #4ade80;
  pointer-events: none;
}

/* Aurora & Mycelia Controls */
.aurora-chokepoints-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.aurora-snare-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
  background: #14532d;
  border-color: #22c55e;
}

.cannon-inputs-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px 16px;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.cannon-inputs-row label {
  font-size: 0.85rem;
  color: #94a3b8;
}

.cannon-inputs-row input[type="range"] {
  accent-color: #a855f7;
  cursor: pointer;
}

/* Outcome view */
.outcome-container {
  padding: 1.5rem;
  text-align: center;
}

.defense-grade-badge {
  display: inline-flex;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: 'Cinzel', serif;
  font-size: 2.2rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}

.grade-S { background: #eab308; color: #000; border: 3px solid #fef08a; }
.grade-A { background: #22c55e; color: #fff; border: 3px solid #86efac; }
.grade-B { background: #3b82f6; color: #fff; border: 3px solid #93c5fd; }
.grade-C { background: #f97316; color: #fff; border: 3px solid #fdba74; }
.grade-D { background: #ef4444; color: #fff; border: 3px solid #fca5a5; }

.defense-outcome-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.5rem 0;
  text-align: left;
}

.defense-outcome-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 16px;
}

.defense-outcome-card h4 {
  margin: 0 0 6px 0;
  font-size: 0.9rem;
  color: #cbd5e1;
}

.defense-outcome-card h4 span {
  color: #22c55e;
}

.defense-outcome-card p {
  margin: 0;
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.4;
}

.defense-outcome-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* ==========================================================================
   RETRO VIDEOGAME INTRO SCREEN & ACTION SLIDESHOW MURAL
   ========================================================================== */

.story-standard-tale-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
}

.story-standard-tale-wrap.hidden {
  display: none !important;
}

.frontispiece-retro-theater {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  box-sizing: border-box;
  padding: 14px 20px;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #8c6720 #0a0e14;
  background: radial-gradient(circle at 50% 15%, #182232 0%, #0d121a 55%, #05080c 100%);
  color: #f5eedb;
  font-family: 'Cinzel', serif;
  gap: 12px;
  position: relative;
}

.frontispiece-retro-theater.hidden {
  display: none !important;
}

.frontispiece-retro-theater::-webkit-scrollbar {
  width: 6px;
}
.frontispiece-retro-theater::-webkit-scrollbar-track {
  background: #0a0e14;
}
.frontispiece-retro-theater::-webkit-scrollbar-thumb {
  background: #8c6720;
  border-radius: 4px;
}

/* Retro Header Banner */
.frontispiece-retro-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  max-width: 100%;
}

.retro-arcade-badge {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #eab308;
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.35);
  padding: 3px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  user-select: none;
  cursor: pointer;
}

.retro-arcade-badge:hover {
  background: rgba(234, 179, 8, 0.2);
  border-color: #ffd700;
  transform: translateY(-1px);
}

.retro-arcade-badge.coin-flash {
  animation: coinInsertFlash 0.35s ease-out;
}

@keyframes coinInsertFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); background: rgba(255, 215, 0, 0.3); border-color: #ffffff; color: #ffffff; }
  100% { transform: scale(1); }
}

.frontispiece-retro-title {
  font-size: 1.5rem;
  margin: 4px 0 2px 0;
  color: #fff8e7;
  background: linear-gradient(180deg, #ffffff 0%, #fff2b8 25%, #ffd700 55%, #d4a017 80%, #8c6720 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
  letter-spacing: 2px;
  font-weight: 800;
  text-align: center;
  word-break: break-word;
}

.retro-subline {
  font-size: 0.78rem;
  color: #94a3b8;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: 0.5px;
  text-align: center;
}

/* Retro Chassis Frame & Viewport */
.frontispiece-screen-frame {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 10px;
  border: 3px solid #7d5b1e;
  outline: 2px solid #3c2909;
  outline-offset: 2px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.9);
  background: #090d14;
  padding: 10px;
  box-sizing: border-box;
  contain: content;
}

.screen-chassis-bezel {
  width: 100%;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.95);
  box-sizing: border-box;
}

.frontispiece-viewport {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 480px;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  contain: strict;
}

.frontispiece-display-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: opacity 0.25s ease-in-out, transform 0.35s ease;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.frontispiece-display-img.quick-cut-flash {
  animation: retroCutFlash 0.3s ease-out;
}

@keyframes retroCutFlash {
  0% { filter: brightness(1.35); transform: scale(1.01) translateZ(0); }
  50% { filter: brightness(1.15); }
  100% { filter: brightness(1); transform: scale(1) translateZ(0); }
}

/* Retro CRT Scanlines: Hardware-accelerated compositor layer (Disabled for clean image presentation) */
.frontispiece-crt-scanlines {
  display: none !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: none !important;
  opacity: 0 !important;
  z-index: 4;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: strict;
  transition: opacity 0.2s ease;
}

.frontispiece-crt-scanlines.hidden {
  display: none !important;
}

.frontispiece-crt-scanlines.crt-flicker {
  animation: retroCrtFlicker 0.25s ease-out;
}

@keyframes retroCrtFlicker {
  0%, 100% { opacity: 0; }
  25% { opacity: 0; }
  50% { opacity: 0; }
  75% { opacity: 0; }
}

.frontispiece-screen-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.7);
  z-index: 3;
  transform: translateZ(0);
}

/* Mural Annotations / Legend: High-performance chips without costly backdrop-filter blurs */
.frontispiece-mural-legend {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(4, 7, 12, 0.92) 0%, rgba(4, 7, 12, 0.65) 70%, transparent 100%);
  z-index: 5;
  transition: opacity 0.25s ease, transform 0.25s ease;
  box-sizing: border-box;
}

.frontispiece-mural-legend.hidden {
  display: none !important;
}

.mural-tag {
  background: rgba(10, 15, 22, 0.94);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  color: #ffd700;
  width: fit-content;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  animation: fadeIn 0.3s ease;
  white-space: nowrap;
}

.mural-tag.tag-low {
  border-color: rgba(74, 222, 128, 0.5);
  color: #86efac;
}

.mural-tag.tag-mid {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fde047;
}

.mural-tag.tag-high {
  border-color: rgba(248, 113, 113, 0.55);
  color: #fca5a5;
}

/* Action Reel Banner Overlay */
.frontispiece-action-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(4, 7, 12, 0.95) 0%, rgba(4, 7, 12, 0.85) 75%, transparent 100%);
  padding: 14px 20px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
  animation: slideUp 0.25s ease-out;
  box-sizing: border-box;
}

.frontispiece-action-banner.hidden {
  display: none !important;
}

.action-banner-tier {
  font-size: 0.7rem;
  color: #f59e0b;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.action-banner-title {
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.action-banner-caption {
  font-size: 0.84rem;
  color: #cbd5e1;
  margin: 2px 0 0 0;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.35;
}

.action-banner-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 0.74rem;
}

.action-banner-badge {
  color: #38bdf8;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.action-banner-counter {
  color: #94a3b8;
  font-family: monospace;
}

/* Retro Attract Toolbar */
.frontispiece-retro-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 2px 0 2px;
  box-sizing: border-box;
}

.frontispiece-retro-toolbar .hidden {
  display: none !important;
}

.toolbar-left-group, .toolbar-right-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn-retro-mode, .btn-retro-control, .btn-retro-step, .btn-retro-toggle {
  background: #141b25;
  color: #cbd5e1;
  border: 1px solid #475569;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-family: 'Cinzel', serif;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  box-sizing: border-box;
}

.btn-retro-mode:hover, .btn-retro-control:hover, .btn-retro-step:hover, .btn-retro-toggle:hover {
  background: #253346;
  border-color: #ffd700;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.btn-retro-mode.active, .btn-retro-toggle.active {
  background: linear-gradient(135deg, #7d5b1e 0%, #a47828 100%);
  border-color: #ffd700;
  color: #fff9e6;
  font-weight: 700;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.toolbar-center-pips {
  display: flex;
  align-items: center;
  gap: 6px;
}

.frontispiece-pip {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #232d3d;
  border: 1px solid #52637a;
  cursor: pointer;
  transition: all 0.2s ease;
}

.frontispiece-pip:hover {
  background: #60a5fa;
  transform: scale(1.2);
}

.frontispiece-pip.active {
  background: #ffd700;
  border-color: #fff;
  transform: scale(1.35);
  box-shadow: 0 0 8px #ffd700;
}

/* Prominent Chassis CTA Bar directly beneath monitor */
.frontispiece-chassis-cta-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* Lower Grid: Overture & Hero Roster (min-width: 0 prevents CSS grid horizontal blowout) */
.frontispiece-retro-lower-grid {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .frontispiece-retro-lower-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .frontispiece-retro-title {
    font-size: 1.15rem;
    letter-spacing: 1.2px;
  }
  .frontispiece-retro-theater {
    padding: 12px 8px 14px 8px;
    gap: 8px;
  }
  .retro-arcade-badge {
    font-size: 0.6rem;
    letter-spacing: 1px;
    padding: 2px 8px;
  }
  .frontispiece-screen-frame {
    padding: 6px;
    gap: 6px;
  }
  .frontispiece-mural-legend {
    gap: 4px;
    padding: 6px 6px;
  }
  .mural-tag {
    white-space: normal;
    font-size: 0.62rem;
    padding: 3px 6px;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    box-sizing: border-box;
  }
  .frontispiece-action-banner {
    padding: 6px 10px;
    gap: 2px;
  }
  .action-banner-tier {
    font-size: 0.58rem;
    letter-spacing: 1px;
  }
  .action-banner-title {
    font-size: 0.85rem;
  }
  .action-banner-caption {
    font-size: 0.68rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .action-banner-meta {
    font-size: 0.6rem;
    margin-top: 2px;
  }
  .frontispiece-retro-toolbar {
    justify-content: center;
    gap: 4px;
  }
  .toolbar-left-group, .toolbar-right-group {
    justify-content: center;
    gap: 4px;
  }
  .btn-retro-mode, .btn-retro-control, .btn-retro-step, .btn-retro-toggle {
    padding: 4px 8px;
    font-size: 0.68rem;
  }
  .toolbar-center-pips {
    gap: 4px;
  }
  .frontispiece-pip {
    width: 7px;
    height: 7px;
  }
  .btn-frontispiece-press-start {
    font-size: 0.88rem;
    padding: 8px 16px;
    letter-spacing: 1px;
    gap: 6px;
  }
  .tome-header-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.5px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.retro-overture-card, .retro-heroes-card {
  background: rgba(14, 20, 30, 0.7);
  border: 1px solid #4a3612;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.overture-card-header, .heroes-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(140, 103, 32, 0.3);
  padding-bottom: 8px;
}

.overture-card-header .card-title, .heroes-card-header .card-title {
  margin: 0;
  font-size: 0.95rem;
  color: #ffd700;
  letter-spacing: 1px;
}

.overture-badge, .heroes-badge {
  font-size: 0.68rem;
  color: #94a3b8;
  letter-spacing: 1.5px;
  font-family: system-ui, sans-serif;
}

.overture-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #e2e8f0;
  min-width: 0;
}

.overture-p {
  margin: 0;
  text-indent: 1em;
  word-break: break-word;
  overflow-wrap: break-word;
}
.overture-p:first-child {
  text-indent: 0;
}

.heroes-roster-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.retro-hero-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(22, 30, 44, 0.6);
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 10px;
  transition: transform 0.15s ease, border-color 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
}

.retro-hero-item:hover {
  transform: translateX(4px);
  border-color: #ffd700;
}

.retro-hero-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #8c6720;
  object-fit: cover;
  flex-shrink: 0;
  background: #0d121a;
  margin-top: 2px;
}

.retro-hero-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.hero-name-row {
  font-size: 0.84rem;
  color: #f1f5f9;
}

.hero-role {
  color: #38bdf8;
  font-size: 0.72rem;
  margin-left: 6px;
  font-family: system-ui, sans-serif;
}

.hero-motto {
  font-size: 0.76rem;
  font-style: italic;
  color: #cbd5e1;
  white-space: normal;
  overflow: visible;
  line-height: 1.38;
  word-break: break-word;
  font-family: Georgia, serif;
}

/* Pulsing Retro Press Start Action Button */
.frontispiece-press-start-bar {
  width: 100%;
  max-width: 980px;
  margin: 4px auto 8px auto;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

.frontispiece-press-start-bar.hidden {
  display: none !important;
}

.btn-frontispiece-press-start {
  background: linear-gradient(135deg, #8c6720 0%, #eab308 50%, #8c6720 100%);
  color: #0b0f17;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 10px 32px;
  border-radius: 8px;
  border: 2px solid #fffdf5;
  box-shadow: 0 4px 20px rgba(234, 179, 8, 0.45);
  cursor: pointer;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  will-change: transform;
  transform: translateZ(0);
  isolation: isolate;
  animation: retroPulse 2.4s infinite ease-in-out;
  box-sizing: border-box;
  text-align: center;
}

.btn-frontispiece-press-start:hover {
  background: linear-gradient(135deg, #a47828 0%, #fde047 50%, #a47828 100%);
  transform: scale(1.03) translateZ(0);
  box-shadow: 0 6px 28px rgba(250, 204, 21, 0.75);
}

@keyframes retroPulse {
  0%, 100% {
    opacity: 0.95;
    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.45);
  }
  50% {
    opacity: 1;
    box-shadow: 0 6px 28px rgba(250, 204, 21, 0.85);
  }
}

.press-start-sparkle {
  color: #ffffff;
  text-shadow: 0 0 8px #ffffff;
  font-size: 1.15rem;
}

.btn-frontispiece-continue {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1e3a8a 100%);
  color: #f8fafc;
  border: 2px solid #93c5fd;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.45);
}

.btn-frontispiece-continue:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #1d4ed8 100%);
  box-shadow: 0 6px 28px rgba(96, 165, 250, 0.75);
}

.btn-frontispiece-press-start.hidden,
.btn-frontispiece-continue.hidden {
  display: none !important;
}

/* ==========================================================================
   MYCELIA'S ARCANE BOTANICAL CODEX & SPELLBOOK MODAL (D&D 2024 RAW)
   ========================================================================== */
.mycelia-grimoire-overlay {
  z-index: 99999;
  background: rgba(8, 12, 10, 0.88);
  backdrop-filter: blur(8px);
}

.mycelia-grimoire-card {
  max-width: 1040px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, #1b241c 0%, #131a14 45%, #0d130e 100%);
  border: 2px solid #5a8264;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(90, 130, 100, 0.25);
  color: #e2e8f0;
  padding: 20px 24px;
  overflow: hidden;
  position: relative;
}

.grimoire-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid rgba(90, 130, 100, 0.4);
  padding-bottom: 12px;
  margin-bottom: 10px;
}

.grimoire-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.grimoire-icon {
  font-size: 2.2rem;
}

.grimoire-title {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  letter-spacing: 1.5px;
  color: #a7f3d0;
  margin: 0 0 2px;
  text-shadow: 0 2px 8px rgba(52, 211, 153, 0.35);
}

.grimoire-subtitle {
  font-size: 0.78rem;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.grimoire-prep-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: rgba(16, 28, 20, 0.85);
  border: 1px solid #10b981;
  border-radius: 8px;
  padding: 6px 14px;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}

.grimoire-prep-badge.full {
  border-color: #ffd54f;
  box-shadow: 0 0 14px rgba(255, 213, 79, 0.35);
}

.prep-meter-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: #6ee7b7;
  letter-spacing: 0.5px;
}

.prep-meter-val {
  font-size: 1.15rem;
  color: #ffffff;
}

.prep-meter-val strong {
  color: #34d399;
  font-size: 1.3rem;
}

.grimoire-prep-badge.full .prep-meter-val strong {
  color: #ffd54f;
}

.prep-meter-formula {
  font-size: 0.65rem;
  color: #94a3b8;
}

.grimoire-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 1.8rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 8px;
  transition: color 0.2s ease;
}

.grimoire-close-btn:hover {
  color: #f87171;
}

.grimoire-lore-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(18, 30, 22, 0.65);
  border: 1px dashed rgba(90, 130, 100, 0.5);
  border-radius: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  position: relative;
}

.coffee-ring-graphic {
  font-size: 1.8rem;
  opacity: 0.85;
}

.grimoire-personal-note {
  font-size: 0.8rem;
  color: #cbd5e1;
  line-height: 1.4;
  margin: 0;
}

.grimoire-signature {
  display: inline-block;
  color: #6ee7b7;
  font-weight: 600;
  margin-left: 6px;
}

.grimoire-body-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.grimoire-page {
  display: flex;
  flex-direction: column;
  background: rgba(13, 20, 15, 0.8);
  border: 1px solid rgba(74, 110, 85, 0.4);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-y: auto;
}

.page-title-ribbon {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffd54f;
  text-align: center;
  padding: 4px 8px;
  background: rgba(255, 213, 79, 0.1);
  border-radius: 4px;
  border: 1px solid rgba(255, 213, 79, 0.25);
  margin-bottom: 6px;
}

.grimoire-section-intro {
  font-size: 0.74rem;
  color: #94a3b8;
  margin: 0 0 10px;
  line-height: 1.35;
  text-align: center;
}

.grimoire-spell-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grimoire-spell-entry {
  background: rgba(22, 34, 25, 0.85);
  border: 1px solid rgba(90, 130, 100, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.grimoire-spell-entry.is-prepared {
  border-color: #10b981;
  background: rgba(16, 38, 26, 0.92);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.grimoire-spell-entry:hover {
  border-color: #6ee7b7;
}

.entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.entry-icon {
  font-size: 1.4rem;
}

.entry-title-wrap {
  flex: 1;
}

.entry-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f1f5f9;
}

.entry-school {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 400;
}

.entry-tier-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
  margin-left: 4px;
}

.entry-ritual-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 213, 79, 0.15);
  color: #ffd54f;
  border: 1px solid rgba(255, 213, 79, 0.3);
  margin-left: 4px;
}

.entry-botanical {
  font-size: 0.72rem;
  color: #6ee7b7;
  font-style: italic;
  font-family: 'MedievalSharp', cursive, serif;
}

.badge-always-ready {
  font-size: 0.7rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-prep-toggle {
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background: rgba(30, 48, 36, 0.8);
  color: #ffd54f;
  border: 1px solid #ffd54f;
  transition: all 0.2s ease;
}

.btn-prep-toggle:hover {
  background: #ffd54f;
  color: #0b0f17;
}

.btn-prep-toggle.prepared {
  background: #10b981;
  color: #ffffff;
  border-color: #34d399;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

.btn-prep-toggle.prepared:hover {
  background: #ef4444;
  border-color: #f87171;
  color: #ffffff;
}

.btn-prep-toggle.prepared:hover::after {
  content: " (UNPREPARE)";
}

.entry-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.74rem;
  color: #cbd5e1;
  margin-bottom: 6px;
}

.entry-stats span {
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 6px;
  border-radius: 3px;
}

.conc-pill {
  color: #f59e0b !important;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.dc-pill {
  color: #60a5fa !important;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.entry-desc {
  font-size: 0.76rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-bottom: 6px;
}

.entry-quirky-annotation {
  font-size: 0.74rem;
  color: #cbd5e1;
  background: rgba(10, 18, 12, 0.65);
  border-left: 2px solid #34d399;
  padding: 4px 8px;
  border-radius: 0 4px 4px 0;
  line-height: 1.3;
}

.entry-quirky-annotation em {
  color: #a7f3d0;
}

.grimoire-doodle-footer {
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px dashed rgba(90, 130, 100, 0.3);
  text-align: center;
}

.botanical-sketch {
  font-size: 1.4rem;
  opacity: 0.75;
  display: block;
  margin-bottom: 2px;
}

.doodle-caption {
  font-size: 0.68rem;
  color: #64748b;
  font-style: italic;
}

.grimoire-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid rgba(90, 130, 100, 0.4);
  padding-top: 12px;
  margin-top: 10px;
}

.grimoire-footer-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.78rem;
  color: #cbd5e1;
}

.grimoire-rule-note {
  font-size: 0.7rem;
  color: #94a3b8;
}

.grimoire-confirm-btn {
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ==========================================================================
   SUPPORT PROJECT REDOUBT: 10-MISSION WEB DEMO FINALE FOLIO (TK-DEMO-01)
   ========================================================================== */
.demo-completion-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(10, 12, 16, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.demo-completion-overlay.hidden {
  display: none !important;
}

.demo-completion-card {
  position: relative;
  max-width: 1080px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: linear-gradient(145deg, #181c25 0%, #0f1217 100%);
  border: 2px solid var(--border-gold);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(179, 139, 71, 0.25);
  color: var(--text-light);
  scrollbar-width: thin;
  scrollbar-color: var(--border-gold) rgba(0, 0, 0, 0.3);
}

.demo-folio-container {
  padding: 24px 32px 28px 32px;
  position: relative;
}

.btn-demo-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-muted);
  color: var(--text-dim);
  font-size: 1.15rem;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.btn-demo-close:hover {
  border-color: var(--border-gold);
  color: var(--text-gold);
  background: rgba(179, 139, 71, 0.15);
}

.demo-folio-header {
  text-align: center;
  margin-bottom: 16px;
}

.demo-title-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-gold);
  background: rgba(179, 139, 71, 0.15);
  border: 1px solid rgba(179, 139, 71, 0.4);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.demo-folio-title {
  font-family: 'Cinzel', serif;
  font-size: 1.85rem;
  color: var(--text-gold);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  margin-bottom: 6px;
  letter-spacing: 1px;
}

.demo-folio-subtitle {
  font-size: 0.88rem;
  color: #94a3b8;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.45;
}

.demo-folio-spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.demo-spread-left,
.demo-spread-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-art-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(179, 139, 71, 0.5);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  background: #090b0e;
}

.demo-art-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.05);
}

.demo-art-caption {
  padding: 6px 12px;
  font-size: 0.74rem;
  font-style: italic;
  color: #cbd5e1;
  background: rgba(13, 16, 22, 0.92);
  text-align: center;
  border-top: 1px solid rgba(179, 139, 71, 0.25);
  letter-spacing: 0.3px;
}

.demo-lore-box {
  background: rgba(22, 27, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
}

.demo-lore-box h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.96rem;
  color: var(--text-gold);
  margin-bottom: 4px;
}

.demo-lore-box p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.demo-choices-canon {
  background: rgba(18, 22, 30, 0.9);
  border: 1px solid rgba(179, 139, 71, 0.35);
  border-radius: 6px;
  padding: 12px 14px;
}

.demo-choices-canon h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  color: var(--text-gold);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.demo-choices-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 190px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-gold) rgba(0, 0, 0, 0.3);
  padding-right: 4px;
}

.demo-choice-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(11, 14, 19, 0.7);
  border: 1px solid rgba(179, 139, 71, 0.2);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.demo-choice-pill .choice-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.demo-choice-pill .choice-text {
  color: #e2e8f0;
}

.demo-choice-pill .choice-title {
  color: var(--text-gold);
  font-weight: 600;
  margin-right: 4px;
}

.demo-future-lore {
  background: rgba(22, 27, 36, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
}

.demo-future-lore h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.96rem;
  color: #93c5fd;
  margin-bottom: 4px;
}

.demo-future-lore p {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #cbd5e1;
}

.demo-save-block {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.save-block-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.save-icon {
  font-size: 1.4rem;
  line-height: 1;
}

.save-block-header h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  color: #38bdf8;
  margin-bottom: 2px;
}

.save-block-header p {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.35;
}

.btn-demo-save {
  background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
  border: 1px solid #38bdf8;
  color: #ffffff;
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.btn-demo-save:hover {
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.55);
  transform: translateY(-1px);
}

.save-filename {
  color: #bae6fd;
  font-family: monospace;
  font-size: 0.82rem;
}

.demo-save-status {
  font-size: 0.76rem;
  color: #34d399;
  font-style: italic;
  min-height: 16px;
  line-height: 1.3;
}

.demo-actions-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.demo-actions-group h4 {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: var(--text-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
  margin-bottom: 0px;
}

.btn-demo-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  box-sizing: border-box;
}

.btn-demo-wishlist {
  background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
  border: 1px solid #fbbf24;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
}

.btn-demo-wishlist:hover {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.55);
  transform: translateY(-1px);
}

.btn-demo-community {
  background: linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
  border: 1px solid #818cf8;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

.btn-demo-community:hover {
  background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.55);
  transform: translateY(-1px);
}

.demo-exploration-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btn-demo-bastion {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid var(--border-gold);
  color: var(--text-gold);
  font-size: 0.8rem;
}

.btn-demo-bastion:hover {
  background: rgba(179, 139, 71, 0.22);
  border-color: #ffd700;
  color: #fff;
  transform: translateY(-1px);
}

.btn-demo-replay {
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid var(--border-muted);
  color: var(--text-light);
  font-size: 0.8rem;
}

.btn-demo-replay:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--text-light);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .demo-folio-spread {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .demo-exploration-buttons {
    grid-template-columns: 1fr;
  }
  .demo-folio-container {
    padding: 24px 20px;
  }
  .demo-folio-title {
    font-size: 1.6rem;
  }
}