/*
 * Terminal D&D Application Stylesheet
 */

/* ========================================
 * Narrative Content Markdown Styling
 * ======================================== */

.narrative-entry {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Paragraph spacing */
.narrative-entry p {
  margin: 0.75rem 0;
}

.narrative-entry p:first-child {
  margin-top: 0;
}

.narrative-entry p:last-child {
  margin-bottom: 0;
}

/* Bold text - for emphasis and important details */
.narrative-entry strong {
  font-weight: 700;
  color: #ffd700;
}

/* Italic text - for atmosphere and inner thoughts */
.narrative-entry em {
  font-style: italic;
  color: #a8b5c9;
}

/* Code formatting - for game mechanics */
.narrative-entry code {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #4af;
}

/* Blockquotes - for ancient text and special messages */
.narrative-entry blockquote {
  border-left: 4px solid #666;
  padding-left: 1rem;
  margin: 1rem 0;
  color: #888;
  font-style: italic;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

/* Horizontal rules - for scene transitions */
.narrative-entry hr {
  border: none;
  border-top: 2px solid #444;
  margin: 1.5rem 0;
}

/* Lists */
.narrative-entry ul,
.narrative-entry ol {
  margin: 0.75rem 0;
  padding-left: 2rem;
}

.narrative-entry li {
  margin: 0.25rem 0;
}

/* Headings */
.narrative-entry h1,
.narrative-entry h2,
.narrative-entry h3,
.narrative-entry h4,
.narrative-entry h5,
.narrative-entry h6 {
  margin: 1rem 0 0.5rem 0;
  font-weight: 600;
  color: #f0f0f0;
}

.narrative-entry h1 { font-size: 1.5em; }
.narrative-entry h2 { font-size: 1.3em; }
.narrative-entry h3 { font-size: 1.1em; }

/* Links */
.narrative-entry a {
  color: #4af;
  text-decoration: underline;
}

.narrative-entry a:hover {
  color: #6cf;
}

/* Images */
.narrative-entry img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 0.5rem 0;
}

/* Entry type specific styling */
.narrative-entry.dm {
  color: #e0e0e0;
}

.narrative-entry.player {
  color: #4af;
}

.narrative-entry.system {
  color: #888;
  font-size: 0.9em;
}

.narrative-entry.error {
  color: #f44;
}

.narrative-entry.roll {
  color: #4a4;
  font-weight: 500;
}

/* ========================================
 * Character Creation Context Panel
 * ======================================== */

/* Layout adjustment when context panel is visible */
.main-content.with-context-panel {
  display: flex;
  gap: 1rem;
}

.main-content.with-context-panel .narrative-panel {
  flex: 1;
  min-width: 0;
}

/* Context Panel Styling */
.creation-context-panel {
  width: 350px;
  background-color: rgba(20, 20, 30, 0.95);
  border-left: 2px solid #3b82f6;
  padding: 1rem;
  overflow-y: auto;
  font-size: 0.9em;
  /* Smooth transition for hide/show */
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
  transform: translateX(0);
}

.creation-context-panel.hiding {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

.creation-context-panel.hidden {
  display: none;
}

/* Adventure mode body state - hides creation UI */
body.adventure-mode .creation-context-panel {
  display: none;
}

body.adventure-mode .main-content {
  /* Full width when adventure mode starts */
  transition: all 0.3s ease;
}

.context-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.context-title {
  font-size: 1.1em;
  font-weight: 600;
  color: #3b82f6;
  display: block;
  margin-bottom: 0.5rem;
}

/* Progress Bar */
.context-progress {
  margin-top: 0.5rem;
}

.progress-bar {
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.8em;
  color: #888;
}

/* Context Sections */
.context-section {
  margin-bottom: 1.5rem;
}

.context-section h3 {
  font-size: 0.95em;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Choices List */
.choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.choice-item {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.6rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.choice-item.set {
  background-color: rgba(59, 130, 246, 0.15);
  border-left: 2px solid #3b82f6;
}

.choice-label {
  font-weight: 500;
  color: #a8b5c9;
}

.choice-value {
  color: #e0e0e0;
}

.choice-item.set .choice-value {
  color: #4af;
  font-weight: 500;
}

/* Traits and Features */
.traits-list,
.features-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.trait-item,
.feature-item {
  padding: 0.6rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  border-left: 2px solid #10b981;
}

.trait-name,
.feature-name {
  font-weight: 600;
  color: #10b981;
  margin-bottom: 0.25rem;
  font-size: 0.9em;
}

.trait-desc,
.feature-desc {
  color: #a8b5c9;
  font-size: 0.85em;
  line-height: 1.4;
}

/* Available Options */
.next-field {
  font-weight: 500;
  color: #ffd700;
  margin-bottom: 0.75rem;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.option-item {
  padding: 0.6rem;
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
  border-left: 2px solid #3b82f6;
  cursor: pointer;
  transition: background-color 0.2s;
}

.option-item:hover {
  background-color: rgba(59, 130, 246, 0.2);
}

.option-value {
  font-weight: 500;
  color: #4af;
  margin-bottom: 0.25rem;
}

.option-desc {
  color: #888;
  font-size: 0.85em;
}

/* ========================================
 * Character Sheet Tabs Styling
 * ======================================== */

.character-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab Navigation */
.cs-tab-nav {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.cs-tab-btn {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 3px;
  color: #888;
  font-size: 12px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.cs-tab-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #e0e0e0;
}

.cs-tab-btn.active {
  background: rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  color: #a78bfa;
  font-weight: bold;
}

/* Tab Content */
.cs-tab-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}

.cs-tab-content.hidden {
  display: none;
}

/* Sections */
.cs-section {
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 4px;
}

.cs-section-header {
  color: #7c3aed;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

/* Stat Grid */
.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.cs-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.cs-stat-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
}

.cs-stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #a78bfa;
}

/* HP Bar */
.cs-hp-bar {
  position: relative;
  height: 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.cs-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.3s ease;
}

.cs-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

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

.cs-ability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.cs-ability-item.rollable {
  cursor: pointer;
}

.cs-ability-item.rollable:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  transform: scale(1.02);
}

.cs-ability-abbr {
  font-size: 10px;
  font-weight: bold;
  color: #888;
}

.cs-ability-score {
  font-size: 16px;
  font-weight: bold;
  color: #e0e0e0;
}

.cs-ability-mod {
  font-size: 12px;
  color: #a78bfa;
}

/* Saves List */
.cs-saves-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.cs-save-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.cs-save-item.rollable {
  cursor: pointer;
}

.cs-save-item.rollable:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
}

.cs-proficiency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #666;
}

.cs-proficiency-dot.proficient {
  background: #22c55e;
  border-color: #16a34a;
}

.cs-save-name {
  font-size: 11px;
  color: #888;
  flex: 1;
}

.cs-save-mod {
  font-size: 12px;
  font-weight: bold;
  color: #a78bfa;
}

/* Skills List */
.cs-skills-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-skill-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.cs-skill-item.rollable {
  cursor: pointer;
}

.cs-skill-item.rollable:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
}

.cs-skill-name {
  font-size: 11px;
  color: #e0e0e0;
  flex: 1;
}

.cs-skill-ability {
  font-size: 9px;
  color: #666;
}

.cs-skill-mod {
  font-size: 12px;
  font-weight: bold;
  color: #a78bfa;
  min-width: 30px;
  text-align: right;
}

/* Currency Grid */
.cs-currency-grid {
  display: flex;
  gap: 10px;
}

.cs-currency-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 4px;
}

.cs-currency-label {
  font-size: 10px;
  font-weight: bold;
  color: #eab308;
}

.cs-currency-value {
  font-size: 14px;
  font-weight: bold;
  color: #fde047;
}

/* Inventory List */
.cs-inventory-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-inventory-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.cs-inventory-item.equipped {
  background: rgba(34, 197, 94, 0.1);
  border-left: 2px solid #22c55e;
}

.cs-item-icon {
  color: #22c55e;
  font-weight: bold;
}

.cs-item-name {
  flex: 1;
  color: #e0e0e0;
  font-size: 12px;
}

.cs-item-qty {
  font-size: 11px;
  color: #888;
}

/* Detail List */
.cs-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-detail-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
}

.cs-detail-item:last-child {
  border-bottom: none;
}

.cs-detail-label {
  color: #888;
  font-size: 11px;
}

.cs-detail-value {
  color: #e0e0e0;
  font-size: 12px;
}

/* Personality Items */
.cs-personality-item {
  margin-bottom: 10px;
}

.cs-personality-label {
  font-size: 10px;
  font-weight: bold;
  color: #7c3aed;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cs-personality-value {
  font-size: 12px;
  color: #a8b5c9;
  line-height: 1.4;
}

/* Conditions */
.cs-conditions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-condition-badge {
  padding: 4px 8px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  font-size: 11px;
  color: #f87171;
}

/* Empty text placeholder */
.cs-empty-text {
  color: #666;
  font-style: italic;
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* ========================================
 * Context-Adaptive Side Panel Styles
 * ======================================== */

/* Side Panel Base - now uses flex to share space with main content */
.side-panel {
  width: 350px;
  min-width: 280px;
  max-width: 450px;
  height: 100%;
  background: var(--background-dark, #1a1a1a);
  border-left: 2px solid var(--accent-color, #7c3aed);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.3s ease, margin 0.3s ease;
}

.side-panel.hidden {
  display: none;
}

.side-panel.collapsed {
  width: 60px;
}

.side-panel.collapsed .side-panel-content,
.side-panel.collapsed .sp-tab-nav {
  display: none;
}

.side-panel.collapsed .side-panel-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Panel Header */
.side-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--background-lighter, #2d2d2d);
  border-bottom: 1px solid var(--accent-color, #7c3aed);
  min-height: 40px;
}

.side-panel-collapse-toggle {
  background: none;
  border: none;
  color: var(--accent-color, #7c3aed);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
  transition: background 0.2s;
}

.side-panel-collapse-toggle:hover {
  background: rgba(124, 58, 237, 0.2);
}

.side-panel-title {
  flex: 1;
  color: var(--accent-color, #7c3aed);
  font-weight: bold;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  text-transform: uppercase;
}

.side-panel-close {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.side-panel-close:hover {
  color: var(--text-primary, #e0e0e0);
}

/* Side Panel Tab Navigation */
.sp-tab-nav {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.2);
}

.sp-tab-btn {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 3px;
  color: #888;
  font-size: 11px;
  font-family: 'Courier New', monospace;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.sp-tab-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #e0e0e0;
}

.sp-tab-btn.active {
  background: rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  color: #a78bfa;
  font-weight: bold;
}

/* Side Panel Content */
.side-panel-content {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--text-primary, #e0e0e0);
}

/* Tab Content */
.sp-tab-content {
  display: block;
}

.sp-tab-content.hidden {
  display: none;
}

/* Progress Section */
.sp-progress-section {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
}

.sp-progress-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.sp-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  transition: width 0.3s ease;
  border-radius: 4px;
}

.sp-progress-text {
  font-size: 11px;
  color: #888;
  text-align: center;
  display: block;
}

/* Sections */
.sp-section {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(124, 58, 237, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 6px;
}

.sp-section-header {
  color: #7c3aed;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

/* Choices List */
.sp-choices-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-choice-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border-left: 3px solid transparent;
}

.sp-choice-item.set {
  background: rgba(34, 197, 94, 0.1);
  border-left-color: #22c55e;
}

.sp-choice-label {
  font-size: 11px;
  color: #888;
  min-width: 80px;
}

.sp-choice-value {
  flex: 1;
  font-size: 12px;
  color: #e0e0e0;
}

.sp-choice-item.set .sp-choice-value {
  color: #4ade80;
  font-weight: 500;
}

.sp-choice-check {
  color: #22c55e;
  font-weight: bold;
}

/* Selection Grid */
.sp-selection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.sp-selection-item {
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.sp-selection-item:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  transform: scale(1.02);
}

.sp-selection-item.selected {
  background: rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
}

.sp-selection-name {
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
}

/* Option Grid for Creation Panel */
.sp-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-option-chip {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 14px;
  font-size: 11px;
  color: #c0c0c0;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-option-chip:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  color: #fff;
  transform: translateY(-1px);
}

.sp-option-chip.selected {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #4ade80;
  font-weight: 500;
}

.sp-option-chip.selecting {
  animation: pulse-select 0.3s ease;
}

@keyframes pulse-select {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); background: rgba(124, 58, 237, 0.5); }
  100% { transform: scale(1); }
}

/* Selected Badge in Section Header */
.sp-selected-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid #22c55e;
  border-radius: 10px;
  font-size: 10px;
  font-weight: normal;
  color: #4ade80;
  text-transform: none;
}

/* Progress List */
.sp-progress-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-progress-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #888;
  padding: 4px 0;
}

.sp-progress-item.done {
  color: #4ade80;
}

.sp-progress-check {
  width: 16px;
  text-align: center;
}

/* Hint Text */
.sp-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(124, 58, 237, 0.2);
  font-size: 10px;
  color: #666;
  text-align: center;
  font-style: italic;
}

/* Compact Selection Grid for "All at Once" Panel */
.sp-compact-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.sp-compact-grid .sp-selection-item {
  padding: 6px 8px;
  font-size: 11px;
}

/* Name Input Section */
.sp-name-section {
  margin-bottom: 12px;
}

.sp-name-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 6px;
  color: #e0e0e0;
  transition: all 0.2s;
}

.sp-name-input:focus {
  outline: none;
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.3);
}

.sp-name-input::placeholder {
  color: #888;
}

/* Section Header with Check Mark */
.sp-check {
  color: #22c55e;
  margin-left: 8px;
  font-weight: bold;
}

/* Loading Text */
.sp-loading-text {
  color: #888;
  font-size: 11px;
  text-align: center;
  padding: 20px;
}

/* Empty Text */
.sp-empty-text {
  color: #666;
  font-size: 11px;
  text-align: center;
  padding: 12px;
}

/* Race/Class/Background Selection Sections */
.sp-race-selection,
.sp-class-selection,
.sp-background-selection {
  margin-bottom: 12px;
}

/* Ability Method Toggle */
.sp-ability-method-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.sp-method-btn {
  flex: 1;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 4px;
  color: #888;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-method-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  color: #e0e0e0;
}

.sp-method-btn.active {
  background: rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  color: #a78bfa;
  font-weight: bold;
}

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

/* Action Section */
.sp-action-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(124, 58, 237, 0.2);
}

.sp-create-btn {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-create-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.sp-create-btn:disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}

/* Preview Section */
.sp-preview {
  padding: 12px;
}

.sp-preview-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

.sp-preview-name {
  font-size: 18px;
  font-weight: bold;
  color: #ffd700;
  display: block;
  margin-bottom: 4px;
}

.sp-preview-summary {
  font-size: 13px;
  color: #a78bfa;
}

.sp-preview-section {
  margin-bottom: 16px;
}

.sp-preview-section-header {
  color: #10b981;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.sp-trait-item,
.sp-feature-item {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 2px solid #10b981;
  margin-bottom: 6px;
  border-radius: 0 4px 4px 0;
}

.sp-trait-name,
.sp-feature-name {
  font-weight: 600;
  color: #10b981;
  font-size: 12px;
  margin-bottom: 2px;
}

.sp-trait-desc,
.sp-feature-desc {
  color: #888;
  font-size: 11px;
  line-height: 1.4;
}

.sp-empty-preview {
  padding: 40px 20px;
  text-align: center;
  color: #666;
  font-style: italic;
}

/* Quick Reference */
.sp-quick-ref {
  padding: 8px;
}

.sp-vital-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.sp-hp-large,
.sp-ac-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.sp-hp-large {
  border: 2px solid #22c55e;
}

.sp-ac-large {
  border: 2px solid #3b82f6;
}

.sp-hp-current {
  font-size: 28px;
  font-weight: bold;
  color: #4ade80;
}

.sp-hp-divider {
  font-size: 18px;
  color: #666;
  margin: 0 2px;
}

.sp-hp-max {
  font-size: 18px;
  color: #888;
}

.sp-hp-label,
.sp-ac-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #888;
  margin-top: 4px;
}

.sp-ac-value {
  font-size: 28px;
  font-weight: bold;
  color: #60a5fa;
}

.sp-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-quick-btn {
  padding: 12px 16px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.sp-quick-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
}

/* Skills List (Side Panel variant) */
.sp-skills-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-skill-item.rollable:hover {
  background: rgba(124, 58, 237, 0.2);
}

.sp-skill-name {
  color: #e0e0e0;
  font-size: 12px;
}

.sp-skill-mod {
  color: #a78bfa;
  font-weight: bold;
  font-size: 14px;
}

/* Combat Stats */
.sp-combat-stats {
  padding: 8px;
}

.sp-hp-bar-large {
  position: relative;
  height: 36px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 2px solid #22c55e;
}

.sp-hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.3s ease;
}

.sp-hp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.sp-combat-vitals {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}

.sp-vital-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.sp-vital-value {
  font-size: 20px;
  font-weight: bold;
  color: #a78bfa;
}

.sp-vital-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #888;
}

/* Action Economy */
.sp-action-economy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.sp-action-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-action-slot.used {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.5;
}

.sp-slot-icon {
  font-size: 18px;
  margin-bottom: 4px;
}

.sp-slot-label {
  font-size: 9px;
  text-transform: uppercase;
  color: #888;
}

/* Conditions (Side Panel variant) */
.sp-conditions {
  margin-top: 16px;
}

.sp-conditions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-condition-badge {
  padding: 4px 10px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 4px;
  font-size: 11px;
  color: #f87171;
}

/* Actions List */
.sp-actions-list {
  padding: 8px;
}

.sp-attack-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-attack-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
}

.sp-attack-name {
  color: #e0e0e0;
  font-size: 13px;
}

.sp-attack-mod {
  color: #f87171;
  font-weight: bold;
  font-size: 14px;
}

.sp-action-btn {
  width: 100%;
  padding: 10px 16px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 6px;
  text-align: left;
}

.sp-action-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
}

/* Recovery Section */
.sp-recovery {
  padding: 8px;
}

.sp-hp-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin-bottom: 16px;
}

.sp-hp-status .sp-hp-label {
  font-size: 10px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}

.sp-hp-status .sp-hp-value {
  font-size: 24px;
  font-weight: bold;
  color: #4ade80;
}

.sp-hp-missing {
  font-size: 12px;
  color: #f87171;
  margin-top: 4px;
}

.sp-rest-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-rest-option {
  padding: 16px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-rest-option:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
}

.sp-rest-title {
  font-weight: bold;
  color: #a78bfa;
  font-size: 14px;
  margin-bottom: 4px;
}

.sp-rest-desc {
  font-size: 11px;
  color: #888;
}

/* Inventory (Side Panel variant) */
.sp-inventory {
  padding: 8px;
}

.sp-currency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 6px;
  margin-bottom: 16px;
}

.sp-currency-label {
  color: #888;
  font-size: 11px;
}

.sp-currency-value {
  color: #fde047;
  font-weight: bold;
  font-size: 16px;
}

.sp-items-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.sp-item-name {
  color: #e0e0e0;
  font-size: 12px;
}

.sp-item-qty {
  color: #888;
  font-size: 11px;
}

/* Notes Section */
.sp-notes {
  padding: 8px;
}

.sp-notes-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 6px;
  color: #e0e0e0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  resize: vertical;
}

.sp-notes-textarea:focus {
  outline: none;
  border-color: #7c3aed;
}

.sp-notes-textarea::placeholder {
  color: #666;
}

/* Placeholder text */
.sp-placeholder {
  color: #666;
  font-style: italic;
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

.sp-empty-text {
  color: #666;
  font-style: italic;
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* Creation panel styles removed - using simplified progress tracker */

/* ========================================
 * Floating Reopen Button for Side Panel
 * ======================================== */

.side-panel-reopen-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  border: 2px solid var(--accent-color, #7c3aed);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
  padding: 0;
  animation: fabSlideIn 0.4s ease-out;
}

.side-panel-reopen-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.side-panel-reopen-btn:active {
  transform: scale(0.95);
}

.side-panel-reopen-btn.hidden {
  display: none;
}

@keyframes fabSlideIn {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Subtle pulse effect to draw attention */
.side-panel-reopen-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  border: 2px solid var(--accent-color, #7c3aed);
  animation: fabPulse 2s ease-out infinite;
  opacity: 0;
}

@keyframes fabPulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .side-panel-reopen-btn {
    width: 48px;
    height: 48px;
    bottom: 16px;
    right: 16px;
  }
}

/* ========================================
 * Clickable Elements in Narrative
 * ======================================== */

.clickable {
  color: #4af;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  transition: color 0.2s, background-color 0.2s;
}

.clickable:hover {
  color: #6cf;
  background-color: rgba(68, 170, 255, 0.15);
  text-decoration-style: solid;
}

/* Character Creation Choice Clickables */
.creation-choice {
  color: #ffd700;
  background-color: rgba(255, 215, 0, 0.1);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid rgba(255, 215, 0, 0.3);
  font-weight: 500;
  transition: all 0.2s;
}

.creation-choice:hover {
  color: #fff;
  background-color: rgba(255, 215, 0, 0.3);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* Selected state for multi-select creation choices */
.clickable.selected,
.creation-choice.selected {
  background-color: rgba(124, 58, 237, 0.4);
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
  color: #fff;
}

.clickable.selected:hover,
.creation-choice.selected:hover {
  background-color: rgba(124, 58, 237, 0.5);
  border-color: #9061f9;
}

/* Type-specific creation choice colors */
/* Race choices - Purple neon */
.creation-choice[data-choice-type="race"] {
  color: #c4b5fd;
  background-color: rgba(139, 92, 246, 0.15);
  border-color: rgba(167, 139, 250, 0.5);
}
.creation-choice[data-choice-type="race"]:hover {
  color: #fff;
  background-color: rgba(139, 92, 246, 0.35);
  border-color: rgba(167, 139, 250, 0.8);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

/* Class choices - Red neon */
.creation-choice[data-choice-type="class"] {
  color: #fca5a5;
  background-color: rgba(239, 68, 68, 0.15);
  border-color: rgba(248, 113, 113, 0.5);
}
.creation-choice[data-choice-type="class"]:hover {
  color: #fff;
  background-color: rgba(239, 68, 68, 0.35);
  border-color: rgba(248, 113, 113, 0.8);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

/* Background choices - Amber/Gold neon */
.creation-choice[data-choice-type="background"] {
  color: #fcd34d;
  background-color: rgba(245, 158, 11, 0.15);
  border-color: rgba(251, 191, 36, 0.5);
}
.creation-choice[data-choice-type="background"]:hover {
  color: #fff;
  background-color: rgba(245, 158, 11, 0.35);
  border-color: rgba(251, 191, 36, 0.8);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Selection Tray for multi-select */
.selection-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid #7c3aed;
  border-radius: 8px;
  margin-top: 8px;
}

.selection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #7c3aed;
  color: white;
  border-radius: 12px;
  font-size: 12px;
}

.chip-remove {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0 2px;
  font-size: 14px;
  line-height: 1;
}

.chip-remove:hover {
  color: white;
}

.send-selections-btn {
  padding: 6px 16px;
  background: #7c3aed;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.send-selections-btn:hover {
  background: #9061f9;
}

/* ========================================
 * Selection Chip Row (Race/Class/Background)
 * Horizontal flex-wrapped chip layout for single-select
 * ======================================== */

.selection-chip-row {
  margin: 16px 0;
  padding: 16px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
}

.selection-chip-row .selection-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.selection-chip-row .selection-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
}

.choice-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 20px;
  color: #e0e0e0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.choice-chip:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: #ffd700;
  color: #ffd700;
  transform: translateY(-1px);
}

.choice-chip .chip-badge {
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 9px;
  border-radius: 8px;
  text-transform: uppercase;
  background: rgba(167, 139, 250, 0.3);
  color: #a78bfa;
}

/* Tooltip Styling - applies to both .tooltip and .terminal-tooltip */
.tooltip,
.terminal-tooltip {
  position: fixed;
  background-color: rgba(20, 20, 30, 0.98);
  border: 1px solid #7c3aed;
  border-radius: 6px;
  padding: 10px 14px;
  max-width: 280px;
  z-index: 1000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-size: 0.9em;
  line-height: 1.4;
  pointer-events: none;
  color: #e0e0e0;
}

.tooltip strong,
.terminal-tooltip strong {
  color: #ffd700;
  display: block;
  margin-bottom: 4px;
}

.tooltip em,
.terminal-tooltip em {
  color: #a78bfa;
  font-style: normal;
  font-size: 0.9em;
}

.tooltip br,
.terminal-tooltip br {
  margin-bottom: 2px;
}

.hint-source {
  margin-top: 6px;
  font-size: 0.85em;
  color: #888;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}

/* ========================================
 * Powers Tab - Spells and Class Resources
 * ======================================== */

.sp-powers {
  padding: 8px;
}

.sp-powers-empty {
  color: #666;
  font-style: italic;
  font-size: 12px;
  text-align: center;
  padding: 20px;
}

/* Class Resources Section */
.sp-resources-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.sp-resources-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.sp-resource-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
}

.sp-resource-label {
  color: #a78bfa;
  font-size: 12px;
  font-weight: 500;
}

.sp-resource-pips {
  letter-spacing: 2px;
  font-size: 14px;
}

.sp-resource-pips .pip-filled {
  color: #a78bfa;
}

.sp-resource-pips .pip-empty {
  color: #444;
}

.sp-resource-value {
  color: #e0e0e0;
  font-size: 12px;
  font-weight: bold;
}

/* Spell Slots Display */
.sp-spell-slots {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.sp-slot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 4px;
}

.sp-slot-level {
  color: #60a5fa;
  font-size: 11px;
  min-width: 60px;
}

.sp-slot-pips {
  letter-spacing: 2px;
  font-size: 13px;
}

.sp-slot-pips .pip-filled {
  color: #60a5fa;
}

.sp-slot-pips .pip-empty {
  color: #333;
}

/* Spells List */
.sp-spells-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-spell-level-header {
  color: #888;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 4px;
}

.sp-spell-level-header:first-child {
  margin-top: 0;
}

.sp-spell-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  border: 1px solid transparent;
}

.sp-spell-item:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
}

.sp-spell-name {
  color: #e0e0e0;
  font-size: 12px;
}

.sp-spell-meta {
  color: #666;
  font-size: 10px;
}

.sp-spell-concentration {
  color: #fbbf24;
  font-size: 10px;
  margin-left: 8px;
}

.sp-spell-ritual {
  color: #34d399;
  font-size: 10px;
  margin-left: 4px;
}

/* Empty State Hint */
.sp-empty-hint {
  color: #666;
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 16px 8px;
}

/* ========================================
 * Side Panel Creation Sections
 * Collapsible sections for non-linear character creation
 * ======================================== */

.sp-creation-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.sp-section-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.sp-section-header-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sp-section-status {
  font-size: 12px;
  width: 16px;
  text-align: center;
}

.sp-creation-section.completed .sp-section-status {
  color: #34d399;
}

.sp-creation-section.locked .sp-section-status {
  color: #888;
}

/* Active section - current step highlighted */
.sp-creation-section.active {
  background: rgba(97, 175, 239, 0.1);
  border-left: 3px solid #61afef;
  border-radius: 4px;
}

.sp-creation-section.active .sp-section-status {
  color: #61afef;
  font-weight: bold;
}

.sp-creation-section.active .sp-section-label {
  color: #61afef;
}

.sp-creation-section.active .sp-section-value {
  color: #61afef;
}

.sp-creation-section.active .sp-section-header-row {
  background: rgba(97, 175, 239, 0.05);
}

.sp-section-label {
  font-size: 12px;
  font-weight: 600;
  color: #e0e0e0;
  flex: 1;
}

.sp-section-value {
  font-size: 11px;
  color: #888;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sp-creation-section.completed .sp-section-value {
  color: #34d399;
}

.sp-section-toggle {
  font-size: 10px;
  color: #666;
  transition: transform 0.2s;
}

/* ========================================
 * Progressive Reveal Animations
 * Smooth animations for character creation flow
 * ======================================== */

/* Keyframes for section reveal */
@keyframes sectionReveal {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    max-height: 0;
  }
  50% {
    opacity: 0.7;
    max-height: 100px;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    max-height: 500px;
  }
}

@keyframes unlockGlow {
  0% {
    box-shadow: 0 0 0 rgba(255, 215, 0, 0);
    border-color: rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.6);
  }
  100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.3);
  }
}

@keyframes completePulse {
  0% {
    box-shadow: 0 0 0 rgba(52, 211, 153, 0);
  }
  50% {
    box-shadow: 0 0 20px rgba(52, 211, 153, 0.5);
  }
  100% {
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.2);
  }
}

@keyframes checkmarkBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Section base transition */
.sp-creation-section {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease-out, box-shadow 0.4s ease-out;
}

/* Progressive reveal for newly available sections */
.sp-creation-section.revealing {
  animation: sectionReveal 0.5s ease-out forwards;
}

/* Unlock animation when section becomes available */
.sp-creation-section.just-unlocked {
  animation: unlockGlow 0.8s ease-out forwards;
}

/* Completion animation */
.sp-creation-section.just-completed {
  animation: completePulse 0.6s ease-out forwards;
}

.sp-creation-section.just-completed .sp-section-status {
  animation: checkmarkBounce 0.4s ease-out forwards;
}

/* Smooth expand/collapse for options */
.sp-section-options {
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  max-height: 300px;
  overflow-y: auto;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.2s ease-out;
}

.sp-section-options.collapsing {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
}

/* Stagger animation delay for multiple sections */
.sp-creation-section:nth-child(1) { animation-delay: 0ms; }
.sp-creation-section:nth-child(2) { animation-delay: 50ms; }
.sp-creation-section:nth-child(3) { animation-delay: 100ms; }
.sp-creation-section:nth-child(4) { animation-delay: 150ms; }
.sp-creation-section:nth-child(5) { animation-delay: 200ms; }
.sp-creation-section:nth-child(6) { animation-delay: 250ms; }
.sp-creation-section:nth-child(7) { animation-delay: 300ms; }
.sp-creation-section:nth-child(8) { animation-delay: 350ms; }

/* Locked section styling with transition */
.sp-creation-section.locked {
  opacity: 0.5;
  transform: scale(0.98);
  filter: grayscale(30%);
  transition: all 0.4s ease-out;
}

.sp-creation-section.locked .sp-section-header-row {
  cursor: not-allowed;
}

.sp-creation-section.locked:hover {
  opacity: 0.6;
}

/* Completed section enhanced styling */
.sp-creation-section.completed {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.15);
}

/* Available/pending section styling */
.sp-creation-section:not(.locked):not(.completed) {
  border-color: rgba(255, 215, 0, 0.25);
}

.sp-creation-section:not(.locked):not(.completed):hover {
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.15);
}

/* ========================================
 * Sidebar Scrollable Cards Container
 * For stylish race/class/background cards
 * ======================================== */

.sp-scrollable-cards {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 4px;
  margin: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 215, 0, 0.4) rgba(0, 0, 0, 0.2);
}

.sp-scrollable-cards::-webkit-scrollbar {
  width: 6px;
}

.sp-scrollable-cards::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.sp-scrollable-cards::-webkit-scrollbar-thumb {
  background: rgba(255, 215, 0, 0.4);
  border-radius: 3px;
}

.sp-scrollable-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 215, 0, 0.6);
}

/* Sidebar grid variant - compact for sidebar width */
.sidebar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* Sidebar-specific card adjustments - Terminal Style */
/* Using button.sidebar-card for higher specificity than user-agent stylesheet */
button.sidebar-card,
.sidebar-card {
  /* Button reset for browser compatibility */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: rgba(20, 20, 30, 0.6) !important;
  background-image: none !important;
  border: 1px solid #444;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;

  /* Existing styles */
  min-height: 45px;
  font-size: 0.9em;
  font-family: 'Courier New', Consolas, monospace;
  border-radius: 0;
  transition: all 0.15s ease;
  position: relative;
  color: #e0e0e0;
  text-align: left;
  width: 100%;
  display: block;
  padding: 8px 10px;
}

.sidebar-card::before {
  content: '>';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffd700;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 12px;
}

.sidebar-card:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: #ffd700;
}

.sidebar-card:hover::before {
  opacity: 1;
}

/* Race cards - Purple neon */
button.sidebar-card.race-card,
.sidebar-card.race-card {
  border: 1px solid rgba(167, 139, 250, 0.6) !important;
  color: #c4b5fd !important;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.1) !important;
}
button.sidebar-card.race-card:hover,
.sidebar-card.race-card:hover {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: rgba(167, 139, 250, 0.8) !important;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4) !important;
}
.sidebar-card.race-card .race-name {
  color: #c4b5fd;
}

/* Class cards - Red neon */
button.sidebar-card.class-card,
.sidebar-card.class-card {
  border: 1px solid rgba(248, 113, 113, 0.6) !important;
  color: #fca5a5 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1) !important;
}
button.sidebar-card.class-card:hover,
.sidebar-card.class-card:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(248, 113, 113, 0.8) !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}
.sidebar-card.class-card .class-name {
  color: #fca5a5;
}

.sidebar-card .race-name,
.sidebar-card .class-name {
  font-size: 12px;
  padding-left: 14px;
  color: #e0e0e0;
  font-weight: normal;
}

.sidebar-card .race-ability-bonus {
  font-size: 10px;
  padding-left: 14px;
  color: #888;
}

.sidebar-card .race-stats {
  font-size: 9px;
  padding-left: 14px;
  color: #666;
}

.sidebar-card .race-traits-preview {
  font-size: 9px;
  padding-left: 14px;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-card .class-hit-die {
  width: 24px;
  height: 24px;
  font-size: 10px;
  border-radius: 0;
  margin-left: 14px;
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid #ffd700;
}

.sidebar-card .class-primary-ability {
  font-size: 10px;
  padding-left: 14px;
  color: #888;
}

.sidebar-card .class-armor-preview {
  font-size: 9px;
  padding-left: 14px;
  color: #666;
}

/* Preview highlight for first-click - Terminal Style */
.sidebar-card.previewed {
  background: rgba(255, 215, 0, 0.12);
  border-color: #ffd700;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.sidebar-card.previewed::before {
  opacity: 1;
}

/* Selected state - Terminal Style */
.sidebar-card.selected {
  background: rgba(0, 255, 0, 0.1);
  border-color: #0f0;
}

.sidebar-card.selected::before {
  content: '*';
  color: #0f0;
  opacity: 1;
}

/* Background Card Styling - Amber/Gold neon */
button.background-card,
.background-card {
  /* Button reset for browser compatibility */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: rgba(245, 158, 11, 0.1) !important;
  background-image: none !important;
  border: 1px solid rgba(251, 191, 36, 0.6) !important;
  outline: none !important;
  box-shadow: none !important;

  /* Existing styles */
  display: block;
  width: 100%;
  padding: 8px 10px;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
  min-height: 45px;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 0.9em;
  color: #fcd34d !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.background-card::before {
  content: '>';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: #ffd700;
  opacity: 0;
  transition: opacity 0.15s;
  font-size: 12px;
}

button.background-card:hover,
.background-card:hover {
  background: rgba(245, 158, 11, 0.25) !important;
  border-color: rgba(251, 191, 36, 0.8) !important;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}

.background-card:hover::before {
  opacity: 1;
}

.background-card.selected {
  background: rgba(0, 255, 0, 0.1);
  border-color: #0f0;
}

.background-card.selected::before {
  content: '*';
  color: #0f0;
  opacity: 1;
}

.background-card.previewed {
  background: rgba(255, 215, 0, 0.12);
  border-color: #ffd700;
  box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.background-card.previewed::before {
  opacity: 1;
}

.background-name {
  font-size: 12px;
  font-weight: normal;
  color: #e0e0e0;
  margin-bottom: 2px;
  padding-left: 14px;
  font-family: inherit;
}

.background-skills {
  font-size: 10px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 14px;
}

.background-feature {
  font-size: 10px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 14px;
}

/* Background grid */
.background-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* ========================================
 * Preview Panel for First-Click Preview
 * Shows detailed info before confirmation
 * ======================================== */

.sp-preview-container {
  margin-top: 8px;
}

.sp-preview-panel {
  background: #0a0a0a;
  border: 1px solid #ffd700;
  border-radius: 0;
  padding: 12px;
  animation: previewSlideIn 0.15s ease-out;
  font-family: 'Courier New', Consolas, monospace;
  position: relative;
}

.sp-preview-panel::before {
  content: '+-- DETAILS ';
  position: absolute;
  top: -9px;
  left: 8px;
  background: #0a0a0a;
  padding: 0 4px;
  font-size: 10px;
  color: #ffd700;
}

@keyframes previewSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sp-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #444;
}

.sp-preview-title {
  font-size: 13px;
  font-weight: normal;
  color: #ffd700;
  font-family: inherit;
}

.sp-preview-subtitle {
  font-size: 10px;
  color: #888;
  font-family: inherit;
}

.sp-preview-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 8px;
}

.sp-preview-stat {
  font-size: 11px;
  color: #e0e0e0;
}

.sp-preview-stat strong {
  color: #888;
}

.sp-preview-traits {
  font-size: 11px;
  color: #e0e0e0;
  margin-bottom: 10px;
  line-height: 1.4;
}

.sp-preview-traits strong {
  color: #888;
}

.sp-preview-proficiencies {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: #c0c0c0;
  margin-bottom: 10px;
}

.sp-preview-proficiencies strong {
  color: #888;
}

.sp-preview-feature {
  font-size: 11px;
  color: #e0e0e0;
  margin-bottom: 10px;
}

.sp-preview-feature strong {
  color: #a78bfa;
  display: block;
  margin-bottom: 4px;
}

.sp-preview-feature p {
  margin: 0;
  color: #888;
  font-size: 10px;
  line-height: 1.4;
}

.sp-confirm-btn {
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid #0f0;
  border-radius: 0;
  color: #0f0;
  font-size: 11px;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Courier New', Consolas, monospace;
}

.sp-confirm-btn::before {
  content: '[ ';
}

.sp-confirm-btn::after {
  content: ' ]';
}

.sp-confirm-btn:hover {
  background: rgba(0, 255, 0, 0.15);
  color: #0f0;
  transform: none;
  box-shadow: 0 0 8px rgba(0, 255, 0, 0.3);
}

/* Option chips grid */
.sp-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-option-chip {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 16px;
  color: #e0e0e0;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-option-chip:hover {
  background: rgba(255, 215, 0, 0.15);
  border-color: rgba(255, 215, 0, 0.4);
}

.sp-option-chip.selected {
  background: rgba(255, 215, 0, 0.2);
  border-color: #ffd700;
  color: #ffd700;
}

/* Locked message */
.sp-locked-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: #888;
  font-size: 11px;
  font-style: italic;
}

.sp-lock-icon {
  font-size: 14px;
}

/* Ability method buttons */
.sp-ability-method-btns {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.sp-method-btn {
  flex: 1;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 6px;
  color: #e0e0e0;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-method-btn:hover {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.5);
}

.sp-method-btn.active {
  background: rgba(124, 58, 237, 0.3);
  border-color: #7c3aed;
  color: #c4b5fd;
}

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

.sp-ability-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.sp-ability-score-item .sp-ability-name {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
}

.sp-ability-score-item .sp-ability-value {
  font-size: 16px;
  font-weight: 600;
  color: #e0e0e0;
}

/* Point Buy Picker */
.sp-point-buy-picker {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.sp-point-buy-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-points-label {
  font-size: 12px;
  color: #888;
}

.sp-points-value {
  font-size: 18px;
  font-weight: 700;
  color: #4ade80;
}

.sp-points-value.over {
  color: #f87171;
}

.sp-points-total {
  font-size: 12px;
  color: #666;
}

.sp-point-buy-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sp-point-buy-row {
  display: grid;
  grid-template-columns: 40px 32px 40px 32px 40px;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sp-ability-label {
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  text-align: right;
}

.sp-point-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.2);
  color: #e0e0e0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.sp-point-btn:hover:not(.disabled) {
  background: rgba(124, 58, 237, 0.4);
  border-color: #7c3aed;
}

.sp-point-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.sp-ability-score-value {
  font-size: 18px;
  font-weight: 700;
  color: #e0e0e0;
  text-align: center;
  min-width: 32px;
}

.sp-ability-mod {
  font-size: 12px;
  color: #4ade80;
  text-align: left;
}

.sp-point-buy-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
}

.sp-confirm-btn {
  padding: 10px 24px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-confirm-btn:hover:not(.disabled) {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.sp-confirm-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Ability Assignment Grid (cantrip-like pattern) */
.sp-ability-assignment-grid {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.sp-assignment-hint {
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-bottom: 12px;
  font-style: italic;
}

.sp-unassigned-values {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-values-label {
  font-size: 11px;
  color: #888;
  margin-right: 4px;
}

.sp-unassigned-value {
  padding: 8px 14px;
  background: rgba(124, 58, 237, 0.2);
  border: 2px solid rgba(124, 58, 237, 0.4);
  border-radius: 6px;
  color: #a78bfa;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 40px;
  text-align: center;
}

.sp-unassigned-value:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(124, 58, 237, 0.6);
  transform: scale(1.05);
}

.sp-unassigned-value.selected {
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  border-color: #a78bfa;
  color: white;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
  transform: scale(1.1);
}

.sp-all-assigned {
  font-size: 11px;
  color: #4ade80;
  font-style: italic;
}

.sp-ability-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sp-ability-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.sp-ability-slot:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
}

.sp-ability-slot.empty {
  border-style: dashed;
}

.sp-ability-slot.available {
  border-color: rgba(124, 58, 237, 0.5);
  background: rgba(124, 58, 237, 0.1);
  animation: pulse-available 1.5s infinite;
}

@keyframes pulse-available {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.4); }
  50% { box-shadow: 0 0 8px 2px rgba(124, 58, 237, 0.3); }
}

.sp-ability-slot.assigned {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.4);
  border-style: solid;
}

.sp-ability-slot.primary {
  border-color: rgba(250, 204, 21, 0.5);
}

.sp-ability-slot.primary.assigned {
  background: rgba(250, 204, 21, 0.1);
  border-color: rgba(250, 204, 21, 0.5);
}

.sp-ability-abbrev {
  font-size: 10px;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.sp-ability-slot .sp-ability-score {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.sp-ability-slot.empty .sp-ability-score {
  color: #444;
}

.sp-racial-bonus {
  font-size: 10px;
  color: #4ade80;
  margin-top: 2px;
}

.sp-total-score {
  font-size: 11px;
  color: #888;
}

.sp-ability-slot .sp-ability-mod {
  font-size: 11px;
  color: #a78bfa;
  margin-top: 2px;
}

.sp-primary-badge {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 10px;
  color: #facc15;
}

.sp-assignment-progress {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #888;
}

/* Skills grid */
.sp-skill-count,
.sp-spell-count {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
}

.sp-skills-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-skill-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-skill-checkbox:hover {
  background: rgba(124, 58, 237, 0.1);
}

.sp-skill-checkbox.selected {
  background: rgba(124, 58, 237, 0.2);
  border-color: rgba(124, 58, 237, 0.4);
}

.sp-skill-checkbox .sp-checkbox {
  font-size: 14px;
  color: #888;
}

.sp-skill-checkbox.selected .sp-checkbox {
  color: #7c3aed;
}

.sp-skill-checkbox .sp-skill-name {
  font-size: 11px;
  color: #e0e0e0;
}

/* ========================================
 * Equipment Selection - Card-Based UI
 * Immersive D&D-themed equipment picking
 * ======================================== */

/* Equipment choice group container */
.sp-equipment-choice {
  margin-bottom: 16px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.08) 0%, rgba(0, 0, 0, 0.15) 100%);
  border: 1px solid rgba(255, 215, 0, 0.15);
  border-radius: 8px;
  animation: equipmentGroupReveal 0.3s ease-out;
}

.sp-equipment-choice:last-child {
  margin-bottom: 0;
}

@keyframes equipmentGroupReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Choice header with "OR" indicator */
.sp-equipment-choice-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.sp-choice-label {
  font-size: 11px;
  font-weight: 600;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sp-choice-hint {
  font-size: 10px;
  color: #888;
  font-style: italic;
}

/* Card grid for options */
.sp-equipment-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Single equipment card */
.sp-equipment-card {
  position: relative;
  padding: 10px;
  background: linear-gradient(145deg, rgba(30, 30, 40, 0.9) 0%, rgba(20, 20, 30, 0.95) 100%);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.25s ease-out;
  overflow: hidden;
}

.sp-equipment-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.25s ease-out;
}

.sp-equipment-card:hover {
  border-color: rgba(255, 215, 0, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sp-equipment-card:hover::before {
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.6) 50%, rgba(255, 215, 0, 0.3) 100%);
}

.sp-equipment-card.selected {
  border-color: #ffd700;
  background: linear-gradient(145deg, rgba(139, 69, 19, 0.2) 0%, rgba(30, 30, 40, 0.95) 100%);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15), inset 0 0 20px rgba(255, 215, 0, 0.05);
}

.sp-equipment-card.selected::before {
  background: linear-gradient(90deg, #ffd700 0%, #fff8dc 50%, #ffd700 100%);
}

/* Card option label (a), (b), etc */
.sp-card-option-label {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  font-weight: bold;
  color: #666;
  text-transform: uppercase;
}

.sp-equipment-card.selected .sp-card-option-label {
  color: #ffd700;
}

/* Card content layout */
.sp-card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Equipment icon */
.sp-card-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
}

/* Equipment item list */
.sp-card-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sp-card-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #c0c0c0;
  line-height: 1.3;
}

.sp-card-item-icon {
  font-size: 12px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.sp-card-item-name {
  flex: 1;
}

.sp-equipment-card.selected .sp-card-item {
  color: #e8dcc4;
}

/* Selection indicator checkmark */
.sp-card-check {
  position: absolute;
  bottom: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: transparent;
  transition: all 0.2s;
}

.sp-equipment-card.selected .sp-card-check {
  background: #ffd700;
  border-color: #ffd700;
  color: #1a1a2e;
  animation: checkPop 0.3s ease-out;
}

@keyframes checkPop {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* "OR" divider between cards */
.sp-equipment-or-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sp-equipment-or-divider::before {
  content: 'OR';
  position: absolute;
  font-size: 9px;
  font-weight: bold;
  color: #666;
  background: rgba(20, 20, 30, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 1px;
}

/* Compact mode for smaller panels */
@media (max-width: 350px) {
  .sp-equipment-cards {
    grid-template-columns: 1fr;
  }

  .sp-card-icon {
    font-size: 16px;
  }

  .sp-card-item {
    font-size: 10px;
  }
}

/* Legacy equipment styles (backwards compatibility) */
.sp-equipment-group {
  margin-bottom: 12px;
}

.sp-equipment-group:last-child {
  margin-bottom: 0;
}

.sp-group-label {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sp-equipment-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sp-equipment-option {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-equipment-option:hover {
  background: rgba(255, 215, 0, 0.1);
  border-color: rgba(255, 215, 0, 0.4);
}

.sp-equipment-option.selected {
  background: rgba(255, 215, 0, 0.2);
  border-color: #ffd700;
  color: #ffd700;
}

/* Spell grids for cantrips/spells */
.sp-spells-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-spell-option {
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-radius: 4px;
  color: #e0e0e0;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.sp-spell-option:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: rgba(124, 58, 237, 0.4);
}

.sp-spell-option.selected {
  background: rgba(124, 58, 237, 0.25);
  border-color: #7c3aed;
  color: #c4b5fd;
}

/* ========================================
 * Race & Class Selection Panels (Legacy Card Styles)
 * Note: New unified styles are in the "Unified Selection Panel" section below
 * These legacy styles are for backwards compatibility with old card classes
 * ======================================== */

/* Legacy Selection Grid - kept for any remaining old-style grids */
.race-grid,
.class-grid,
.background-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

/* Race Cards */
.race-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.race-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--category-color, #ffd700);
  opacity: 0;
  transition: opacity 0.2s;
}

.race-card:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.race-card:hover::before {
  opacity: 1;
}

.race-card.selected {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.race-card.selected::before {
  background: #7c3aed;
  opacity: 1;
}

.race-card.hidden {
  display: none;
}

/* Race Card Elements */
.race-category-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.race-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 6px;
  margin-top: 4px;
}

.race-ability-bonus {
  font-size: 11px;
  color: #4ade80;
  margin-bottom: 4px;
  font-weight: 500;
}

.race-stats {
  display: flex;
  gap: 10px;
  font-size: 10px;
  margin-bottom: 4px;
}

.race-speed {
  color: #60a5fa;
}

.race-size {
  color: #a78bfa;
}

.race-traits-preview {
  font-size: 10px;
  color: #666;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Class Cards */
.class-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.class-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--category-color, #ffd700);
  opacity: 0;
  transition: opacity 0.2s;
}

.class-card:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.class-card:hover::before {
  opacity: 1;
}

.class-card.selected {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.class-card.selected::before {
  background: #7c3aed;
  opacity: 1;
}

.class-card.hidden {
  display: none;
}

/* Class Card Header */
.class-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.class-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
}

.class-spellcaster-badge {
  font-size: 12px;
}

/* Class Card Elements */
.class-category-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.class-hit-die {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
  width: fit-content;
}

.class-primary-ability {
  font-size: 11px;
  color: #fbbf24;
  margin-bottom: 4px;
}

.class-proficiencies-preview,
.class-armor-preview {
  font-size: 10px;
  color: #666;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.spellcaster-badge {
  font-size: 12px;
  line-height: 1;
}

/* Background Cards */
.background-card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.background-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #fbbf24;
  opacity: 0;
  transition: opacity 0.2s;
}

.background-card:hover {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.background-card:hover::before {
  opacity: 1;
}

.background-card.selected {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  box-shadow: 0 0 12px rgba(124, 58, 237, 0.3);
}

.background-card.selected::before {
  background: #7c3aed;
  opacity: 1;
}

/* Background Card Elements */
.background-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 6px;
}

.background-skills {
  font-size: 11px;
  color: #8ec8e8;
  margin-bottom: 4px;
}

.background-feature {
  font-size: 10px;
  color: #a0a0c0;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Background Tooltip */
.background-tooltip h4 {
  color: #ffd700;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.background-tooltip .tooltip-row {
  margin-bottom: 4px;
  font-size: 12px;
}

.background-tooltip .feature-desc {
  font-size: 11px;
  color: #a0a0c0;
  margin-top: 8px;
  font-style: italic;
}

/* Selection Tooltip (Enhanced for Race/Class) */
.selection-tooltip {
  position: fixed;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid #7c3aed;
  border-radius: 8px;
  padding: 14px 16px;
  max-width: 320px;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
}

.tooltip-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffd700;
}

.tooltip-category {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.tooltip-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
  padding: 8px 0;
}

.tooltip-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tooltip-stat-label {
  font-size: 9px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.tooltip-stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #60a5fa;
}

.tooltip-ability-bonuses {
  margin-bottom: 10px;
}

.tooltip-ability-title {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tooltip-bonuses {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tooltip-bonus-chip {
  padding: 3px 8px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 4px;
  font-size: 11px;
  color: #4ade80;
  font-weight: 500;
}

.tooltip-traits {
  margin-bottom: 10px;
}

.tooltip-traits-title {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tooltip-trait-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tooltip-trait {
  font-size: 11px;
  color: #a8b5c9;
  padding-left: 8px;
  border-left: 2px solid #10b981;
}

.tooltip-trait-name {
  color: #10b981;
  font-weight: 500;
}

.tooltip-proficiencies {
  margin-bottom: 8px;
}

.tooltip-prof-title {
  font-size: 10px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tooltip-prof-list {
  font-size: 11px;
  color: #a8b5c9;
}

.tooltip-languages {
  font-size: 10px;
  color: #666;
  font-style: italic;
}

.tooltip-description {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
  margin-top: 8px;
}

/* Class-specific tooltip elements */
.tooltip-hit-die {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 600;
  margin-bottom: 8px;
}

.tooltip-saves {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.tooltip-save-chip {
  padding: 3px 8px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 4px;
  font-size: 10px;
  color: #fbbf24;
  text-transform: uppercase;
}

.tooltip-spellcasting {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 4px;
  margin-bottom: 8px;
}

.tooltip-spellcasting-icon {
  font-size: 14px;
}

.tooltip-spellcasting-text {
  font-size: 11px;
  color: #a78bfa;
}

/* Empty/Loading States */
.selection-empty {
  text-align: center;
  padding: 24px;
  color: #666;
  font-style: italic;
}

.selection-loading {
  text-align: center;
  padding: 24px;
  color: #888;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .race-grid,
  .class-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }

  .race-card,
  .class-card {
    padding: 10px;
  }

  .race-name,
  .class-name {
    font-size: 13px;
  }

  .selection-tooltip {
    max-width: 280px;
  }
}

/* ========================================
 * Equipment Selection Panel
 * Radio-style selection per equipment group
 * ======================================== */

.equipment-selection-panel {
  margin: 12px 0;
  padding: 16px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  animation: selectionPanelFadeIn 0.3s ease-out;
}

/* Panel fade in/out animations */
@keyframes selectionPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.equipment-selection-panel.fade-out {
  animation: selectionPanelFadeOut 0.25s ease-in forwards;
}

@keyframes selectionPanelFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.equipment-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.equipment-icon {
  font-size: 18px;
  line-height: 1;
}

.equipment-title {
  font-size: 14px;
  font-weight: 600;
  color: #22c55e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.equipment-class {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.equipment-groups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-group {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 12px;
}

.group-label {
  font-size: 12px;
  color: #a8b5c9;
  margin-bottom: 10px;
  font-weight: 500;
}

.equipment-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.equipment-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.equipment-option:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
}

.equipment-option.selected {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.2);
}

.option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: #4ade80;
  flex-shrink: 0;
}

.equipment-option.selected .option-letter {
  background: #22c55e;
  color: white;
  border-color: #22c55e;
}

.option-desc {
  font-size: 13px;
  color: #e0e0e0;
  line-height: 1.4;
}

.equipment-option.selected .option-desc {
  color: #fff;
}

/* Equipment Tray (floating confirmation area) */
.equipment-tray {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid #22c55e;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: traySlideUp 0.3s ease-out;
}

@keyframes traySlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.equipment-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.equipment-chip {
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  font-size: 11px;
  color: #4ade80;
}

.send-equipment-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.send-equipment-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #16a34a, #15803d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.send-equipment-btn.disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}

/* Additional Equipment Panel Elements (for non-linear creation) */
.equipment-panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.equipment-panel-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 4px;
}

.equipment-panel-class {
  font-size: 12px;
  color: #888;
}

.equipment-choices {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-choice-group {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 6px;
}

.equipment-choice-header {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}

.equipment-choice-description {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 8px;
}

.option-label {
  font-weight: 600;
  color: #4ade80;
  display: block;
  margin-bottom: 2px;
}

.option-items {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  display: block;
}

.equipment-confirm-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(34, 197, 94, 0.2);
}

.equipment-confirm-btn {
  width: 100%;
  padding: 12px;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid #22c55e;
  border-radius: 8px;
  color: #22c55e;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.equipment-confirm-btn:hover {
  background: rgba(34, 197, 94, 0.3);
}

/* ========================================
 * Selection Tabs (Non-Linear Character Creation)
 * Tab switching between available selection panels
 * ======================================== */

.selection-tabs-container {
  padding: 8px 12px;
  background: rgba(20, 20, 30, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 12px;
  border-radius: 8px 8px 0 0;
}

.selection-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.selection-tab {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.selection-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.selection-tab.active {
  background: rgba(124, 58, 237, 0.2);
  border-color: #7c3aed;
  color: #a78bfa;
}

/* Auto-complete button within selection tabs */
.selection-tab .auto-complete-btn {
  margin-left: 6px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  font-size: 10px;
}

.selection-tab .auto-complete-btn:hover {
  opacity: 1;
  transform: scale(1.3);
}

.selection-tab .auto-complete-btn.suggesting {
  animation: autoCompletePulse 0.8s ease-in-out infinite;
}

@keyframes autoCompletePulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ========================================
 * Spell/Cantrip Selection Panel
 * Multi-select with school filtering
 * ======================================== */

.spell-selection-panel {
  margin: 12px 0;
  padding: 16px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  animation: selectionPanelFadeIn 0.3s ease-out;
}

.spell-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  flex-wrap: wrap;
}

.spell-icon {
  font-size: 18px;
  line-height: 1;
}

.spell-title {
  font-size: 14px;
  font-weight: 600;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}

.spell-class {
  font-size: 12px;
  color: #888;
  font-style: italic;
}

.spell-count {
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 12px;
  font-size: 12px;
  color: #a78bfa;
  font-weight: 600;
}

.spell-count.complete {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

/* School Filter Tabs */
.school-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.school-tab {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  color: #888;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.school-tab:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #e0e0e0;
}

.school-tab.active {
  background: rgba(139, 92, 246, 0.2);
  border-color: #8b5cf6;
  color: #a78bfa;
  font-weight: 500;
}

/* Spell Grid */
.spell-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.spell-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  color: #e0e0e0;
}

.spell-chip:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
  transform: translateY(-1px);
}

.spell-chip.selected {
  background: rgba(139, 92, 246, 0.25);
  border-color: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

.spell-school-badge {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.spell-name {
  font-weight: 500;
}

.spell-check {
  color: #4ade80;
  font-weight: bold;
  margin-left: 4px;
}

/* Spell Confirm Area */
.spell-confirm-area {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
}

.spell-confirm-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.spell-confirm-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.spell-confirm-btn.disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}

/* Spell Tray (floating confirmation area) */
.spell-tray {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(20, 20, 30, 0.98);
  border: 1px solid #8b5cf6;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  z-index: 100;
  animation: traySlideUp 0.3s ease-out;
}

.spell-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 400px;
}

.spell-selection-chip {
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 12px;
  font-size: 11px;
  color: #a78bfa;
}

.send-spells-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.send-spells-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.send-spells-btn.disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}

/* ========================================
 * Unified Selection Panels
 * Generic panel structure for Race, Class, Background, Skills, Equipment
 * Uses CSS custom properties for type-specific colors
 * ======================================== */

/* Base Selection Panel - glassmorphic neon style */
.selection-panel {
  margin: 8px 0;
  padding: 12px;
  background: rgba(15, 15, 25, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--panel-border-color, rgba(100, 100, 120, 0.3));
  border-radius: 8px;
  box-shadow: 0 0 15px var(--panel-glow-color, rgba(100, 100, 120, 0.1)),
              inset 0 0 30px rgba(255, 255, 255, 0.02);
}

/* Type-specific accent colors with neon glow */
.race-selection-panel {
  --panel-accent-color: #a78bfa;
  --panel-border-color: rgba(167, 139, 250, 0.5);
  --panel-glow-color: rgba(139, 92, 246, 0.2);
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), inset 0 0 30px rgba(139, 92, 246, 0.03);
}

.class-selection-panel {
  --panel-accent-color: #f87171;
  --panel-border-color: rgba(248, 113, 113, 0.5);
  --panel-glow-color: rgba(239, 68, 68, 0.2);
  border-color: rgba(248, 113, 113, 0.5);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15), inset 0 0 30px rgba(239, 68, 68, 0.03);
}

.background-selection-panel {
  --panel-accent-color: #fbbf24;
  --panel-border-color: rgba(251, 191, 36, 0.5);
  --panel-glow-color: rgba(245, 158, 11, 0.2);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15), inset 0 0 30px rgba(245, 158, 11, 0.03);
}

.skills-selection-panel {
  --panel-accent-color: #34d399;
  --panel-border-color: rgba(52, 211, 153, 0.5);
  --panel-glow-color: rgba(16, 185, 129, 0.2);
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), inset 0 0 30px rgba(16, 185, 129, 0.03);
}

.equipment-selection-panel {
  --panel-accent-color: #ffd700;
  --panel-border-color: rgba(255, 215, 0, 0.5);
  --panel-glow-color: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.15), inset 0 0 30px rgba(255, 215, 0, 0.03);
}

/* Equipment Mode Toggle (Quick Pick / Gold Buy) */
.equipment-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.equipment-mode-toggle .mode-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  background: transparent;
  color: rgba(255, 215, 0, 0.6);
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  transition: all 0.2s ease;
}

.equipment-mode-toggle .mode-btn:hover {
  background: rgba(255, 215, 0, 0.1);
  color: rgba(255, 215, 0, 0.8);
}

.equipment-mode-toggle .mode-btn.active {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.6);
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Gold Buy Content */
.gold-buy-content {
  padding: 12px;
  background: rgba(255, 215, 0, 0.05);
  border: 1px dashed rgba(255, 215, 0, 0.3);
  border-radius: 6px;
}

.gold-buy-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
}

.gold-buy-info .gold-amount,
.gold-buy-info .gold-remaining {
  color: #ffd700;
}

.gold-buy-info strong {
  font-size: 14px;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.gold-buy-instructions {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  margin: 0;
  text-align: center;
}

.abilities-selection-panel {
  --panel-accent-color: #fb923c;
  --panel-border-color: rgba(251, 146, 60, 0.5);
  --panel-glow-color: rgba(249, 115, 22, 0.2);
  border-color: rgba(251, 146, 60, 0.5);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.15), inset 0 0 30px rgba(249, 115, 22, 0.03);
}

/* Selection Header - neon style */
.selection-panel .selection-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--panel-border-color, rgba(100, 100, 120, 0.25));
  flex-wrap: wrap;
}

.selection-panel .selection-icon {
  font-size: 14px;
  filter: drop-shadow(0 0 4px var(--panel-glow-color, rgba(100, 100, 120, 0.5)));
}

.selection-panel .selection-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--panel-accent-color, #a0a0a0);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  flex: 1;
  text-shadow: 0 0 10px var(--panel-glow-color, rgba(100, 100, 120, 0.3));
}

.selection-panel .selection-subtitle {
  font-size: 10px;
  color: var(--panel-accent-color, #888);
  font-weight: 400;
  opacity: 0.7;
}

.selection-panel .selection-count {
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--panel-border-color, rgba(100, 100, 120, 0.3));
  border-radius: 12px;
  font-size: 10px;
  color: var(--panel-accent-color, #888);
  font-weight: 600;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-shadow: 0 0 6px var(--panel-glow-color, rgba(100, 100, 120, 0.3));
}

.selection-panel .selection-count.complete {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.5);
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}

/* Browse Equipment Button */
.browse-equipment-btn {
  padding: 4px 12px;
  background: rgba(74, 144, 226, 0.15);
  border: 1px solid rgba(74, 144, 226, 0.5);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #4a90e2;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: auto;
}

.browse-equipment-btn:hover {
  background: rgba(74, 144, 226, 0.25);
  border-color: rgba(74, 144, 226, 0.8);
  box-shadow: 0 0 10px rgba(74, 144, 226, 0.3);
  text-shadow: 0 0 6px rgba(74, 144, 226, 0.5);
}

.browse-equipment-btn:active {
  background: rgba(74, 144, 226, 0.35);
}

/* Filter Tabs - neon style */
.selection-filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.selection-filter-tabs .filter-tab,
.selection-filter-tabs button.filter-tab {
  /* Complete button reset */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  margin: 0;
  padding: 0;
  outline: none;

  /* Actual styling */
  padding: 6px 12px !important;
  background: rgba(20, 20, 30, 0.6) !important;
  border: 1px solid rgba(100, 100, 120, 0.3) !important;
  border-radius: 16px !important;
  color: #888 !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.selection-filter-tabs .filter-tab:hover,
.selection-filter-tabs button.filter-tab:hover {
  background: rgba(40, 40, 60, 0.8) !important;
  border-color: rgba(100, 100, 120, 0.5) !important;
  color: #aaa !important;
}

.selection-filter-tabs .filter-tab.active,
.selection-filter-tabs button.filter-tab.active {
  background: rgba(139, 92, 246, 0.25) !important;
  border-color: rgba(139, 92, 246, 0.6) !important;
  color: #a78bfa !important;
  font-weight: 500 !important;
}

/* Selection Grid */
.selection-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Selection Card - used for class/race/background selection buttons */
button.selection-card,
.selection-card {
  /* Button reset */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  outline: none !important;

  /* Base styling */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 11px;
  color: #fca5a5 !important;
  text-align: left;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

button.selection-card:hover,
.selection-card:hover {
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: rgba(248, 113, 113, 0.8) !important;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.35) !important;
  transform: translateY(-1px);
}

button.selection-card:active,
.selection-card:active {
  transform: translateY(0);
}

.selection-card .card-badge {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.selection-card .card-name {
  font-weight: 600;
  color: #fff;
}

.selection-card .card-stat {
  font-size: 10px;
  color: rgba(252, 165, 165, 0.8);
}

.selection-card .card-meta {
  font-size: 9px;
  color: rgba(252, 165, 165, 0.6);
}

/* Skill Selection Cards - Green theme */
.skills-selection-panel .selection-card {
  background: rgba(16, 185, 129, 0.12) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
  color: #6ee7b7 !important;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.3);
}

.skills-selection-panel .selection-card:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: rgba(52, 211, 153, 0.8) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35) !important;
}

.skills-selection-panel .selection-card.selected {
  background: rgba(16, 185, 129, 0.35) !important;
  border-color: rgba(52, 211, 153, 1) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5) !important;
}

.skills-selection-panel .selection-card .card-badge {
  background: rgba(16, 185, 129, 0.25);
  color: #6ee7b7;
}

.skills-selection-panel .selection-card .card-stat,
.skills-selection-panel .selection-card .card-meta {
  color: rgba(110, 231, 183, 0.8);
}

.skills-selection-panel .selection-card .card-check {
  color: #4ade80;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(74, 222, 128, 0.6);
}

/* Selection Card States - disabled and from-background */
.selection-card.disabled,
.selection-card.from-background {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.selection-card.from-background {
  background: rgba(100, 100, 120, 0.15) !important;
  border-color: rgba(100, 100, 120, 0.4) !important;
  color: #888 !important;
}

.selection-card.from-background .card-badge {
  background: rgba(100, 100, 120, 0.25);
  color: #888;
}

.selection-card.from-background .card-meta {
  color: #10b981;
  font-weight: 500;
}

/* Compact Selection Chip (for simpler selections) */
.selection-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--panel-accent-rgb, 100, 100, 120), 0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 12px;
  color: #e0e0e0;
}

.selection-chip:hover {
  background: rgba(var(--panel-accent-rgb, 100, 100, 120), 0.15);
  border-color: rgba(var(--panel-accent-rgb, 100, 100, 120), 0.5);
  transform: translateY(-1px);
}

.selection-chip.selected {
  background: rgba(var(--panel-accent-rgb, 100, 100, 120), 0.25);
  border-color: var(--panel-accent-color, #888);
  box-shadow: 0 0 8px rgba(var(--panel-accent-rgb, 100, 100, 120), 0.3);
}

.selection-chip .chip-badge {
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(var(--panel-accent-rgb, 100, 100, 120), 0.2);
  color: var(--panel-accent-color, #888);
}

.selection-chip .chip-name {
  font-weight: 500;
}

.selection-chip .chip-check {
  color: #4ade80;
  font-weight: bold;
}

/* Selection Confirm Area */
.selection-confirm-area {
  display: flex;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--panel-border-color, rgba(100, 100, 120, 0.2));
}

.selection-confirm-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, var(--panel-accent-color, #888), color-mix(in srgb, var(--panel-accent-color, #888), black 15%));
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.selection-confirm-btn:hover:not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--panel-accent-rgb, 100, 100, 120), 0.3);
}

.selection-confirm-btn.disabled {
  background: #444;
  color: #888;
  cursor: not-allowed;
}

/* Equipment Choice Groups (A/B/C options) */
.equipment-choice-group {
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(229, 192, 123, 0.2);
  border-radius: 6px;
}

.equipment-choice-group .choice-prompt {
  font-size: 12px;
  color: #e5c07b;
  margin-bottom: 10px;
  font-weight: 500;
}

.equipment-choice-group .choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.equipment-choice-option {
  flex: 1;
  min-width: 150px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(229, 192, 123, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.equipment-choice-option:hover {
  background: rgba(229, 192, 123, 0.1);
  border-color: rgba(229, 192, 123, 0.4);
}

.equipment-choice-option.selected {
  background: rgba(229, 192, 123, 0.2);
  border-color: #e5c07b;
}

.equipment-choice-option .option-letter {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: rgba(229, 192, 123, 0.2);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #e5c07b;
  margin-right: 8px;
}

.equipment-choice-option .option-items {
  font-size: 12px;
  color: #ccc;
}

/* ========================================
 * Quick Actions Tray (Name Suggestions, etc.)
 * ======================================== */

.quick-actions-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 20px;
  margin: 12px 0;
  justify-content: center;
  animation: traySlideUp 0.3s ease-out, trayGlow 2s ease-in-out infinite;
  background: linear-gradient(180deg, rgba(40, 50, 60, 0.95) 0%, rgba(30, 40, 50, 0.98) 100%);
  border: 2px solid rgba(102, 255, 204, 0.4);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(102, 255, 204, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
}

.quick-actions-tray::before {
  content: 'Choose an option';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #2a3a4a 0%, #3a4a5a 50%, #2a3a4a 100%);
  padding: 4px 16px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: #8fd;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 1px solid rgba(102, 255, 204, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@keyframes trayGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 255, 204, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow: 0 0 30px rgba(102, 255, 204, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

.quick-actions-tray.hidden {
  display: none;
}

.quick-action-chip {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(74, 153, 153, 0.3) 0%, rgba(50, 120, 120, 0.4) 100%);
  border: 2px solid #6fc;
  border-radius: 25px;
  color: #bff;
  font-size: 15px;
  font-family: 'Georgia', serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  box-shadow: 0 0 15px rgba(102, 255, 204, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-shadow: 0 0 8px rgba(102, 255, 204, 0.5);
  animation: chipPulse 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}

.quick-action-chip::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: chipShimmer 3s ease-in-out infinite;
}

@keyframes chipPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(102, 255, 204, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 25px rgba(102, 255, 204, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

@keyframes chipShimmer {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.quick-action-chip:hover {
  background: linear-gradient(135deg, rgba(102, 255, 204, 0.4) 0%, rgba(74, 200, 180, 0.5) 100%);
  border-color: #aff;
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 25px rgba(102, 255, 204, 0.5), 0 0 30px rgba(102, 255, 204, 0.3);
  animation: none;
}

.quick-action-chip:active {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 15px rgba(102, 255, 204, 0.4);
}

/* Responsive adjustments for spell/equipment */
@media (max-width: 600px) {
  .spell-grid {
    gap: 6px;
  }

  .spell-chip {
    padding: 6px 10px;
    font-size: 11px;
  }

  .equipment-tray,
  .spell-tray {
    bottom: 16px;
    left: 16px;
    right: 16px;
    transform: none;
    flex-direction: column;
    gap: 8px;
  }
}

/* ============================================
   Ability Score Selection Panel
   Orange/Amber theme for ability score selection
   ============================================ */

.ability-selection-panel {
  margin: 12px 0;
  padding: 16px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 8px;
  animation: selectionPanelFadeIn 0.3s ease-out;
}

.ability-panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(251, 146, 60, 0.2);
}

.ability-panel-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #fb923c;
  margin-bottom: 4px;
}

.ability-panel-subtitle {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* Method Selection Cards - unified panel style */
.ability-methods-grid.selection-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Ability method cards using unified selection-card */
.ability-method-card.selection-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.05);
  border: 1px solid rgba(var(--panel-accent-rgb, 249, 115, 22), 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: auto;
}

.ability-method-card.selection-card:hover,
.ability-method-card.selection-card.hovered {
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.15);
  border-color: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.5);
  transform: translateX(4px);
}

.ability-method-card .card-icon,
.ability-method-card .method-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.ability-method-card .card-name,
.ability-method-card .method-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--panel-accent-color, #fb923c);
  margin-bottom: 4px;
}

.ability-method-card .card-meta,
.ability-method-card .method-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
  padding-left: 0;
  border-left: none;
}

.ability-method-card .card-detail,
.ability-method-card .method-detail {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Legacy method card styles for backward compatibility */
.ability-methods-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ability-method-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: rgba(251, 146, 60, 0.05);
  border: 1px solid rgba(251, 146, 60, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ability-method-card:hover,
.ability-method-card.hovered {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.5);
  transform: translateX(4px);
}

.method-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.method-content {
  flex: 1;
}

.method-name {
  font-size: 15px;
  font-weight: 600;
  color: #fb923c;
  margin-bottom: 4px;
}

.method-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4px;
}

.method-detail {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Click-to-Assign UI */
.ability-values-section {
  margin-bottom: 20px;
}

.values-header,
.slots-header {
  font-size: 12px;
  font-weight: 600;
  color: rgba(251, 146, 60, 0.8);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.values-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ability-value-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(251, 146, 60, 0.1);
  border: 2px solid rgba(251, 146, 60, 0.3);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fb923c;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ability-value-chip:hover {
  background: rgba(251, 146, 60, 0.2);
  border-color: rgba(251, 146, 60, 0.5);
  transform: scale(1.05);
}

.ability-value-chip.selected {
  background: rgba(251, 146, 60, 0.3);
  border-color: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.4);
  animation: chipPulse 1s ease-in-out infinite;
}

@keyframes chipPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(251, 146, 60, 0.4); }
  50% { box-shadow: 0 0 16px rgba(251, 146, 60, 0.6); }
}

/* Ability Slots Grid */
.ability-slots-section {
  margin-bottom: 16px;
}

/* Override selection-grid for ability slots to use grid layout */
.ability-slots-grid.selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Ability slot cards - override selection-card for detailed ability display */
.ability-slot.selection-card.detailed {
  padding: 12px;
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(var(--panel-accent-rgb, 249, 115, 22), 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-width: auto;
  max-width: none;
}

.ability-slot.selection-card.detailed:hover {
  border-color: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.4);
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.05);
}

.ability-slot.selection-card.detailed.primary {
  border-color: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.4);
  background: rgba(var(--panel-accent-rgb, 249, 115, 22), 0.08);
}

/* Legacy ability-slot styles for backward compatibility */
.ability-slot {
  padding: 12px;
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.ability-slot:hover {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.05);
}

.ability-slot.primary {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.08);
}

.ability-slot.assigned {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}

.ability-slot-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

.ability-abbrev {
  font-size: 14px;
  font-weight: 700;
  color: #fb923c;
}

.ability-slot.assigned .ability-abbrev {
  color: #4ade80;
}

.primary-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: 4px;
  color: #fb923c;
}

.ability-slot-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 4px;
}

.assigned-value {
  font-size: 24px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.ability-slot.assigned .assigned-value {
  color: #4ade80;
}

.racial-bonus {
  font-size: 14px;
  font-weight: 600;
  color: #60a5fa;
}

.ability-slot-total {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}

.total-value {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.ability-slot.assigned .total-value {
  color: #4ade80;
}

.ability-slot-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.3;
}

/* Point Buy UI */
.point-buy-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: 8px;
  margin-bottom: 16px;
}

.points-remaining {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
}

.points-remaining span {
  font-weight: 700;
  color: #fb923c;
  font-size: 20px;
}

.points-total {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.point-buy-sliders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.point-buy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(30, 30, 40, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.point-buy-row.primary {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.05);
}

.pb-ability-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pb-ability-name {
  font-size: 14px;
  font-weight: 700;
  color: #fb923c;
  min-width: 32px;
}

.point-buy-row.primary .pb-ability-name {
  color: #fbbf24;
}

.pb-ability-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.pb-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pb-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: 6px;
  color: #fb923c;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.pb-btn:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.3);
  border-color: #fb923c;
}

.pb-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pb-score {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  min-width: 24px;
  text-align: center;
}

.pb-racial {
  font-size: 12px;
  font-weight: 600;
  color: #60a5fa;
}

.pb-total {
  font-size: 16px;
  font-weight: 700;
  color: #4ade80;
  min-width: 28px;
  text-align: center;
  padding: 2px 6px;
  background: rgba(74, 222, 128, 0.1);
  border-radius: 4px;
}

.pb-cost {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 50px;
  text-align: right;
}

.pb-cost span {
  color: #fbbf24;
  font-weight: 600;
}

/* Confirm Button */
.ability-confirm-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(251, 146, 60, 0.2);
}

.ability-confirm-btn {
  width: 100%;
  padding: 12px 24px;
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: 8px;
  color: rgba(251, 146, 60, 0.6);
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.2s ease;
}

.ability-confirm-btn:disabled {
  opacity: 0.5;
}

.ability-confirm-btn.ready {
  background: rgba(251, 146, 60, 0.2);
  border-color: #fb923c;
  color: #fb923c;
  cursor: pointer;
}

.ability-confirm-btn.ready:hover {
  background: rgba(251, 146, 60, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 146, 60, 0.3);
}

/* Responsive adjustments for ability selection */
@media (max-width: 640px) {
  .ability-slots-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ability-value-chip {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .point-buy-row {
    flex-wrap: wrap;
  }

  .pb-ability-info {
    width: 100%;
    margin-bottom: 8px;
  }

  .pb-controls {
    flex: 1;
  }

  .pb-cost {
    text-align: center;
  }
}

/* ============================================
   Skill Selection Panel
   Green/Teal theme for skill proficiency selection
   ============================================ */

.skill-selection-panel {
  margin: 12px 0;
  padding: 16px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 8px;
  animation: selectionPanelFadeIn 0.3s ease-out;
}

.skill-panel-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}

.skill-panel-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 4px;
}

.skill-panel-subtitle {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.skill-count-indicator {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}

.skill-count-indicator.complete {
  color: #22c55e;
}

/* Background Skills Info */
.skill-background-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(96, 165, 250, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 6px;
  font-size: 12px;
}

.bg-label {
  color: rgba(96, 165, 250, 0.8);
  font-weight: 600;
}

.bg-skills {
  color: #60a5fa;
}

/* Skills Grid */
.skill-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.skill-card {
  padding: 12px;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.skill-card:hover,
.skill-card.hovered {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.4);
}

.skill-card.selected {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}

.skill-card.recommended {
  border-color: rgba(251, 191, 36, 0.4);
}

.skill-card.recommended:not(.selected) {
  background: rgba(251, 191, 36, 0.05);
}

.skill-card.from-background {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.3);
  cursor: default;
  opacity: 0.7;
}

.skill-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.skill-card-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.skill-name {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.skill-card.selected .skill-name {
  color: #22c55e;
}

.skill-recommended-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 4px;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-bg-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: 4px;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.skill-description {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.4;
}

/* Confirm Button */
.skill-confirm-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(34, 197, 94, 0.2);
}

.skill-confirm-btn {
  width: 100%;
  padding: 12px 24px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 8px;
  color: rgba(34, 197, 94, 0.6);
  font-size: 14px;
  font-weight: 600;
  cursor: not-allowed;
  transition: all 0.2s ease;
}

.skill-confirm-btn:disabled {
  opacity: 0.5;
}

.skill-confirm-btn:not(:disabled) {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
  cursor: pointer;
}

.skill-confirm-btn:not(:disabled):hover {
  background: rgba(34, 197, 94, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Responsive adjustments for skill selection */
@media (max-width: 640px) {
  .skill-selection-grid {
    grid-template-columns: 1fr;
  }

  .skill-card {
    padding: 10px;
  }
}

/* ========================================
 * Equipment Browser Styles
 * ======================================== */

/* Mode Toggle */
.equipment-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.equipment-mode-toggle .mode-btn {
  flex: 1;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.equipment-mode-toggle .mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.equipment-mode-toggle .mode-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 51, 234, 0.3));
  border-color: rgba(147, 51, 234, 0.5);
  color: white;
}

/* Gold Buy Content Container */
.gold-buy-content {
  padding: 8px 0;
}

.gold-buy-loading,
.gold-buy-error {
  padding: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

.gold-buy-error {
  color: #f87171;
}

/* Inline Equipment Browser */
.inline-equipment-browser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow: hidden;
}

/* Gold Display Header */
.eb-header {
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(234, 179, 8, 0.1));
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
}

.eb-gold-display {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}

.eb-gold-label {
  color: rgba(255, 255, 255, 0.6);
}

.eb-gold-amount,
.eb-gold-remaining {
  color: #ffd700;
  font-weight: 600;
}

.eb-gold-separator {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 4px;
}

.eb-gold-unit {
  color: rgba(234, 179, 8, 0.8);
  font-size: 12px;
}

/* Search Row */
.eb-search-row {
  display: flex;
  gap: 8px;
}

.eb-search {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 13px;
}

.eb-search:focus {
  outline: none;
  border-color: rgba(147, 51, 234, 0.5);
}

.eb-category-filter {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: white;
  font-size: 13px;
  cursor: pointer;
}

.eb-category-filter:focus {
  outline: none;
  border-color: rgba(147, 51, 234, 0.5);
}

/* Items Container */
.eb-items-container {
  flex: 1;
  overflow-y: auto;
  min-height: 150px;
  max-height: 200px;
}

.eb-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eb-loading,
.eb-empty {
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Item Card */
.eb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.eb-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(147, 51, 234, 0.3);
}

.eb-item--selected {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
  border-color: rgba(34, 197, 94, 0.5);
}

.eb-item-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

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

.eb-item-name {
  font-weight: 500;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-item-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.eb-item-props {
  font-size: 10px;
  color: rgba(147, 51, 234, 0.8);
  margin-top: 2px;
}

.eb-item-cost {
  flex-shrink: 0;
  font-weight: 600;
  color: #ffd700;
  font-size: 12px;
}

.eb-item-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eb-svg {
  width: 16px;
  height: 16px;
}

.eb-check {
  color: #22c55e;
}

/* Footer */
.eb-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.eb-cart-section {
  max-height: 80px;
  overflow-y: auto;
}

.eb-cart-header {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.eb-cart {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eb-cart-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
  padding: 8px 0;
}

.eb-cart-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 12px;
}

.eb-cart-item-name {
  flex: 1;
  color: white;
}

.eb-cart-item-cost {
  color: #ffd700;
}

.eb-cart-remove {
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.2);
  border: none;
  border-radius: 3px;
  color: #f87171;
  cursor: pointer;
  font-size: 10px;
}

.eb-cart-remove:hover {
  background: rgba(239, 68, 68, 0.4);
}

/* Actions Row */
.eb-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eb-total {
  flex: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.eb-total-label {
  color: rgba(255, 255, 255, 0.5);
}

.eb-total-amount {
  color: #ffd700;
  font-weight: 600;
}

.eb-clear {
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 6px;
  color: #f87171;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.eb-clear:hover {
  background: rgba(239, 68, 68, 0.3);
}

.eb-confirm {
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(34, 197, 94, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 6px;
  color: #22c55e;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.eb-confirm:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.4), rgba(34, 197, 94, 0.3));
}

.eb-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Warning/Notification */
.eb-warning {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: rgba(239, 68, 68, 0.9);
  border-radius: 8px;
  color: white;
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
  animation: fadeInOut 2s ease-in-out;
}

.eb-gold-notification {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.9), rgba(234, 179, 8, 0.8));
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 600;
  z-index: 100;
  animation: fadeInOut 3s ease-in-out;
}

.eb-gold-icon {
  margin-right: 8px;
}

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  15% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Category Buttons */
.eb-categories {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.eb-cat-btn {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.eb-cat-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.eb-cat-active {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.3), rgba(147, 51, 234, 0.2));
  border-color: rgba(147, 51, 234, 0.5);
  color: white;
}

/* ========================================
 * Step Confirmation Toast
 * Shows brief notification when character creation step is saved
 * ======================================== */

.step-confirmation-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  animation: slideUpFadeIn 0.3s ease-out;
}

.step-confirmation-toast .toast-content {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(21, 128, 61, 0.95));
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 13px;
}

.step-confirmation-toast .toast-icon {
  font-size: 16px;
  color: #86efac;
}

.step-confirmation-toast .toast-message {
  font-weight: 600;
}

.step-confirmation-toast .toast-next {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  padding-left: 8px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.step-confirmation-toast.fade-out {
  animation: slideDownFadeOut 0.3s ease-in forwards;
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes slideDownFadeOut {
  from {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  to {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
}

/* Equipment Cart Defaults Button Section */
.ec-defaults-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ec-defaults-btn {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(21, 128, 61, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 6px;
  color: #86efac;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ec-defaults-btn:hover {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(21, 128, 61, 0.3));
  border-color: rgba(34, 197, 94, 0.6);
  color: white;
}

.ec-defaults-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.ec-or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
}

.ec-or-divider::before,
.ec-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   LORE BROWSER STYLES
   ============================================ */

.lore-browser {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

/* Search Box */
.lore-search-box {
  display: flex;
  gap: 8px;
}

.lore-search-input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
  font-size: 13px;
}

.lore-search-input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.lore-search-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.lore-search-btn {
  padding: 8px 16px;
  background: #7c3aed;
  border: none;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.lore-search-btn:hover {
  background: #6d28d9;
}

/* Breadcrumb Navigation */
.lore-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lore-breadcrumb-item {
  cursor: pointer;
  transition: color 0.2s;
}

.lore-breadcrumb-item:hover {
  color: #a78bfa;
}

.lore-breadcrumb-item.active {
  color: #a78bfa;
  font-weight: 500;
}

/* Results Area */
.lore-results {
  max-height: 400px;
  overflow-y: auto;
}

.lore-results-header {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lore-results-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Result Card */
.lore-result-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.lore-result-card:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: rgba(124, 58, 237, 0.3);
}

.lore-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.lore-result-name {
  font-weight: 500;
  color: #e0e0e0;
}

.lore-result-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}

.lore-result-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* Type Badges */
.lore-type-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 3px;
}

.lore-type-faction {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.lore-type-location {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.lore-type-npc {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.lore-type-artifact {
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
}

.lore-type-bestiary {
  background: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}

/* District Groups (Locations tab) */
.lore-district-group {
  margin-bottom: 16px;
}

.lore-district-header {
  font-weight: 600;
  color: #a78bfa;
  margin-bottom: 4px;
}

.lore-district-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.lore-location-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 12px;
  border-left: 2px solid rgba(124, 58, 237, 0.3);
}

/* Entity Detail View */
.lore-entity-detail {
  padding: 4px 0;
}

.lore-entity-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.lore-entity-type-badge {
  padding: 3px 8px;
  font-size: 11px;
}

.lore-entity-name {
  font-size: 18px;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0;
}

.lore-entity-subtype,
.lore-entity-role,
.lore-entity-district {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 4px;
}

.lore-entity-description {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 12px 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.lore-entity-field {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 6px 0;
}

.lore-entity-field strong {
  color: rgba(255, 255, 255, 0.9);
}

.lore-entity-features {
  margin: 12px 0;
}

.lore-entity-features ul {
  margin: 4px 0 0 0;
  padding-left: 20px;
}

.lore-entity-features li {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin: 2px 0;
}

/* Related Entities */
.lore-related-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lore-related-section strong {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}

.lore-related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lore-related-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.lore-related-chip:hover {
  filter: brightness(1.2);
}

/* Quick Actions */
.lore-quick-actions-section {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lore-quick-actions-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lore-quick-action {
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(124, 58, 237, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 4px;
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.2s;
}

.lore-quick-action:hover {
  background: rgba(124, 58, 237, 0.3);
  border-color: rgba(124, 58, 237, 0.5);
}

/* Clickable Entity Inline Links */
.lore-clickable {
  color: #a78bfa;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.lore-clickable:hover {
  color: #c4b5fd;
  text-decoration-style: solid;
}

/* Empty/Loading/Error States */
.lore-empty-text,
.lore-loading,
.lore-error {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  padding: 20px;
}

.lore-loading {
  color: #a78bfa;
}

.lore-error {
  color: #fca5a5;
}

.lore-suggestion {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 8px;
}

/* ========================================
 * Homebrew Workshop Panel
 * ======================================== */

/* Container */
.homebrew-browser {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1a1a2e;
  font-family: 'Berkeley Mono', 'JetBrains Mono', monospace;
}

/* Header with tabs */
.hb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hb-tabs {
  display: flex;
  gap: 4px;
}

.hb-tab {
  padding: 6px 12px;
  font-size: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s;
}

.hb-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
}

.hb-tab.active {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
}

/* Stats bar */
.hb-stats {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hb-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hb-stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #fbbf24;
}

.hb-stat-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Search and filters */
.hb-filters {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hb-search {
  flex: 1;
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #e0e0e0;
}

.hb-search:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
}

.hb-search::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.hb-type-filter {
  padding: 6px 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #e0e0e0;
  cursor: pointer;
}

/* Tab content areas */
.hb-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

.hb-tab-content.hidden {
  display: none;
}

/* Empty state */
.hb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}

.hb-empty-icon {
  font-size: 48px;
  opacity: 0.5;
}

.hb-empty p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin: 0;
}

/* Item grid */
.hb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Item cards */
.hb-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.hb-card:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.hb-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.hb-type-icon {
  font-size: 16px;
}

.hb-type-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hb-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
  margin: 0 0 6px 0;
}

.hb-card-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hb-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

.hb-creator {
  color: #a78bfa;
}

.hb-version {
  color: rgba(255, 255, 255, 0.3);
}

/* Rarity colors for cards */
.hb-rarity-common {
  border-left: 3px solid #9ca3af;
}

.hb-rarity-uncommon {
  border-left: 3px solid #22c55e;
}

.hb-rarity-rare {
  border-left: 3px solid #3b82f6;
}

.hb-rarity-legendary {
  border-left: 3px solid #f59e0b;
}

/* Badges */
.hb-badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.hb-badge-approved {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
}

.hb-badge-pending {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.hb-badge-rejected {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* Item detail panel */
.hb-detail {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
}

.hb-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hb-detail-header h3 {
  margin: 0;
  font-size: 18px;
  color: #fbbf24;
}

.hb-type-badge {
  font-size: 11px;
  padding: 4px 10px;
  background: rgba(167, 139, 250, 0.2);
  color: #a78bfa;
  border-radius: 12px;
  text-transform: capitalize;
}

.hb-detail-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Stat block */
.hb-stat-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 16px;
}

.hb-stat-block div {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hb-stat-block div:last-child {
  border-bottom: none;
}

.hb-stat-block strong {
  color: #a78bfa;
  min-width: 100px;
}

.hb-stat-block pre {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Notes section */
.hb-notes {
  background: rgba(251, 191, 36, 0.1);
  border-left: 3px solid #fbbf24;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
  border-radius: 0 4px 4px 0;
}

.hb-notes strong {
  color: #fbbf24;
}

/* Metadata */
.hb-detail-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 16px;
}

/* Action buttons */
.hb-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hb-btn {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: transparent;
  color: #e0e0e0;
  cursor: pointer;
  transition: all 0.2s;
}

.hb-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hb-btn-primary {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fbbf24;
}

.hb-btn-primary:hover {
  background: rgba(251, 191, 36, 0.3);
}

.hb-btn-secondary {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #a78bfa;
}

.hb-btn-secondary:hover {
  background: rgba(167, 139, 250, 0.3);
}

.hb-btn-success {
  background: rgba(34, 197, 94, 0.2);
  border-color: rgba(34, 197, 94, 0.4);
  color: #22c55e;
}

.hb-btn-success:hover {
  background: rgba(34, 197, 94, 0.3);
}

.hb-btn-warning {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.4);
  color: #eab308;
}

.hb-btn-warning:hover {
  background: rgba(234, 179, 8, 0.3);
}

.hb-btn-danger {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #ef4444;
}

.hb-btn-danger:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* Create form */
.hb-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hb-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hb-form-group label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 500;
}

.hb-form-group input,
.hb-form-group select,
.hb-form-group textarea {
  padding: 8px 12px;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #e0e0e0;
  font-family: inherit;
}

.hb-form-group input:focus,
.hb-form-group select:focus,
.hb-form-group textarea:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
}

.hb-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.hb-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Stat block form */
.hb-stat-fields {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 12px;
}

.hb-stat-fields h5 {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #a78bfa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pending items list */
.hb-pending-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hb-pending-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 6px;
}

.hb-pending-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hb-pending-name {
  font-size: 14px;
  font-weight: 600;
  color: #e0e0e0;
}

.hb-pending-type {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.hb-pending-actions {
  display: flex;
  gap: 6px;
}