/**
 * Character Sheet Panel
 * =====================
 * Displays character stats, abilities, and key information.
 */

/* ========================================
 * Base Layout
 * ======================================== */

.character-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 260px;
  background: var(--color-bg-primary);
}

/* Reduce padding layering inside character sheet panel (#238) */
.character-sheet .side-panel-content {
  padding: var(--space-2);
}

.character-sheet .sp-tab-content {
  padding: var(--space-2);
}

.character-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.character-sheet__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.character-sheet__icon {
  font-size: var(--font-size-base);
}

.character-sheet__actions {
  display: flex;
  gap: var(--space-2);
}

.character-sheet__content {
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
}

.character-sheet__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: center;
}

.character-sheet__loaded {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ========================================
 * Character Identity
 * ======================================== */

.cs-identity {
  text-align: center;
  padding: var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.cs-name {
  margin: 0 0 var(--space-1) 0;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--color-text-primary);
}

.cs-class-race {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cs-alignment {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.cs-level-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

/* ========================================
 * Token Image Upload Section
 * ======================================== */

.cs-token-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.cs-token-image__preview {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.cs-token-image__preview:hover {
  border-color: var(--color-accent-primary);
}

.cs-token-image__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cs-token-image__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.cs-token-image__icon {
  font-size: var(--font-size-xl);
  color: var(--color-text-muted);
}

.cs-token-image__icon svg {
  width: 32px;
  height: 32px;
  opacity: 0.5;
}

.cs-token-image__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.cs-token-image__upload-btn {
  cursor: pointer;
}

.cs-token-image__input {
  /* Visually hidden but accessible */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cs-token-image__remove-btn {
  font-size: var(--font-size-xs);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cs-token-image {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
  }

  .cs-token-image__preview {
    width: 56px;
    height: 56px;
  }

  .cs-token-image__actions {
    gap: var(--space-1);
  }
}

/* ========================================
 * Ability Scores Grid — Hexagonal Layout
 * ======================================== */

/* Container: 3-column grid with honeycomb offset on bottom row */
.cs-abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-1);
  justify-items: center;
  padding: var(--space-2) 0;
}

/* Offset bottom row for honeycomb effect:
   Items 4-6 get nudged right by half a column width */
.cs-abilities .cs-ability:nth-child(n+4) {
  position: relative;
  /* Pull bottom row up to overlap slightly for tighter honeycomb */
  margin-top: calc(-1 * var(--space-2));
}

/* Hexagonal ability score box using clip-path (flat-top hexagon) */
.cs-ability {
  --hex-size: 72px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547); /* hex height = width * 2/sqrt(3) */
  padding: var(--space-1);
  background: var(--color-bg-secondary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Border effect via pseudo-element (clip-path clips borders, so we fake it) */
.cs-ability::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-border-default);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

/* Inner fill sits 2px inside to reveal the border pseudo-element */
.cs-ability::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--color-bg-secondary);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: -1;
}

.cs-ability:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.cs-ability:hover::before {
  background: var(--color-accent-primary);
}

/* Clickable ability scores for dice rolling */
.cs-ability--clickable {
  cursor: pointer;
  user-select: none;
}

.cs-ability--clickable:hover {
  box-shadow: none; /* clip-path clips box-shadow, rely on filter */
}

.cs-ability--clickable:active {
  transform: translateY(0) scale(0.95);
}

.cs-ability--clickable:focus-visible {
  /* clip-path clips box-shadow but NOT outline. Use transparent outline
     so forced-colors mode (Windows High Contrast) replaces it with the
     system highlight color. Add filter glow as visual enhancement. */
  outline: 3px solid transparent;
  outline-offset: -3px;
  filter: brightness(1.2) drop-shadow(0 0 4px var(--color-accent-primary));
}

/* Ability abbreviation at top of hexagon */
.cs-ability__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 0;
}

/* Modifier prominently in center */
.cs-ability__mod {
  font-size: var(--font-size-xl);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* Raw score smaller below modifier */
.cs-ability__score {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  line-height: 1;
}

/* ========================================
 * Custom Attributes (for non-D&D systems)
 * ======================================== */

.cs-attributes--custom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-attributes__loading {
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-3);
}

.cs-attributes__group {
  margin-bottom: var(--space-2);
}

.cs-attributes__group-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-default);
}

.cs-attributes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--space-2);
}

/* Single custom attribute item */
.cs-custom-attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease;
}

.cs-custom-attr:hover {
  border-color: var(--color-accent-primary);
}

.cs-custom-attr__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.cs-custom-attr__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

.cs-custom-attr__modifier {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-accent-secondary);
}

/* Rating pips (for systems like Fate Core or Blades in the Dark) */
.cs-custom-attr__pips {
  display: flex;
  gap: 2px;
  margin-top: var(--space-1);
}

.cs-custom-attr__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-strong);
}

.cs-custom-attr__pip--filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

/* Pop-out button (T1.2 #3640): icon-only, anchored right via margin-left:auto.
   Mirrors visual language of inline-panel__btn--popout (external-link icon).
   `flex: 0 0 auto` overrides the `.sp-tab-btn { flex: 1 }` base — without it
   the button grew to a ~70px black square next to Stats/Powers/Gear (#3914). */
.sp-tab-btn--popout {
  flex: 0 0 auto;
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  line-height: 0;
  color: var(--color-text-muted, #888);
}

.sp-tab-btn--popout:hover {
  color: var(--color-accent-primary, #7c3aed);
}

.sp-tab-btn--popout svg {
  display: block;
  width: 14px;
  height: 14px;
}
/**
 * Character Stats — Core Display
 * ================================
 * Core stats, collapsible sections, conditions, death saves,
 * exhaustion, and copy button.
 */


/* ========================================
 * Core Stats
 * ======================================== */

.cs-core-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cs-stat-row {
  display: flex;
  gap: 3px;
}

.cs-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3px var(--space-1);
  background: var(--color-bg-secondary);
  /* Subtle border keeps the AC/INIT/SPEED/PROF chips reading as chips even when the
     panel host background is near-identical to bg-secondary (#4132). */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
}

.cs-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1px;
}

.cs-stat__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

.cs-stat__value-container {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-mono);
}

.cs-stat__current {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.cs-stat__separator {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cs-stat__max {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* HP Bar */
.cs-stat--hp {
  padding: var(--space-1) var(--space-2);
}

/* HP bar styles moved to components/_hp_bar.css for Phase 4 P2-13 */

/* Temp HP indicator */
.cs-hp-bar__temp {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--color-accent-primary);
  opacity: 0.5;
  border-radius: var(--radius-pill);
}

.cs-hp-bar-container {
  position: relative;
}

/* Special stat colors */
.cs-stat--ac .cs-stat__value {
  color: var(--color-accent-primary);
}

.cs-stat--initiative .cs-stat__value {
  color: var(--color-accent-secondary, var(--color-text-primary));
}

.cs-stat--speed .cs-stat__value {
  color: var(--color-text-primary);
}

.cs-stat--proficiency .cs-stat__value {
  color: var(--color-accent-secondary, var(--color-gold));
}

.cs-stat--hit-dice .cs-stat__value {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

/* ========================================
 * Collapsible Sections
 * ======================================== */

.cs-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cs-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px var(--space-2);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
}

.cs-section__header::-webkit-details-marker {
  display: none;
}

.cs-section__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-section__toggle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.cs-section[open] .cs-section__toggle {
  transform: rotate(180deg);
}

.cs-section__content {
  padding: var(--space-1) var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

/* Skills List */
.cs-skills-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-skill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  transition: background var(--transition-fast);
}

.cs-skill:hover {
  background: var(--color-bg-tertiary);
}

.cs-skill:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-bg-tertiary);
}

.cs-skill-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  flex: 1;
}

.cs-skill--proficient .cs-skill-name,
.cs-skill:has(.proficiency-chip--proficient) .cs-skill-name,
.cs-skill:has(.proficiency-chip--expert) .cs-skill-name {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Legacy skill item styles (for backward compatibility) */
.cs-skill-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

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

.cs-skill-item__name {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cs-skill-item__name--proficient {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.cs-skill-item__bonus {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.cs-skill-item__proficiency {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  margin-right: var(--space-2);
}

.cs-skill-item__proficiency--proficient {
  background: var(--color-accent-primary);
}

.cs-skill-item__proficiency--expert {
  background: var(--color-accent-secondary, var(--color-gold));
  box-shadow: 0 0 4px var(--color-accent-secondary, var(--color-gold));
}

/* Saving Throws */
.cs-save-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
}

.cs-save-item__ability {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.cs-save-item__ability--proficient {
  color: var(--color-accent-primary);
}

.cs-save-item__bonus {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* ========================================
 * Conditions
 * ======================================== */

.cs-conditions {
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-warning) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
  border-radius: var(--radius-md);
}

.cs-conditions__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-conditions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cs-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.cs-condition-badge--negative {
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-primary));
  color: var(--color-accent-error);
}

.cs-condition-badge--positive {
  background: color-mix(in srgb, var(--color-accent-success) 20%, var(--color-bg-primary));
  color: var(--color-accent-success);
}

/* ========================================
 * Death Saves (in-game, rendered by character_sheet_core.js)
 * ======================================== */

.cs-death-saves {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-error) 8%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 25%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.cs-ds-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cs-ds-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.cs-ds-type {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  width: 12px;
  text-align: center;
}

.cs-ds-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-default);
  background: transparent;
}

.cs-ds-dot--success {
  background: var(--color-accent-success);
  border-color: var(--color-accent-success);
}

.cs-ds-dot--failure {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

/* ========================================
 * Exhaustion (in-game)
 * ======================================== */

.cs-exhaustion {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: color-mix(in srgb, var(--color-accent-warning) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.cs-exhaustion-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-exhaustion-level {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-warning);
}

/* ========================================
 * Copy Button
 * ======================================== */

.copy-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.copy-btn:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.copy-btn:active {
  transform: scale(0.95);
}

.copy-btn__icon {
  font-size: var(--font-size-sm);
}

.copy-btn--copied {
  background: color-mix(in srgb, var(--color-accent-success) 20%, var(--color-bg-tertiary));
  border-color: var(--color-accent-success);
  color: var(--color-accent-success);
}
/**
 * Character Stats — Responsive & Features
 * =========================================
 * Responsive styles, reduced motion, and class features/racial traits.
 */

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .character-sheet__header {
    padding: var(--space-2);
  }

  .character-sheet__content {
    padding: var(--space-2);
  }

  .cs-abilities {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Smaller hexagons on tablet */
  .cs-ability {
    --hex-size: 64px;
  }

  .cs-stat-row {
    flex-wrap: wrap;
  }

  .cs-stat {
    min-width: calc(50% - var(--space-1));
  }

  .cs-section__content {
    max-height: 220px;
  }

  .copy-btn {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
  }

  .copy-btn__label {
    display: none;
  }
}

@media (max-width: 375px) {
  .cs-abilities {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1) 0;
  }

  /* Even smaller hexagons on small phones */
  .cs-ability {
    --hex-size: 56px;
  }

  .cs-ability__mod {
    font-size: var(--font-size-lg);
  }

  .cs-ability__label {
    font-size: 8px;
  }

  .cs-ability__score {
    font-size: 8px;
  }

  .cs-stat__value {
    font-size: var(--font-size-base);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .cs-ability,
  .cs-section__toggle {
    transition: none;
  }
  /* HP bar reduced motion handled in components/_hp_bar.css */
}

/* ========================================
 * Features Tab - Class Features, Racial Traits, Feats
 * ======================================== */

.cs-features-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.cs-features-section {
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border-default, #333);
  border-radius: 6px;
  overflow: hidden;
}

.cs-features-section__title {
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
  background: var(--color-bg-secondary, #1a1a1a);
  border-bottom: 1px solid var(--color-border-default, #333);
}

.cs-features-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cs-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--color-border-subtle, #222);
  font-size: 0.875rem;
  color: var(--color-text-primary, #e0e0e0);
}

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

/* Expandable feature with description */
details.cs-feature {
  cursor: pointer;
}

details.cs-feature > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  list-style: none;
}

details.cs-feature > summary::-webkit-details-marker {
  display: none;
}

details.cs-feature[open] > summary {
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid var(--color-border-subtle, #222);
  margin-bottom: var(--space-2, 0.5rem);
}

details.cs-feature[open] .cs-feature__expand {
  transform: rotate(180deg);
}

.cs-feature__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.cs-feature__icon {
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.7;
}

.cs-feature--class .cs-feature__icon {
  color: var(--color-primary, #4a90e2);
}

.cs-feature--racial .cs-feature__icon {
  color: var(--color-success, #5cb85c);
}

.cs-feature--feat .cs-feature__icon {
  color: var(--color-warning, #f0ad4e);
}

.cs-feature__name {
  font-weight: 500;
  flex: 1;
}

.cs-feature__level {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  margin-left: auto;
}

.cs-feature__expand {
  font-size: 0.625rem;
  color: var(--color-text-muted, #888);
  transition: transform 0.2s ease;
  margin-left: var(--space-1, 0.25rem);
}

.cs-feature__description {
  padding: var(--space-2, 0.5rem);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #999);
  background: var(--color-bg-secondary, #1a1a1a);
  border-radius: 4px;
}

/* Hover state for non-details features */
.cs-feature:not(details):hover {
  background: var(--color-bg-secondary, #1a1a1a);
}

/* Responsive */
@media (max-width: 480px) {
  .cs-feature {
    padding: var(--space-2, 0.5rem);
  }

  .cs-feature__name {
    font-size: 0.8125rem;
  }
}

/* Empty state for features section */
.cs-features__empty {
  color: var(--color-text-muted, #888);
  font-size: 0.8125rem;
  text-align: center;
  padding: var(--space-3, 0.75rem);
  font-style: italic;
  margin: 0;
}

/* ============================== */
/* CLASS RESOURCES SECTION        */
/* ============================== */

.cs-resources {
  padding: var(--space-2, 0.5rem) 0;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.cs-resources__title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
  margin: 0 0 var(--space-2, 0.5rem) 0;
}

.cs-resources__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.cs-resource {
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-2, 0.5rem);
}

.cs-resource__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-1, 0.25rem);
}

.cs-resource__icon {
  font-size: 0.875rem;
  flex-shrink: 0;
}

.cs-resource__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-primary, #fff);
  flex: 1;
}

.cs-resource__count {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
  color: var(--color-accent-secondary, #4CAF50);
}

.cs-resource--partial .cs-resource__count {
  color: var(--color-accent-orange, #FFC107);
}

.cs-resource--empty .cs-resource__count {
  color: var(--color-accent-error, #f44336);
}

.cs-resource__bar {
  height: 4px;
  background: var(--color-bg-primary, rgba(0, 0, 0, 0.3));
  border-radius: 2px;
  overflow: hidden;
}

.cs-resource__bar-fill {
  height: 100%;
  background: var(--color-accent-secondary, #4CAF50);
  transition: width 0.3s ease;
}

.cs-resource--partial .cs-resource__bar-fill {
  background: var(--color-accent-orange, #FFC107);
}

.cs-resource--empty .cs-resource__bar-fill {
  background: var(--color-accent-error, #f44336);
}

.cs-resource__recovery {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #888);
  display: block;
  margin-top: var(--space-1, 0.25rem);
  text-align: right;
}

/* Compact mode for smaller screens */
@media (max-width: 400px) {
  .cs-resources__list {
    gap: var(--space-1, 0.25rem);
  }

  .cs-resource {
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  }

  .cs-resource__name {
    font-size: 0.75rem;
  }
}
/**
 * Character Stats — Import Hub
 * ===============================
 * Core stats display, conditions, death saves, and class features.
 *
 * Decomposed into focused files under stats/ for maintainability.


 */
/**
 * Combat Visualization — Base Styles
 * =====================================
 * XP progress, stat animations, ability score tooltip, loading state,
 * inspiration, death saves, reduced motion, details, powers container.
 */


/* ========================================
 * XP Progress Display
 * ======================================== */

.cs-xp-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

.cs-xp-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-xp-progress__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-xp-progress__values {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-mono);
}

.cs-xp-progress__current {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-xp-progress__separator {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cs-xp-progress__next {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cs-xp-progress__bar {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.cs-xp-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary));
  border-radius: var(--radius-pill);
  transition: width 0.5s ease-out;
}

.cs-xp-progress__remaining {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

/* Level up ready state */
.cs-xp-progress--ready {
  border: 1px solid var(--color-accent-secondary);
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
}

.cs-xp-progress--ready .cs-xp-progress__fill {
  background: var(--color-accent-secondary);
  animation: xp-ready-pulse 2s ease-in-out infinite;
}

@keyframes xp-ready-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.cs-xp-progress__level-up {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-bg-primary);
  text-transform: uppercase;
  animation: level-up-bounce 1s ease-in-out infinite;
}

@keyframes level-up-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ========================================
 * Stat Change Animations
 * ======================================== */

.cs-stat__value--increased {
  animation: stat-increase 0.5s ease-out;
}

@keyframes stat-increase {
  0% { color: var(--color-text-primary); }
  50% { color: var(--color-accent-secondary); transform: scale(1.1); }
  100% { color: var(--color-text-primary); transform: scale(1); }
}

.cs-stat__value--decreased {
  animation: stat-decrease 0.5s ease-out;
}

@keyframes stat-decrease {
  0% { color: var(--color-text-primary); }
  50% { color: var(--color-accent-error); transform: scale(0.95); }
  100% { color: var(--color-text-primary); transform: scale(1); }
}

/* ========================================
 * Ability Score Interaction Tooltip
 * ======================================== */

.cs-ability__tooltip {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: var(--z-panel);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.cs-ability:hover .cs-ability__tooltip,
.cs-ability:focus-within .cs-ability__tooltip {
  opacity: 1;
  visibility: visible;
}

.cs-ability__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-bg-elevated);
}

.cs-ability__tooltip-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ========================================
 * Loading State
 * ======================================== */

.character-sheet__loading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.cs-skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: cs-shimmer 1.5s infinite;
}

.cs-skeleton--identity {
  height: 80px;
}

.cs-skeleton--abilities {
  height: 60px;
}

.cs-skeleton--stats {
  height: 48px;
}

.cs-skeleton--section {
  height: 120px;
}

@keyframes cs-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================
 * Inspiration Indicator
 * ======================================== */

.cs-inspiration {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-gold) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-gold) 30%, transparent);
  border-radius: var(--radius-md);
}

.cs-inspiration__icon {
  font-size: var(--font-size-lg);
  color: var(--color-gold);
}

.cs-inspiration__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gold);
}

.cs-inspiration--inactive {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.cs-inspiration--inactive .cs-inspiration__icon,
.cs-inspiration--inactive .cs-inspiration__label {
  color: var(--color-text-muted);
}

/* ========================================
 * Death Saves Display
 * ======================================== */

.cs-death-saves {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-error) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 30%, transparent);
  border-radius: var(--radius-md);
}

.cs-death-saves__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-error);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.cs-death-saves__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-death-saves__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-width: 50px;
}

.cs-death-saves__marks {
  display: flex;
  gap: var(--space-1);
}

.cs-death-save-mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border-default);
  background: transparent;
}

.cs-death-save-mark--success {
  background: var(--color-accent-success);
  border-color: var(--color-accent-success);
}

.cs-death-save-mark--failure {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

/* ========================================
 * Reduced Motion for New Additions
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .cs-xp-progress__fill,
  .cs-xp-progress--ready .cs-xp-progress__fill,
  .cs-xp-progress__level-up {
    animation: none;
  }

  .cs-stat__value--increased,
  .cs-stat__value--decreased {
    animation: none;
  }

  .cs-skeleton {
    animation: none;
  }

  /* HP bar critical animation handled in components/_hp_bar.css */
}

/* ========================================
 * Details Section (within Stats tab)
 * ======================================== */

.cs-details-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.cs-details-section .cs-detail {
  padding: var(--space-1) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.cs-details-section .cs-detail strong {
  color: var(--color-text-primary);
  margin-right: var(--space-1);
}

/* ========================================
 * Powers Container (features + spells)
 * ======================================== */

/* ========================================
 * Combat Quickview Strip
 * ======================================== */

.cs-combat-quickview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
}

.cs-quickview-hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}

.cs-quickview-hp-bar {
  flex: 1;
  height: 6px;
  background: var(--color-surface-sunken, #1a1a2e);
  border-radius: 3px;
  overflow: hidden;
}

.cs-quickview-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transform-origin: left;
  transition: transform 0.5s ease;
}

/* HP state classes moved to components/_hp_bar.css for Phase 4 P2-13 */

.cs-quickview-hp-text {
  white-space: nowrap;
  color: var(--color-text-secondary);
  min-width: 3.5em;
  text-align: right;
}

.cs-quickview-stat {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--space-1);
  border-left: 1px solid var(--color-border);
}

.cs-quickview-label {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.cs-quickview-value {
  color: var(--color-text-primary);
  font-weight: 600;
}

.cs-quickview-conditions {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.cs-quickview-condition {
  background: var(--color-warning-bg, rgba(251, 191, 36, 0.15));
  color: var(--color-warning, #fbbf24);
  padding: 0 4px;
  border-radius: 2px;
  font-size: 0.7rem;
}

.cs-quickview-concentration {
  padding-left: var(--space-1);
  border-left: 1px solid var(--color-border);
}

.cs-quickview-conc-icon {
  color: var(--color-info, #60a5fa);
  animation: pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* HP bar reduced motion handled in components/_hp_bar.css */
  .cs-quickview-conc-icon { animation: none; }
/**
 * Combat Visualization — Badges & Hexagon
 * =========================================
 * Tab badges and stats+hexagon side-by-side layout.
 */


/* ========================================
 * Tab Badges
 * ======================================== */

.cs-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 6px;
  background: var(--color-accent, #818cf8);
  color: var(--color-text-on-accent, #fff);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
}

.cs-powers-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ========================================
 * Stats + Hexagon Side-by-Side Layout
 * ======================================== */

.cs-stats-hexagon-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cs-stat-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 70px;
}

.cs-stat-column .cs-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  min-width: 60px;
}

.cs-stat-column .cs-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-stat-column .cs-stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
}

/* Stack on narrow panels */
@media (max-width: 400px) {
  .cs-stats-hexagon-row {
    flex-direction: column;
  }

  .cs-stat-column {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

/* ========================================
 * Stats Grid Layout (Masonry-inspired)
 * ======================================== */

.cs-stats-grid {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cs-stats-grid__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 110px;
  flex-shrink: 0;
}

.cs-stats-grid__right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Combat Stats Card (AC, Init, Speed, Prof) */
.cs-combat-stats-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.cs-mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  background: var(--color-bg-tertiary);
  /* Subtle border so the chip outline is always visible, even when bg-tertiary is close to bg-secondary (#4132) */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  transition: background 0.15s, border-color 0.15s;
}

.cs-mini-stat:hover {
  background: var(--color-bg-hover);
}

/* Clickable mini-stat (for rolls like initiative) */
.cs-mini-stat--clickable {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.cs-mini-stat--clickable:hover {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-hover);
}

.cs-mini-stat--clickable:active {
  transform: scale(0.97);
}

.cs-mini-stat--clickable:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px var(--color-accent-primary-dim);
}

.cs-mini-stat__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  line-height: 1;
}

.cs-mini-stat__label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

/* Passive Stats Card */
.cs-passive-stats-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-accent-secondary);
}

.cs-passive-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-passive-stat__icon {
  font-size: var(--font-size-sm);
  width: 18px;
  text-align: center;
}

.cs-passive-stat__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  min-width: 20px;
}

.cs-passive-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Saves Card */
.cs-saves-card {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.cs-saves-card__label {
  font-size: 9px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
  text-align: center;
}

.cs-saves-card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.cs-save-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  background: var(--color-bg-tertiary);
  /* Visible unselected ring so non-proficient saves still read as cells, not floating text (#4132) */
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-save-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.cs-save-chip--proficient {
  background: var(--color-accent-primary-dim);
  border-color: var(--color-accent-primary);
}

.cs-save-chip--proficient:hover {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.cs-save-chip--proficient:hover .cs-save-chip__abbr,
.cs-save-chip--proficient:hover .cs-save-chip__mod {
  color: var(--color-bg-primary);
}

.cs-save-chip__abbr {
  font-size: 8px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-save-chip__mod {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.cs-save-chip--proficient .cs-save-chip__abbr {
  color: var(--color-accent-primary);
}

/* Responsive: stack on narrow panels */
@media (max-width: 400px) {
  .cs-stats-grid {
    flex-direction: column;
  }

  .cs-stats-grid__left {
    width: 100%;
  }

  .cs-combat-stats-card {
    grid-template-columns: repeat(4, 1fr);
  }

  .cs-passive-stats-card {
    flex-direction: row;
    justify-content: space-around;
    border-left: none;
    border-top: 2px solid var(--color-accent-secondary);
    padding-top: var(--space-2);
  }

  .cs-passive-stat {
    flex-direction: column;
    text-align: center;
  }

  .cs-saves-card__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========================================
 * Hexagonal Ability Score Visualization
 * ======================================== */

.cs-abilities-hexagon {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-2);
  /* Ensure hex area doesn't collapse and participates in scroll */
  min-height: 200px;
  flex-shrink: 0;
}

.ability-hexagon {
  flex: 1;
  max-width: 300px;
  width: 100%;
  /* Ensure labels at edges aren't clipped */
  overflow: visible;
}

.ability-hexagon__svg {
  width: 100%;
  height: auto;
  display: block;
}

.ability-hexagon__vertex {
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ability-hexagon__vertex:hover {
  r: 8;
  filter: drop-shadow(0 0 4px var(--color-accent-secondary));
}

.ability-hexagon__vertex:focus {
  outline: none;
  filter: drop-shadow(0 0 6px var(--color-accent-primary));
}

@media (prefers-reduced-motion: reduce) {
  .ability-hexagon__vertex {
    transition: none;
  }
}
/**
 * Combat Visualization — Import Hub
 * ====================================
 * XP progress, stat animations, ability tooltips, death saves,
 * tab badges, and hexagon layout.
 *
 * Decomposed into focused files under combat_visualization/ for maintainability.


 */
/**
 * Character Sheet Gear — Equipment and Weapons
 * ===============================================
 * Equipment list, item rows, action buttons, rarity styling, and weapon stat chips.
 */


/* ========================================
 * Gear Tab Styles
 * ======================================== */

.cs-gold {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-gold) 10%, var(--color-bg-secondary));
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  color: var(--color-gold);
}

.cs-inventory-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-gear-group {
  margin-bottom: var(--space-2);
}

.cs-gear-group__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-1);
}

/* ========================================
 * Gear Tab Item Styles
 * ======================================== */

.cs-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.cs-item:hover {
  background: var(--color-bg-tertiary);
}

.cs-item:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-bg-tertiary);
}

.cs-item__name {
  flex: 1;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-item__qty {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cs-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-secondary) 20%, var(--color-bg-primary));
  color: var(--color-accent-secondary);
}

.cs-item__badge--attuned {
  background: color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-bg-primary));
  color: var(--color-accent-purple);
}

.cs-item__stat {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Item action button (kebab menu) */
.cs-item__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: var(--space-1);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  cursor: pointer;
  opacity: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cs-item:hover .cs-item__action-btn,
.cs-item:focus-within .cs-item__action-btn {
  opacity: 1;
}

.cs-item__action-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.cs-item__action-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  opacity: 1;
}

/* Rarity-based item styling */
.cs-item--common { border-left: 3px solid var(--color-text-muted); }
.cs-item--uncommon { border-left: 3px solid var(--color-accent-secondary); }
.cs-item--rare { border-left: 3px solid var(--color-accent-primary); }
.cs-item--very_rare { border-left: 3px solid var(--color-accent-purple); }
.cs-item--legendary { border-left: 3px solid var(--color-gold); }
.cs-item--artifact { border-left: 3px solid var(--color-accent-error); }

/* Touch devices: always show action button */
@media (hover: none) {
  .cs-item__action-btn {
    opacity: 0.7;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ========================================
 * Saving Throws (with proficiency chips)
 * ======================================== */

.cs-saves-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-save {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  transition: background var(--transition-fast);
}

.cs-save:hover {
  background: var(--color-bg-tertiary);
}

.cs-save__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  min-width: 40px;
}

/* ========================================
 * Stat Chips (for gear items)
 * ======================================== */

.cs-item__chips {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  cursor: default;
  min-height: 28px;
}

.stat-chip__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
}

.stat-chip__value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Attack chip - clickable for rolls */
.stat-chip--attack {
  cursor: pointer;
  background: color-mix(in srgb, var(--color-accent-error) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-accent-error) 40%, var(--color-border-default));
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.stat-chip--attack:hover {
  background: color-mix(in srgb, var(--color-accent-error) 25%, var(--color-bg-tertiary));
  border-color: var(--color-accent-error);
}

.stat-chip--attack:focus-visible {
  outline: 2px solid var(--color-accent-error);
  outline-offset: 2px;
}

.stat-chip--attack .stat-chip__value {
  color: var(--color-accent-error);
}

/* Damage chip */
.stat-chip--damage {
  background: color-mix(in srgb, var(--color-accent-warning) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-accent-warning) 40%, var(--color-border-default));
}

.stat-chip--damage .stat-chip__value {
  color: var(--color-accent-warning);
}

/* Defense/AC chip */
.stat-chip--defense {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
}

.stat-chip--defense .stat-chip__value {
  color: var(--color-accent-primary);
}

/**
 * Character Sheet Gear — Custom Attributes
 * ==========================================
 * Custom attribute pips, death save marks, and token image upload.
 */

/* ========================================
 * Custom Attribute Pips (Gap 2 - larger)
 * ======================================== */

.cs-custom-attr__pips {
  display: flex;
  gap: 4px;
  margin-top: var(--space-1);
}

.cs-custom-attr__pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-border-default);
  border: 2px solid var(--color-border-strong);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cs-custom-attr__pip--filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
}

/* ========================================
 * Death Save Marks (Gap 3 - 24px+)
 * ======================================== */

.cs-death-save-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border-default);
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cs-death-save-mark--success {
  background: var(--color-accent-success);
  border-color: var(--color-accent-success);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-success) 50%, transparent);
}

.cs-death-save-mark--failure {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-error) 50%, transparent);
}

/* ========================================
 * Class Feature Toggles (Gap 4 - 44px)
 * ======================================== */

.cs-feature__expand {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  margin-left: var(--space-2);
  padding: var(--space-1);
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

details.cs-feature > summary {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
}

/* ========================================
 * Class Resource Bars (Gap 6 - affordance)
 * ======================================== */

.cs-resource {
  background: var(--terminal-surface-elevated, rgba(255, 255, 255, 0.03));
  border-radius: var(--radius-md);
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  transition: border-color var(--transition-fast);
}

.cs-resource:hover {
  border-color: var(--color-border-default);
}

.cs-resource__bar {
  height: 6px;
  background: var(--terminal-surface-dim, rgba(0, 0, 0, 0.3));
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-top: var(--space-1);
}

.cs-resource__bar-fill {
  height: 100%;
  background: var(--terminal-accent, var(--color-accent-success));
  border-radius: var(--radius-sm);
  transition: width 0.3s ease;
}

.cs-resource__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-resource__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.cs-resource__count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--terminal-accent, var(--color-accent-success));
  background: color-mix(in srgb, var(--terminal-accent, var(--color-accent-success)) 15%, transparent);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
}

/* ========================================
 * XP Progress (Gap 7 - info indicator)
 * ======================================== */

.cs-xp-progress__label.has-info {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ========================================
 * Condition Badges Enhancement (Gap 5)
 * ======================================== */

.cs-condition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: color-mix(in srgb, var(--color-accent-warning) 15%, var(--color-bg-primary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-warning);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-height: 28px;
}

.cs-condition:hover {
  background: color-mix(in srgb, var(--color-accent-warning) 25%, var(--color-bg-primary));
  border-color: var(--color-accent-warning);
}

.cs-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-warning) 8%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

/**
 * Character Sheet Gear — Spell Slots and Touch
 * ===============================================
 * Spell slot pips, token upload button, and responsive touch targets.
 */

/* ========================================
 * Spell Slot Pips (Gap 10 - larger)
 * ======================================== */

.cs-spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.cs-spell-slot {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.cs-spell-slot__level {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  min-width: 20px;
}

.cs-spell-slot__pips {
  display: flex;
  gap: 4px;
}

.cs-spell-slot__pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cs-spell-slot__pip--filled {
  background: var(--color-accent-purple);
  border-color: var(--color-accent-purple);
  box-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-purple) 50%, transparent);
}

.cs-spell-slot__pip--used {
  background: var(--color-text-muted);
  border-color: var(--color-text-muted);
  opacity: 0.4;
}

/* ========================================
 * Token Upload Button (Gap 8)
 * ======================================== */

.cs-token-image__upload-btn {
  min-width: 44px;
  min-height: 36px;
}

.cs-token-image__remove-btn {
  min-width: 44px;
  min-height: 36px;
}

/* ========================================
 * Touch Target Expansion (WCAG 2.5.5)
 * ======================================== */

@media (hover: none) {
  /* Section toggles */
  .cs-section__header {
    min-height: 44px;
  }

  .cs-section__toggle {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tab buttons */
  .cs-tab-btn,
  [data-tab] {
    min-width: 44px;
    min-height: 44px;
  }

  /* Copy button */
  .copy-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Ability scores — hex is already large enough for touch */
  .cs-ability {
    --hex-size: 72px; /* Ensures minimum 44px touch target */
  }

  /* Skill items - the proficiency chip handles this, but ensure row is tappable */
  .cs-skill {
    min-height: 44px;
  }

  /* Saving throws */
  .cs-save {
    min-height: 44px;
  }

  /* Custom attribute pips - larger on touch */
  .cs-custom-attr__pip {
    width: 18px;
    height: 18px;
  }

  /* Death save marks - larger on touch */
  .cs-death-save-mark {
    width: 32px;
    height: 32px;
  }

  /* Spell slot pips - larger on touch */
  .cs-spell-slot__pip {
    width: 20px;
    height: 20px;
  }

  /* Feature expand toggle */
  .cs-feature__expand {
    min-width: 44px;
    min-height: 44px;
    padding: var(--space-2);
  }

  /* Stat chips */
  .stat-chip {
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
  }

  /* Condition badges */
  .cs-condition {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }

  /* Token upload buttons */
  .cs-token-image__upload-btn,
  .cs-token-image__remove-btn {
    min-width: 48px;
    min-height: 44px;
  }

  /* Resource bars - larger touch area */
  .cs-resource {
    padding: var(--space-3);
  }
}
/**
 * Character Sheet Gear Tab — Import Hub
 * ========================================
 * Equipment list, weapon stat chips, attribute pips, and spell slots.
 *
 * Decomposed into focused files under gear/ for maintainability.



 */
/**
 * HP & Rest — HP Display
 * ========================
 * HP bar, death saves display, temp HP, and HP status indicators.
 */


/* ========================================
 * HP Controls with +/- Buttons
 * ======================================== */

.cs-hp-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-hp-buttons {
  display: flex;
  gap: var(--space-1);
}

.cs-hp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: var(--space-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.cs-hp-btn:hover {
  background: var(--color-bg-hover);
}

.cs-hp-btn:active {
  transform: scale(0.95);
}

.cs-hp-btn--damage {
  color: var(--color-accent-error);
  border-color: color-mix(in srgb, var(--color-accent-error) 30%, var(--color-border-default));
}

.cs-hp-btn--damage:hover {
  background: color-mix(in srgb, var(--color-accent-error) 15%, var(--color-bg-tertiary));
  border-color: var(--color-accent-error);
}

.cs-hp-btn--heal {
  color: var(--color-accent-success);
  border-color: color-mix(in srgb, var(--color-accent-success) 30%, var(--color-border-default));
}

.cs-hp-btn--heal:hover {
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-tertiary));
  border-color: var(--color-accent-success);
}

.cs-hp-display {
  flex: 1;
  cursor: pointer;
}

.cs-hp-display:hover .cs-hp-bar {
  border-color: var(--color-accent-primary);
}

.cs-hp-temp {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  margin-left: var(--space-1);
}

/* ========================================
 * HP Modal for Custom Adjustments
 * ======================================== */

.cs-hp-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: var(--z-floating);
  animation: fadeIn 0.15s ease-out;
}

.cs-hp-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  min-width: 280px;
  animation: slideUp 0.2s ease-out;
}

.cs-hp-modal__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-align: center;
}

.cs-hp-modal__current {
  text-align: center;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
}

.cs-hp-modal__input-row {
  display: flex;
  gap: var(--space-2);
}

.cs-hp-modal__type-btn {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cs-hp-modal__type-btn--damage.active {
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-tertiary));
  border-color: var(--color-accent-error);
  color: var(--color-accent-error);
}

.cs-hp-modal__type-btn--heal.active {
  background: color-mix(in srgb, var(--color-accent-success) 20%, var(--color-bg-tertiary));
  border-color: var(--color-accent-success);
  color: var(--color-accent-success);
}

.cs-hp-modal__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  text-align: center;
}

.cs-hp-modal__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

.cs-hp-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ========================================
 * Rest Buttons
 * ======================================== */

.cs-rest-buttons {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.cs-rest-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cs-rest-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.cs-rest-btn__icon {
  font-size: var(--font-size-base);
}

.cs-rest-btn--short:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.cs-rest-btn--long:hover {
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
  border-color: var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

/**
 * HP & Rest — Rest Modal Base
 * =============================
 * Rest modal layout, HP status, and rest type selection.
 */

/* ========================================
 * Rest Modal
 * ======================================== */

.cs-rest-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-bg-primary) 85%, transparent);
  z-index: var(--z-modal, 1000);
  animation: fadeIn 0.15s ease-out;
}

.cs-rest-modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 420px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.2s ease-out;
}

.cs-rest-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cs-rest-modal__title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.cs-rest-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cs-rest-modal__close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* HP Status */
.cs-rest-modal__hp-status {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.cs-rest-modal__hp-current {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-accent-success);
}

.cs-rest-modal__hp-sep {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.cs-rest-modal__hp-max {
  font-size: var(--font-size-xl);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

.cs-rest-modal__hp-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-rest-modal__hp-missing {
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning);
  margin-left: var(--space-2);
}

/* Rest Type Selection */
.cs-rest-modal__types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.cs-rest-modal__type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cs-rest-modal__type-btn:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-hover);
}

.cs-rest-modal__type-btn.active {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.cs-rest-modal__type-btn--short.active {
  border-color: var(--color-accent-primary);
}

.cs-rest-modal__type-btn--long.active {
  border-color: var(--color-accent-secondary);
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-tertiary));
}

.cs-rest-modal__type-icon {
  font-size: var(--font-size-2xl);
}

.cs-rest-modal__type-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.cs-rest-modal__type-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Short Rest Options */
.cs-rest-modal__short-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.cs-rest-modal__section-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/**
 * HP & Rest — Hit Dice and Actions
 * ==================================
 * Hit dice options, multiclass hit dice, heal preview, long rest, and actions.
 */


/* Single class hit dice */
.cs-rest-modal__hit-dice-single {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.cs-rest-modal__die-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-rest-modal__die-type {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
}

.cs-rest-modal__die-available {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cs-rest-modal__die-avg {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cs-rest-modal__die-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-rest-modal__die-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cs-rest-modal__die-btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.cs-rest-modal__die-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-rest-modal__die-btn--plus {
  color: var(--color-accent-success);
}

.cs-rest-modal__die-btn--minus {
  color: var(--color-accent-error);
}

.cs-rest-modal__die-spend-value {
  min-width: 32px;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  text-align: center;
}

/* Multiclass hit dice */
.cs-rest-modal__hit-dice-multiclass {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-rest-modal__hit-die-class {
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.cs-rest-modal__class-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.cs-rest-modal__class-dice {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
}

.cs-rest-modal__class-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cs-rest-modal__class-avg {
  font-size: var(--font-size-xs);
  color: var(--color-accent-success);
}

.cs-rest-modal__class-controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.cs-rest-modal__class-controls .cs-rest-modal__die-btn {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-sm);
}

.cs-rest-modal__die-spend {
  min-width: 20px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  text-align: center;
}

/* Heal preview */
.cs-rest-modal__heal-preview {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--color-accent-success) 10%, var(--color-bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--color-accent-success) 30%, transparent);
  border-radius: var(--radius-sm);
}

.cs-rest-modal__heal-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cs-rest-modal__heal-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-accent-success);
}

.cs-rest-modal__heal-unit {
  font-size: var(--font-size-sm);
  color: var(--color-accent-success);
}

/* Long Rest Info */
.cs-rest-modal__long-info {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-secondary) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
  border-radius: var(--radius-md);
}

.cs-rest-modal__long-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-rest-modal__benefits-list {
  margin: 0;
  padding-left: var(--space-4);
  list-style-type: disc;
}

.cs-rest-modal__benefits-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.cs-rest-modal__benefits-list li:last-child {
  margin-bottom: 0;
}

/* Actions */
.cs-rest-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.cs-rest-modal__confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-rest-modal__confirm-icon {
  font-size: var(--font-size-base);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cs-rest-modal,
  .cs-rest-modal__content {
    animation: none;
  }
}
/**
 * HP & Rest — Import Hub
 * ========================
 * HP controls, death saves, rest modal, and hit dice management.
 *
 * Decomposed into focused files under hp_rest/ for maintainability.



 */
/**
 * Interactive Character Sheet — Base Controls
 * ============================================
 * Interactive spell slots, class resources, death saves, and hit dice.
 */


/* ========================================
 * Interactive Spell Slots
 * ======================================== */

.cs-spell-slots {
  margin-bottom: var(--space-3);
}

.cs-spell-slots__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-spell-level {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.cs-spell-level__label {
  min-width: 24px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.cs-spell-level__slots {
  display: flex;
  gap: var(--space-1);
}

.cs-spell-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform var(--transition-fast);
}

.cs-spell-slot:hover {
  transform: scale(1.15);
}

.cs-spell-slot__pip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent-purple);
  border: 2px solid var(--color-accent-purple);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-purple) 50%, transparent);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cs-spell-slot--used .cs-spell-slot__pip {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  box-shadow: none;
  opacity: 0.5;
}

/* ========================================
 * Interactive Class Resources
 * ======================================== */

.cs-resources-interactive {
  margin-bottom: var(--space-3);
}

.cs-resources-interactive__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-resource-interactive {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.cs-resource-interactive__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.cs-resource-interactive__icon {
  font-size: var(--font-size-base);
}

.cs-resource-interactive__name {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.cs-resource-interactive__count {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-resource-interactive__bar {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.cs-resource-interactive__fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.cs-resource-interactive__buttons {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
}

.cs-resource-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cs-resource-btn:hover:not(:disabled) {
  background: var(--color-bg-hover);
}

.cs-resource-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-resource-btn--use:hover:not(:disabled) {
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.cs-resource-btn--recover:hover:not(:disabled) {
  border-color: var(--color-accent-success);
  color: var(--color-accent-success);
}

/* ========================================
 * Interactive Death Saves
 * ======================================== */

.cs-death-saves-interactive {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-error) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 30%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.cs-death-saves-interactive__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-error);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-death-saves-interactive__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-death-saves-interactive__label {
  min-width: 70px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cs-death-saves-interactive__marks {
  display: flex;
  gap: var(--space-1);
}

.cs-death-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border-default);
  background: transparent;
}

.cs-death-mark--success.cs-death-mark--filled {
  background: var(--color-accent-success);
  border-color: var(--color-accent-success);
}

.cs-death-mark--failure.cs-death-mark--filled {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

.cs-death-save-roll-btn {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-accent-error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-secondary));
  color: var(--color-accent-error);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}

.cs-death-save-roll-btn:hover {
  background: var(--color-accent-error);
  color: var(--color-bg-primary);
}

.cs-death-save-roll-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Death Save Rolling Animation */
.cs-death-save-rolling {
  position: relative;
  pointer-events: none;
}

.cs-death-save-rolling::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cs-death-save-spin 0.8s linear infinite;
  margin-left: var(--space-1);
}

@keyframes cs-death-save-spin {
  to { transform: rotate(360deg); }
}

/* Death Save Result Feedback */
.cs-death-save-result--success {
  animation: cs-death-save-flash-success 0.5s ease;
}

.cs-death-save-result--critical-success {
  animation: cs-death-save-flash-critical-success 0.8s ease;
}

.cs-death-save-result--failure {
  animation: cs-death-save-flash-failure 0.5s ease;
}

.cs-death-save-result--critical-failure {
  animation: cs-death-save-flash-critical-failure 0.8s ease;
}

.cs-death-save-result--stabilized {
  animation: cs-death-save-flash-stabilized 1s ease;
}

.cs-death-save-result--death {
  animation: cs-death-save-flash-death 1s ease;
}

@keyframes cs-death-save-flash-success {
  0%, 100% { border-color: color-mix(in srgb, var(--color-accent-error) 30%, transparent); }
  50% { border-color: var(--color-accent-success); box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-success) 50%, transparent); }
}

@keyframes cs-death-save-flash-critical-success {
  0%, 100% { border-color: color-mix(in srgb, var(--color-accent-error) 30%, transparent); }
  25%, 75% { border-color: var(--color-gold); box-shadow: 0 0 20px color-mix(in srgb, var(--color-gold) 60%, transparent); }
}

@keyframes cs-death-save-flash-failure {
  0%, 100% { border-color: color-mix(in srgb, var(--color-accent-error) 30%, transparent); }
  50% { border-color: var(--color-accent-error); box-shadow: 0 0 12px color-mix(in srgb, var(--color-accent-error) 50%, transparent); }
}

@keyframes cs-death-save-flash-critical-failure {
  0%, 100% { border-color: color-mix(in srgb, var(--color-accent-error) 30%, transparent); }
  25%, 75% { border-color: var(--color-accent-error); box-shadow: 0 0 20px color-mix(in srgb, var(--color-accent-error) 80%, transparent); }
  50% { transform: scale(1.02); }
}

@keyframes cs-death-save-flash-stabilized {
  0% { border-color: color-mix(in srgb, var(--color-accent-error) 30%, transparent); }
  50% { border-color: var(--color-accent-success); background: color-mix(in srgb, var(--color-accent-success) 20%, var(--color-bg-secondary)); }
  100% { border-color: var(--color-accent-success); }
}

@keyframes cs-death-save-flash-death {
  0%, 100% { border-color: color-mix(in srgb, var(--color-accent-error) 30%, transparent); }
  30%, 70% { border-color: var(--color-accent-error); background: color-mix(in srgb, var(--color-accent-error) 30%, var(--color-bg-secondary)); }
}

/* Death Save Pip Animation */
.cs-death-pip--animate,
.cs-death-mark--animate {
  animation: cs-death-pip-fill 0.4s ease;
}

@keyframes cs-death-pip-fill {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

/* Stabilized State */
.cs-death-saves--stable {
  border-color: var(--color-accent-success);
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-secondary));
}

.cs-death-saves--stable .cs-death-saves-interactive__title,
.cs-death-saves--stable .cs-death-saves-card__title {
  color: var(--color-accent-success);
}

.cs-death-save-stable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-accent-success);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-success) 20%, var(--color-bg-secondary));
  color: var(--color-accent-success);
  font-weight: var(--font-weight-semibold);
}

.cs-death-save-stable__icon {
  font-size: var(--font-size-lg);
  animation: cs-heartbeat 1.5s ease infinite;
}

@keyframes cs-heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Dead State */
.cs-death-saves--dead {
  border-color: var(--color-accent-error);
  background: color-mix(in srgb, var(--color-accent-error) 25%, var(--color-bg-secondary));
}

.cs-death-save-dead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-accent-error);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-error) 30%, var(--color-bg-secondary));
  color: var(--color-accent-error);
  font-weight: var(--font-weight-semibold);
}

.cs-death-save-dead__icon {
  font-size: var(--font-size-lg);
}

/* Hidden state for transition */
.cs-death-saves--hidden {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Entering animation */
.cs-death-saves--entering {
  opacity: 0;
  transform: translateY(-10px);
}

.cs-death-saves-interactive,
.cs-death-saves-card {
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
/**
 * Interactive Character Sheet — Toggle & Search
 * ==============================================
 * Inspiration toggle, search input, condition toggles, touch adjustments,
 * and reduced motion.
 */

/* ========================================
 * Inspiration Toggle
 * ======================================== */

.cs-inspiration-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cs-inspiration-toggle:hover {
  border-color: var(--color-gold);
}

.cs-inspiration-toggle__icon {
  font-size: var(--font-size-lg);
  transition: transform 0.2s ease;
}

.cs-inspiration-toggle__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.cs-inspiration-toggle--active {
  background: color-mix(in srgb, var(--color-gold) 15%, var(--color-bg-secondary));
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.cs-inspiration-toggle--active .cs-inspiration-toggle__icon {
  transform: scale(1.2);
  text-shadow: 0 0 8px var(--color-gold);
}

/* ========================================
 * Hit Dice Tracker
 * ======================================== */

.cs-hit-dice-tracker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.cs-hit-dice-tracker__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cs-hit-dice-tracker__dice {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.cs-hit-dice-tracker__count {
  flex: 1;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
}

.cs-hit-dice-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.cs-hit-dice-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-tertiary));
  border-color: var(--color-accent-success);
  color: var(--color-accent-success);
}

.cs-hit-dice-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
 * Concentration Indicator
 * ======================================== */

.cs-concentration {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-accent-info) 15%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-info) 40%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.cs-concentration__icon {
  font-size: var(--font-size-base);
  color: var(--color-accent-info);
  animation: concentration-pulse 2s ease-in-out infinite;
}

@keyframes concentration-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.cs-concentration__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cs-concentration__spell {
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-info);
}

/* ========================================
 * Search Input for Filtering
 * ======================================== */

.cs-search-input {
  position: relative;
  margin-bottom: var(--space-2);
}

.cs-search-input__field {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-8);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.cs-search-input__field:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.cs-search-input__field::placeholder {
  color: var(--color-text-muted);
}

.cs-search-input__icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* ========================================
 * Condition Toggles
 * ======================================== */

.cs-condition-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.cs-condition-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.cs-condition-toggle:hover {
  border-color: var(--color-accent-warning);
  color: var(--color-text-secondary);
}

.cs-condition-toggle--active {
  background: color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-bg-tertiary));
  border-color: var(--color-accent-warning);
  color: var(--color-accent-warning);
}

/* ========================================
 * Touch Device Adjustments for Interactive Elements
 * ======================================== */

@media (hover: none) {
  .cs-hp-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .cs-rest-btn {
    min-height: 44px;
  }

  .cs-spell-slot {
    width: 36px;
    height: 36px;
  }

  .cs-spell-slot__pip {
    width: 28px;
    height: 28px;
  }

  .cs-resource-btn {
    min-width: 44px;
    min-height: 36px;
  }

  .cs-death-mark {
    width: 32px;
    height: 32px;
  }

  .cs-death-save-roll-btn {
    min-height: 44px;
  }

  .cs-inspiration-toggle {
    min-height: 44px;
  }

  .cs-hit-dice-btn {
    min-width: 44px;
    min-height: 36px;
  }

  .cs-condition-toggle {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================
 * Reduced Motion for Interactive Elements
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .cs-hp-modal,
  .cs-hp-modal__content {
    animation: none;
  }

  .cs-spell-slot:hover {
    transform: none;
  }

  .cs-inspiration-toggle__icon {
    transition: none;
  }

  .cs-concentration__icon {
    animation: none;
  }
}
/**
 * Interactive Character Sheet — Import Hub
 * ==========================================
 * Interactive controls for spell slots, hit dice, and condition toggles.
 *
 * Decomposed into focused files under interactive/ for maintainability.


 */
/**
 * Spell & Features — Buttons, Slots & Groups
 * ============================================
 * Spell cast buttons, spell slots grid, spell groups, feature items,
 * hit dice card, and concentration indicator.
 */


/* ========================================
 * Spell Cast Buttons (Powers Tab)
 * ======================================== */

.cs-spells-section,
.cs-cantrips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.cs-spells-section strong,
.cs-cantrips strong {
  width: 100%;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.cs-spell-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 32px;
}

.cs-spell-btn:hover {
  background: color-mix(in srgb, var(--color-accent-purple) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-purple);
}

.cs-spell-btn:active {
  transform: scale(0.98);
}

.cs-spell-btn:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 2px;
}

.cs-spell-btn--cantrip {
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
}

.cs-spell-btn--cantrip:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
}

.cs-spell-btn--casting {
  animation: spell-casting-pulse 0.5s ease-out;
}

@keyframes spell-casting-pulse {
  0% { transform: scale(1); box-shadow: none; }
  50% { transform: scale(1.05); box-shadow: 0 0 12px var(--color-accent-purple); }
  100% { transform: scale(1); box-shadow: none; }
}

.cs-spell-btn__icon {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

.cs-spell-btn--cantrip .cs-spell-btn__icon {
  color: var(--color-accent-primary);
}

.cs-spell-btn__name {
  flex: 1;
}

.cs-spell__level {
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  background: color-mix(in srgb, var(--color-accent-purple) 15%, transparent);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.cs-spell-btn--cantrip .cs-spell__level {
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}

/* Touch targets */
@media (hover: none) {
  .cs-spell-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  .cs-spell-btn--casting {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-spell-btn--casting {
    animation: none;
    box-shadow: 0 0 8px var(--color-accent-purple);
  }
}

/* ========================================
 * Spell Slots Grid (Visual Pips)
 * ======================================== */

.cs-spell-slots-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.cs-spell-slots__header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.cs-slot-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-slot-row__level {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  min-width: 24px;
}

.cs-slot-row__pips {
  display: flex;
  gap: 3px;
  flex: 1;
}

.cs-slot-pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-accent-purple);
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.cs-slot-pip--filled {
  background: var(--color-accent-purple);
  box-shadow: 0 0 4px var(--color-accent-purple);
}

.cs-slot-row__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  min-width: 28px;
  text-align: right;
}

/* ========================================
 * Spell Groups (By Level)
 * ======================================== */

.cs-spells-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cs-spell-group {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cs-spell-group__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cs-spell-group__icon {
  font-size: var(--font-size-sm);
  color: var(--color-accent-purple);
}

.cs-spell-group__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  flex: 1;
}

.cs-spell-group__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-primary);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
}

.cs-spell-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
}

/* Spells by level wrapper */
.cs-spells-by-level {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-spells-by-level__header {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Spellcasting section variant */
.cs-features-section--spells {
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, color-mix(in srgb, var(--color-accent-purple) 5%, var(--color-bg-secondary)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 20%, var(--color-border-default));
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.cs-features-section--spells .cs-features-section__title {
  color: var(--color-accent-purple);
}

/* ========================================
 * Simplified Feature Items (Powers Tab)
 * ======================================== */

.cs-feature-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  width: 100%;
  cursor: default;
  transition: background var(--transition-fast);
}

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

.cs-feature-item:hover {
  background: var(--color-bg-tertiary);
}

.cs-feature-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: var(--color-bg-tertiary);
}

.cs-feature-item[data-controller="rich-tooltip"] {
  cursor: help;
}

.cs-feature-item__name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

.cs-feature-item__level {
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.cs-feature-item__info-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.cs-feature-item:hover .cs-feature-item__info-hint {
  opacity: 1;
  color: var(--color-accent-primary);
}

/* Type-specific accent colors */
.cs-feature-item--class .cs-feature-item__name {
  color: var(--color-accent-primary);
}

.cs-feature-item--racial .cs-feature-item__name {
  color: var(--color-accent-success);
}

.cs-feature-item--feat .cs-feature-item__name {
  color: var(--color-accent-warning);
}

/* Features list container */
.cs-features-list {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Touch targets */
@media (hover: none) {
  .cs-feature-item {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }

  .cs-feature-item__info-hint {
    opacity: 0.7;
  }
}

/* ========================================
 * Hit Dice Card
 * ======================================== */

.cs-hit-dice-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.cs-hit-dice-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.cs-hit-dice-card__icon {
  font-size: var(--font-size-sm);
}

.cs-hit-dice-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-hit-dice-card__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-hit-dice-card__dice {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-hit-dice-card__count {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.cs-hit-dice-card__use {
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}

.cs-hit-dice-card__use:hover:not(:disabled) {
  background: var(--color-accent-primary-dim);
  border-color: var(--color-accent-primary);
}

.cs-hit-dice-card__use:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cs-hit-dice-card__breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
}

.cs-hit-dice__class {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
/**
 * Spell & Features — Death Saves & Proficiencies
 * =================================================
 * Death saves card, proficiencies card, and homebrew badge.
 */


/* ========================================
 * Death Saves Card
 * ======================================== */

.cs-death-saves-card {
  background: var(--color-bg-danger-dim);
  border: 1px solid var(--color-accent-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.cs-death-saves-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.cs-death-saves-card__icon {
  font-size: var(--font-size-sm);
}

.cs-death-saves-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-death-saves-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.cs-death-saves-card__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cs-death-saves-card__pips {
  display: flex;
  gap: var(--space-1);
}

.cs-death-pip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-death-pip--success {
  color: var(--color-accent-success);
}

.cs-death-pip--failure {
  color: var(--color-accent-danger);
}

.cs-death-pip--filled {
  background: currentColor;
}

.cs-death-saves-card__roll {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-death-saves-card__roll:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Concentration Indicator
 * ======================================== */

.cs-concentration-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-top: var(--space-2);
  background: var(--color-accent-primary-dim);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
}

.cs-concentration-indicator__icon {
  color: var(--color-accent-primary);
  animation: pulse 2s infinite;
}

.cs-concentration-indicator__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-concentration-indicator__spell {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
}

.cs-concentration-indicator__end {
  margin-left: auto;
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-concentration-indicator__end:hover {
  color: var(--color-accent-danger);
  border-color: var(--color-accent-danger);
}

/* ========================================
 * Proficiencies Card
 * ======================================== */

.cs-proficiencies-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-3);
}

.cs-proficiencies-card__header {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

.cs-proficiencies-card__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-proficiencies-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-prof-section {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.cs-prof-section__icon {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

.cs-prof-section__label {
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.cs-prof-section__list {
  color: var(--color-text-primary);
}
/**
 * Spell & Features — Class Resources & Stats
 * ============================================
 * Class resources interactive and spellcasting stats.
 */

/* ========================================
 * Homebrew Badge
 * ======================================== */

.cs-homebrew-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-warning);
  background: var(--color-accent-warning-dim);
  border-radius: var(--radius-xs);
  vertical-align: middle;
}

/* ========================================
 * Class Resources Interactive
 * ======================================== */

.cs-resources-interactive {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.cs-resources-interactive__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
}

.cs-resource-interactive {
  margin-bottom: var(--space-2);
}

.cs-resource-interactive:last-child {
  margin-bottom: 0;
}

.cs-resource-interactive__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.cs-resource-interactive__icon {
  font-size: var(--font-size-sm);
}

.cs-resource-interactive__name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.cs-resource-interactive__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-resource-interactive__recovery {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
}

.cs-resource-interactive__bar {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-xs);
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.cs-resource-interactive__fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-xs);
  transition: width 0.3s;
}

.cs-resource-interactive__buttons {
  display: flex;
  gap: var(--space-1);
}

.cs-resource-btn {
  flex: 1;
  padding: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cs-resource-btn--use {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
}

.cs-resource-btn--use:hover:not(:disabled) {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.cs-resource-btn--recover {
  color: var(--color-accent-success);
  background: var(--color-accent-success-dim);
  border: 1px solid transparent;
}

.cs-resource-btn--recover:hover:not(:disabled) {
  border-color: var(--color-accent-success);
}

.cs-resource-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
 * Spellcasting Stats
 * ======================================== */

.cs-spellcasting-stats {
  display: flex;
  justify-content: space-around;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.cs-spell-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cs-spell-stat__value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.cs-spell-stat__label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Touch targets for new components */
@media (hover: none) {
  .cs-hit-dice-card__use,
  .cs-death-saves-card__roll,
  .cs-concentration-indicator__end,
  .cs-resource-btn {
    min-height: 44px;
    min-width: 44px;
  }
}
/**
 * Spell & Features — Import Hub
 * ================================
 * Spell cast buttons, spell slots, spell groups, hit dice, death saves,
 * class resources, and spellcasting stats.
 *
 * Decomposed into focused files under spells_features/ for maintainability.



 */
/**
 * Character Sheet Gameplay — Base
 * =================================
 * Pending actions tray, action economy display, mechanics breakdown
 * tooltips, and empty states.
 */


/* ========================================
 * Pending Actions Tray
 * Shows queued actions awaiting player response
 * ======================================== */

.cs-pending-tray-container {
  flex-shrink: 0;
}

.cs-pending-tray {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-3);
}

.cs-pending-tray__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-pending-tray__icon {
  font-size: var(--font-size-base);
}

.cs-pending-tray__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-pending-tray__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
  background: var(--color-accent-warning);
  border-radius: var(--radius-full);
}

.cs-pending-tray__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Individual pending action cards */
.cs-pending-action {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-secondary);
  padding: var(--space-2);
  transition: transform 0.2s, opacity 0.2s;
}

.cs-pending-action.warning-caution {
  border-left-color: var(--color-accent-warning);
}

.cs-pending-action.warning-danger {
  border-left-color: var(--color-accent-error);
}

.cs-pending-action.warning-critical {
  border-left-color: var(--color-accent-error);
  background: var(--color-bg-error-subtle);
}

.cs-pending-action--approved,
.cs-pending-action--rejected {
  transform: translateX(100%);
  opacity: 0;
}

/* Error state for restored cards after backend failure */
.cs-pending-action--error {
  animation: shake 0.4s ease-in-out;
  border-left-color: var(--color-accent-error);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.cs-pending-action__error {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-error-subtle);
  color: var(--color-accent-error);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.cs-pending-action__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.cs-pending-action__icon {
  font-size: var(--font-size-sm);
}

.cs-pending-action__tool {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.cs-pending-action__timer {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-warning);
  background: var(--color-bg-warning-subtle);
  padding: var(--space-0-5) var(--space-1);
  border-radius: var(--radius-sm);
}

.cs-pending-action__body {
  margin-bottom: var(--space-2);
}

.cs-pending-action__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.4;
}

.cs-pending-action__warning {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-warning);
  margin: 0 0 var(--space-1) 0;
}

.cs-pending-action__consequences,
.cs-pending-action__alternatives {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0;
}

.cs-pending-action__consequences strong,
.cs-pending-action__alternatives strong {
  display: block;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-0-5);
}

.cs-pending-action__consequences ul,
.cs-pending-action__alternatives ul {
  margin: 0;
  padding-left: var(--space-3);
}

.cs-pending-action__consequences li,
.cs-pending-action__alternatives li {
  margin-bottom: var(--space-0-5);
}

.cs-pending-action__actions {
  display: flex;
  gap: var(--space-2);
}

.cs-pending-action__btn {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}

.cs-pending-action__btn:active {
  transform: scale(0.98);
}

.cs-pending-action__btn--confirm {
  background: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.cs-pending-action__btn--confirm:hover {
  background: var(--color-accent-primary-hover);
}

.warning-caution .cs-pending-action__btn--confirm {
  background: var(--color-accent-warning);
}

.warning-danger .cs-pending-action__btn--confirm,
.warning-critical .cs-pending-action__btn--confirm {
  background: var(--color-accent-error);
}

.cs-pending-action__btn--reject {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
}

.cs-pending-action__btn--reject:hover {
  background: var(--color-bg-hover);
}

/* Touch targets */
@media (hover: none) {
  .cs-pending-action__btn {
    min-height: 44px;
  }
}

/* ========================================
 * Action Economy Display (Multiplayer Combat)
 * Shows available actions, bonus actions, reactions, movement
 * ======================================== */

.cs-action-economy {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  padding: var(--space-2) var(--space-3);
}

.cs-action-economy__resources {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.cs-action-economy__resource {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-success-dim);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s, opacity 0.2s;
}

.cs-action-economy__resource--used {
  background: var(--color-bg-tertiary);
  opacity: 0.5;
}

.cs-action-economy__resource--used .cs-action-economy__icon {
  opacity: 0.4;
}

.cs-action-economy__icon {
  font-size: var(--font-size-sm);
}

.cs-action-economy__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cs-action-economy__movement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 80px;
}

.cs-action-economy__movement-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.cs-action-economy__movement-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

.cs-action-economy__movement-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  min-width: 32px;
  text-align: right;
}

/* Compact mode for smaller screens */
@media (max-width: 400px) {
  .cs-action-economy__resources {
    gap: var(--space-2);
  }

  .cs-action-economy__resource {
    padding: var(--space-0-5) var(--space-1);
  }

  .cs-action-economy__label {
    display: none;
  }

  .cs-action-economy__icon {
    font-size: var(--font-size-base);
  }
}

/* ========================================
 * Mechanics Breakdown Tooltips
 * D&D 5e modifier calculation transparency
 * ======================================== */

/* Elements with breakdown tooltips should use help cursor */
.cs-mini-stat[title],
.proficiency-chip[title],
.cs-passive-stat[title],
.cs-save__chip[title] {
  cursor: help;
}

/* ========================================
 * Empty States
 * Consistent empty state styling for tabs
 * ======================================== */

.cs-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  min-height: 150px;
}

.cs-empty-state__icon {
  font-size: 2.5rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  opacity: 0.6;
}

.cs-empty-state__text {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  font-weight: var(--font-weight-medium);
}

.cs-empty-state__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* Legacy empty text (for backward compatibility) */
.cs-empty-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-4);
  font-style: italic;
}

/**
 * Character Sheet Gameplay — Party Tabs
 * =======================================
 * Party member tabs for switching character views.
 */

 * Party Member Tabs
 * Horizontal tab row for switching between
 * viewing own character and party members
 * ======================================== */

.party-member-tabs {
  display: flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-muted);
  background: var(--color-bg-secondary);
}

.party-member-tabs__container {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.party-member-tabs__container::-webkit-scrollbar {
  display: none;
}

.party-member-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-2);
  min-width: 56px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  color: var(--color-text-secondary);
  font-family: inherit;
}

.party-member-tab:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.party-member-tab--active {
  background: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary);
  color: var(--color-text-primary);
}

.party-member-tab--self {
  /* Slightly different style for "You" tab */
}

.party-member-tab__name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.party-member-tab__hp-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.party-member-tab__hp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border-muted);
  transition: background-color 0.2s ease;
}

.party-member-tab__hp-dot--filled {
  background: var(--color-success);
}

.party-member-tab__hp-dot--critical {
  background: var(--color-error);
  animation: pulse-critical 1.5s ease-in-out infinite;
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Viewing Indicator - shows when viewing party member's sheet */
.cs-viewing-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-muted);
  font-size: var(--font-size-xs);
}

.cs-viewing-indicator__label {
  color: var(--color-text-muted);
}

.cs-viewing-indicator__name {
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-semibold);
}

/* Mobile responsive styles */
@media (max-width: 640px) {
  .party-member-tabs {
    padding: var(--space-1);
  }

  .party-member-tab {
    min-width: 48px;
    padding: var(--space-1);
  }

  .party-member-tab__name {
    max-width: 48px;
    font-size: 10px;
  }

  .party-member-tab__hp-dot {
    width: 4px;
    height: 4px;
  }
}
/**
 * Character Sheet Gameplay — Overview & Stats
 * ============================================
 * Achievements/discoveries section, stats+skills divider,
 * and overview tab styles.
 */

/* ==========================================================================
   Achievements/Discoveries Section
   ========================================================================== */

.cs-achievements {
  margin-top: var(--spacing-sm);
}

.cs-achievements__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: var(--spacing-xs);
}

.cs-achievements__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.cs-achievements__empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-md);
}

.cs-achievement {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border-left: 3px solid var(--color-border);
  transition: background-color 0.2s ease;
}

.cs-achievement:hover {
  background: var(--color-surface-elevated);
}

.cs-achievement__icon {
  font-size: var(--font-size-md);
  line-height: 1;
  flex-shrink: 0;
}

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

.cs-achievement__name {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
}

.cs-achievement__first-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-bg);
  margin-left: var(--spacing-xs);
  vertical-align: middle;
}

.cs-achievement__desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Rarity variants */
.cs-achievement--mythic {
  border-left-color: var(--rarity-artifact);
  background: var(--color-danger-subtle);
}

.cs-achievement--mythic .cs-achievement__name {
  color: var(--rarity-artifact);
}

.cs-achievement--legendary {
  border-left-color: var(--rarity-legendary);
  background: var(--overlay-gold-subtle);
}

.cs-achievement--legendary .cs-achievement__name {
  color: var(--rarity-legendary);
}

.cs-achievement--epic {
  border-left-color: var(--rarity-very-rare);
  background: var(--color-entity-spell-bg);
}

.cs-achievement--epic .cs-achievement__name {
  color: var(--rarity-very-rare);
}

.cs-achievement--rare {
  border-left-color: var(--rarity-rare);
  background: var(--color-info-bg);
}

.cs-achievement--rare .cs-achievement__name {
  color: var(--rarity-rare);
}

.cs-achievement--common {
  border-left-color: var(--rarity-uncommon);
  background: var(--color-success-subtle);
}

.cs-achievement--common .cs-achievement__name {
  color: var(--rarity-uncommon);
}

.cs-achievement--trivial {
  border-left-color: var(--color-border);
}

/* ========================================
 * Stats+Skills section divider (#1205)
 * Visual separator between merged content blocks
 * ======================================== */

.cs-section-divider {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-1, 4px);
  margin: var(--space-2, 8px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
}

/* ========================================
 * Overview Tab (#1205)
 * Adventure status at a glance — the party's
 * mini-map equivalent for the character sheet.
 * ======================================== */

.cs-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
}

/* HP section in overview */
.cs-ov-hp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

/* Active conditions in overview */
.cs-ov-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-1, 4px);
}

/* Compact 4-stat combat row */
.cs-ov-combat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(124, 58, 237, 0.15);
  border-radius: 4px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
}

.cs-ov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cs-ov-stat-value {
  font-size: var(--font-size-lg, 18px);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

.cs-ov-stat-label {
  font-size: var(--font-size-xs, 10px);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Adventure status rows (location, quests, party) */
.cs-ov-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: 4px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.15);
}

.cs-ov-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1, 4px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cs-ov-row:last-child {
  border-bottom: none;
}

.cs-ov-row--clickable {
  cursor: pointer;
  border-radius: 3px;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  margin: 0 calc(-1 * var(--space-2, 8px));
  transition: background 0.15s ease;
}

.cs-ov-row--clickable:hover,
.cs-ov-row--clickable:focus-visible {
  background: rgba(124, 58, 237, 0.15);
  outline: none;
}

.cs-ov-row--clickable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

.cs-ov-label {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cs-ov-value {
  font-size: var(--font-size-sm, 12px);
  color: var(--text-primary);
  font-weight: 500;
  text-align: right;
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-ov-value--badge {
  background: rgba(124, 58, 237, 0.2);
  color: var(--color-accent-purple);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: 2px;
  padding: 1px 6px;
  font-size: var(--font-size-xs, 10px);
  font-weight: 600;
}

.cs-ov-value--link {
  color: var(--color-accent-purple);
  font-size: var(--font-size-xs, 11px);
  text-decoration: underline;
  text-decoration-color: rgba(167, 139, 250, 0.4);
}

/* Mobile adjustments for overview */
@media (max-width: 1024px) {
  .cs-ov-combat-row {
    gap: var(--space-1, 4px);
  }

  .cs-ov-stat-value {
    font-size: var(--font-size-base, 16px);
  }
}

/* Mobile readability: enforce minimum 12px font on touch devices (#946)
   Sub-12px text is illegible on mobile screens. Stat labels, save abbreviations,
   and chip labels use 8-9px for density on desktop but need to be bumped on mobile. */
@media (max-width: 768px) {
  .cs-mini-stat__label,
  .cs-saves-card__label,
  .cs-save-chip__abbr,
  .stat-chip__label {
    font-size: 11px;
  }
}

/**
 * Character Sheet Gameplay — Import Hub
 * =======================================
 * Pending actions, action economy, mechanics, party tabs, and overview.
 *
 * Decomposed into focused files under gameplay/ for maintainability.



 */
/**
 * Character Sheet Panel — Import Hub
 * Split into focused files under character_sheet/ for maintainability (Phase 3 Task 8)
 */









/**
 * Character Sheet Inline — Tab Panels
 * =====================================
 * Stats, Skills, Powers, and Gear tab styles.
 */

/* Character Sheet Inline - Inline Panel Styling
 * ==============================================
 * Styles for the inline character sheet panel.
 * Renders inline in narrative area with tabs for Stats, Skills, Powers, Gear.
 * Uses 'csi-' prefix to avoid collision with main character sheet 'cs-' classes.
 */

/* Panel container */
.character-sheet-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

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

/* Header */
.character-sheet-inline__header {
  margin-bottom: var(--spacing-md);
}

.character-sheet-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.character-sheet-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.character-sheet-inline__icon {
  font-size: 1.25em;
}

.character-sheet-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.character-sheet-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.character-sheet-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.character-sheet-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Filter Tabs */
.character-sheet-inline__filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.character-sheet-inline__tab {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.character-sheet-inline__tab:hover {
  background: var(--surface-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.character-sheet-inline__tab.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-fg-on-emphasis);
}

/* Content Area */
.character-sheet-inline__content {
  min-height: 120px;
}

.character-sheet-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

/* Footer */
.character-sheet-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.character-sheet-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.character-sheet-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* ==========================================
 * Stats Tab
 * ========================================== */

.csi-hp-bar {
  position: relative;
  height: 24px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--spacing-sm);
}

.csi-hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-error), var(--color-accent-warning));
  transform-origin: left;
  transition: transform 0.3s ease;
}

.csi-hp-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-fg-on-emphasis);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.csi-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.csi-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.csi-stat-label {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csi-stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
}

/* Conditions */
.csi-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.csi-condition {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  background: var(--color-warning-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-warning-emphasis);
  cursor: help;
}

/* Ability Grid */
.csi-ability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

@media (min-width: 600px) {
  .csi-ability-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.csi-ability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.csi-ability-item:hover {
  background: var(--surface-tertiary);
  border-color: var(--color-accent-primary);
}

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

.csi-ability-abbr {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
}

.csi-ability-score {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.csi-ability-mod {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary);
}

/* ==========================================
 * Skills Tab
 * ========================================== */

.csi-skills-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-xs);
}

.csi-skill {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.csi-skill--clickable {
  cursor: pointer;
}

.csi-skill--clickable:hover {
  background: var(--surface-tertiary);
  border-color: var(--color-accent-primary);
}

.csi-skill--proficient {
  background: var(--color-success-subtle);
}

.csi-skill-prof {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.csi-skill--proficient .csi-skill-prof {
  color: var(--color-accent-success);
}

.csi-skill-name {
  flex: 1;
  color: var(--text-primary);
}

.csi-skill-bonus {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* ==========================================
 * Powers Tab
 * ========================================== */

.csi-powers-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.csi-features-section {
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.csi-features-section__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-subtle);
}

.csi-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.csi-feature__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.csi-feature__icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.csi-feature--class .csi-feature__icon {
  color: var(--color-accent-warning);
}

.csi-feature--racial .csi-feature__icon {
  color: var(--color-accent-purple);
}

.csi-feature--feat .csi-feature__icon {
  color: var(--color-accent-cyan);
}

.csi-feature__name {
  color: var(--text-primary);
  font-weight: 500;
}

.csi-feature__level {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.csi-feature__desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-top: var(--spacing-xs);
  line-height: 1.4;
}

/* Spells */
.csi-spell-slots {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.csi-slot {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: 2px 4px;
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  margin-right: var(--spacing-xs);
}

.csi-cantrips,
.csi-spells-section {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.csi-spells-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-spell {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs);
  background: var(--surface-tertiary);
  border-radius: var(--radius-sm);
  cursor: help;
}

.csi-cantrip {
  color: var(--color-accent-primary);
}
/**
 * Character Sheet Inline — Responsive
 * =====================================
 * Responsive adjustments for compact view.
 */

/* ==========================================
 * Gear Tab
 * ========================================== */

.csi-gold {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.csi-inventory-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.csi-gear-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.csi-gear-group__label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.csi-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border-left: 2px solid var(--border-subtle);
}

.csi-item--common { border-left-color: var(--text-muted); }
.csi-item--uncommon { border-left-color: var(--rarity-uncommon); }
.csi-item--rare { border-left-color: var(--rarity-rare); }
.csi-item--very_rare { border-left-color: var(--rarity-very-rare); }
.csi-item--legendary { border-left-color: var(--rarity-legendary); }
.csi-item--artifact { border-left-color: var(--rarity-artifact); }

.csi-item__name {
  flex: 1;
  color: var(--text-primary);
}

.csi-item__qty {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.csi-item__badge {
  font-size: var(--font-size-2xs);
  font-weight: 700;
  padding: 1px 4px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-fg-on-emphasis);
}

.csi-item__badge--attuned {
  background: var(--color-accent-warning);
}

.csi-item__stat {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ==========================================
 * Responsive
 * ========================================== */

@media (max-width: 600px) {
  .character-sheet-inline {
    padding: var(--spacing-sm);
  }

  .csi-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .csi-skills-list {
    grid-template-columns: 1fr;
  }

  .character-sheet-inline__filter-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: thin;
  }
}
/**
 * Character Sheet Inline — Inline Panels
 * ========================================
 * Inventory and spells inline panel styles.
 */

/* ============================================================================
 * INVENTORY INLINE PANEL
 * A focused view of just the character's inventory/gear.
 * Shares csi- classes with character sheet inline for consistency.
 * ============================================================================ */

.inventory-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

.inventory-inline__header {
  margin-bottom: var(--spacing-md);
}

.inventory-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.inventory-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.inventory-inline__icon {
  font-size: 1.25em;
}

.inventory-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.inventory-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.inventory-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.inventory-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning);
  font-weight: 600;
}

.inventory-inline__content {
  min-height: 80px;
}

.inventory-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

.inventory-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.inventory-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.inventory-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* ============================================================================
 * SPELLS INLINE PANEL
 * A focused view of just the character's spells.
 * Shares csi- classes with character sheet inline for consistency.
 * ============================================================================ */

.spells-inline {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  animation: csi-reveal 0.3s ease-out;
}

.spells-inline__header {
  margin-bottom: var(--spacing-md);
}

.spells-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.spells-inline__title-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.spells-inline__icon {
  font-size: 1.25em;
}

.spells-inline__title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

.spells-inline__close-btn {
  font-size: var(--font-size-base);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spells-inline__close-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.spells-inline__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.spells-inline__content {
  min-height: 80px;
}

.spells-inline__section {
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm);
}

.spells-inline__empty {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--text-muted);
  font-style: italic;
}

.spells-inline__footer {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-subtle);
}

.spells-inline__tip {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.spells-inline__tip code {
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
}

/* Responsive adjustments for inventory and spells panels */
@media (max-width: 600px) {
  .inventory-inline,
  .spells-inline {
    padding: var(--spacing-sm);
  }
}

/* Honor users who request reduced motion — disable reveal animations and
 * transitions on character sheet inline panels (stats/equipment/spells).
 */
@media (prefers-reduced-motion: reduce) {
  .stats-inline,
  .inventory-inline,
  .spells-inline,
  .csi-card,
  .csi-stat,
  .csi-skill,
  .csi-skill-row,
  .csi-feature,
  .csi-equipment-item,
  .csi-spell-item,
  .csi-collapse,
  .csi-collapse__header {
    animation: none !important;
    transition: none !important;
  }
}
/**
 * Character Sheet Inline — Import Hub
 * ======================================
 * Inline character sheet panel with tab views and inline panels.
 *
 * Decomposed into focused files under character_sheet_inline/ for maintainability.



 */
/**
 * Entity Inline Panel Styles
 * ==========================
 *
 * Shared styles for all entity inline panels (items, NPCs, locations, monsters).
 * These panels appear in the narrative area when clicking entity links.
 */

/* Base container */
.entity-inline {
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 6px;
  margin: 12px 0;
  overflow: hidden;
  animation: entityInline-slideIn 0.2s ease-out;
}

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

/* Header */
.entity-inline__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-tertiary, #242424);
}

.entity-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.entity-inline__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.entity-inline__icon {
  font-size: 1.2em;
}

.entity-inline__title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
  flex-grow: 1;
}

.entity-inline__subtitle {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  margin-left: 28px; /* Align with title (after icon) */
}

.entity-inline__close-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1em;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  margin-left: auto;
}

.entity-inline__close-btn:hover {
  background: var(--color-bg-hover, #333);
  color: var(--color-text-primary, #e0e0e0);
}

/* Badges */
.entity-inline__badge {
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-bg-accent, #2a3a4a);
  color: var(--color-accent, #6ab0f3);
  text-transform: capitalize;
}

.entity-inline__badge--cr {
  background: var(--color-danger-bg, #4a2a2a);
  color: var(--color-danger, #f36a6a);
}

/* Rarity badges */
.entity-inline__rarity--common {
  background: var(--color-bg-accent, #2a3a4a);
  color: var(--color-text-muted, #888);
}

.entity-inline__rarity--uncommon {
  background: #2a4a2a;
  color: #6af36a;
}

.entity-inline__rarity--rare {
  background: #2a3a5a;
  color: #6ab0f3;
}

.entity-inline__rarity--very-rare {
  background: #4a2a5a;
  color: #b06af3;
}

.entity-inline__rarity--legendary {
  background: #5a4a2a;
  color: #f3b06a;
}

.entity-inline__rarity--artifact {
  background: #5a2a2a;
  color: #f36a6a;
}

/* NPC attitude badges */
.entity-inline__attitude {
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: capitalize;
}

.entity-inline__attitude--friendly {
  background: #2a4a2a;
  color: #6af36a;
}

.entity-inline__attitude--hostile {
  background: #4a2a2a;
  color: #f36a6a;
}

.entity-inline__attitude--wary {
  background: #4a4a2a;
  color: #f3f36a;
}

.entity-inline__attitude--neutral {
  background: var(--color-bg-accent, #2a3a4a);
  color: var(--color-text-muted, #888);
}

/* Content body */
.entity-inline__content {
  padding: 12px 16px;
}

.entity-inline__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.entity-inline__meta {
  display: flex;
  gap: 16px;
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  flex-wrap: wrap;
}

.entity-inline__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entity-inline__description {
  margin: 0;
  color: var(--color-text-secondary, #bbb);
  line-height: 1.5;
  font-size: 0.95em;
}

/* Monster combat stats */
.entity-inline__combat-stats {
  display: flex;
  gap: 16px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 4px;
  flex-wrap: wrap;
}

.entity-inline__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9em;
  color: var(--color-text-secondary, #bbb);
}

/* Monster ability scores */
.entity-inline__ability-scores {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 4px;
  text-align: center;
}

.entity-inline__ability {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.entity-inline__ability-label {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--color-text-muted, #888);
}

.entity-inline__ability-score {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
}

.entity-inline__ability-mod {
  font-size: 0.75em;
  color: var(--color-accent, #6ab0f3);
}

/* Lists (properties, facts, traits, exits, POI) */
.entity-inline__properties,
.entity-inline__facts,
.entity-inline__traits,
.entity-inline__exits,
.entity-inline__poi {
  font-size: 0.9em;
}

.entity-inline__properties strong,
.entity-inline__facts strong,
.entity-inline__traits strong,
.entity-inline__exits strong,
.entity-inline__poi strong {
  color: var(--color-text-primary, #e0e0e0);
  display: block;
  margin-bottom: 6px;
}

.entity-inline__property-list,
.entity-inline__fact-list,
.entity-inline__trait-list,
.entity-inline__exit-list,
.entity-inline__poi-list {
  margin: 0;
  padding-left: 20px;
  color: var(--color-text-secondary, #bbb);
}

.entity-inline__property-list li,
.entity-inline__fact-list li,
.entity-inline__trait-list li,
.entity-inline__exit-list li,
.entity-inline__poi-list li {
  margin-bottom: 4px;
}

/* Actions bar */
.entity-inline__actions {
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-tertiary, #242424);
}

.entity-inline__action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.entity-inline__action-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 4px;
  background: var(--color-bg-secondary, #1a1a1a);
  color: var(--color-text-secondary, #bbb);
  font-size: 0.85em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.entity-inline__action-btn:hover {
  background: var(--color-bg-hover, #333);
  border-color: var(--color-accent, #6ab0f3);
  color: var(--color-text-primary, #e0e0e0);
}

.entity-inline__action-btn--primary {
  background: var(--color-accent-bg, #1a3a5a);
  border-color: var(--color-accent, #6ab0f3);
  color: var(--color-accent, #6ab0f3);
}

.entity-inline__action-btn--primary:hover {
  background: var(--color-accent, #6ab0f3);
  color: var(--color-bg-primary, #121212);
}

.entity-inline__action-btn--danger {
  background: var(--color-danger-bg, #4a2a2a);
  border-color: var(--color-danger, #f36a6a);
  color: var(--color-danger, #f36a6a);
}

.entity-inline__action-btn--danger:hover {
  background: var(--color-danger, #f36a6a);
  color: var(--color-bg-primary, #121212);
}

/* ========================================
 * Item Inline - Enhanced Styles
 * ======================================== */

/* Property chips (for item properties) */
.entity-inline__property-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.entity-inline__property-chip {
  padding: 3px 8px;
  background: var(--color-bg-tertiary, #242424);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 4px;
  font-size: 0.8em;
  color: var(--color-text-secondary, #9ca3af);
}

/* Item stats display */
.item-inline__stats {
  display: flex;
  gap: 16px;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
  flex-wrap: wrap;
}

.item-inline__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
}

.item-inline__stat-label {
  font-size: 0.7em;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.item-inline__stat-value {
  font-size: 1em;
  font-weight: 600;
  color: var(--color-text-primary, #e5e7eb);
}

.item-inline__stat--negative .item-inline__stat-value {
  color: var(--color-accent-error, #ef4444);
}

/* Weapon-specific */
.item-inline__stats--weapon {
  border-left: 3px solid var(--color-item, #6ab0f3);
}

/* Armor-specific */
.item-inline__stats--armor {
  border-left: 3px solid var(--color-npc, #c084fc);
}

/* AC Breakdown (hidden by default) */
.item-inline__ac-breakdown {
  display: none;
  margin-top: 8px;
  padding: 8px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  font-size: 0.85em;
}

.item-inline__ac-breakdown.visible {
  display: block;
}

.item-inline__breakdown-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-text-primary, #e5e7eb);
}

.item-inline__breakdown-row {
  color: var(--color-text-secondary, #9ca3af);
  padding: 2px 0;
}

/* Consumable effect */
.item-inline__effect {
  padding: 8px 10px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 4px;
}

.item-inline__effect-label {
  font-weight: 600;
  color: #22c55e;
  margin-right: 6px;
}

.item-inline__effect-text {
  color: var(--color-text-secondary, #9ca3af);
}

/* Attunement section */
.item-inline__attunement {
  padding: 10px 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 6px;
}

.item-inline__attunement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.item-inline__attunement-label {
  font-weight: 600;
  color: #a78bfa;
}

.item-inline__attunement-slots {
  font-size: 0.8em;
  color: var(--color-text-muted, #6b7280);
}

.item-inline__attunement-status {
  font-size: 0.85em;
  color: var(--color-text-secondary, #9ca3af);
}

.item-inline__attunement-status--attuned {
  color: #22c55e;
  font-weight: 500;
}

.item-inline__attunement-status--full {
  color: var(--color-accent-warning, #f59e0b);
}

.item-inline__attunement-warning {
  display: none;
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 4px;
  font-size: 0.8em;
  color: #ef4444;
}

.item-inline__attunement-warning.visible {
  display: block;
  animation: shake 0.3s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Equipment comparison hint */
.item-inline__comparison-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary, #242424);
  border: 1px dashed var(--color-border, #3a3a3a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.item-inline__comparison-hint:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  border-color: var(--color-accent, #6ab0f3);
}

.item-inline__comparison-icon {
  font-size: 1.1em;
}

.item-inline__comparison-text {
  font-size: 0.85em;
  color: var(--color-text-secondary, #9ca3af);
}

/* Attune button */
.entity-inline__action-btn--attune {
  background: rgba(139, 92, 246, 0.15);
  border-color: #a78bfa;
  color: #a78bfa;
}

.entity-inline__action-btn--attune:hover:not(:disabled) {
  background: #a78bfa;
  color: var(--color-bg-primary, #121212);
}

.entity-inline__action-btn--attune:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Consumable button */
.entity-inline__action-btn--consumable {
  background: rgba(34, 197, 94, 0.15);
  border-color: #22c55e;
  color: #22c55e;
}

.entity-inline__action-btn--consumable:hover {
  background: #22c55e;
  color: var(--color-bg-primary, #121212);
}

/* Confirm state for use button */
.entity-inline__action-btn--confirm {
  background: var(--color-accent-warning, #f59e0b);
  border-color: var(--color-accent-warning, #f59e0b);
  color: var(--color-bg-primary, #121212);
  animation: pulse-confirm 1s ease-in-out infinite;
}

@keyframes pulse-confirm {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Equipped/Attuned badges */
.entity-inline__badge--equipped {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.entity-inline__badge--attuned {
  background: rgba(139, 92, 246, 0.15);
  color: #a78bfa;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* Footer */
.entity-inline__footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border, #3a3a3a);
}

.entity-inline__tip {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
  text-align: center;
}

.entity-inline__tip code {
  background: var(--color-bg-tertiary, #242424);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
}

/* Entity type-specific accent colors */
.entity-inline--item {
  border-left: 3px solid var(--color-item, #b0f36a);
}

.entity-inline--npc {
  border-left: 3px solid var(--color-npc, #6af3b0);
}

.entity-inline--location {
  border-left: 3px solid var(--color-location, #f3b06a);
}

.entity-inline--monster {
  border-left: 3px solid var(--color-monster, #f36a6a);
}

/* ============================================================
 * Location Inline Enhancements
 * ============================================================ */

/* Breadcrumb for location hierarchy */
.entity-inline__breadcrumb {
  font-size: 0.75em;
  color: var(--color-text-muted, #888);
  margin-bottom: 2px;
}

/* "You are here" badge */
.entity-inline__badge--current {
  background: var(--color-success-bg, #2a4a2a);
  color: var(--color-success, #6af36a);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Atmosphere and danger level */
.entity-inline__atmosphere {
  flex: 1;
}

.entity-inline__danger {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 0.85em;
  font-weight: 500;
}

.entity-inline__danger--safe,
.entity-inline__danger--none {
  background: var(--color-success-bg, #2a4a2a);
  color: var(--color-success, #6af36a);
}

.entity-inline__danger--low,
.entity-inline__danger--mild {
  background: var(--color-warning-bg, #4a4a2a);
  color: var(--color-warning, #f3f36a);
}

.entity-inline__danger--moderate,
.entity-inline__danger--medium {
  background: #5a3a2a;
  color: #f3a06a;
}

.entity-inline__danger--high,
.entity-inline__danger--dangerous {
  background: var(--color-danger-bg, #4a2a2a);
  color: var(--color-danger, #f36a6a);
}

.entity-inline__danger--deadly,
.entity-inline__danger--extreme {
  background: #3a1a1a;
  color: #ff5050;
  font-weight: 600;
}

/* Section styling */
.entity-inline__section {
  margin-top: 8px;
}

.entity-inline__section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.9em;
  color: var(--color-text-muted, #888);
}

.entity-inline__section-header svg {
  width: 14px;
  height: 14px;
}

.entity-inline__section-header strong {
  color: var(--color-text-primary, #e0e0e0);
}

/* Chip list for exits, POIs, NPCs */
.entity-inline__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.entity-inline__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.85em;
  border: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-secondary, #1a1a1a);
  color: var(--color-text-secondary, #bbb);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.entity-inline__chip:hover {
  background: var(--color-bg-hover, #333);
  border-color: var(--color-accent, #6ab0f3);
  color: var(--color-text-primary, #e0e0e0);
}

/* Exit chips */
.entity-inline__chip--exit {
  background: var(--color-bg-tertiary, #242424);
  border-color: var(--color-location, #f3b06a);
}

.entity-inline__chip--exit:hover {
  background: rgba(243, 176, 106, 0.15);
  color: var(--color-location, #f3b06a);
}

.entity-inline__chip--locked {
  opacity: 0.6;
  border-style: dashed;
}

.entity-inline__chip--locked:hover {
  opacity: 1;
}

/* POI chips */
.entity-inline__chip--poi {
  background: var(--color-bg-tertiary, #242424);
  border-color: var(--color-accent, #6ab0f3);
}

.entity-inline__chip--poi:hover {
  background: rgba(106, 176, 243, 0.15);
  color: var(--color-accent, #6ab0f3);
}

.entity-inline__chip--interacted {
  opacity: 0.7;
  border-color: var(--color-text-muted, #888);
}

/* NPC chips (non-interactive) */
.entity-inline__chip--npc {
  cursor: default;
  background: var(--color-bg-tertiary, #242424);
  border-color: var(--color-npc, #6af3b0);
}

/* ============================================================
 * Location Status Widget (Status Bar)
 * ============================================================ */

.location-widget {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--color-bg-tertiary, #242424);
  cursor: pointer;
  transition: background 0.15s ease;
  max-width: 180px;
}

.location-widget:hover {
  background: var(--color-bg-hover, #333);
}

.location-widget__icon {
  font-size: 1em;
  flex-shrink: 0;
}

.location-widget__name {
  font-size: 0.85em;
  color: var(--color-text-secondary, #bbb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
 * Location List Panel Enhancements
 * ============================================================ */

.location-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.location-list--connected {
  /* Visual indicator when WebSocket is connected */
}

.location-list__current {
  padding: 12px;
  background: var(--color-bg-tertiary, #242424);
  border-bottom: 1px solid var(--color-border, #3a3a3a);
}

.location-list__current--changing {
  animation: location-flash 0.5s ease;
}

@keyframes location-flash {
  0%, 100% { background: var(--color-bg-tertiary, #242424); }
  50% { background: rgba(243, 176, 106, 0.2); }
}

.location-list__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px 0;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.location-list__section-title svg {
  width: 14px;
  height: 14px;
}

.location-list__current-name {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
  margin-bottom: 4px;
}

.location-list__current-desc {
  font-size: 0.9em;
  color: var(--color-text-secondary, #bbb);
  line-height: 1.4;
}

.location-list__section {
  padding: 12px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
}

.location-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.location-list__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle, #2a2a2a);
}

.location-list__item:last-child {
  border-bottom: none;
}

.location-list__item--discovered {
  opacity: 0.8;
}

.location-list__item--visited {
  opacity: 1;
}

.location-list__item--traveling {
  background: rgba(243, 176, 106, 0.1);
  animation: travel-pulse 1s ease-in-out infinite;
}

@keyframes travel-pulse {
  0%, 100% { background: rgba(243, 176, 106, 0.1); }
  50% { background: rgba(243, 176, 106, 0.2); }
}

.location-list__item--updating {
  animation: item-highlight 0.5s ease;
}

@keyframes item-highlight {
  0% { background: rgba(106, 176, 243, 0.3); }
  100% { background: transparent; }
}

.location-list__name {
  flex: 1;
  color: var(--color-text-secondary, #bbb);
  font-size: 0.9em;
}

.location-list__distance {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
}

.location-list__visited-badge {
  color: var(--color-success, #6af36a);
}

.location-list__travel-btn {
  padding: 4px 8px;
  font-size: 0.8em;
  border: 1px solid var(--color-location, #f3b06a);
  border-radius: 4px;
  background: transparent;
  color: var(--color-location, #f3b06a);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.location-list__travel-btn:hover {
  background: var(--color-location, #f3b06a);
  color: var(--color-bg-primary, #121212);
}

/* ========================================
 * NPC Inline - Relationship & History
 * ======================================== */

/* Relationship bar */
.npc-inline__relationship {
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.npc-inline__rep-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.npc-inline__rep-label {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
}

.npc-inline__rep-value {
  font-size: 0.85em;
  font-weight: 600;
  text-transform: capitalize;
}

.npc-inline__rep-value--friendly {
  color: #22c55e;
}

.npc-inline__rep-value--warm {
  color: #84cc16;
}

.npc-inline__rep-value--neutral {
  color: #9ca3af;
}

.npc-inline__rep-value--wary {
  color: #f59e0b;
}

.npc-inline__rep-value--hostile {
  color: #ef4444;
}

.npc-inline__rep-change {
  font-size: 0.75em;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.npc-inline__rep-change.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.npc-inline__rep-change.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.npc-inline__rep-bar {
  height: 6px;
  background: var(--color-bg-primary, #121212);
  border-radius: 3px;
  overflow: hidden;
}

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

.npc-inline__rep-fill--friendly {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.npc-inline__rep-fill--warm {
  background: linear-gradient(90deg, #84cc16, #a3e635);
}

.npc-inline__rep-fill--neutral {
  background: linear-gradient(90deg, #6b7280, #9ca3af);
}

.npc-inline__rep-fill--wary {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.npc-inline__rep-fill--hostile {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

/* Interaction history */
.npc-inline__history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #3a3a3a);
}

.npc-inline__history strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85em;
  color: var(--color-text-secondary, #999);
}

.npc-inline__history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.npc-inline__history-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 4px;
  font-size: 0.85em;
}

.npc-inline__history-icon {
  flex-shrink: 0;
  font-size: 1em;
}

.npc-inline__history-text {
  flex: 1;
  color: var(--color-text-primary, #e5e7eb);
  line-height: 1.4;
}

.npc-inline__history-time {
  flex-shrink: 0;
  font-size: 0.75em;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
}

/* Merchant action button */
.entity-inline__action-btn--merchant {
  background: var(--color-npc, #c084fc);
  border-color: var(--color-npc, #c084fc);
  color: var(--color-bg-primary, #121212);
}

.entity-inline__action-btn--merchant:hover {
  background: color-mix(in srgb, var(--color-npc, #c084fc) 80%, white);
  border-color: color-mix(in srgb, var(--color-npc, #c084fc) 80%, white);
}

/* Attitude badges - enhanced */
.entity-inline__attitude {
  font-size: 0.75em;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
  font-weight: 500;
}

.entity-inline__attitude--friendly {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.entity-inline__attitude--hostile {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.entity-inline__attitude--wary {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.entity-inline__attitude--neutral {
  background: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ========================================
 * Party Member Inline Panel
 * ======================================== */

.party-member-inline__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Online status indicator */
.party-member-inline__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.party-member-inline__status.online {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.party-member-inline__status.offline {
  background: #6b7280;
}

/* HP Section */
.party-member-inline__hp-section {
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.party-member-inline__hp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.party-member-inline__hp-label {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
}

.party-member-inline__hp-value {
  font-size: 0.9em;
  font-weight: 600;
  font-family: var(--font-mono, monospace);
}

.party-member-inline__hp-value--healthy {
  color: #22c55e;
}

.party-member-inline__hp-value--injured {
  color: #eab308;
}

.party-member-inline__hp-value--critical {
  color: #ef4444;
}

.party-member-inline__hp-value--down {
  color: #6b7280;
}

.party-member-inline__hp-bar {
  height: 8px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.party-member-inline__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-member-inline__hp-fill--healthy {
  background: linear-gradient(90deg, #16a34a, #22c55e);
}

.party-member-inline__hp-fill--injured {
  background: linear-gradient(90deg, #ca8a04, #eab308);
}

.party-member-inline__hp-fill--critical {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  animation: hp-pulse 1s ease-in-out infinite;
}

.party-member-inline__hp-fill--down {
  background: #4b5563;
}

@keyframes hp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.party-member-inline__hp-temp {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  opacity: 0.7;
}

/* Stats row */
.party-member-inline__stats-row {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.party-member-inline__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.party-member-inline__stat-value {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--color-text-primary, #e5e7eb);
}

.party-member-inline__stat-label {
  font-size: 0.7em;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Conditions */
.party-member-inline__conditions {
  padding: 8px 0;
}

.party-member-inline__conditions-label {
  display: block;
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
  margin-bottom: 6px;
}

.party-member-inline__condition-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.party-member-inline__condition {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  background: var(--color-bg-tertiary, #242424);
  border: 1px solid var(--color-border, #3a3a3a);
  color: var(--color-text-secondary, #9ca3af);
}

.party-member-inline__condition--debuff {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.party-member-inline__condition--buff {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.party-member-inline__condition--concentration {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
  color: #a78bfa;
}

/* Heal action button */
.entity-inline__action-btn--heal {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.entity-inline__action-btn--heal:hover {
  background: #ef4444;
  color: var(--color-bg-primary, #121212);
}

/* ========================================
 * Treasury Inline Panel
 * ======================================== */

.treasury-inline {
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-border, #3a3a3a);
  border-radius: 6px;
  border-left: 3px solid #f59e0b;
  margin: 12px 0;
  overflow: hidden;
  animation: entityInline-slideIn 0.2s ease-out;
}

.treasury-inline__header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, #3a3a3a);
  background: var(--color-bg-tertiary, #242424);
}

.treasury-inline__header-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.treasury-inline__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.treasury-inline__icon {
  font-size: 1.2em;
}

.treasury-inline__title {
  margin: 0;
  font-size: 1.1em;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
  flex-grow: 1;
}

.treasury-inline__close-btn {
  background: none;
  border: none;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 1em;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}

.treasury-inline__close-btn:hover {
  background: var(--color-bg-hover, #333);
  color: var(--color-text-primary, #e0e0e0);
}

.treasury-inline__subtitle {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  margin-left: 28px;
}

.treasury-inline__content {
  padding: 12px 16px;
}

.treasury-inline__sections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.treasury-inline__section {
  padding: 10px 12px;
  background: var(--color-bg-tertiary, #242424);
  border-radius: 6px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__section-title {
  margin: 0 0 10px 0;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--color-text-secondary, #bbb);
}

.treasury-inline__currency-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.treasury-inline__currency-item {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__currency-amount {
  font-size: 1.1em;
  font-weight: 700;
  color: var(--color-text-primary, #e5e7eb);
  font-family: var(--font-mono, monospace);
}

.treasury-inline__currency-type {
  font-size: 0.85em;
  color: var(--color-text-muted, #888);
  text-transform: lowercase;
}

.treasury-inline__items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.treasury-inline__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--color-bg-primary, #121212);
  border-radius: 4px;
  border: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__item-name {
  color: var(--color-text-primary, #e5e7eb);
  font-size: 0.9em;
}

.treasury-inline__item-contributor {
  font-size: 0.75em;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

.treasury-inline__empty {
  text-align: center;
  color: var(--color-text-muted, #888);
  font-style: italic;
  padding: 16px;
}

.treasury-inline__empty-currency {
  color: var(--color-text-muted, #888);
  font-style: italic;
  font-size: 0.9em;
  margin: 0;
}

.treasury-inline__footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border, #3a3a3a);
}

.treasury-inline__tip {
  font-size: 0.8em;
  color: var(--color-text-muted, #888);
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .entity-inline__ability-scores {
    grid-template-columns: repeat(3, 1fr);
  }

  .entity-inline__combat-stats {
    flex-direction: column;
    gap: 8px;
  }

  .entity-inline__action-bar {
    flex-direction: column;
  }

  .entity-inline__action-btn {
    width: 100%;
    justify-content: center;
  }

  .entity-inline__chip-list {
    gap: 4px;
  }

  .entity-inline__chip {
    padding: 3px 8px;
    font-size: 0.8em;
  }

  .location-widget {
    max-width: 140px;
  }

  .location-widget__name {
    font-size: 0.8em;
  }

  .npc-inline__history-item {
    flex-wrap: wrap;
  }

  .npc-inline__history-time {
    width: 100%;
    margin-top: 4px;
  }
}
/*
 * Organism: Entity Inline
 * ========================
 * Inline entity panels: characters, items, locations, NPCs, party members, treasury.
 *
 * Split into focused modules under entity_inline/:
 *   _base.css          — Base entity inline styles
 *   _items.css         — Item inline enhanced styles
 *   _locations.css     — Location inline, status widget, location list panel
 *   _npc.css           — NPC inline relationship and history
 *   _party_treasury.css — Party member inline panel, treasury inline panel
 */






/* Zone-Based Panel Architecture CSS
 * ===================================
 * Styles for the zone-based layout system.
 *
 * Zones:
 * - status: Header area (managed by _status_bar.css)
 * - left: Left sidebar
 * - right: Right sidebar
 * - main: Center split container
 * - footer: Bottom dock (managed by floating_dock)
 * - center_solo: Fullscreen single panel
 */

/* ==========================================
 * Terminal Zones Container
 * ========================================== */

.terminal-zones {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ==========================================
 * Sidebar Zones (Left & Right)
 * ========================================== */

.zone {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, min-width 0.25s ease, opacity 0.25s ease;
}

/* STRUCTURAL: contain:layout prevents pseudo-elements and positioned children
 * from escaping the zone boundary. This makes CSS overflow bugs in zone
 * sidebars structurally contained rather than cascading to other elements. */
.zone--left {
  width: var(--zone-left-width, 280px);
  min-width: var(--zone-left-min, 200px);
  max-width: var(--zone-left-max, 400px);
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  contain: layout;
}

.zone--right {
  width: var(--zone-right-width, 320px);
  min-width: var(--zone-right-min, 200px);
  max-width: var(--zone-right-max, 500px);
  border-left: 1px solid var(--border-subtle);
  background: var(--surface-elevated);
  contain: layout;
}

.zone--main {
  flex: 1;
  min-width: 300px;
  /* #2575 / #3747 (Slice 0): defensive min-height: 0.
     Flex children default to min-height: auto, which prevents the child from
     shrinking below its intrinsic content height. On mobile this re-introduces
     the dead-space class fixed by #2575 (commit 34a7a5c2f) — if any descendant
     declares an intrinsic height (e.g. 100dvh on a future child), .zone--main
     refuses to shrink and the sticky input-area + ~40-50% of flex content get
     pushed below the visible viewport. min-height: 0 lets the flex chain
     resolve correctly on every viewport. Safe on desktop too — flex parents
     above already constrain the height. Spec: spec/views/zone_main_min_height_spec.rb. */
  min-height: 0;
  overflow: hidden;
}

/* Collapsed state */
.zone--collapsed {
  width: 0;
  min-width: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* Dockable zone sidebar indicator strip (#1555)
 * Shows a thin colored strip on hover when a sidebar zone is collapsed,
 * hinting that a dockable panel zone exists and can be expanded.
 * Desktop-only: the negative-offset pseudo-elements overflow on mobile. */
@media (min-width: 769px) {
  .zone--left.zone--collapsed,
  .zone--right.zone--collapsed {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
  }

  .zone--left.zone--collapsed::before,
  .zone--right.zone--collapsed::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s ease;
    z-index: var(--z-sticky);
  }

  .zone--left.zone--collapsed::before {
    right: -4px;
  }

  .zone--right.zone--collapsed::before {
    left: -4px;
  }

  .zone--left.zone--collapsed:hover::before,
  .zone--right.zone--collapsed:hover::before {
    background: var(--color-accent-primary, #7c3aed);
  }
}

/* ==========================================
 * Zone Header (for sidebar zones)
 * ========================================== */

.zone__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.zone__title {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.zone__actions {
  display: flex;
  gap: var(--spacing-xs);
}

.zone__action-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zone__action-btn:hover {
  background: var(--surface-tertiary);
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ==========================================
 * Zone Content
 * ========================================== */

.zone__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-sm);
}

/* ==========================================
 * Zone Toggle Handles
 * ========================================== */

.zone-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 48px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.zone-toggle:hover {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #fff;
}

.zone-toggle--left {
  right: -16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: none;
}

.zone-toggle--right {
  left: -16px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
}

.zone-toggle__icon {
  font-size: 10px;
  transition: transform 0.25s ease;
}

.zone--collapsed .zone-toggle__icon {
  transform: rotate(180deg);
}

/* ==========================================
 * Center Solo (Fullscreen) Mode
 * ========================================== */

.center-solo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-primary);
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.center-solo-overlay.active {
  opacity: 1;
  visibility: visible;
}

.center-solo__wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.center-solo__header {
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.center-solo__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.center-solo__close:hover {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
  color: #fff;
}

.center-solo__content {
  flex: 1;
  overflow: hidden;
  padding: var(--spacing-md);
}

/* When center solo is active, hide other UI */
body.center-solo-active .terminal-container > *:not(.center-solo-overlay) {
  opacity: 0.3;
  pointer-events: none;
}

/* ==========================================
 * Zone Resize Handles
 * ========================================== */

.zone-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s ease;
  z-index: var(--z-float);
}

.zone-resize:hover,
.zone-resize.dragging {
  background: var(--color-accent-primary);
}

.zone-resize--left {
  right: 0;
}

.zone-resize--right {
  left: 0;
}

.zone-resize__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 40px;
  background: var(--border-subtle);
  border-radius: 2px;
  transition: background 0.15s ease;
}

.zone-resize:hover .zone-resize__handle,
.zone-resize.dragging .zone-resize__handle {
  background: #fff;
}

/* ==========================================
 * Responsive
 * ========================================== */

@media (max-width: 1024px) {
  /* On tablets, sidebars become overlays */
  .zone--left,
  .zone--right {
    position: fixed;
    top: 60px;
    bottom: 60px;
    z-index: var(--z-panel);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  }

  .zone--left {
    left: 0;
    border-right: 1px solid var(--border-subtle);
  }

  .zone--right {
    right: 0;
    border-left: 1px solid var(--border-subtle);
  }

  .zone--collapsed {
    transform: translateX(-100%);
  }

  .zone--right.zone--collapsed {
    transform: translateX(100%);
  }

  /* Overlay backdrop when sidebar is open */
  .zone-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-panel);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .zone-backdrop.visible {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 768px) {
  /* On mobile, sidebars take full width */
  .zone--left,
  .zone--right {
    width: 100%;
    max-width: 100%;
  }

  /* Center solo takes full viewport */
  .center-solo__content {
    padding: var(--spacing-sm);
  }
}

/* ==========================================
 * Portrait-Mode Landscape Hint (#1547)
 * Gentle rotate prompt on VTT/map panels in portrait orientation.
 * Scoped to VTT/map panel containers only — not shown globally.
 * ========================================== */

.portrait-rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 480px) {
  .vtt-panel .portrait-rotate-hint,
  .dungeon-map-panel .portrait-rotate-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface-secondary, #1a1a2e);
    border-bottom: 1px solid var(--border-subtle, #333);
    color: var(--text-muted, #888);
    font-size: 0.6875rem;
    font-family: var(--font-mono, monospace);
    text-align: center;
    flex-shrink: 0;
    animation: portrait-hint-fade 0.3s ease-out;
    animation-fill-mode: forwards;
  }

  .portrait-rotate-hint__icon {
    display: inline-block;
    transform: rotate(90deg);
    font-size: 0.875rem;
  }
}

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

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */
/**
 * Combat Panel — Base Layout & Active State
 */

/* ========================================
 * Base Layout
 * ======================================== */

.combat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
  background: var(--color-bg-primary);
}

.combat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.combat__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat__icon {
  font-size: var(--font-size-base);
}

.combat__status-indicator {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.combat__status-indicator--active {
  background: color-mix(in srgb, var(--color-accent-error) 20%, transparent);
  color: var(--color-accent-error);
}

.combat__status-indicator--your-turn {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.combat__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.combat__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: center;
}

/* ========================================
 * Combat Active State
 * ======================================== */

.combat__active {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Round Display */
.combat__round-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.combat__round-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.combat__round-number {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
}

/* Current Turn */
.combat__current-turn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-primary);
}

.combat__turn-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.combat__turn-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* HP Display */
.combat__hp-display {
  padding: var(--space-2);
}

.combat__hp-bar-container {
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-1);
}

.combat__hp-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--color-accent-success) 0%, var(--color-accent-success) 50%, var(--color-accent-warning) 75%, var(--color-accent-error) 100%);
  background-size: 200% 100%;
  background-position: calc((1 - var(--hp-percent, 1)) * 100%) 0;
  border-radius: var(--radius-pill);
  transform-origin: left;
  transition: transform 0.3s ease, background-position 0.3s ease;
}

.combat__hp-text {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

/* Your Turn Actions */
.combat__your-turn {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--color-accent-success) 10%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-success) 30%, transparent);
  border-radius: var(--radius-md);
}

.combat__actions-title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-success);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat__action-economy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Action Token Group - holds action, bonus, reaction */
.action-token-group {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

/* Individual Action Token */
.action-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 52px;
  padding: var(--space-1);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  font-size: var(--font-size-base);
  cursor: help;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.action-token:hover:not(.action-token--used) {
  transform: scale(1.05);
  border-color: var(--color-accent-primary);
  background: var(--color-bg-hover);
}

.action-token:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
  position: relative;
}

.action-token__icon {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.action-token__label {
  font-size: var(--font-size-xxs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* Color coding for different action types */
.action-token--action {
  border-color: color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
}

.action-token--action:hover:not(.action-token--used) {
  border-color: var(--color-accent-warning);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

.action-token--bonus {
  border-color: color-mix(in srgb, var(--color-accent-secondary) 40%, transparent);
}

.action-token--bonus:hover:not(.action-token--used) {
  border-color: var(--color-accent-secondary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

.action-token--reaction {
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

.action-token--reaction:hover:not(.action-token--used) {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Used state */
.action-token--used {
  opacity: 0.4;
  filter: grayscale(0.8);
  border-color: var(--color-border-subtle);
  cursor: default;
}

/* Animation when token is just used */
.action-token--just-used {
  animation: token-spent 0.5s ease-out;
}

@keyframes token-spent {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.4;
  }
}

/* Movement Display */
.action-token-movement {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.action-token-movement .action-token__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.movement-bar-container {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  min-width: 80px;
}

.movement-bar {
  height: 100%;
  background: var(--color-accent-success);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.movement-bar--low {
  background: var(--color-accent-warning);
}

.movement-bar--depleted {
  background: var(--color-accent-error);
}

.movement-text {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 65px;
  text-align: right;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 2px;
}

.movement-text__current {
  font-weight: var(--font-weight-bold);
}

.movement-text__separator {
  color: var(--color-text-muted);
}

.movement-text__base {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.movement-text__unit {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: 1px;
}

/* HP Bar color states */
.hp-bar--healthy {
  background: var(--color-accent-success);
}

.hp-bar--injured {
  background: var(--color-accent-warning);
}

.hp-bar--critical {
  background: var(--color-accent-error);
  animation: hp-critical-pulse 1s ease-in-out infinite;
}

@keyframes hp-critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Status indicator variants */
.combat__status--combat {
  background: color-mix(in srgb, var(--color-accent-error) 20%, transparent);
  color: var(--color-accent-error);
}

.combat__status--your-turn {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
  animation: pulse-glow 2s ease-in-out infinite;
}

.combat__status--waiting {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.combat__status--ended {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.combat__turn-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
/**
 * Combat Panel — Quick Action Buttons & Stats
 */

/* ========================================
 * Quick Action Buttons
 * ======================================== */

.combat__quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.combat__action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.combat__action-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.combat__action-btn:active {
  transform: translateY(0);
}

.combat__action-btn:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
  position: relative;
}

.combat__action-btn--attack {
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
}

.combat__action-btn--attack:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border-hover);
  color: var(--color-danger-text-hover);
}

.combat__action-btn--sent {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  transform: scale(0.95);
}

.combat__action-icon {
  font-size: var(--font-size-base);
}

.combat__action-label {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Responsive: 2 columns on smaller panels */
@media (max-width: 320px) {
  .combat__quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Quick Stats */
.combat__quick-stats {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

.combat__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  min-width: 80px;
}

.combat__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat__stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}
/**
 * Combat Panel — Responsive & Reduced Motion
 */

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .combat__header {
    padding: var(--space-2);
  }

  .combat__content {
    padding: var(--space-2);
  }

  .combat__quick-stats {
    flex-wrap: wrap;
  }

  .combat__stat {
    flex: 1;
    min-width: 70px;
  }

  /* Action tokens on mobile - improved accessibility */
  .action-token {
    width: 52px;
    height: 52px;
    min-width: 48px;
    min-height: 48px;
  }

  .action-token__label {
    display: none;
  }

  .action-token__icon {
    font-size: var(--font-size-xl);
  }

  .action-token-group {
    gap: var(--space-2);
  }

  .action-token-movement {
    padding: var(--space-2);
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .movement-bar-container {
    min-width: 100%;
    order: 3;
  }

  .movement-text {
    font-size: var(--font-size-sm);
    min-width: auto;
    flex: 1;
  }

  .movement-text__base {
    display: none; /* Hide base on very small screens */
  }
}

/* Very small screens - stack action tokens vertically if needed */
@media (max-width: 360px) {
  .action-token-group {
    flex-wrap: wrap;
    justify-content: space-around;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .combat__status-indicator--your-turn,
  .combat__status--your-turn,
  .hp-bar--critical {
    animation: none;
  }

  .combat__hp-bar,
  .movement-bar,
  .action-token {
    transition: none;
  }

  .action-token--just-used {
    animation: none;
  }
}
/**
 * Combat Panel — Status Widget (Status Bar) & Initiative Sidebar
 */

/* ========================================
 * Combat Status Widget (Status Bar)
 * ======================================== */

.combat-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease;
}

.combat-widget:hover {
  background: var(--color-bg-hover);
}

.combat-widget--your-turn {
  background: color-mix(in srgb, var(--color-accent-success) 15%, transparent);
  color: var(--color-accent-success);
}

.combat-widget--your-turn:hover {
  background: color-mix(in srgb, var(--color-accent-success) 25%, transparent);
}

.combat-widget__icon {
  font-size: var(--font-size-base);
  line-height: 1;
}

.combat-widget__round {
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
}

.combat-widget__separator {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.combat-widget__your-turn {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-success);
  animation: combat-widget-pulse 2s ease-in-out infinite;
}

.combat-widget__other-turn {
  color: var(--color-text-secondary);
}

.combat-widget__waiting {
  color: var(--color-text-muted);
  font-style: italic;
}

.combat-widget__concentration {
  margin-left: var(--space-1);
  font-size: var(--font-size-base);
  cursor: help;
}

@keyframes combat-widget-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .combat-widget__your-turn {
    animation: none;
  }
}

/* ========================================
 * Initiative Sidebar (Zone-Based)
 * ======================================== */

.initiative-sidebar {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 180px;
  background: var(--color-bg-primary);
}

.initiative-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.initiative-sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.initiative-sidebar__round {
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.initiative-sidebar__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  overflow-y: auto;
}

.initiative-sidebar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
}

.initiative-sidebar__empty-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
  opacity: 0.5;
}

.initiative-sidebar__empty-text {
  font-size: var(--font-size-sm);
}

/* Initiative Row */
.initiative-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.initiative-row:hover {
  background: var(--color-bg-hover);
}

.initiative-row--current {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-left-color: var(--color-accent-primary);
}

.initiative-row--player {
  border-left-color: var(--color-accent-success);
}

.initiative-row--current.initiative-row--player {
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-secondary));
  border-left-color: var(--color-accent-success);
}

.initiative-row__order {
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.initiative-row--current .initiative-row__order {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.initiative-row__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.initiative-row__name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.initiative-row__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.initiative-row__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.initiative-row__turn-indicator {
  color: var(--color-accent-success);
  font-size: var(--font-size-xs);
  margin-left: auto;
  animation: initiative-pulse 1s ease-in-out infinite;
}

@keyframes initiative-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.9); }
}

.initiative-row__hp {
  height: 4px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.initiative-row__hp-bar {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.initiative-row__hp-bar--healthy {
  background: var(--color-accent-success);
}

.initiative-row__hp-bar--injured {
  background: var(--color-accent-warning);
}

.initiative-row__hp-bar--critical {
  background: var(--color-accent-error);
  animation: hp-critical-pulse 1s ease-in-out infinite;
}

.initiative-row__conditions {
  display: flex;
  gap: var(--space-1);
}

.initiative-condition {
  font-size: var(--font-size-xs);
  line-height: 1;
  cursor: help;
}

/* Responsive */
@media (max-width: 768px) {
  .initiative-sidebar {
    min-width: 160px;
  }

  .initiative-row__order {
    min-width: 20px;
    height: 20px;
    font-size: var(--font-size-xs);
  }

  .initiative-row__label {
    font-size: var(--font-size-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .initiative-row__turn-indicator,
  .initiative-row__hp-bar--critical {
    animation: none;
  }
}
/**
 * Combat Panel — Combat Result Inline (Enhanced)
 */

/* ========================================
 * Combat Result Inline (Enhanced)
 * ======================================== */

.combat-result-enhanced {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-error);
}

.combat-result__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.combat-result__icon {
  font-size: var(--font-size-base);
}

.combat-result__action {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-error);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat-result__vs {
  color: var(--color-text-secondary);
  margin-left: auto;
}

/* Attack Roll */
.combat-result__attack,
.combat-result__save {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.combat-result__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 80px;
}

.combat-result__roll {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
}

.combat-result__roll--hit {
  color: var(--color-accent-success);
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-tertiary));
}

.combat-result__roll--miss {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.combat-result__roll--crit {
  color: var(--color-accent-warning);
  background: color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-bg-tertiary));
  animation: crit-glow 0.5s ease-out;
}

.combat-result__roll--fumble {
  color: var(--color-accent-error);
  background: color-mix(in srgb, var(--color-accent-error) 20%, var(--color-bg-tertiary));
}

@keyframes crit-glow {
  0% { box-shadow: 0 0 0 0 var(--color-accent-warning); transform: scale(1); }
  50% { box-shadow: 0 0 12px 4px var(--color-accent-warning); transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
}

.combat-result__breakdown {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.combat-result__crit-badge {
  background: var(--color-accent-warning);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  animation: badge-pop 0.3s ease-out;
}

.combat-result__fumble-badge {
  background: var(--color-accent-error);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}

@keyframes badge-pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.combat-result__ac {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Damage */
.combat-result__damage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.combat-result__damage-value {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--color-accent-error);
}

.combat-result__damage-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.combat-result__damage--resisted .combat-result__damage-value {
  text-decoration: line-through;
  opacity: 0.7;
}

.combat-result__damage--vulnerable .combat-result__damage-value {
  color: var(--color-accent-warning);
}

.combat-result__resist-badge {
  background: var(--color-accent-secondary);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}

.combat-result__vuln-badge {
  background: var(--color-accent-warning);
  color: var(--color-bg-primary);
  font-size: var(--font-size-xs);
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
}

/* Save */
.combat-result__save-outcome {
  font-weight: var(--font-weight-semibold);
}

/* Condition */
.combat-result__condition {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.combat-result__condition--applied {
  background: color-mix(in srgb, var(--color-accent-warning) 15%, var(--color-bg-tertiary));
  border-left: 2px solid var(--color-accent-warning);
}

.combat-result__condition--removed {
  background: color-mix(in srgb, var(--color-accent-success) 15%, var(--color-bg-tertiary));
  border-left: 2px solid var(--color-accent-success);
}

.combat-result__condition-icon {
  font-size: var(--font-size-sm);
}

.combat-result__condition-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.combat-result__condition-action {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.combat-result__condition-duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* HP Change */
.combat-result__hp {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.combat-result__hp--damage .combat-result__hp-change {
  color: var(--color-accent-error);
}

.combat-result__hp--healing .combat-result__hp-change {
  color: var(--color-accent-success);
}

.combat-result__hp-arrow {
  color: var(--color-text-muted);
}

.combat-result__hp-before {
  color: var(--color-text-muted);
}

.combat-result__hp-after {
  font-weight: var(--font-weight-bold);
}

.combat-result__hp-change {
  font-weight: var(--font-weight-semibold);
}

/* Summary */
.combat-result__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .combat-result__roll--crit,
  .combat-result__crit-badge {
    animation: none;
  }
}
/**
 * Combat Panel — Import Hub
 * =========================
 * Combat overview panel: base layout, action tokens, initiative sidebar,
 * status widget, and inline combat result display.
 *
 * Decomposed into focused files under combat/ for maintainability (#2783).





 */
/**
 * Equipment Slots Panel
 * =====================
 * Visual display of character equipment organized by body slot.
 */

/* ========================================
 * Base Layout
 * ======================================== */

.equipment-slots {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 260px;
  background: var(--color-bg-primary);
}

.equipment-slots__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.equipment-slots__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-slots__stats {
  display: flex;
  gap: var(--space-3);
}

.equipment-slots__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.equipment-slots__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-slots__stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
}

.equipment-slots__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

.equipment-slots__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.equipment-slots__equipped-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ========================================
 * Slots Grid
 * ======================================== */

.es-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.es-slot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.es-slot--large {
  grid-column: span 2;
}

.es-slot__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.es-slot__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.es-slot__item:hover:not(.es-slot__item--empty) {
  border-color: var(--color-accent-primary);
  background: var(--color-bg-tertiary);
}

.es-slot__item--empty {
  border-style: dashed;
  cursor: default;
}

.es-slot__empty-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Weapon slots - slightly taller */
.es-slot--weapon .es-slot__item {
  min-height: 52px;
}

/* Small slots (rings) */
.es-slot--small .es-slot__item {
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
}

/* ========================================
 * Equipped Item Display
 * ======================================== */

.es-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
}

.es-item__name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.es-item__attuned {
  color: var(--color-accent-secondary, var(--color-gold));
  font-weight: var(--font-weight-bold);
  margin-left: auto;
}

/* Rarity colors */
.es-item--common .es-item__name {
  color: var(--color-text-primary);
}

.es-item--uncommon .es-item__name {
  color: var(--color-rarity-uncommon, #1eff00);
}

.es-item--rare .es-item__name {
  color: var(--color-rarity-rare, #0070dd);
}

.es-item--very_rare .es-item__name,
.es-item--veryrare .es-item__name {
  color: var(--color-rarity-very-rare, #a335ee);
}

.es-item--legendary .es-item__name {
  color: var(--color-rarity-legendary, #ff8000);
}

.es-item--artifact .es-item__name {
  color: var(--color-rarity-artifact, #e6cc80);
  text-shadow: 0 0 8px var(--color-rarity-artifact, #e6cc80);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .equipment-slots__header {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .equipment-slots__stats {
    width: 100%;
    justify-content: flex-end;
  }

  .equipment-slots__content {
    padding: var(--space-2);
  }

  .es-grid {
    gap: var(--space-1);
  }

  .es-slot__item {
    min-height: 40px;
  }
}

@media (max-width: 375px) {
  .es-grid {
    grid-template-columns: 1fr;
  }

  .es-slot--large {
    grid-column: span 1;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .es-slot__item {
    transition: none;
  }
}
/**
 * Memories Panel — Base and Sections
 * =====================================
 * Panel layout, memory sections, section type variants, and importance borders.
 */

/**
 * Memories Panel
 * ==============
 * Displays character memories grouped by importance and recency.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Layout
 * ======================================== */

.memories-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.memories-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

.memories-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.memories-breakdown {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ========================================
 * Memory Sections (Collapsible)
 * ======================================== */

.memories-section {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.memories-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-tertiary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  list-style: none;
  min-height: 44px;
  transition: background var(--transition-fast);
}

.memories-section__header:hover {
  background: var(--color-bg-hover);
}

.memories-section__header:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

.memories-section__header::-webkit-details-marker {
  display: none;
}

.memories-section__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.memories-section__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.memories-section__toggle {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.memories-section[open] .memories-section__toggle {
  transform: rotate(180deg);
}

.memories-section__content {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

/* Section Type Variants */
.memories-section--core .memories-section__header {
  background: color-mix(in srgb, var(--color-gold) 15%, var(--color-bg-tertiary));
}

.memories-section--core .memories-section__title {
  color: var(--color-gold);
}

.memories-section--recent .memories-section__header {
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.memories-section--distant .memories-section__header {
  background: var(--color-bg-tertiary);
}

.memories-section--distant .memories-section__title {
  color: var(--color-text-muted);
}

/* ========================================
 * Memory Entry
 * ======================================== */

.memory-entry {
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-text-muted);
  transition: border-color 0.15s ease;
}

.memory-entry:hover {
  border-color: var(--color-border-hover);
}

/* Importance-based border colors (like item rarity) */
.memory-entry--importance-5 {
  border-left-color: var(--color-gold);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.05) 0%,
    var(--color-bg-primary) 100%
  );
}

.memory-entry--importance-4 {
  border-left-color: var(--color-accent-purple);
}

.memory-entry--importance-3 {
  border-left-color: var(--color-accent-primary);
}

.memory-entry--importance-2 {
  border-left-color: var(--color-accent-secondary);
}

.memory-entry--importance-1 {
  border-left-color: var(--color-text-muted);
}

/* Core section entries have stronger highlight */
.memory-entry--core {
  background: color-mix(in srgb, var(--color-gold) 5%, var(--color-bg-primary));
}

/* ========================================
/**
 * Memories Panel — Entry Details
 * =================================
 * Memory entry header, content, tags, links, context, similarity score.
 */

 * Memory Entry Header
 * ======================================== */

.memory-entry__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
  flex-wrap: wrap;
}

.memory-entry__icon {
  font-size: var(--font-size-base);
  width: 20px;
  text-align: center;
}

.memory-entry__category {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.memory-entry__importance {
  font-size: var(--font-size-xs);
}

.memory-stars {
  color: var(--color-gold);
  letter-spacing: -1px;
}

.memory-entry__age {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ========================================
 * Memory Badges
 * ======================================== */

.memory-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.memory-badge--verified {
  background: color-mix(in srgb, var(--color-accent-success) 20%, transparent);
  color: var(--color-accent-success);
}

.memory-badge--contradicted {
  background: color-mix(in srgb, var(--color-accent-error) 20%, transparent);
  color: var(--color-accent-error);
}

/* ========================================
 * Memory Entry Summary
 * ======================================== */

.memory-entry__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

/* ========================================
 * Memory Entry Stimulus (What Happened)
 * ======================================== */

.memory-entry__stimulus {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-1);
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border-default);
  font-style: italic;
}

/* ========================================
 * Memory Detail Response (Context)
 * ======================================== */

.memory-detail--response {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
  line-height: 1.5;
}

/* ========================================
 * Memory Entry Details (Expandable)
 * ======================================== */

.memory-entry__details {
  margin-top: var(--space-1);
}

.memory-entry__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  list-style: none;
}

.memory-entry__details-toggle::-webkit-details-marker {
  display: none;
}

.memory-entry__details-toggle::before {
  content: '▸';
  font-size: 0.7em;
  transition: transform var(--transition-fast);
}

.memory-entry__details[open] .memory-entry__details-toggle::before {
  transform: rotate(90deg);
}

.memory-entry__details-toggle:hover {
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}

.memory-entry__details-toggle:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.memory-entry__details-content {
  padding: var(--space-2);
  margin-top: var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.memory-detail {
  margin-bottom: var(--space-1);
  color: var(--color-text-secondary);
}

.memory-detail:last-child {
  margin-bottom: 0;
}

.memory-detail strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/**
 * Memories Panel — Loading and States
 * =====================================
 * Loading/waiting state, empty state, error state, and responsive.
 */

/* ========================================
 * Loading/Waiting State
 * ======================================== */

.memories-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.memories-waiting__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
  animation: memories-pulse 1.5s ease-in-out infinite;
}

.memories-waiting__message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.memories-waiting__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

@keyframes memories-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ========================================
 * Empty State
 * ======================================== */

.memories-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.memories-empty__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

.memories-empty__message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
  font-weight: var(--font-weight-medium);
}

.memories-empty__hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

/* ========================================
 * Error State
 * ======================================== */

.memories-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.memories-error__icon {
  font-size: 2.5rem;
  color: var(--color-accent-warning);
  margin-bottom: var(--space-3);
}

.memories-error__message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
  font-weight: var(--font-weight-medium);
}

.memories-error__retry {
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  min-height: 44px;
  min-width: 44px;
}

.memories-error__retry:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.memories-error__retry:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.memories-error__retry:active {
  transform: scale(0.98);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .memories-section__content {
    max-height: 200px;
  }

  .memory-entry__header {
    flex-wrap: wrap;
  }

  .memory-entry__age {
    width: 100%;
    margin-left: 0;
    margin-top: var(--space-1);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .memories-section__toggle {
    transition: none;
  }

  .memory-entry {
    transition: none;
  }
}
/**
 * Memories Panel — Import Hub
 * ==============================
 * Semantic memory display with sections, entries, and loading states.
 *
 * Decomposed into focused files under memories/ for maintainability.



 */
/**
 * Room History Panel
 * ==================
 * Cross-session room history with infinite scroll.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Container
 * ======================================== */

.room-history {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.room-history__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding: var(--space-2);
  flex: 1;
  min-height: 0;
}

/* ========================================
 * Toggle Button
 * ======================================== */

.room-history__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.room-history__toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}

.room-history__toggle:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

.room-history__toggle--active {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.room-history__toggle--active:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 25%, var(--color-bg-secondary));
}

.room-history__toggle-icon {
  font-size: var(--font-size-sm);
}

/* ========================================
 * Session Boundary Divider
 * ======================================== */

.room-history__session-boundary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  -webkit-user-select: none;
  user-select: none;
}

.room-history__session-boundary-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-subtle) 20%,
    var(--color-border-subtle) 80%,
    transparent
  );
}

.room-history__session-boundary-label {
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ========================================
 * History Entry
 * ======================================== */

.room-history__entry {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-text-muted);
}

.room-history__entry--dm {
  border-left-color: var(--color-accent-primary);
}

.room-history__entry--player,
.room-history__entry--user {
  border-left-color: var(--color-accent-secondary);
  background: color-mix(in srgb, var(--color-accent-secondary) 5%, var(--color-bg-primary));
}

.room-history__entry--system {
  border-left-color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.room-history__entry--error {
  border-left-color: var(--color-accent-error);
  background: color-mix(in srgb, var(--color-accent-error) 5%, var(--color-bg-primary));
}

.room-history__entry-content {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

/* Ensure nested narrative segments display correctly */
.room-history__entry-content .narrative-segment {
  margin-bottom: var(--space-1);
}

.room-history__entry-content .narrative-segment:last-child {
  margin-bottom: 0;
}

.room-history__entry-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.room-history__entry-meta time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* ========================================
 * Loading State
 * ======================================== */

.room-history__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  gap: var(--space-2);
}

.room-history__loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: room-history-spin 0.8s linear infinite;
}

@keyframes room-history-spin {
  to {
    transform: rotate(360deg);
  }
}

.room-history__loading-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ========================================
 * Empty State
 * ======================================== */

.room-history__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
}

.room-history__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
  opacity: 0.5;
}

.room-history__empty-message {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}

.room-history__empty-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* ========================================
 * Error State
 * ======================================== */

.room-history__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  background: color-mix(in srgb, var(--color-accent-error) 5%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 30%, transparent);
  border-radius: var(--radius-md);
}

.room-history__error-icon {
  font-size: 1.5rem;
  color: var(--color-accent-error);
  margin-bottom: var(--space-2);
}

.room-history__error-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ========================================
 * Sentinel (Infinite Scroll Trigger)
 * ======================================== */

.room-history__sentinel {
  height: 1px;
  width: 100%;
  visibility: hidden;
}

/* ========================================
 * Header Bar (contains toggle)
 * ======================================== */

.room-history__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-secondary);
}

/* ========================================
 * Hidden Utility
 * Elements use BEM naming so we target them directly
 * ======================================== */

.room-history__loading.hidden,
.room-history__empty.hidden,
.room-history__error.hidden {
  display: none;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .room-history__toggle {
    padding: var(--space-2);
    font-size: var(--font-size-sm);
  }

  .room-history__entry {
    padding: var(--space-2);
  }

  .room-history__session-boundary-label {
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .room-history__loading-spinner {
    animation: none;
    border-top-color: var(--color-accent-primary);
    opacity: 0.7;
  }

  .room-history__toggle {
    transition: none;
  }
}
/**
 * Party Panel — Base Layout, Members, Status & Connection States
 */

/* Party Panel */
/* Generated by MDSL */

.party {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
}

.party__header {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
}

.party__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

.party__content {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
}

.party__footer {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

/* Member Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  margin-right: var(--spacing-xs);
  font-size: 0.75rem;
  line-height: 1;
  cursor: help;
}

.status-badge[data-status="active"] {
  animation: pulse-active 2s ease-in-out infinite;
}

@keyframes pulse-active {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Online indicator enhancement */
.online-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--spacing-xs);
  background-color: var(--color-text-muted);
  transition: background-color 0.3s ease;
}

.online-indicator[data-online="true"] {
  background-color: #22c55e;
}

.online-indicator[data-status="idle"] {
  background-color: #eab308;
}

.online-indicator[data-status="away"] {
  background-color: #6b7280;
}

/* Turn Status Bar */
.turn-status-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  flex-wrap: wrap;
}

.turn-number {
  font-weight: 600;
  color: var(--color-text-primary);
}

.turn-status-processing {
  color: #eab308;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.turn-status-processing svg {
  width: 12px;
  height: 12px;
  animation: spin-slow 2s linear infinite;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.turn-status-allready {
  color: #22c55e;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.turn-status-allready svg {
  width: 12px;
  height: 12px;
}

.turn-status-waiting {
  color: var(--color-text-muted);
}

/* Submission Progress Segments */
.submission-progress {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  margin-left: auto;
}

.progress-segment {
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  transition: background-color 0.3s ease;
}

.progress-segment.filled {
  background: #22c55e;
}

/* Turn Timer Display */
.turn-timer-display {
  font-family: monospace;
  color: var(--color-text-primary);
  font-size: 0.75rem;
}

.turn-timer-display.timer-low {
  color: #ef4444;
  animation: pulse-active 1s ease-in-out infinite;
}

/* Member Action Badges */
.member-action-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.65rem;
  line-height: 1.2;
  white-space: nowrap;
  margin-top: 2px;
}

.member-action-badge svg {
  width: 10px;
  height: 10px;
}

.badge-waiting {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

.badge-ready {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.badge-acting {
  color: #eab308;
  background: rgba(234, 179, 8, 0.15);
}

.badge-done {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  opacity: 0.6;
}

/* Their Turn - pulsing border for turn-based current character */
.party-member-card.their-turn {
  border-color: #eab308;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.3);
  animation: pulse-turn 2s ease-in-out infinite;
}

@keyframes pulse-turn {
  0%, 100% { box-shadow: 0 0 6px rgba(234, 179, 8, 0.3); }
  50% { box-shadow: 0 0 12px rgba(234, 179, 8, 0.5); }
}

/* Clickable Member Cards */
.party-member-card.clickable {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.party-member-card.clickable:hover {
  border-color: var(--color-text-secondary, #9ca3af);
  box-shadow: 0 0 6px rgba(156, 163, 175, 0.2);
}

.party-member-card.clickable:active {
  box-shadow: 0 0 3px rgba(156, 163, 175, 0.15);
}

/* Read-Only Sheet (modal content) */
.ro-sheet {
  font-size: 0.85rem;
  color: var(--color-text-primary, #e5e7eb);
  line-height: 1.4;
}

.ro-sheet__header {
  margin-bottom: var(--spacing-sm, 8px);
}

.ro-sheet__identity {
  display: flex;
  gap: var(--spacing-xs, 4px);
  flex-wrap: wrap;
  align-items: baseline;
}

.ro-sheet__race,
.ro-sheet__bg {
  color: var(--color-text-secondary, #9ca3af);
}

.ro-sheet__class {
  font-weight: 600;
}

.ro-sheet__conditions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.ro-sheet__condition {
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.7rem;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Stats Row */
.ro-sheet__stats-row {
  display: flex;
  gap: var(--spacing-sm, 8px);
  margin-bottom: var(--spacing-sm, 8px);
  padding: var(--spacing-xs, 4px) 0;
  border-top: 1px solid var(--color-border, #374151);
  border-bottom: 1px solid var(--color-border, #374151);
}

.ro-sheet__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.ro-sheet__stat-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__stat-label {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Abilities Grid */
.ro-sheet__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: var(--spacing-sm, 8px);
}

.ro-sheet__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
}

.ro-sheet__ability-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ro-sheet__ability-mod {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__ability-score {
  font-size: 0.65rem;
  color: var(--color-text-secondary, #9ca3af);
}

/* Sections */
.ro-sheet__section {
  margin-bottom: var(--spacing-sm, 8px);
}

.ro-sheet__section-title {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #6b7280);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-border, #374151);
  padding-bottom: 2px;
}

/* Skills */
.ro-sheet__skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px 12px;
  font-size: 0.75rem;
}

.ro-sheet__skill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 0;
  color: var(--color-text-secondary, #9ca3af);
}

.ro-sheet__skill.proficient {
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__skill-prof {
  font-size: 0.6rem;
}

.ro-sheet__skill-bonus {
  font-family: monospace;
  min-width: 2em;
  text-align: right;
}

.ro-sheet__skill-name {
  flex: 1;
}

/* Equipment */
.ro-sheet__equipment {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ro-sheet__equip-item {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, #374151);
}

.ro-sheet__none {
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}

/* Features */
.ro-sheet__feature {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
  font-size: 0.75rem;
}

.ro-sheet__feature-name {
  color: var(--color-text-primary, #e5e7eb);
}

.ro-sheet__feature-level {
  color: var(--color-text-muted, #6b7280);
  font-size: 0.65rem;
}

/* Spells */
.ro-sheet__spell-meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #9ca3af);
  margin-bottom: 4px;
}

.ro-sheet__spell-group {
  font-size: 0.75rem;
  margin-bottom: 2px;
}

.ro-sheet__spell-label {
  font-weight: 600;
  color: var(--color-text-muted, #6b7280);
}

/* Loading state */
.sheet-loading {
  text-align: center;
  padding: var(--spacing-lg, 16px);
  color: var(--color-text-muted, #6b7280);
}
/**
 * Party Panel — Status Widget & DM Disconnected State
 */


/* ========================================
 * Party Status Widget (Status Bar)
 * ======================================== */

.party-widget {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #9ca3af);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background-color 0.15s ease;
}

.party-widget:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.party-widget--empty {
  opacity: 0.6;
}

.party-widget--alert {
  background: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 15%, transparent);
}

.party-widget--alert:hover {
  background: color-mix(in srgb, var(--color-accent-warning, #f59e0b) 25%, transparent);
}

.party-widget__icon {
  font-size: var(--font-size-base, 1rem);
  line-height: 1;
}

.party-widget__count {
  font-weight: var(--font-weight-semibold, 600);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-primary, #e5e7eb);
}

.party-widget__separator {
  color: var(--color-text-muted, #6b7280);
  margin: 0 var(--space-1, 4px);
}

.party-widget__label {
  color: var(--color-text-muted, #6b7280);
}

.party-widget__hp-bars {
  display: flex;
  gap: 3px;
  align-items: center;
}

.party-widget__hp-bar {
  position: relative;
  width: 20px;
  height: 12px;
  background: var(--color-bg-tertiary, #1f2937);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--color-border, #374151);
}

.party-widget__hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #22c55e;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-widget__hp-bar--healthy .party-widget__hp-fill {
  background: #22c55e;
}

.party-widget__hp-bar--injured .party-widget__hp-fill {
  background: #eab308;
}

.party-widget__hp-bar--critical .party-widget__hp-fill {
  background: #ef4444;
  animation: pulse-hp 1s ease-in-out infinite;
}

.party-widget__hp-bar--down .party-widget__hp-fill {
  background: #6b7280;
}

.party-widget__hp-bar--down {
  border-color: #ef4444;
}

@keyframes pulse-hp {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.party-widget__hp-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-primary, #e5e7eb);
  text-transform: uppercase;
  z-index: var(--z-raised);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.party-widget__alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-accent-error, #ef4444);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  margin-left: var(--space-1, 4px);
  animation: pulse-alert 1.5s ease-in-out infinite;
}

@keyframes pulse-alert {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .party-widget__hp-bar--critical .party-widget__hp-fill,
  .party-widget__alert-badge {
    animation: none;
  }
}

/* ========================================
 * DM Disconnected State
 * ======================================== */

.dm-disconnected {
  position: relative;
}

.dm-disconnected::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: var(--z-raised);
  border-radius: inherit;
}

/* Combat paused indicator */
.combat-indicator.paused {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.combat-indicator.paused .combat-label {
  color: #f59e0b;
}

.combat-indicator.paused::after {
  content: ' (DM Offline)';
  font-size: 0.7rem;
  color: var(--color-text-muted, #6b7280);
}

/* Party notification styling */
.party-notifications {
  position: absolute;
  top: var(--spacing-sm, 8px);
  left: var(--spacing-sm, 8px);
  right: var(--spacing-sm, 8px);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
  pointer-events: none;
}

.party-notification {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  background: var(--color-bg-secondary, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-left: 3px solid #f59e0b;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-text-primary, #e5e7eb);
  animation: notification-slide-in 0.3s ease-out;
  pointer-events: auto;
}

/**
 * Party Panel — Scene Presence Tracking, Typing Indicator & Player Avatar
 */

/* ========================================
 * Scene Presence Tracking
 * ======================================== */

/* Character is in a different location */
.party-member-card.scene-absent {
  opacity: 0.6;
  filter: grayscale(30%);
}

.party-member-card.scene-absent::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.05) 20px
  );
  pointer-events: none;
  border-radius: inherit;
}

.scene-indicator {
  font-size: 0.65rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  margin-left: var(--spacing-xs, 4px);
}

/* ========================================
 * Typing Indicator
 * ======================================== */

.typing-indicator {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
  border-top: 1px solid var(--color-border, #374151);
  animation: typing-pulse 1.5s ease-in-out infinite;
}

@keyframes typing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Member card typing state */
.party-member-card.is-typing {
  border-color: var(--color-accent-primary, #3b82f6);
}

.party-member-card.is-typing::before {
  content: '...';
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 1rem;
  color: var(--color-accent-primary, #3b82f6);
  animation: typing-dots 1s steps(4, end) infinite;
}

@keyframes typing-dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Player Whisper Styles */
.party-whisper-log {
  max-height: 120px;
  overflow-y: auto;
  border-top: 1px dashed var(--color-border, #374151);
  padding: var(--spacing-xs, 4px);
  margin-top: var(--spacing-xs, 4px);
}

.party-whisper {
  padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
  margin-bottom: 4px;
  border-radius: 4px;
  font-size: 0.8rem;
  line-height: 1.4;
  animation: whisper-fade-in 0.3s ease-out;
}

.party-whisper.whisper-sent {
  background: rgba(59, 130, 246, 0.1);
  border-left: 2px solid var(--color-accent-primary, #3b82f6);
  color: var(--color-text-secondary, #9ca3af);
}

.party-whisper.whisper-received {
  background: rgba(139, 92, 246, 0.15);
  border-left: 2px solid #8b5cf6;
  color: var(--color-text-primary, #e5e7eb);
}

.whisper-header {
  font-weight: 600;
  font-style: italic;
  color: #8b5cf6;
  margin-right: 4px;
}

.whisper-sent .whisper-header {
  color: var(--color-accent-primary, #3b82f6);
}

.whisper-text {
  color: inherit;
}

@keyframes whisper-fade-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Whisper button on member cards */
.btn-whisper {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.party-member-card {
  position: relative;
}

.party-member-card:hover .btn-whisper {
  opacity: 1;
}

.btn-whisper:hover {
  background: rgba(139, 92, 246, 0.4);
}

.btn-whisper:active {
  background: rgba(139, 92, 246, 0.6);
}

/* ========================================
 * Player Avatar (inline in member cards)
 * ======================================== */

.player-avatar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.15s ease;
}

.player-avatar-status-ring {
  border: 2px solid #22c55e;
  border-radius: 50%;
  padding: 1px;
  transition: border-color 0.3s ease;
}

.player-avatar-wrapper[data-status="idle"] .player-avatar-status-ring {
  border-color: #f59e0b;
}

.player-avatar-wrapper[data-status="afk"] .player-avatar-status-ring {
  border-color: #6b7280;
}

.player-avatar-wrapper[data-status="in_combat"] .player-avatar-status-ring {
  border-color: #ef4444;
}

.player-avatar-wrapper[data-status="in_dialogue"] .player-avatar-status-ring {
  border-color: #8b5cf6;
}

.player-avatar-wrapper[data-status="typing"] .player-avatar-status-ring {
  border-color: #3b82f6;
}

.player-avatar {
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary, #1f2937);
}

.player-avatar__img {
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.player-avatar__fallback {
  display: block;
}

.player-avatar-name {
  font-size: 0.6rem;
  color: var(--color-text-muted, #6b7280);
  text-align: center;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  display: none; /* Hidden in inline card context; shown in standalone avatar views */
}

.player-avatar-class {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-accent-primary, #6366f1);
  margin-left: 2px;
}

/* When avatar is used inside party roster (character sheet) */
.party-roster__portrait .player-avatar-wrapper {
  width: 36px;
  height: 36px;
}

.party-roster__portrait .player-avatar-status-ring {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.party-roster__portrait .player-avatar-name {
  display: none;
}

/* When avatar is used inside party panel member card */
.member-portrait .player-avatar-wrapper {
  width: 36px;
  height: 36px;
}

.member-portrait .player-avatar-status-ring {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-portrait .player-avatar-name {
  display: none;
}

.btn-whisper svg {
  width: 14px;
  height: 14px;
}

/* Whisper compose modal */
.whisper-compose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
}

.whisper-compose__recipient {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary, #9ca3af);
}

.whisper-compose__recipient strong {
  color: #8b5cf6;
}

.whisper-compose__input {
  width: 100%;
  padding: var(--spacing-sm, 8px);
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.2));
  color: var(--color-text-primary, #e5e7eb);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  min-height: 60px;
}

.whisper-compose__input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.whisper-compose__input::placeholder {
  color: var(--color-text-muted, #6b7280);
}

.whisper-compose__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-xs, 4px);
}

.whisper-compose__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  font-style: italic;
}
/**
 * Party Panel — Import Hub
 * ==========================
 * Party member display with status widgets, scene presence tracking and typing indicators.
 *
 * Decomposed into focused files under party/ for maintainability.



 */
/**
 * Party Treasury Panel Styles
 * ============================
 * Styles for the multiplayer party treasury panel including
 * deposit/withdraw modal and currency action buttons.
 */

/* ============================================================================
   Treasury Header and Actions
   ============================================================================ */

.treasury-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-3, 0.75rem);
}

.treasury-section-title {
  margin: 0;
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

.treasury-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-secondary, #1a1a2e);
  color: var(--color-text-primary, #e5e5e5);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.treasury-btn svg {
  width: 1rem;
  height: 1rem;
}

.treasury-btn:hover {
  background: var(--color-bg-tertiary, #252540);
  border-color: var(--color-accent-primary, #61afef);
}

.treasury-btn:active {
  transform: translateY(1px);
}

.treasury-btn--deposit:hover {
  border-color: var(--color-success, #22C55E);
  color: var(--color-success, #22C55E);
}

.treasury-btn--withdraw:hover {
  border-color: var(--color-warning, #F59E0B);
  color: var(--color-warning, #F59E0B);
}

/* ============================================================================
   Treasury Modal
   ============================================================================ */

.treasury-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

.treasury-modal[hidden] {
  display: none;
}

.treasury-modal__content {
  width: 90%;
  max-width: 400px;
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(97, 175, 239, 0.2);
  animation: slideIn 0.2s ease-out;
}

.treasury-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
}

.treasury-modal__title {
  margin: 0;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-modal__close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease;
}

.treasury-modal__close:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-modal__body {
  padding: var(--space-5, 1.25rem);
}

.treasury-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.form-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #b0b0b0);
}

.form-input,
.form-select {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.1);
}

.form-input::placeholder {
  color: var(--color-text-muted, #888);
}

.treasury-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-top: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
}

.treasury-modal__btn {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-weight: var(--font-weight-medium, 500);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.treasury-modal__btn--cancel {
  background: transparent;
  color: var(--color-text-secondary, #b0b0b0);
}

.treasury-modal__btn--cancel:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.treasury-modal__btn--submit {
  background: var(--color-accent-primary, #61afef);
  color: white;
  border-color: var(--color-accent-primary, #61afef);
}

.treasury-modal__btn--submit:hover {
  background: #529fde;
  border-color: #529fde;
}

.treasury-modal__btn--submit:active {
  transform: translateY(1px);
}

/* ============================================================================
   Animations
   ============================================================================ */

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .treasury-modal__content {
    width: 95%;
  }

  .treasury-actions {
    flex-direction: column;
  }

  .treasury-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .treasury-modal,
  .treasury-modal__content,
  .treasury-btn {
    animation: none;
    transition: none;
  }
}
/**
 * Friends Panel
 * =============
 * Displays friends list and friend request management.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Layout
 * ======================================== */

.friends {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 280px;
  background: var(--color-bg-primary);
}

.friends__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.friends__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.friends__title svg {
  width: 16px;
  height: 16px;
}

.friends__content {
  flex: 1;
  padding: var(--space-3);
  overflow-y: auto;
}

/* ========================================
 * Section Headers
 * ======================================== */

.friends__section {
  margin-bottom: var(--space-4);
}

.friends__section:last-child {
  margin-bottom: 0;
}

.friends__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-subtle);
}

.friends__section-title svg {
  width: 14px;
  height: 14px;
}

/* Requests section has distinct styling */
.friends__section--requests {
  background: color-mix(in srgb, var(--color-accent-warning) 5%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-accent-warning) 20%, var(--color-border-default));
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-bottom: var(--space-3);
}

.friends__section--requests .friends__section-title {
  color: var(--color-accent-warning);
  border-bottom-color: color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* Blocked section has distinct styling */
.friends__section--blocked {
  background: color-mix(in srgb, var(--color-danger) 5%, var(--color-bg-secondary));
  border: 1px solid color-mix(in srgb, var(--color-danger) 20%, var(--color-border-default));
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin-top: var(--space-3);
}

.friends__section--blocked .friends__section-title {
  color: var(--color-danger);
  border-bottom-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
}

.friends__item--blocked {
  opacity: 0.7;
}

.friends__item--blocked .friends__item-name {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

/* ========================================
 * Friend List
 * ======================================== */

.friends__list,
.friends__requests-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ========================================
 * Friend/Request Item
 * ======================================== */

.friends__item,
.friends__request-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              background var(--transition-fast);
}

.friends__item:hover,
.friends__request-item:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-hover);
}

/* ========================================
 * Item Avatar
 * ======================================== */

.friends__item-avatar {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.friends__item-avatar svg {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
}

/* ========================================
 * Item Info
 * ======================================== */

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

.friends__item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friends__item-username {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
}

/* ========================================
 * Item Actions
 * ======================================== */

.friends__item-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.friends__item:hover .friends__item-actions,
.friends__item:focus-within .friends__item-actions,
.friends__request-item .friends__item-actions {
  opacity: 1;
}

/* Request items always show actions */
.friends__request-item .friends__item-actions {
  opacity: 1;
}

/* ========================================
 * Footer / Add Friend Form
 * ======================================== */

.friends__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.friends__add-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.friends__add-input {
  flex: 1;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.friends__add-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.friends__add-input::placeholder {
  color: var(--color-text-muted);
}

/* ========================================
 * Status Message
 * ======================================== */

.friends__status {
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  text-align: center;
}

.friends__status--success {
  background: color-mix(in srgb, var(--color-accent-secondary) 15%, transparent);
  color: var(--color-accent-secondary);
  border: 1px solid color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

.friends__status--error {
  background: color-mix(in srgb, var(--color-accent-error) 15%, transparent);
  color: var(--color-accent-error);
  border: 1px solid color-mix(in srgb, var(--color-accent-error) 30%, transparent);
}

.friends__status--info {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  color: var(--color-accent-primary);
  border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Button Variants
 * ======================================== */

.friends .btn--success {
  background: var(--color-accent-secondary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-secondary);
}

.friends .btn--success:hover {
  background: color-mix(in srgb, var(--color-accent-secondary) 85%, white);
}

.friends .btn--danger {
  color: var(--color-accent-error);
}

.friends .btn--danger:hover {
  background: color-mix(in srgb, var(--color-accent-error) 15%, transparent);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .friends__header {
    padding: var(--space-2);
  }

  .friends__content {
    padding: var(--space-2);
  }

  .friends__item,
  .friends__request-item {
    padding: var(--space-2);
  }

  .friends__item-avatar {
    width: 32px;
    height: 32px;
  }

  .friends__item-actions {
    opacity: 1; /* Always visible on touch devices */
  }

  .friends__footer {
    padding: var(--space-2);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .friends__item,
  .friends__request-item {
    transition: none;
  }

  .friends__item-actions {
    transition: none;
  }
}
/* Friends Modal Styles */

/* Friends Button in Status Bar */
.friends-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.friends-icon-btn:hover {
  color: var(--color-accent-primary);
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.friends-icon-btn:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.friends-icon-btn:active {
  transform: scale(0.95);
}

.friends-icon svg,
.friends-icon .svg-icon {
  width: 16px;
  height: 16px;
}

/* Badge showing online friend count */
.friends-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background-color: var(--color-success, #22c55e);
  color: var(--color-bg-primary);
  font-size: 10px;
  font-weight: var(--font-weight-bold, 700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--color-bg-primary);
}

/* Pulse animation when friends are online */
.friends-badge:not(:empty) {
  animation: friends-badge-pulse 2s ease-in-out infinite;
}

@keyframes friends-badge-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 0 2px var(--color-success);
  }
  50% {
    box-shadow: 0 0 0 2px var(--color-bg-primary), 0 0 8px 4px rgba(34, 197, 94, 0.3);
  }
}

/* Modal Dialog - Reset browser dialog defaults */
dialog.friends-modal {
  color: #e4e4e7;
  color: var(--text-primary, #e4e4e7);
  background-color: #0f0f14;
  background: var(--bg-primary, #0f0f14);
  border: 1px solid #27272a;
  border-color: var(--border-color, #27272a);
  border-radius: 8px;
  border-radius: var(--radius-lg, 8px);
  padding: 0;
  width: Min(400px, 90vw);
  max-height: 80vh;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

dialog.friends-modal[open] {
  background-color: #0f0f14;
}

dialog.friends-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.75);
}

.friends-modal__content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  background: #0f0f14;
  background: var(--bg-primary, #0f0f14);
}

.friends-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: var(--text-muted, #71717a);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.friends-modal__close:hover {
  color: var(--text-primary, #e4e4e7);
}

.friends-modal__close svg {
  width: 16px;
  height: 16px;
}

/* Header */
.friends-modal__header {
  padding: var(--spacing-md, 16px);
  border-bottom: 1px solid var(--border-color, #27272a);
  position: relative;
  background: var(--surface-1, #111118);
}

.friends-modal__title {
  margin: 0;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  color: var(--text-primary, #e4e4e7);
  display: flex;
  align-items: center;
  gap: 8px;
}

.friends-modal__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary, #a855f7);
}

.friends-modal__count {
  font-weight: 400;
  color: var(--text-muted, #71717a);
}

/* Friends List */
.friends-modal__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  max-height: 300px;
}

.friends-modal__friend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.friends-modal__friend:hover {
  background-color: var(--color-surface-hover);
}

.friends-modal__friend-status {
  font-size: 12px;
  line-height: 1;
}

.friends-modal__friend-status--online {
  color: var(--color-success);
}

.friends-modal__friend-status--offline {
  color: var(--color-text-muted);
}

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

.friends-modal__friend-name {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-modal__friend-activity {
  display: block;
  font-size: var(--size-sm);
  color: var(--color-success);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-modal__friend-activity--offline {
  color: var(--color-text-muted);
}

.friends-modal__friend-actions {
  display: flex;
  gap: var(--space-1);
}

.friends-modal__action-btn {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.friends-modal__action-btn:hover:not(:disabled) {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.friends-modal__action-btn--join {
  color: var(--color-success);
  border-color: var(--color-success);
}

.friends-modal__action-btn--join:hover:not(:disabled) {
  background-color: var(--color-success);
  color: var(--color-bg-primary);
}

.friends-modal__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State */
.friends-modal__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--color-text-muted);
}

.friends-modal__empty-hint {
  font-size: var(--size-sm);
  margin-top: var(--space-2);
}

/* Pending Requests Section */
.friends-modal__requests-section {
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  border-bottom: 1px solid var(--border-color, #27272a);
  background: var(--surface-1, #111118);
}

.friends-modal__section-title--requests {
  margin: 0 0 var(--spacing-xs, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-warning, #f59e0b);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.friends-modal__requests-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

.friends-modal__request {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--radius-md);
}

.friends-modal__action-btn--accept {
  color: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
}

.friends-modal__action-btn--accept:hover:not(:disabled) {
  background-color: var(--color-success, #22c55e);
  color: var(--color-bg-primary);
}

.friends-modal__action-btn--decline {
  color: var(--color-error, #cf6068);
  border-color: var(--color-error, #cf6068);
}

.friends-modal__action-btn--decline:hover:not(:disabled) {
  background-color: var(--color-error, #cf6068);
  color: var(--color-bg-primary);
}

/* Quick Actions */
.friends-modal__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-md, 12px);
  border-top: 1px solid var(--border-color, #27272a);
  background-color: var(--surface-1, #111118);
}

.friends-modal__quick-action {
  flex: 1;
  min-width: calc(50% - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 4px);
  padding: var(--spacing-sm, 8px);
  background: var(--surface-2, #18181b);
  border: 1px solid var(--border-color, #27272a);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #e4e4e7);
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.friends-modal__quick-action:hover {
  border-color: var(--color-primary, #a855f7);
  color: var(--color-primary, #a855f7);
  background: var(--surface-3, #1f1f26);
}

.friends-modal__quick-action svg {
  width: 14px;
  height: 14px;
}

/* Add Friend Form */
.friends-modal__add-form {
  padding: var(--space-3);
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.friends-modal__section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--size-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.friends-modal__field {
  margin-bottom: var(--space-2);
}

.friends-modal__input {
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--size-sm);
}

.friends-modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.friends-modal__form-actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.friends-modal__btn {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.friends-modal__btn--cancel {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.friends-modal__btn--cancel:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}

.friends-modal__btn--primary {
  background: var(--color-primary);
  border: none;
  color: var(--color-bg-primary);
}

.friends-modal__btn--primary:hover {
  opacity: 0.9;
}

/* Status Message */
.friends-modal__status {
  padding: var(--space-2) var(--space-3);
  font-size: var(--size-sm);
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.friends-modal__status--info {
  background-color: var(--color-info-bg, rgba(59, 130, 246, 0.1));
  color: var(--color-info, #3b82f6);
}

.friends-modal__status--success {
  background-color: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  color: var(--color-success);
}

.friends-modal__status--warning {
  background-color: var(--color-warning-bg, rgba(251, 191, 36, 0.1));
  color: var(--color-warning);
}

.friends-modal__status--error {
  background-color: var(--color-error-bg, rgba(207, 96, 104, 0.1));
  color: var(--color-error);
}

/* Online Count in Header */
.friends-modal__online-count {
  font-size: var(--size-xs);
  color: var(--color-success);
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: rgba(34, 197, 94, 0.15);
  border-radius: var(--radius-full);
  font-weight: var(--weight-medium);
}

/* Away Status */
.friends-modal__friend-activity--away {
  color: var(--color-warning, #f59e0b);
}

/* Loading Skeleton */
.friends-modal__loading {
  padding: var(--space-3);
}

.friends-modal__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.friends-modal__skeleton-item {
  height: 48px;
  background: linear-gradient(
    90deg,
    var(--color-surface-hover) 25%,
    var(--color-surface) 50%,
    var(--color-surface-hover) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/**
 * Turn Queue Panel — Base Layout, Header, Queue Items & Initiative Display
 */

/* Turn Queue Panel
 * ================
 * Multiplayer turn queue with initiative order, player statuses, and NPC markers.
 */

.panel-turn-queue {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

/* Header */
.turn-queue-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.turn-queue-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-size-lg);
}

.turn-queue-header .mode-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  text-transform: uppercase;
}

.turn-info {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.turn-label {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.turn-number {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

/* Base section-header/section-title from components/_section.css and atoms/_atoms.css */
.panel-turn-queue .section-header {
  justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

/* Initiative List */
.initiative-section {
  margin-bottom: var(--spacing-md);
}

.initiative-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.initiative-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  transition: background-color 0.2s ease;
}

.initiative-entry.is-current-turn {
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
}

/* Actor type styling - NPCs get purple theme */
.initiative-entry.actor-npc,
.initiative-entry.actor-dm_puppet {
  border-left: 3px solid var(--color-accent-purple);
  background: var(--color-entity-spell-bg);
}

.initiative-entry.actor-npc .initiative-icon,
.initiative-entry.actor-dm_puppet .initiative-icon {
  color: var(--color-accent-purple);
}

.initiative-icon {
  font-size: var(--font-size-lg);
  width: 24px;
  text-align: center;
}

.initiative-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.actor-label {
  font-size: var(--font-size-xs);
  color: var(--color-accent-purple);
  font-style: italic;
  padding: 1px 4px;
  background: var(--color-entity-spell-bg);
  border-radius: var(--radius-sm);
}

.turn-indicator {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Player Status List */
.player-status-section {
  margin-bottom: var(--spacing-md);
}

.player-status-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.player-status-entry {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
}

.status-icon {
  width: 20px;
  text-align: center;
  font-size: var(--font-size-base);
}

.player-name {
  flex: 1;
  font-weight: 500;
}

.status-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.current-turn-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  text-transform: uppercase;
}

/* Status-specific colors */
.player-status-entry.status-acting {
  background: var(--color-success-bg);
  border-left: 3px solid var(--color-success);
}

.player-status-entry.status-drafting {
  background: var(--color-info-bg);
  border-left: 3px solid var(--color-info);
}

.player-status-entry.status-ready {
  background: var(--color-success-bg);
}

.player-status-entry.status-waiting {
  opacity: 0.8;
}

.player-status-entry.status-afk {
  background: var(--color-warning-bg);
  border-left: 3px solid var(--color-warning);
}

.player-status-entry.status-disconnected {
  background: var(--color-error-bg);
  border-left: 3px solid var(--color-error);
  opacity: 0.6;
}

/* Status badge in initiative entries */
.status-badge {
  font-size: var(--font-size-sm);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}

.status-badge.status-acting { background: var(--color-success-bg); }
.status-badge.status-drafting { background: var(--color-info-bg); }
.status-badge.status-afk { background: var(--color-warning-bg); }
.status-badge.status-disconnected { background: var(--color-error-bg); }

/* Queue Position */
.queue-position-section {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  text-align: center;
}

.queue-position-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
}

.position-number {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-primary);
}

.position-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.position-estimate {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Draft Panel */
.draft-panel {
  padding: var(--spacing-md);
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-info);
}

.draft-header {
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
}

.draft-description {
  padding: var(--spacing-sm);
  background: var(--surface-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.draft-warnings {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.draft-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.draft-warning.severity-info {
  background: var(--color-info-bg);
}

.draft-warning.severity-caution {
  background: var(--color-warning-bg);
}

.draft-warning.severity-danger {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error);
}

.draft-warning.severity-critical {
  background: var(--color-error-bg);
  border: 2px solid var(--color-error);
  animation: warning-pulse 1s ease-in-out infinite;
}

@keyframes warning-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.warning-icon {
  flex-shrink: 0;
}

.warning-message {
  flex: 1;
  font-size: var(--font-size-sm);
}

.draft-quick-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.draft-action-btn {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.draft-action-btn:hover {
  background: var(--surface-secondary);
  border-color: var(--color-primary);
}

.draft-action-btn[data-action="commit_draft"] {
  background: var(--color-primary);
  color: var(--color-primary-contrast, white);
  border-color: var(--color-primary);
}

/* Party Member Grid */
.party-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm);
}

.party-member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.party-member-card.is-current-turn {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}

.party-member-card .member-name {
  font-weight: 500;
  text-align: center;
  margin-bottom: var(--spacing-xs);
}

.party-member-card .member-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.party-member-card .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
}

.party-member-card.status-submitted .status-indicator {
  background: var(--color-success);
}

.party-member-card.status-acting .status-indicator {
  background: var(--color-primary);
  animation: pulse 1s infinite;
}

/* Countdown Timer */
.turn-queue-timer-section {
  text-align: center;
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.countdown-timer {
  font-size: var(--font-size-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.countdown-timer.urgent {
  color: var(--color-warning);
}

.countdown-timer.critical {
  color: var(--color-error);
}

.countdown-timer.pulse {
  animation: countdown-pulse 0.5s ease-in-out infinite;
}

@keyframes countdown-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Awaiting Section */
.awaiting-section {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.awaiting-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.awaiting-list.highlighted {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
}

.awaiting-name {
  padding: 2px 8px;
  background: var(--color-warning-bg);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.all-ready {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-success);
  font-weight: 500;
}

/* Processing Overlay */
.processing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: var(--z-panel);
}

.processing-overlay.active {
  opacity: 1;
}

.processing-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
/**
 * Turn Queue Panel — Mode Tabs, Narrative Feed Filters & Mode Panels
 */


/* ========================================
   Mode Tabs (Chat / Plan / Do)
   ======================================== */

.turn-mode-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: var(--spacing-xs);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.turn-mode-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.turn-mode-tab:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.turn-mode-tab.active {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: var(--overlay-gold-subtle);
}

.tab-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0 5px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-primary);
  color: var(--color-fg-on-emphasis);
  line-height: 1;
}

.turn-mode-cycle-hint {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-left: var(--spacing-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  opacity: 0.6;
}

.turn-mode-cycle-hint kbd {
  font-family: var(--font-mono, monospace);
  padding: 0 3px;
  border: 1px solid var(--border-color);
  border-radius: 2px;
  background: var(--surface-secondary);
  font-size: var(--font-size-xs);
}

/* ========================================
   Narrative Feed Filters (#3707: scoped — class is shared with narrative panel)
   ======================================== */

.panel-turn-queue .narrative-filters {
  display: flex;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
}

.narrative-filter {
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.narrative-filter:hover {
  border-color: var(--text-secondary);
}

.narrative-filter.active {
  background: var(--surface-secondary);
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* ========================================
   Mode Panels (Chat / Plan / Do content areas)
   ======================================== */

.mode-panel {
  border-top: 1px solid var(--border-color);
  padding-top: var(--spacing-md);
}

/* Chat Mode */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.chat-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.chat-message {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.chat-message__author {
  font-weight: 600;
  color: var(--color-primary);
  flex-shrink: 0;
}

.chat-message__text {
  color: var(--text-primary);
  word-break: break-word;
}

.chat-message--dm {
  background: var(--overlay-gold-subtle);
  border-left: 2px solid var(--color-gold);
  padding-left: var(--spacing-sm);
  border-radius: var(--radius-sm);
}

.chat-message--dm .chat-message__author {
  color: var(--color-gold);
}

.chat-input-form {
  display: flex;
  gap: var(--spacing-xs);
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.chat-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
}

.chat-send-btn {
  flex-shrink: 0;
}

/* Action Economy Bar (Plan mode) */
.action-economy-bar {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.economy-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.economy-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.economy-indicator {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  position: relative;
  overflow: hidden;
}

.economy-indicator.used {
  background: var(--color-primary);
}

.economy-indicator.available {
  background: var(--color-accent-secondary);
}

/* Planner flair input */
.planner-flair-row {
  margin-top: var(--spacing-xs);
}

.planner-flair-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.planner-flair-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
  color: var(--text-primary);
}

/* Additional planner item types */
.planner-item--action {
  border-left-color: var(--color-accent-primary);
}

.planner-item--bonus_action {
  border-left-color: var(--color-accent-purple);
}

.planner-item--movement {
  border-left-color: var(--color-accent-secondary);
}

.planner-item__type--action {
  background: var(--color-info-bg);
  color: var(--color-accent-primary);
}

.planner-item__type--bonus_action {
  background: var(--color-entity-spell-bg);
  color: var(--color-accent-purple);
}

.planner-item__type--movement {
  background: var(--color-success-bg);
  color: var(--color-accent-secondary);
}

.planner-item__flair {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Coaching Section (Plan mode) */
.coaching-section {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.coaching-refresh-btn {
  font-size: var(--font-size-xs);
}

.coaching-feedback {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

.coaching-empty {
  color: var(--text-secondary);
  font-style: italic;
}

.coaching-text {
  white-space: pre-wrap;
}

/* Do Mode Panel */
.do-review-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.do-empty {
  padding: var(--spacing-md);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.do-review-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}

.do-review-item__cost {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
  color: var(--color-primary);
  flex-shrink: 0;
}

.do-review-item__text {
  flex: 1;
  font-size: var(--font-size-sm);
}

.do-review-item__flair {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.do-economy-summary {
  padding: var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  margin: var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.do-actions {
  padding-top: var(--spacing-sm);
}

.do-submit-btn {
  width: 100%;
  padding: var(--spacing-sm);
  font-weight: 600;
}

/* End Turn Button (shown when it's your turn) */
.end-turn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  font-weight: 600;
  background: var(--color-success);
  border: none;
  color: var(--color-fg-on-emphasis);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.end-turn-btn:hover:not(:disabled) {
  filter: brightness(1.1);
}

.end-turn-btn svg {
  width: 16px;
  height: 16px;
}

.end-turn-btn.hidden {
  display: none;
}

/* Guardrail Warning (Do mode) */
.guardrail-warning {
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-error-bg);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-md);
}

.guardrail-header {
  font-weight: 700;
  color: var(--color-error);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  letter-spacing: 0.5px;
}

.guardrail-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: var(--spacing-md);
}

.guardrail-actions {
  display: flex;
  gap: var(--spacing-sm);
}

/* Do waiting state */
.do-waiting {
  padding: var(--spacing-lg);
  text-align: center;
}

.do-waiting-text {
  color: var(--text-secondary);
  font-style: italic;
  animation: pulse-glow 2s ease-in-out infinite;
}

/* DM controls row */
.dm-controls-row {
  display: flex;
  gap: var(--spacing-sm);
}

/* Realtime mode hides turn-based elements */
.panel-turn-queue.realtime-mode .turn-queue-timer-section,
.panel-turn-queue.realtime-mode .queue-list-section,
.panel-turn-queue.realtime-mode .action-form-section {
  display: none;
}

/**
 * Turn Queue Panel — Turn Queue Planner & Observer Summaries
 */

/* ========================================
   Turn Queue Planner (plan-your-turn section)
   ======================================== */

.turn-planner-section {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.planner-counter {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.planner-form {
  margin-bottom: var(--spacing-sm);
}

.planner-input-row {
  display: flex;
  gap: var(--spacing-xs);
  align-items: stretch;
}

.planner-type-select {
  flex-shrink: 0;
  width: 110px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-secondary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.planner-text-input {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.planner-text-input:focus {
  border-color: var(--accent-primary, var(--color-primary));
  outline: none;
}

.planner-submit-btn {
  flex-shrink: 0;
}

/* Queued Items List */
.planner-item-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.planner-empty {
  padding: var(--spacing-sm);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.planner-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--border-color);
}

.planner-item--question {
  border-left-color: var(--color-accent-primary);
}

.planner-item--plan {
  border-left-color: var(--color-accent-secondary);
}

.planner-item--investigate {
  border-left-color: var(--color-accent-warning);
}

.planner-item__type {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.planner-item__type--question {
  background: var(--color-info-bg);
  color: var(--color-accent-primary);
}

.planner-item__type--plan {
  background: var(--color-success-bg);
  color: var(--color-accent-secondary);
}

.planner-item__type--investigate {
  background: var(--color-warning-bg);
  color: var(--color-accent-warning);
}

.planner-item__text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.planner-item__remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  line-height: 1;
}

.planner-item__remove:hover {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ========================================
   Observer Summaries (other players' turns)
   ======================================== */

.observer-summaries-section {
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-color);
}

.observer-summary-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
}

.observer-summary {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-primary, var(--color-primary));
  font-size: var(--font-size-sm);
}

.observer-summary__actor {
  font-weight: 600;
  color: var(--accent-primary, var(--color-primary));
  flex-shrink: 0;
}

.observer-summary__text {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.observer-summary__tools {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Observer entry in narrative feed (compact inline summary) */
.observer-narrative-entry {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-left: 2px solid var(--text-secondary);
  margin: var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  opacity: 0.85;
}
/**
 * Turn Queue Panel — Import Hub
 * ==============================
 * Multiplayer turn queue with initiative order, player statuses, mode tabs,
 * and turn planner.
 *
 * Decomposed into focused files under turn_queue/ for maintainability.



 */
/* Campaign Discovery Panel
 * =========================
 * Browse and search public campaigns to join.
 * Extends campaign card styles from _campaign_list.css
 */

.campaign-discovery-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.campaign-discovery-panel .panel-header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-discovery-panel .panel-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .panel-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary-color, #4a9eff);
}

.campaign-discovery-panel .panel-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--text-secondary, #888);
}

/* Search Section */
.campaign-discovery-panel .panel-search {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  background: var(--panel-bg-highlight, #1a1a1a);
  border-bottom: 1px solid var(--border-color, #333);
}

.search-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.search-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--input-bg, #0d0d0d);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.375rem;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.875rem;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color, #4a9eff);
}

.search-input::placeholder {
  color: var(--text-muted, #888);
}

.btn-search {
  padding: 0.5rem 0.75rem;
  background: var(--primary-color, #4a9eff);
  border: none;
  border-radius: 0.375rem;
  color: #000;
  cursor: pointer;
  transition: background 0.2s ease;
}

.btn-search:hover {
  background: var(--primary-hover, #3a8eef);
}

.btn-search svg {
  width: 1rem;
  height: 1rem;
}

/* Filters */
.search-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.filter-select,
.filter-input {
  padding: 0.375rem 0.5rem;
  background: var(--input-bg, #0d0d0d);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.25rem;
  color: var(--text-primary, #e0e0e0);
  font-family: inherit;
  font-size: 0.75rem;
}

.filter-select {
  cursor: pointer;
}

.filter-input {
  flex: 1;
  min-width: 200px;
}

.filter-select:focus,
.filter-input:focus {
  outline: none;
  border-color: var(--primary-color, #4a9eff);
}

.filter-input::placeholder {
  color: var(--text-muted, #888);
}

/* Invite Code Section */
.campaign-discovery__invite-section {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.08), transparent);
  border-bottom: 1px solid var(--border-color, #333);
}

.campaign-discovery__invite-wrapper {
  display: flex;
  gap: 0.5rem;
}

.campaign-discovery__invite-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  background: var(--input-bg, #0d0d0d);
  border: 2px solid var(--color-gold, #daa520);
  border-radius: 0.375rem;
  color: var(--text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.campaign-discovery__invite-input:focus {
  outline: none;
  border-color: var(--color-gold, #daa520);
  box-shadow: 0 0 8px rgba(218, 165, 32, 0.3);
}

.campaign-discovery__invite-input::placeholder {
  color: var(--text-muted, #888);
  text-transform: none;
  letter-spacing: normal;
}

.campaign-discovery__invite-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1rem;
  background: var(--color-gold, #daa520);
  border: none;
  border-radius: 0.375rem;
  color: #000;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.campaign-discovery__invite-btn:hover {
  background: #f4c430;
  box-shadow: 0 0 12px rgba(218, 165, 32, 0.4);
}

.campaign-discovery__invite-btn svg {
  width: 1rem;
  height: 1rem;
}

.campaign-discovery__invite-hint {
  margin: 0.75rem 0 0 0;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  text-align: center;
}

/* Campaign List Content */
.campaign-discovery-panel .panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

.campaign-discovery-panel .campaigns-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Discovery-specific campaign card styles */
.campaign-discovery-panel .campaign-card {
  border: 1px solid var(--border-color, #333);
  border-radius: 0.5rem;
  padding: 1rem;
  background: var(--panel-bg, #1a1a1a);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.campaign-discovery-panel .campaign-card:hover {
  border-color: var(--primary-color, #4a9eff);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.campaign-discovery-panel .campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.campaign-discovery-panel .campaign-name {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .campaign-status {
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.campaign-discovery-panel .status-recruiting {
  background: var(--success-color, #4ade80);
  color: #000;
}

.campaign-discovery-panel .status-active {
  background: var(--primary-color, #4a9eff);
  color: #000;
}

.campaign-discovery-panel .campaign-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .campaign-description {
  margin: 0.5rem 0;
  font-size: 0.8125rem;
  color: var(--text-secondary, #888);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Campaign Tags */
.campaign-discovery-panel .campaign-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.campaign-discovery-panel .campaign-tags .tag {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background: rgba(74, 158, 255, 0.15);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--primary-color, #4a9eff);
  text-transform: lowercase;
  letter-spacing: 0.025em;
}

.campaign-discovery-panel .campaign-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle, #2a2a2a);
}

.campaign-discovery-panel .campaign-activity {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

.campaign-discovery-panel .btn-join {
  padding: 0.375rem 0.75rem;
  background: var(--primary-color, #4a9eff);
  border: none;
  border-radius: 0.25rem;
  color: #000;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.campaign-discovery-panel .btn-join:hover:not(:disabled) {
  background: var(--primary-hover, #3a8eef);
}

.campaign-discovery-panel .btn-join:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.campaign-discovery-panel .btn-join.btn--success {
  background: var(--success-color, #4ade80);
}

/* Loading State */
.campaign-discovery-panel .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--primary-color, #4a9eff);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

/* Empty State */
.campaign-discovery-panel .empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-secondary, #888);
}

.campaign-discovery-panel .empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.campaign-discovery-panel .empty-icon svg {
  width: 3rem;
  height: 3rem;
}

.campaign-discovery-panel .empty-state h4 {
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary, #e0e0e0);
}

.campaign-discovery-panel .empty-state p {
  margin: 0;
  font-size: 0.875rem;
}

/* Error State */
.campaign-discovery-panel .error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-error, #cf6068);
}

.campaign-discovery-panel .error-state p {
  margin: 0 0 1rem 0;
}

/* Pagination */
.campaign-discovery-panel .panel-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color, #333);
}

.campaign-discovery-panel .pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.campaign-discovery-panel .btn-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  background: var(--panel-bg, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 0.25rem;
  color: var(--text-primary, #e0e0e0);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.campaign-discovery-panel .btn-pagination:hover:not(:disabled) {
  border-color: var(--primary-color, #4a9eff);
  background: rgba(74, 158, 255, 0.1);
}

.campaign-discovery-panel .btn-pagination:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.campaign-discovery-panel .btn-pagination svg {
  width: 0.875rem;
  height: 0.875rem;
}

.campaign-discovery-panel .page-info {
  font-size: 0.75rem;
  color: var(--text-secondary, #888);
}

/* Hidden utility */
.campaign-discovery-panel .hidden {
  display: none;
}
/**
 * Character Sheet Full Page
 * =========================
 * Traditional D&D 5e character sheet layout with Terminal D&D sections.
 * Designed for out-of-game review and printing.
 */

/* ========================================
 * Base Layout
 * ======================================== */

body:has(.character-sheet-page) {
  margin: 0;
  padding: 0;
  background: var(--color-bg-primary);
  overflow-y: auto;
  height: auto;
}

.character-sheet-page {
  min-height: 100vh;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
}

.character-sheet-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg);
}

/* ========================================
 * Header Section
 * ======================================== */

.cs-page-header {
  text-align: center;
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
}

.cs-page-header__name {
  margin: 0 0 var(--space-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  letter-spacing: 0.02em;
}

.cs-page-header__subtitle {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.cs-page-header__race::after {
  content: ' ';
}

.cs-page-header__class {
  color: var(--color-accent-warning);
}

.cs-page-header__meta {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-default);
}

.cs-page-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cs-page-meta-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-page-meta-value {
  font-size: 0.9rem;
  color: var(--color-text-primary);
}

/* ========================================
 * Three-Column Main Grid
 * ======================================== */

.cs-main-grid {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.cs-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ========================================
 * Section Styles
 * ======================================== */

.cs-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
}

.cs-section__title {
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-section__title--small {
  font-size: 0.7rem;
}

/* ========================================
 * Ability Scores
 * ======================================== */

/* Ability scores: 3-column honeycomb grid */
.cs-abilities-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  justify-items: center;
}

/* Offset bottom row for honeycomb effect */
.cs-abilities-list .cs-ability-box:nth-child(n+4) {
  margin-top: calc(-1 * var(--space-sm));
}

.cs-ability-box {
  --hex-size: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 1.1547);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border: 2px solid var(--color-border-default);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  position: relative;
  cursor: pointer;
}

.cs-ability-box:hover {
  border-color: var(--color-accent-primary);
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Color coding based on ability score ranges (flat, project tokens only) */
.cs-ability-box[data-score-tier="legendary"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-purple);
}

.cs-ability-box[data-score-tier="exceptional"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-primary);
}

.cs-ability-box[data-score-tier="great"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-secondary);
}

.cs-ability-box[data-score-tier="good"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-warning);
}

.cs-ability-box[data-score-tier="average"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
}

.cs-ability-box[data-score-tier="poor"] {
  background: var(--color-bg-secondary);
  border-color: var(--color-accent-error);
}

.cs-ability-box__label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Modifier: prominent center display */
.cs-ability-box__mod {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* Raw score: smaller below modifier */
.cs-ability-box__score {
  font-size: 0.7rem;
  font-weight: 400;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  line-height: 1;
}

/* ========================================
 * Stat Inline (Proficiency Bonus, etc.)
 * ======================================== */

.cs-stat-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-stat-inline__label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cs-stat-inline__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

/* ========================================
 * Saving Throws & Skills
 * ======================================== */

.cs-saves-list,
.cs-skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-save-item,
.cs-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: background 0.15s ease;
}

.cs-save-item:hover,
.cs-skill-item:hover {
  background: var(--color-bg-tertiary);
}

.cs-save-item--proficient,
.cs-skill-item--proficient {
  background: rgba(97, 175, 239, 0.1);
}

.cs-save-item__dot,
.cs-skill-item__dot {
  width: 14px;
  text-align: center;
  font-family: monospace;
  color: var(--color-text-muted);
}

.cs-save-item--proficient .cs-save-item__dot,
.cs-skill-item--proficient .cs-skill-item__dot {
  color: var(--color-accent-primary);
}

.cs-save-item__value,
.cs-skill-item__value {
  width: 28px;
  text-align: right;
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-save-item__name,
.cs-skill-item__name {
  color: var(--color-text-secondary);
}

.cs-save-item--proficient .cs-save-item__name,
.cs-skill-item--proficient .cs-skill-item__name {
  color: var(--color-accent-primary);
}

/* ========================================
 * Combat Stats
 * ======================================== */

.cs-combat-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cs-combat-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-sm);
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-border-default);
  border-radius: 6px;
}

.cs-combat-stat--ac {
  border-color: var(--color-accent-primary);
}

.cs-combat-stat__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-combat-stat__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* ========================================
 * HP Block
 * ======================================== */

.cs-hp-block {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.cs-hp-block__header {
  margin-bottom: var(--space-xs);
}

.cs-hp-block__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-hp-block__values {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--space-sm);
}

.cs-hp-block__current {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

.cs-hp-block__sep {
  font-size: 1.25rem;
  color: var(--color-text-muted);
}

.cs-hp-block__max {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-hp-bar {
  height: 8px;
  background: linear-gradient(90deg, #7f1d1d, #b45309);
  border-radius: 4px;
  overflow: hidden;
}

.cs-hp-bar__fill {
  height: 100%;
  width: 100%;
  background: #2ECC71;
  border-radius: 4px;
  transform-origin: left;
  transition: transform 0.3s ease;
}

/* ========================================
 * Death Saves
 * ======================================== */

.cs-death-saves {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.cs-death-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cs-death-save-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
}

.cs-death-save-boxes {
  display: flex;
  gap: 4px;
}

.cs-death-save-box {
  width: 16px;
  height: 16px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 3px;
}

.cs-death-save-box--filled {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
}

.cs-death-save-box--failure.cs-death-save-box--filled {
  background: var(--color-accent-error);
  border-color: var(--color-accent-error);
}

/* ========================================
 * Tab Navigation
 * ======================================== */

.cs-tab-nav {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.cs-tab-nav::-webkit-scrollbar {
  display: none;
}

.cs-tab-btn {
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  min-height: 44px;
}

.cs-tab-btn:hover {
  color: var(--color-text-primary);
}

.cs-tab-btn.active {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

.cs-tab-panels {
  animation: cs-tab-fade-in 0.2s ease;
}

.cs-tab-panels > .hidden {
  display: none;
}

@keyframes cs-tab-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========================================
 * Full-Width Sections
 * ======================================== */

.cs-full-width-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-two-column-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ========================================
 * Attacks Table
 * ======================================== */

.cs-attacks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cs-attacks-table th {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.cs-attacks-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
}

.cs-attacks-table tr:last-child td {
  border-bottom: none;
}

/* ========================================
 * Equipment List
 * ======================================== */

.cs-equipment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-equipment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cs-equipment-item--equipped {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-equipment-item--unidentified {
  font-style: italic;
  opacity: 0.7;
}

.cs-equipment-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cs-equipment-item__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-equipment-item__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: 2px;
  font-size: 0.7rem;
}

.cs-equipment-item__sep {
  color: var(--color-text-muted);
}

.cs-equipment-item__damage {
  color: var(--color-accent-error);
  font-weight: 500;
}

/* Equipment badges */
.cs-equipment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
}

.cs-equipment-badge--equipped {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.cs-equipment-badge--attuned {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-purple);
  border: 1px solid rgba(198, 120, 221, 0.3);
}

/* Rarity colors */
.cs-equipment-rarity {
  font-weight: 600;
}

.cs-equipment-rarity--common { color: var(--color-text-muted); }
.cs-equipment-rarity--uncommon { color: var(--color-accent-secondary); }
.cs-equipment-rarity--rare { color: var(--color-accent-primary); }
.cs-equipment-rarity--very-rare { color: var(--color-accent-purple); }
.cs-equipment-rarity--legendary { color: var(--color-accent-warning); }
.cs-equipment-rarity--artifact { color: var(--color-accent-error); }

.cs-equipment-item__qty {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.cs-gold-display {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-default);
  display: flex;
  justify-content: space-between;
}

.cs-gold-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-gold-value {
  color: var(--color-accent-warning);
  font-weight: 600;
}

/* ========================================
 * Features List
 * ======================================== */

.cs-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-feature-item {
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 4px;
}

.cs-feature-item__name {
  display: block;
  font-weight: 600;
  color: var(--color-accent-primary);
  font-size: 0.85rem;
}

.cs-feature-item__desc {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cs-more-items {
  margin: var(--space-sm) 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Personality
 * ======================================== */

.cs-personality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.cs-personality-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-personality-label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-personality-value {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.cs-personality-value--editable {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  border-bottom: 1px dashed transparent;
}

.cs-personality-value--editable:hover {
  background-color: var(--color-bg-secondary, rgba(255, 255, 255, 0.05));
  border-bottom-color: var(--color-accent, #c0a060);
}

.cs-inline-textarea {
  width: 100%;
  min-height: 40px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary, #1a1a1a);
  border: 1px solid var(--color-accent, #c0a060);
  border-radius: 2px;
  resize: vertical;
  line-height: 1.4;
}

.cs-inline-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--color-accent, #c0a060);
}

.cs-personality-source {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Proficiencies
 * ======================================== */

.cs-proficiencies-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cs-prof-group {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.cs-prof-label {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-prof-value {
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}

/* ========================================
 * Spells Section
 * ======================================== */

.cs-spells-header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-spell-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cs-spell-stat__label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.cs-spell-stat__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-purple);
}

.cs-spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.cs-spell-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  min-width: 60px;
}

.cs-spell-slot__level {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

.cs-spell-slot__uses {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

.cs-spell-list {
  margin-bottom: var(--space-md);
}

.cs-spell-list__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.75rem;
  color: var(--color-accent-purple);
}

.cs-spell-list ul,
.cs-spell-items {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.cs-spell-list li {
  margin-bottom: 4px;
}

/* Enriched spell item layout */
.cs-spell-item {
  padding: var(--space-sm);
  border-radius: 4px;
  margin-bottom: 4px;
  transition: opacity 0.15s ease;
}

.cs-spell-item:hover {
  background: var(--color-bg-tertiary);
}

.cs-spell-item--unprepared {
  opacity: 0.5;
}

.cs-spell-item--prepared {
  opacity: 1;
}

.cs-spell-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cs-spell-item__name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-spell-item__name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.cs-spell-item__meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cs-spell-item__desc {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.4;
  font-style: italic;
}

/* Spell badges (Concentration, Ritual) */
.cs-spell-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
}

.cs-spell-badge--concentration {
  background: rgba(229, 192, 123, 0.2);
  color: var(--color-accent-warning);
  border: 1px solid rgba(229, 192, 123, 0.3);
}

.cs-spell-badge--ritual {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

/* Spell school colors */
.cs-spell-school {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: capitalize;
  flex-shrink: 0;
}

.cs-spell-school--evocation { color: var(--color-accent-error); }
.cs-spell-school--abjuration { color: var(--color-accent-primary); }
.cs-spell-school--conjuration { color: var(--color-accent-secondary); }
.cs-spell-school--divination { color: var(--color-accent-warning); }
.cs-spell-school--enchantment { color: var(--color-accent-purple); }
.cs-spell-school--illusion { color: #c678dd; }
.cs-spell-school--necromancy { color: var(--color-text-muted); }
.cs-spell-school--transmutation { color: #d19a66; }

/* ========================================
 * Terminal D&D Divider
 * ======================================== */

.cs-tdd-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.cs-tdd-divider::before,
.cs-tdd-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
}

.cs-tdd-divider__text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ========================================
 * Terminal D&D Sections
 * ======================================== */

.cs-tdd-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* TDD Stats Grid */
.cs-tdd-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.cs-tdd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-tdd-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-accent-primary);
}

.cs-tdd-stat__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-top: 4px;
}

/* Memories */
.cs-memory-group {
  margin-bottom: var(--space-md);
}

.cs-memory-group__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-memory-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-memory-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  font-size: 0.85rem;
}

.cs-memory-list--events .cs-memory-item {
  display: list-item;
  list-style: disc inside;
  color: var(--color-text-secondary);
}

.cs-memory-item__name {
  font-weight: 600;
  color: var(--color-accent-primary);
}

.cs-memory-item__detail {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.cs-memory-item__text {
  color: var(--color-text-secondary);
}

.cs-memory-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
}

.cs-memory-badge--combat { background: rgba(224, 108, 117, 0.2); color: var(--color-accent-error); }
.cs-memory-badge--social { background: rgba(198, 120, 221, 0.2); color: var(--color-accent-purple); }
.cs-memory-badge--exploration { background: rgba(97, 175, 239, 0.2); color: var(--color-accent-primary); }
.cs-memory-badge--discovery { background: rgba(229, 192, 123, 0.2); color: var(--color-accent-warning); }
.cs-memory-badge--quest { background: rgba(152, 195, 121, 0.2); color: var(--color-accent-secondary); }
.cs-memory-badge--lore { background: rgba(209, 154, 102, 0.2); color: #d19a66; }

/* Quests */
.cs-quest-group {
  margin-bottom: var(--space-md);
}

.cs-quest-group__title {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.cs-quest-card {
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  margin-bottom: var(--space-sm);
  border-left: 3px solid var(--color-accent-warning);
}

.cs-quest-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.cs-quest-card__title {
  font-weight: 600;
  color: var(--color-accent-warning);
}

.cs-quest-card__progress {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cs-quest-card__desc {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.cs-quest-objectives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cs-quest-objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.cs-quest-objective--complete {
  color: var(--color-accent-secondary);
}

.cs-quest-objective__check {
  font-family: monospace;
  flex-shrink: 0;
}

.cs-quest-summary {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

.cs-quest-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cs-quest-summary__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-accent-secondary);
}

.cs-quest-summary__label {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Error State */
.cs-error-state {
  text-align: center;
  padding: var(--space-xl);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-error);
  border-radius: 12px;
  margin: var(--space-xl) 0;
}

.cs-error-state h2 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-accent-error);
}

.cs-error-state p {
  margin: 0 0 var(--space-lg) 0;
  color: var(--color-text-secondary);
}

/* Empty State */
.cs-empty-state {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
}

/* ========================================
 * Footer
 * ======================================== */

.cs-page-footer {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border-default);
}

.cs-page-footer__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cs-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.cs-footer-btn:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  transform: translateY(-1px);
}

/* ========================================
 * Rollable Elements
 * ======================================== */

.rollable {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
  box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.2);
}

.rollable:active {
  background: rgba(97, 175, 239, 0.15);
}

/* ========================================
 * Dice Roll Toast
 * ======================================== */

.cs-roll-toast {
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-accent-primary);
  border-radius: 10px;
  padding: var(--space-sm) var(--space-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 8px rgba(97, 175, 239, 0.15);
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  text-align: center;
  min-width: 160px;
}

.cs-roll-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-100%);
}

.cs-roll-toast--exit {
  opacity: 0;
  transform: translateX(-50%) translateY(-120%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Toast header with dice icon and label */
.cs-roll-toast__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cs-roll-toast__dice {
  font-size: 1.2rem;
  line-height: 1;
}

.cs-roll-toast__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* Result number - large and prominent */
.cs-roll-toast__result {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent-primary);
  line-height: 1.2;
}

.cs-roll-toast__breakdown {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Critical hit toast */
.cs-roll-toast--critical {
  border-color: var(--color-accent-warning);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 192, 123, 0.3);
  animation: cs-toast-critical-pulse 0.8s ease-in-out 0.6s 2;
}

.cs-roll-toast--critical .cs-roll-toast__result {
  color: var(--color-accent-warning);
}

/* Fumble toast */
.cs-roll-toast--fumble {
  border-color: var(--color-accent-error);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(224, 108, 117, 0.3);
  animation: cs-toast-fumble-shake 0.4s ease-out 0.6s;
}

.cs-roll-toast--fumble .cs-roll-toast__result {
  color: var(--color-accent-error);
}

/* Special labels (CRITICAL! / FUMBLE!) */
.cs-roll-toast__special {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-block;
}

.cs-roll-toast__special--critical {
  color: var(--color-accent-warning);
  background: rgba(229, 192, 123, 0.15);
}

.cs-roll-toast__special--fumble {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.15);
}

/* Advantage / Disadvantage badges */
.cs-roll-toast__badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-roll-toast__badge--advantage {
  color: var(--color-accent-secondary);
  background: rgba(152, 195, 121, 0.2);
}

.cs-roll-toast__badge--disadvantage {
  color: var(--color-accent-error);
  background: rgba(224, 108, 117, 0.2);
}

@keyframes cs-toast-critical-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 192, 123, 0.3); }
  50% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 28px rgba(229, 192, 123, 0.5); }
}

@keyframes cs-toast-fumble-shake {
  0%, 100% { transform: translateX(-50%) translateY(-100%); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(calc(-50% - 4px)) translateY(-100%); }
  20%, 40%, 60%, 80% { transform: translateX(calc(-50% + 4px)) translateY(-100%); }
}

/* ========================================
 * Inline Editing
 * ======================================== */

.cs-hp-block__current,
.cs-gold-value {
  cursor: pointer;
  transition: background 0.15s ease;
  padding: 2px 4px;
  border-radius: 4px;
}

.cs-hp-block__current:hover,
.cs-gold-value:hover {
  background: rgba(97, 175, 239, 0.1);
}

.cs-inline-input {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: inherit;
  padding: 2px 4px;
  text-align: center;
  outline: none;
}

.cs-inline-input:focus {
  box-shadow: 0 0 0 2px rgba(97, 175, 239, 0.3);
}

/* Flash feedback */
.cs-flash--success {
  animation: cs-flash-green 0.6s ease;
}

.cs-flash--error {
  animation: cs-flash-red 0.6s ease;
}

@keyframes cs-flash-green {
  0%, 100% { background: transparent; }
  50% { background: rgba(152, 195, 121, 0.3); }
}

@keyframes cs-flash-red {
  0%, 100% { background: transparent; }
  50% { background: rgba(224, 108, 117, 0.3); }
}

/* ========================================
 * Death Save Boxes (interactive)
 * ======================================== */

.cs-death-save-box {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.cs-death-save-box:hover {
  transform: scale(1.2);
}

/* ========================================
 * Conditions (interactive)
 * ======================================== */

.cs-conditions__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.cs-condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  border-radius: 12px;
  color: var(--color-accent-error);
  font-size: 0.75rem;
  font-weight: 600;
}

.cs-condition-remove {
  background: none;
  border: none;
  color: var(--color-accent-error);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
}

.cs-condition-remove:hover {
  opacity: 1;
}

.cs-condition-add {
  background: none;
  border: 1px dashed var(--color-border-default);
  border-radius: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.cs-condition-add:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.cs-condition-dropdown {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-accent-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 4px 8px;
}

/* ========================================
 * Combat Layout
 * ======================================== */

.cs-combat-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cs-combat-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

/* ========================================
 * Equipment Groups
 * ======================================== */

.cs-equipment-group {
  margin-bottom: var(--space-md);
}

.cs-equipment-group__title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * Spell Level Groups
 * ======================================== */

.cs-spell-level-group {
  margin-bottom: var(--space-md);
}

.cs-spell-level-heading {
  margin: 0 0 var(--space-xs) 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

/* ========================================
 * Save Status & Footer Extras
 * ======================================== */

.cs-page-footer__status {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.cs-save-status {
  font-size: 0.7rem;
  transition: opacity 0.3s ease;
}

.cs-save-status[data-status="idle"] {
  opacity: 0;
}

.cs-save-status[data-status="saving"] {
  color: var(--color-accent-warning);
  opacity: 1;
}

.cs-save-status[data-status="saved"] {
  color: var(--color-accent-secondary);
  opacity: 1;
}

.cs-save-status[data-status="error"] {
  color: var(--color-accent-error);
  opacity: 1;
}

.cs-keyboard-hint {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .character-sheet-page {
    background: var(--paper-bg);
    color: var(--paper-text);
  }

  .character-sheet-container {
    max-width: none;
    padding: 0.5in;
  }

  /* Show all tabs when printing */
  .cs-tab-nav {
    display: none;
  }

  [data-tab-content].hidden {
    display: block;
  }

  [role="tabpanel"] {
    page-break-inside: avoid;
  }

  /* Hide interactive controls */
  .cs-condition-add,
  .cs-condition-remove,
  .cs-condition-dropdown,
  .cs-page-footer,
  .cs-page-footer__status,
  .cs-roll-toast {
    display: none;
  }

  .cs-page-header,
  .cs-section,
  .cs-combat-stat,
  .cs-hp-block,
  .cs-ability-box,
  .cs-stat-inline,
  .cs-tdd-stat,
  .cs-memory-item,
  .cs-quest-card,
  .cs-equipment-item,
  .cs-feature-item {
    background: var(--paper-bg);
    border-color: var(--paper-border);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .rollable {
    cursor: default;
  }

  .cs-ability-box__mod,
  .cs-stat-inline__value,
  .cs-hp-block__current,
  .cs-combat-stat--ac .cs-combat-stat__value,
  .cs-tdd-stat__value,
  .cs-memory-item__name,
  .cs-quest-card__title,
  .cs-feature-item__name,
  .cs-save-item--proficient .cs-save-item__name,
  .cs-skill-item--proficient .cs-skill-item__name {
    color: var(--paper-text);
    font-weight: bold;
  }

  .cs-page-header__name {
    color: var(--paper-text);
  }

  .cs-tdd-divider__text {
    color: var(--screenplay-muted);
  }

  .cs-tdd-divider::before,
  .cs-tdd-divider::after {
    background: var(--paper-border);
  }
}

/* ========================================
 * Responsive Design
 * ======================================== */

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

  .cs-column--abilities {
    grid-column: span 2;
  }

  .cs-abilities-list {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xs);
  }

  .cs-abilities-list .cs-ability-box:nth-child(n+4) {
    margin-top: 0;
  }

  .cs-ability-box {
    --hex-size: 72px;
  }

  .cs-tdd-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cs-tab-btn {
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
  }

  .cs-combat-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .character-sheet-container {
    padding: var(--space-md);
  }

  .cs-main-grid {
    grid-template-columns: 1fr;
  }

  .cs-column--abilities {
    grid-column: span 1;
  }

  .cs-two-column-row {
    grid-template-columns: 1fr;
  }

  .cs-personality-grid {
    grid-template-columns: 1fr;
  }

  .cs-combat-stats {
    grid-template-columns: 1fr;
  }

  .cs-page-header__subtitle {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .cs-page-header__meta {
    flex-direction: column;
    align-items: center;
  }

  .cs-footer-btn {
    flex: 1;
    justify-content: center;
  }
}
/*
 * Organism: Character Sheet Page
 * ================================
 * Full-page character sheet with stats, skills, equipment, spells, and interactions.
 *
 * Split into focused modules under character_sheet_page/:
 *   _layout_stats.css    — Base layout, header, grid, section styles, ability scores, stat inline, saving throws, HP, death saves
 *   _content_sections.css — Tab navigation, attacks, equipment, features, personality, proficiencies
 *   _spells_tdd.css      — Spells section, Terminal D&D divider and sections
 *   _interactions.css    — Footer, rollable elements, dice roll toast, inline editing, conditions, combat/equipment groups
 *   _print_responsive.css — Print styles, responsive design
 */






/* ============================================
 * Validation Feedback Panel
 * ============================================
 * Displays validation warnings, errors, and suggestions
 * from the AI DM pipeline's Stage 5 validate phase.
 */

/* Panel Container */
.validation-feedback-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.3s ease;
}

.validation-feedback-panel:not(.visible) {
  opacity: 0.6;
}

.validation-feedback-panel.minimized .validation-content,
.validation-feedback-panel.minimized .validation-suppressed {
  display: none;
}

/* Header */
.validation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.validation-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.validation-icon {
  font-size: 1.1em;
}

.validation-controls {
  display: flex;
  gap: var(--space-1);
}

/* Summary */
.validation-summary {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.validation-count {
  font-family: var(--font-mono);
}

/* Content Area */
.validation-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.validation-section {
  margin-bottom: var(--space-3);
}

.validation-section:last-child {
  margin-bottom: 0;
}

.validation-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.severity-icon {
  font-size: 1em;
}

.dismiss-all-btn {
  margin-left: auto;
  font-size: var(--font-size-xxs);
}

/* Validation List */
.validation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.validation-item:last-child {
  margin-bottom: 0;
}

/* Error Items */
.validation-error {
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  border-left: 3px solid var(--color-danger, #dc3545);
  color: var(--color-danger-text, #dc3545);
}

/* Warning Items */
.validation-warning {
  background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
  border-left: 3px solid var(--color-warning, #ffc107);
  color: var(--color-text-primary);
}

.validation-warning .warning-text {
  flex: 1;
}

.validation-warning .dismiss-btn {
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.validation-warning:hover .dismiss-btn {
  opacity: 1;
}

/* Suggestion Items */
.validation-suggestion {
  background: var(--color-info-bg, rgba(13, 202, 240, 0.1));
  border-left: 3px solid var(--color-info, #0dcaf0);
  color: var(--color-text-primary);
}

/* Suppressed Items */
.validation-suppressed {
  background: var(--color-bg-tertiary, rgba(128, 128, 128, 0.1));
  border-left: 3px solid var(--color-text-muted);
  color: var(--color-text-muted);
}

.suppressed-count {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Balance Score Section */
.validation-balance-section {
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

.balance-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.balance-score-bar {
  flex: 1;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.balance-score-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.balance-score-fill.score-1 {
  background: var(--color-danger, #dc3545);
}

.balance-score-fill.score-2 {
  background: var(--color-warning, #ffc107);
}

.balance-score-fill.score-3 {
  background: var(--color-info, #0dcaf0);
}

.balance-score-fill.score-4 {
  background: var(--color-success, #28a745);
}

.balance-score-fill.score-5 {
  background: var(--color-accent-primary);
}

.balance-score-text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  min-width: 30px;
  text-align: right;
}

.balance-assessment {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Suppressed Section */
.validation-suppressed {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-tertiary);
}

.suppressed-list-container {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

.suppressed-list .validation-item {
  opacity: 0.7;
}

/* Empty State */
.validation-empty-state {
  text-align: center;
  padding: var(--space-4);
  color: var(--color-text-muted);
}

.validation-empty-state p {
  margin: 0 0 var(--space-2) 0;
}

.validation-empty-state p:first-child {
  font-size: var(--font-size-lg);
  color: var(--color-success, #28a745);
}

.validation-empty-state .text-muted {
  font-size: var(--font-size-xs);
}

/* ============================================
 * Inline Validation Segments (in narrative)
 * ============================================
 */

.validation-alert {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.validation-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.validation-alert-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.validation-alert-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Severity-specific styles */
.validation-alert.severity-info {
  border-color: var(--color-info, #0dcaf0);
}

.validation-alert.severity-info .validation-alert-badge {
  background: var(--color-info-bg, rgba(13, 202, 240, 0.1));
  color: var(--color-info, #0dcaf0);
}

.validation-alert.severity-warning {
  border-color: var(--color-warning, #ffc107);
}

.validation-alert.severity-warning .validation-alert-badge {
  background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
  color: var(--color-warning, #ffc107);
}

.validation-alert.severity-error {
  border-color: var(--color-danger, #dc3545);
}

.validation-alert.severity-error .validation-alert-badge {
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  color: var(--color-danger, #dc3545);
}

.validation-alert.severity-critical {
  border-color: var(--color-danger, #dc3545);
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
}

.validation-alert.severity-critical .validation-alert-badge {
  background: var(--color-danger, #dc3545);
  color: white;
}

.validation-alert-body {
  font-size: var(--font-size-sm);
}

.validation-alert-issues {
  list-style: none;
  margin: 0;
  padding: 0;
}

.validation-alert-issues li {
  padding: var(--space-1) 0;
  border-bottom: 1px dashed var(--color-border);
}

.validation-alert-issues li:last-child {
  border-bottom: none;
}

.validation-alert-suggestions {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.validation-alert-suggestions h5 {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.validation-alert-suggestions ul {
  list-style: disc;
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.validation-dismiss-actions {
  margin-top: var(--space-2);
  display: flex;
  gap: var(--space-2);
}

.validation-dismiss-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.validation-dismiss-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-text-muted);
}

/* ============================================
 * DM Correction Segment
 * ============================================
 * Displayed when AI hallucinates tool success
 */

.dm-correction,
dm-correction {
  display: block;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-danger-bg, rgba(220, 53, 69, 0.1));
  border: 1px solid var(--color-danger, #dc3545);
  border-left: 3px solid var(--color-danger, #dc3545);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dm-correction::before,
dm-correction::before {
  content: 'Correction';
  display: block;
  margin-bottom: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-danger, #dc3545);
}

.dm-correction strong,
dm-correction strong {
  color: var(--color-danger-text, #dc3545);
}

.dm-correction ul,
dm-correction ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-4);
}

.dm-correction li,
dm-correction li {
  margin-bottom: var(--space-1);
}
/**
 * Dressing Room — Base Panel
 * ============================
 * Character management, sections, fields, editors, level control,
 * equipment grid, inventory, and fantasy indicator.
 */

/* Dressing Room Panel */
/* Character management - edit, level, equip, and manage variants */

.dressing-room {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 320px;
  background: var(--color-surface);
}

.dressing-room__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
}

.dressing-room__title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.dressing-room__character-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.dressing-room__character-name {
  font-weight: 600;
  color: var(--color-text-primary);
}

.dressing-room__character-level {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Sections */
.dressing-room__section {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.dressing-room__section:last-child {
  border-bottom: none;
}

.dressing-room__section-title {
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Fields */
.dressing-room__field {
  margin-bottom: var(--spacing-sm);
}

.dressing-room__field:last-child {
  margin-bottom: 0;
}

.dressing-room__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-xs);
}

/* Name Editor */
.dressing-room__name-editor {
  display: flex;
  gap: var(--spacing-xs);
}

.dressing-room__name-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.dressing-room__name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Level Control */
.dressing-room__level-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dressing-room__level-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room__level-btn:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room__level-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dressing-room__level-display {
  min-width: 40px;
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-primary);
}

.dressing-room__level-control--no-character {
  opacity: 0.6;
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, var(--color-text-primary));
}

.dressing-room__level-display--placeholder {
  color: var(--color-text-secondary, var(--color-text-primary));
  font-style: italic;
}

.dressing-room__level-gate {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary, var(--color-text-primary));
}

/* Equipment Grid */
.dressing-room__equipment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.dressing-room__equipment-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dressing-room__equipment-slot:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-elevated);
}

.dressing-room__equipment-slot--fantasy {
  border-color: var(--color-warning);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.dressing-room__slot-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.dressing-room__slot-item {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-align: center;
  word-break: break-word;
}

.dressing-room__slot-item--empty {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Inventory */
.dressing-room__inventory-search {
  margin-bottom: var(--spacing-sm);
}

.dressing-room__search-input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.dressing-room__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dressing-room__inventory-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.dressing-room__inventory-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room__inventory-item:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary);
}

.dressing-room__inventory-item--equipped {
  border-color: var(--color-success);
}

.dressing-room__inventory-item--disabled {
  opacity: 0.5;
  cursor: default;
}

.dressing-room__inventory-item-name {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dressing-room__inventory-item-quantity {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Fantasy Indicator */
.dressing-room__fantasy-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  border: 1px solid var(--color-warning);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.dressing-room__fantasy-badge {
  padding: 2px 8px;
  background: var(--color-warning);
  color: var(--color-on-warning, #000);
  border-radius: var(--border-radius-xs);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.dressing-room__fantasy-count {
  font-weight: 600;
  color: var(--color-warning);
}

.dressing-room__fantasy-label {
  color: var(--color-text-secondary);
}

/* Variant Tree */
.dressing-room__variant-tree {
  max-height: 200px;
  overflow-y: auto;
}

.dressing-room__variant-loading {
  text-align: center;
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-style: italic;
}

.dressing-room__variant-node {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-left: var(--spacing-md);
  border-left: 2px solid var(--color-border);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dressing-room__variant-node:hover {
  background: var(--color-surface-elevated);
}

.dressing-room__variant-node--canonical {
  border-left-color: var(--color-success);
}

.dressing-room__variant-node--current {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border-left-color: var(--color-primary);
}

.dressing-room__variant-node--root {
  margin-left: 0;
  border-left: none;
}

.dressing-room__variant-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.dressing-room__variant-level {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.dressing-room__variant-badge {
  font-size: var(--font-size-xs);
  padding: 1px 6px;
  border-radius: var(--border-radius-xs);
}

.dressing-room__variant-badge--canonical {
  background: var(--color-success);
  color: var(--color-on-success, #fff);
}

.dressing-room__variant-badge--branch {
  background: var(--color-info);
  color: var(--color-on-info, #fff);
}

.dressing-room__variant-badge--respec {
  background: var(--color-warning);
  color: var(--color-on-warning, #000);
/**
 * Dressing Room — Variants & Slots
 * ==================================
 * Variant tree, buttons, actions, compact embed, slot selector,
 * and variant menu.
 */


/* Buttons */
.dressing-room__btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.dressing-room__btn:hover {
  filter: brightness(1.1);
}

.dressing-room__btn--small {
  padding: 2px 8px;
  font-size: var(--font-size-xs);
}

.dressing-room__btn--save {
  background: var(--color-success);
  color: var(--color-on-success, #fff);
}

.dressing-room__btn--danger {
  background: var(--color-error);
  color: var(--color-on-error, #fff);
}

.dressing-room__btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Actions */
.dressing-room__actions {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/* Status */
.dressing-room__status {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-info-bg, color-mix(in srgb, var(--color-info) 15%, transparent));
  color: var(--color-info);
  font-size: var(--font-size-sm);
  text-align: center;
}

.dressing-room__status--error {
  background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 15%, transparent));
  color: var(--color-error);
}

.dressing-room__status--success {
  background: var(--color-success-bg, color-mix(in srgb, var(--color-success) 15%, transparent));
  color: var(--color-success);
}

/* Dressing Room Compact (Settings Panel Embed) */
.dressing-room-compact__inline-edit {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.dressing-room-compact__input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  min-width: 0;
}

.dressing-room-compact__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.dressing-room-compact__btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.dressing-room-compact__btn:hover {
  filter: brightness(1.1);
}

.dressing-room-compact__level-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.dressing-room-compact__level-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.dressing-room-compact__level-btn:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room-compact__level-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dressing-room-compact__level-display {
  min-width: 32px;
  text-align: center;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-primary);
}

.dressing-room-compact__status {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-sm);
  text-align: center;
}

.dressing-room-compact__status--success {
  background: var(--color-success-bg, color-mix(in srgb, var(--color-success) 15%, transparent));
  color: var(--color-success);
}

.dressing-room-compact__status--error {
  background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 15%, transparent));
  color: var(--color-error);
}

.dressing-room-compact__status--info {
  background: var(--color-info-bg, color-mix(in srgb, var(--color-info) 15%, transparent));
  color: var(--color-info);
}

/* Slot Selector Dropdown */
.dressing-room__inventory-item--selecting {
  position: relative;
  z-index: var(--z-sticky);
}

.dressing-room__slot-selector {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.3));
  z-index: var(--z-panel);
  overflow: hidden;
}

.dressing-room__slot-selector-header {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dressing-room__slot-selector-option {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.dressing-room__slot-selector-option:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room__slot-selector-cancel {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.dressing-room__slot-selector-cancel:hover {
  background: var(--color-error);
  color: var(--color-on-error, #fff);
}

/* Variant Menu */
.dressing-room__variant-node--menu-open {
  position: relative;
  z-index: var(--z-sticky);
}

.dressing-room__variant-menu {
  position: absolute;
  top: 100%;
  left: var(--spacing-md);
  min-width: 180px;
  margin-top: 4px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.3));
  z-index: var(--z-panel);
  overflow: hidden;
}

.dressing-room__variant-menu-header {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dressing-room__variant-menu-info {
  padding: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.dressing-room__variant-menu-option {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.1s ease;
}

.dressing-room__variant-menu-option:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.dressing-room__variant-menu-hint {
  padding: 2px var(--spacing-sm) var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.dressing-room__variant-menu-close {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-family: inherit;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease;
}

.dressing-room__variant-menu-close:hover {
  background: var(--color-surface);
  color: var(--color-text-primary);
}
/**
 * Dressing Room Panel — Import Hub
 * ===================================
 * Character management: edit, level, equip, and manage variants.
 *
 * Decomposed into focused files under dressing_room/ for maintainability.


 */
/* ==========================================================================
   Structured Segments
   Tables, lists, and data grids for structured LLM output
   ========================================================================== */

/* -----------------------------------------------------------------------------
   TABLE SEGMENT
   -------------------------------------------------------------------------- */

.narrative-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-md) 0;
  font-family: var(--font-terminal);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--color-border);
}

.narrative-table-caption {
  padding: var(--spacing-sm);
  font-weight: bold;
  text-align: left;
  color: var(--color-gold);
  border-bottom: 1px solid var(--color-border);
  background: rgba(var(--color-gold-rgb), 0.1);
}

.narrative-table-header {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: bold;
  color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.15);
  border-bottom: 2px solid var(--color-gold);
}

.narrative-table-cell {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

.narrative-table tbody tr:hover {
  background: rgba(var(--color-gold-rgb), 0.05);
}

.narrative-table tbody tr:last-child .narrative-table-cell {
  border-bottom: none;
}

/* Compact table variant */
.narrative-table--compact {
  font-size: var(--font-size-xs);
}

.narrative-table--compact .narrative-table-header,
.narrative-table--compact .narrative-table-cell {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
  .narrative-table,
  .narrative-table thead,
  .narrative-table tbody,
  .narrative-table th,
  .narrative-table td,
  .narrative-table tr {
    display: block;
  }

  .narrative-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .narrative-table-cell {
    padding: var(--spacing-xs) var(--spacing-sm);
    padding-left: 45%;
    position: relative;
    border-bottom: 1px solid var(--color-border);
  }

  .narrative-table-cell::before {
    content: attr(data-label);
    position: absolute;
    left: var(--spacing-sm);
    width: 40%;
    font-weight: bold;
    color: var(--color-gold);
  }

  .narrative-table tbody tr {
    border-bottom: 2px solid var(--color-gold);
    margin-bottom: var(--spacing-sm);
  }
}

/* -----------------------------------------------------------------------------
   LIST SEGMENT
   -------------------------------------------------------------------------- */

.narrative-list {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-lg);
  font-family: var(--font-terminal);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.narrative-list--numbered {
  list-style-type: decimal;
}

.narrative-list--bullet {
  list-style-type: none;
}

.narrative-list--bullet .narrative-list-item::before {
  content: '\25B8';
  color: var(--color-gold);
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

.narrative-list-item {
  padding: var(--spacing-xs) 0;
  line-height: 1.5;
}

.narrative-list-item + .narrative-list-item {
  border-top: 1px dotted var(--color-border);
}

/* Inline list variant */
.narrative-list-inline {
  font-style: italic;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------------------
   DATA GRID SEGMENT
   -------------------------------------------------------------------------- */

.narrative-datagrid {
  display: grid;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.narrative-datagrid--cols-1 {
  grid-template-columns: 1fr;
}

.narrative-datagrid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.narrative-datagrid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.narrative-datagrid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .narrative-datagrid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .narrative-datagrid--cols-2,
  .narrative-datagrid--cols-3,
  .narrative-datagrid--cols-4 {
    grid-template-columns: 1fr;
  }
}

.datagrid-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.datagrid-card:hover {
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(var(--color-gold-rgb), 0.3);
}

.datagrid-card-header {
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(var(--color-gold-rgb), 0.1);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.datagrid-card-icon {
  font-size: var(--font-size-lg);
}

.datagrid-card-title {
  font-weight: bold;
  color: var(--color-gold);
  flex: 1;
}

.datagrid-card-subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.datagrid-card-content {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   SEGMENT WRAPPER STYLES
   -------------------------------------------------------------------------- */

.segment-table,
.segment-list,
.segment-datagrid {
  margin: var(--spacing-sm) 0;
}

/* Ensure strong/em styling in cells */
.narrative-table-cell strong,
.narrative-list-item strong,
.datagrid-card-content strong {
  color: var(--color-gold);
  font-weight: bold;
}

.narrative-table-cell em,
.narrative-list-item em,
.datagrid-card-content em {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Accessibility: focus states */
.narrative-table:focus-within,
.datagrid-card:focus-within {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .narrative-table,
  .narrative-list,
  .narrative-datagrid {
    break-inside: avoid;
  }

  .datagrid-card {
    border: 1px solid #333;
    box-shadow: none;
  }
}
/* ==========================================================================
 * Resource Tracker Panel
 * Displays class-specific resources (Ki, Rage, Channel Divinity, etc.)
 * ========================================================================== */

.resource-tracker-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  height: 100%;
  overflow-y: auto;
}

/* Header */
.resource-tracker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
  padding-bottom: var(--space-2, 8px);
}

.resource-tracker__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-lg, 16px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e0e0e0);
  margin: 0;
}

.resource-tracker__title svg {
  width: 18px;
  height: 18px;
  color: var(--accent-primary, #6366f1);
}

/* Sections */
.resource-tracker__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.resource-tracker__section-title {
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Resource Grid */
.resource-tracker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-2, 8px);
}

/* Individual Resource Item */
.resource-tracker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-3, 12px) var(--space-2, 8px);
  background: var(--color-bg-secondary, #1e1e38);
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-md, 6px);
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s), opacity var(--transition-fast, 0.15s);
}

.resource-tracker__item:hover {
  border-color: var(--color-border-hover, #5a5a7a);
}

.resource-tracker__item--depleted {
  opacity: 0.6;
}

.resource-tracker__item--full {
  border-color: var(--accent-success, #4ade80);
}

/* Resource Icon */
.resource-tracker__icon {
  font-size: 24px;
  margin-bottom: var(--space-1, 4px);
}

/* Resource Name */
.resource-tracker__name {
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #a0a0c0);
  text-align: center;
  margin-bottom: var(--space-1, 4px);
}

/* Resource Value (current / max) */
.resource-tracker__value {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary, #e0e0e0);
  font-variant-numeric: tabular-nums;
}

.resource-tracker__value--depleted {
  color: var(--accent-danger, #ef4444);
}

.resource-tracker__value--low {
  color: var(--accent-warning, #f59e0b);
}

.resource-tracker__max {
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-muted, #888);
}

/* Recovery indicator (short rest / long rest) */
.resource-tracker__recovery {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888);
  margin-top: var(--space-1, 4px);
}

.resource-tracker__recovery svg {
  width: 10px;
  height: 10px;
}

.resource-tracker__recovery--short {
  color: var(--accent-rest-short, #d97706);
}

.resource-tracker__recovery--long {
  color: var(--accent-rest-long, #3b82f6);
}

/* Spell Slots */
.resource-tracker__spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.resource-tracker__spell-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2, 8px);
  background: var(--color-bg-secondary, #1e1e38);
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-md, 6px);
  min-width: 50px;
}

.resource-tracker__spell-level-num {
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888);
  margin-bottom: 2px;
}

.resource-tracker__spell-slots-pips {
  display: flex;
  gap: 3px;
}

.resource-tracker__spell-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

.resource-tracker__spell-pip--available {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 8px rgba(198, 120, 221, 0.6),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.resource-tracker__spell-pip--used {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Concentration */
.resource-tracker__concentration {
  background: linear-gradient(135deg, var(--color-bg-secondary, #1e1e38) 0%, #2a2a4a 100%);
  border: 1px solid var(--accent-magic, #8b5cf6);
  border-radius: var(--radius-md, 6px);
  padding: var(--space-2, 8px);
}

.resource-tracker__concentration-spell {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  color: var(--accent-magic, #8b5cf6);
  font-weight: var(--font-weight-medium, 500);
}

.resource-tracker__concentration-spell::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-sparkles) no-repeat center / contain;
}

/* Empty State */
.resource-tracker__empty {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #888);
  font-style: italic;
}

/* Recovery Actions */
.resource-tracker__actions {
  display: flex;
  gap: var(--space-2, 8px);
  margin-top: auto;
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-default, #3a3a5a);
}

.resource-tracker__action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: transparent;
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-secondary, #a0a0c0);
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background var(--transition-fast, 0.15s), color var(--transition-fast, 0.15s), border-color var(--transition-fast, 0.15s);
}

.resource-tracker__action-btn:hover {
  background: var(--color-bg-hover, #2a2a4a);
  border-color: var(--color-border-hover, #5a5a7a);
  color: var(--color-text-primary, #e0e0e0);
}

.resource-tracker__action-btn svg {
  width: 14px;
  height: 14px;
}

/* Resource Type-Specific Colors */
.resource-tracker__item[data-resource-type="ki"] {
  --resource-color: var(--accent-ki, #22d3ee);
}

.resource-tracker__item[data-resource-type="ki"] .resource-tracker__icon {
  color: var(--accent-ki, #22d3ee);
}

.resource-tracker__item[data-resource-type="rage"] {
  --resource-color: var(--accent-rage, #ef4444);
}

.resource-tracker__item[data-resource-type="rage"] .resource-tracker__icon {
  color: var(--accent-rage, #ef4444);
}

.resource-tracker__item[data-resource-type="channel_divinity"] {
  --resource-color: var(--accent-divine, #fbbf24);
}

.resource-tracker__item[data-resource-type="channel_divinity"] .resource-tracker__icon {
  color: var(--accent-divine, #fbbf24);
}

.resource-tracker__item[data-resource-type="action_surge"] {
  --resource-color: var(--accent-martial, #f97316);
}

.resource-tracker__item[data-resource-type="action_surge"] .resource-tracker__icon {
  color: var(--accent-martial, #f97316);
}

.resource-tracker__item[data-resource-type="second_wind"] {
  --resource-color: var(--accent-heal, #22c55e);
}

.resource-tracker__item[data-resource-type="second_wind"] .resource-tracker__icon {
  color: var(--accent-heal, #22c55e);
}

.resource-tracker__item[data-resource-type="sorcery_points"] {
  --resource-color: var(--accent-magic, #8b5cf6);
}

.resource-tracker__item[data-resource-type="sorcery_points"] .resource-tracker__icon {
  color: var(--accent-magic, #8b5cf6);
}

.resource-tracker__item[data-resource-type="bardic_inspiration"] {
  --resource-color: var(--accent-bardic, #ec4899);
}

.resource-tracker__item[data-resource-type="bardic_inspiration"] .resource-tracker__icon {
  color: var(--accent-bardic, #ec4899);
}

.resource-tracker__item[data-resource-type="lay_on_hands"] {
  --resource-color: var(--accent-divine, #fbbf24);
}

.resource-tracker__item[data-resource-type="lay_on_hands"] .resource-tracker__icon {
  color: var(--accent-divine, #fbbf24);
}

/* Animation for resource change */
@keyframes resource-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.resource-tracker__item--changed {
  animation: resource-pulse 0.3s ease-out;
}

.resource-tracker__item--spent .resource-tracker__value {
  animation: resource-spent 0.3s ease-out;
}

@keyframes resource-spent {
  0% { color: var(--color-text-primary, #e0e0e0); }
  50% { color: var(--accent-danger, #ef4444); }
  100% { color: var(--color-text-primary, #e0e0e0); }
}

.resource-tracker__item--recovered .resource-tracker__value {
  animation: resource-recovered 0.3s ease-out;
}

@keyframes resource-recovered {
  0% { color: var(--color-text-primary, #e0e0e0); }
  50% { color: var(--accent-success, #4ade80); }
  100% { color: var(--color-text-primary, #e0e0e0); }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .resource-tracker__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-tracker__actions {
    flex-direction: column;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .resource-tracker__item--changed,
  .resource-tracker__item--spent .resource-tracker__value,
  .resource-tracker__item--recovered .resource-tracker__value {
    animation: none;
  }

  .resource-tracker__spell-pip--available {
    animation: none;
  }
}
/**
 * Location List — Header and Current Location
 * =============================================
 * Panel container, header, current location display, and location sections.
 */

/**
 * Location List Panel
 * ===================
 * Text-based navigation showing current location, nearby destinations,
 * and known locations. Click to travel.
 */

/* Container */
.location-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--terminal-spacing-md);
  background: var(--terminal-bg-secondary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius-md, 8px);
  overflow: hidden;
}

/* Header */
.location-list__header {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
  padding-bottom: var(--terminal-spacing-sm);
  border-bottom: 1px solid var(--terminal-border);
  margin-bottom: var(--terminal-spacing-md);
  flex-shrink: 0;
}

.location-list__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--terminal-cyan);
}

.location-list__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text-primary);
  margin: 0;
}

/* Content Area */
.location-list__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Sections */
.location-list__section {
  margin-bottom: var(--terminal-spacing-lg);
}

.location-list__section:last-child {
  margin-bottom: 0;
}

.location-list__section-title {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-xs);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--terminal-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--terminal-spacing-sm) 0;
}

.location-list__section-icon {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Current Location */
.location-list__current {
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-cyan);
  border-left: 3px solid var(--terminal-cyan);
  border-radius: var(--terminal-radius-sm, 4px);
  padding: var(--terminal-spacing-sm);
  transition: background 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.location-list__current--changing {
  animation: location-pulse 0.5s ease;
}

@keyframes location-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.location-list__location {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-sm);
}

.location-list__location-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.location-list__location-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.location-list__location-name {
  font-weight: 600;
  color: var(--terminal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-list__location-type {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.location-list__location-desc {
  font-size: 0.8rem;
  color: var(--terminal-text-secondary);
  margin: var(--terminal-spacing-xs) 0 0 0;
  line-height: 1.4;
}

/* Location List */
.location-list__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-xs);
}

.location-list__list--compact .location-list__item {
  padding: 0;
}

/* Location Items */
.location-list__item {
  border-radius: var(--terminal-radius-sm, 4px);
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.location-list__item--updating {
  animation: item-update 0.5s ease;
}

@keyframes item-update {
  0% { background-color: var(--terminal-cyan-dim, rgba(0, 255, 255, 0.1)); }
  100% { background-color: transparent; }
}

.location-list__item--traveling {
  opacity: 0.8;
  pointer-events: none;
  position: relative;
  overflow: hidden;
}

/* Travel progress shimmer effect */
.location-list__item--traveling::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: traveling-shimmer 1.5s ease-in-out infinite;
}

@keyframes traveling-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.location-list__item--traveling .location-list__travel-btn {
  border-color: var(--terminal-cyan);
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.2);
}

/* Travel status badge */
.location-list__travel-status {
  display: none;
  align-items: center;
  gap: var(--terminal-spacing-xs);
  padding: 2px 8px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid var(--terminal-cyan);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  color: var(--terminal-cyan);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.location-list__item--traveling .location-list__travel-status {
  display: flex;
  animation: traveling-pulse 1s ease infinite;
}

@keyframes traveling-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.location-list__travel-status-icon {
  width: 12px;
  height: 12px;
  background: var(--terminal-cyan);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Visibility States */
.location-list__item--undiscovered {
  opacity: 0.5;
}

.location-list__item--discovered {
  opacity: 0.8;
}

.location-list__item--discovered .location-list__item-name {
  color: var(--terminal-text-secondary);
  font-style: italic;
}

.location-list__item--visited {
  opacity: 1;
}

/**
 * Location List — Location Items and Travel
 * ============================================
 * Location items, direction arrows, travel button, item details, and visited badges.
 */

/* Travel Button */
.location-list__travel-btn {
  display: flex;
  flex-direction: column;
  gap: var(--terminal-spacing-xs);
  width: 100%;
  padding: var(--terminal-spacing-sm);
  background: var(--terminal-bg-tertiary);
  border: 1px solid var(--terminal-border);
  border-radius: var(--terminal-radius-sm, 4px);
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.location-list__travel-btn:hover {
  border-color: var(--terminal-cyan);
  background: var(--terminal-bg-secondary);
}

.location-list__travel-btn:focus {
  outline: 2px solid var(--terminal-cyan);
  outline-offset: 2px;
}

.location-list__travel-btn:active {
  transform: scale(0.98);
}

/* Compact style for known locations */
.location-list__item--compact .location-list__travel-btn {
  flex-direction: row;
  align-items: center;
  padding: var(--terminal-spacing-xs) var(--terminal-spacing-sm);
}

/* Item Header (direction + icon + name) */
.location-list__item-header {
  display: flex;
  align-items: center;
  gap: var(--terminal-spacing-xs);
}

.location-list__direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--terminal-cyan);
  flex-shrink: 0;
}

/* Styled direction arrow icon */
.location-list__direction-icon {
  width: 16px;
  height: 16px;
  background: var(--terminal-cyan);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z'/%3E%3C/svg%3E");
  transition: transform var(--transition-fast, 0.15s);
}

/* Directional rotations */
.location-list__direction[data-direction="north"] .location-list__direction-icon,
.location-list__direction[data-direction="N"] .location-list__direction-icon {
  transform: rotate(-90deg);
}

.location-list__direction[data-direction="south"] .location-list__direction-icon,
.location-list__direction[data-direction="S"] .location-list__direction-icon {
  transform: rotate(90deg);
}

.location-list__direction[data-direction="east"] .location-list__direction-icon,
.location-list__direction[data-direction="E"] .location-list__direction-icon {
  transform: rotate(0deg);
}

.location-list__direction[data-direction="west"] .location-list__direction-icon,
.location-list__direction[data-direction="W"] .location-list__direction-icon {
  transform: rotate(180deg);
}

.location-list__direction[data-direction="northwest"] .location-list__direction-icon,
.location-list__direction[data-direction="NW"] .location-list__direction-icon {
  transform: rotate(-135deg);
}

.location-list__direction[data-direction="northeast"] .location-list__direction-icon,
.location-list__direction[data-direction="NE"] .location-list__direction-icon {
  transform: rotate(-45deg);
}

.location-list__direction[data-direction="southwest"] .location-list__direction-icon,
.location-list__direction[data-direction="SW"] .location-list__direction-icon {
  transform: rotate(135deg);
}

.location-list__direction[data-direction="southeast"] .location-list__direction-icon,
.location-list__direction[data-direction="SE"] .location-list__direction-icon {
  transform: rotate(45deg);
}

/* Hover effect */
.location-list__travel-btn:hover .location-list__direction-icon {
  transform: var(--direction-rotation, rotate(0deg)) scale(1.2);
}

.location-list__item-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.location-list__item-name {
  font-weight: 500;
  color: var(--terminal-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Item Details (travel time, difficulty) */
.location-list__item-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--terminal-spacing-sm);
  padding-left: calc(1.2em + var(--terminal-spacing-xs));
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
}

.location-list__travel-time {
  display: flex;
  align-items: center;
  gap: 0.25em;
}

.location-list__travel-time .svg-icon {
  font-size: 0.85em;
  opacity: 0.7;
}

.location-list__difficulty {
  padding: 0.1em 0.4em;
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
  text-transform: capitalize;
}

.location-list__difficulty--2 {
  background: var(--terminal-yellow-dim, rgba(255, 200, 0, 0.2));
  color: var(--terminal-yellow);
}

.location-list__difficulty--3 {
  background: var(--terminal-orange-dim, rgba(255, 150, 0, 0.2));
  color: var(--terminal-orange, #ffa500);
}

.location-list__difficulty--4 {
  background: var(--terminal-red-dim, rgba(255, 100, 100, 0.2));
  color: var(--terminal-red);
}

.location-list__difficulty--5 {
  background: var(--terminal-magenta-dim, rgba(255, 0, 255, 0.2));
  color: var(--terminal-magenta);
}

.location-list__path-type {
  padding: 0.1em 0.4em;
  background: var(--terminal-bg-secondary);
  border-radius: var(--terminal-radius-sm, 4px);
  font-size: 0.7rem;
}

/* Visited Badge */
.location-list__visited-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--terminal-green);
  flex-shrink: 0;
}

.location-list__visited-badge svg {
  width: 16px;
  height: 16px;
}
/**
 * Location List — Empty State and Responsive
 * ============================================
 * Empty state, compass icon, footer, compact known locations, and responsive.
 */


/* Empty State */
.location-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--terminal-spacing-xl);
  text-align: center;
  color: var(--terminal-text-muted);
}

.location-list__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--terminal-spacing-md);
  opacity: 0.5;
}

/* Styled compass icon for empty state */
.location-list__empty-icon::before {
  content: '';
  width: 40px;
  height: 40px;
  background: var(--terminal-text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z'/%3E%3C/svg%3E");
}

.location-list__empty-text {
  font-size: 0.9rem;
  margin: 0;
  max-width: 200px;
}

/* Footer */
.location-list__footer {
  padding-top: var(--terminal-spacing-sm);
  border-top: 1px dashed var(--terminal-border);
  margin-top: var(--terminal-spacing-md);
  flex-shrink: 0;
}

.location-list__footer:empty {
  display: none;
}

.location-list__hint {
  font-size: 0.75rem;
  color: var(--terminal-text-muted);
  font-style: italic;
}

/* Known Locations Section - more compact */
.location-list__section--known {
  border-top: 1px dashed var(--terminal-border);
  padding-top: var(--terminal-spacing-md);
}

.location-list__section--known .location-list__list {
  max-height: 200px;
  overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .location-list {
    padding: var(--terminal-spacing-sm);
  }

  .location-list__header {
    margin-bottom: var(--terminal-spacing-sm);
  }

  .location-list__item-details {
    padding-left: 0;
  }
}
/**
 * Location List Panel — Import Hub
 * ===================================
 * Travel destinations panel with current location, direction items, and travel controls.
 *
 * Decomposed into focused files under location_list/ for maintainability.



 */
/**
 * Character Ragdoll Styles
 * ========================
 * Styling for the visual character silhouette with drag-and-drop equipment slots.
 *
 * Components:
 * - .character-ragdoll - Main container
 * - .character-silhouette - SVG silhouette
 * - .equipment-slot - Interactive slot regions
 * - .equipped-icon - Icons for equipped items
 */

/* =============================================================================
   RAGDOLL CONTAINER
   ============================================================================= */

.character-ragdoll {
  --ragdoll-bg: var(--panel-bg, var(--surface-0));
  --ragdoll-border: var(--panel-border, var(--border-subtle));
  --ragdoll-slot-idle: rgba(99, 102, 241, 0.1);
  --ragdoll-slot-hover: rgba(99, 102, 241, 0.3);
  --ragdoll-slot-valid: rgba(74, 222, 128, 0.4);
  --ragdoll-slot-invalid: rgba(239, 68, 68, 0.4);
  --ragdoll-slot-equipped: rgba(99, 102, 241, 0.5);
  --ragdoll-slot-pending: rgba(251, 191, 36, 0.4);

  display: flex;
  flex-direction: column;
  background: var(--ragdoll-bg);
  border: 1px solid var(--ragdoll-border);
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
}

.character-ragdoll--compact {
  max-width: 200px;
}

/* =============================================================================
   HEADER
   ============================================================================= */

.character-ragdoll__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ragdoll-border);
  background: var(--surface-1, rgba(0, 0, 0, 0.1));
}

.character-ragdoll__title {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
}

.character-ragdoll__hint {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
}

/* =============================================================================
   BODY / SVG CONTAINER
   ============================================================================= */

.character-ragdoll__body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  min-height: 300px;
}

.character-ragdoll__silhouette {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.character-ragdoll__silhouette svg {
  width: 100%;
  height: auto;
  display: block;
}

/* =============================================================================
   SVG SILHOUETTE STYLING
   ============================================================================= */

.character-silhouette .silhouette-body path,
.character-silhouette .silhouette-body ellipse {
  transition: fill 0.2s ease;
}

/* Slot labels */
.character-silhouette .slot-labels text {
  font-family: var(--font-mono, monospace);
  font-size: 7px;
  fill: var(--text-muted, #888);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* =============================================================================
   EQUIPMENT SLOT REGIONS
   ============================================================================= */

.character-silhouette .equipment-slot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  cursor: pointer;
  transition: fill 0.15s ease, stroke 0.15s ease;
}

/* Hover state */
.character-silhouette .equipment-slot:hover,
.character-silhouette .equipment-slot:focus {
  fill: var(--ragdoll-slot-hover);
  stroke: var(--accent-primary, #6366f1);
  outline: none;
}

/* Focus visible for keyboard navigation */
.character-silhouette .equipment-slot:focus-visible {
  fill: var(--ragdoll-slot-hover);
  stroke: var(--accent-primary, #6366f1);
  stroke-width: 3;
}

/* Equipped state */
.character-silhouette .equipment-slot.slot--equipped {
  fill: var(--ragdoll-slot-equipped);
  stroke: var(--accent-primary, #6366f1);
}

/* Valid drop zone during drag */
.character-silhouette .equipment-slot.slot--valid-drop {
  fill: var(--ragdoll-slot-valid);
  stroke: var(--success, #4ade80);
  stroke-width: 2;
  animation: pulse-valid 1s ease-in-out infinite;
}

/* Invalid drop zone during drag */
.character-silhouette .equipment-slot.slot--invalid-drop {
  fill: var(--ragdoll-slot-invalid);
  stroke: var(--color-error, #cf6068);
  stroke-width: 1;
  opacity: 0.5;
}

/* Drag over state */
.character-silhouette .equipment-slot.slot--drag-over {
  fill: var(--ragdoll-slot-valid);
  stroke: var(--success, #4ade80);
  stroke-width: 3;
}

/* Pending state (waiting for server response) */
.character-silhouette .equipment-slot.slot--pending {
  fill: var(--ragdoll-slot-pending);
  stroke: var(--warning, #fbbf24);
  animation: pulse-pending 0.5s ease-in-out infinite;
}

@keyframes pulse-valid {
  0%, 100% { fill: var(--ragdoll-slot-valid); }
  50% { fill: rgba(74, 222, 128, 0.6); }
}

/* =============================================================================
   EQUIPPED ITEM ICONS
   ============================================================================= */

.character-silhouette .equipped-items {
  pointer-events: none;
}

.character-silhouette .equipped-icon {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  transition: transform 0.2s ease;
}

/* Rarity colors for equipped items */
.character-silhouette .equipped-icon--uncommon rect:first-child {
  fill: var(--rarity-uncommon, #22c55e);
}

.character-silhouette .equipped-icon--rare rect:first-child {
  fill: var(--rarity-rare, #3b82f6);
}

.character-silhouette .equipped-icon--very-rare rect:first-child,
.character-silhouette .equipped-icon--veryrare rect:first-child {
  fill: var(--rarity-very-rare, #a855f7);
}

.character-silhouette .equipped-icon--legendary rect:first-child {
  fill: var(--rarity-legendary, #f59e0b);
}

.character-silhouette .equipped-icon--artifact rect:first-child {
  fill: var(--rarity-artifact, #ef4444);
}

/* =============================================================================
   SLOT INFO TOOLTIP
   ============================================================================= */

.character-ragdoll__slot-info {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-2, rgba(0, 0, 0, 0.8));
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  pointer-events: none;
}

.character-ragdoll__slot-info.visible {
  display: flex;
}

.character-ragdoll__slot-name {
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}

.character-ragdoll__slot-item {
  color: var(--text-muted);
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.character-ragdoll__footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--ragdoll-border);
  background: var(--surface-1, rgba(0, 0, 0, 0.1));
}

.character-ragdoll__stats {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
}

.character-ragdoll__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.character-ragdoll__stat-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.character-ragdoll__stat-value {
  font-size: var(--text-base, 1rem);
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.character-ragdoll__keyboard-hint {
  margin: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-muted);
  text-align: center;
}

.character-ragdoll__keyboard-hint kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: var(--surface-2, rgba(255, 255, 255, 0.1));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs, 0.125rem);
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
}

/* =============================================================================
   DRAG ACTIVE STATE
   ============================================================================= */

.character-ragdoll.ragdoll--drag-active {
  outline: 2px dashed var(--accent-primary, #6366f1);
  outline-offset: -2px;
}

.character-ragdoll.ragdoll--drag-active .character-ragdoll__hint {
  color: var(--accent-primary, #6366f1);
  font-weight: 500;
}

/* =============================================================================
   DRAG GHOST ELEMENT
   ============================================================================= */

.drag-ghost {
  position: fixed;
  z-index: var(--z-sky);
  pointer-events: none;
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(0.95);
  background: var(--surface-2, rgba(30, 30, 46, 0.95));
  border: 1px solid var(--accent-primary, #6366f1);
  border-radius: var(--radius-sm, 0.25rem);
  padding: 0.5rem 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  max-width: 200px;
  font-size: var(--text-sm, 0.875rem);
}

.drag-ghost .inventory__item-actions,
.drag-ghost .es-slot__actions {
  display: none;
}

/* =============================================================================
   RESPONSIVE / COMPACT MODE
   ============================================================================= */

.character-ragdoll--compact .character-ragdoll__header {
  padding: 0.5rem 0.75rem;
}

.character-ragdoll--compact .character-ragdoll__hint {
  display: none;
}

.character-ragdoll--compact .character-ragdoll__body {
  padding: 0.5rem;
  min-height: 200px;
}

.character-ragdoll--compact .character-ragdoll__silhouette {
  max-width: 150px;
}

.character-ragdoll--compact .character-ragdoll__footer {
  padding: 0.5rem 0.75rem;
}

.character-ragdoll--compact .character-ragdoll__keyboard-hint {
  display: none;
}

/* =============================================================================
   TOUCH DEVICE ADJUSTMENTS
   ============================================================================= */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for slots */
  .character-silhouette .equipment-slot {
    stroke-width: 4;
  }

  /* No hover states on touch */
  .character-silhouette .equipment-slot:hover {
    fill: transparent;
    stroke: transparent;
  }

  /* Active state for touch */
  .character-silhouette .equipment-slot:active {
    fill: var(--ragdoll-slot-hover);
    stroke: var(--accent-primary, #6366f1);
  }

  /* Equipped state maintained */
  .character-silhouette .equipment-slot.slot--equipped {
    fill: var(--ragdoll-slot-equipped);
    stroke: var(--accent-primary, #6366f1);
  }

  /* Hide keyboard hint on touch */
  .character-ragdoll__keyboard-hint {
    display: none;
  }

  /* Adjust hint for touch */
  .character-ragdoll__hint::after {
    content: " (long-press to drag)";
  }
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .character-silhouette .equipment-slot,
  .character-silhouette .equipped-icon {
    transition: none;
  }

  .character-silhouette .equipment-slot.slot--valid-drop,
  .character-silhouette .equipment-slot.slot--pending {
    animation: none;
  }
}

/* =============================================================================
   DARK MODE ADJUSTMENTS
   ============================================================================= */

[data-theme="dark"] .character-ragdoll,
.dark .character-ragdoll {
  --ragdoll-bg: var(--surface-0, #1e1e2e);
  --ragdoll-border: var(--border-subtle, #313244);
  --ragdoll-slot-idle: rgba(99, 102, 241, 0.15);
  --ragdoll-slot-hover: rgba(99, 102, 241, 0.35);
}
/**
 * Stat Comparison Panel
 *
 * Before/after stat comparison for equipment changes.
 * Shows current vs. proposed with color-coded differences.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Container
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.stat-comparison__body {
  min-height: 100px;
}

.stat-comparison__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  color: var(--text-muted);
  text-align: center;
}

.stat-comparison__empty .empty-state {
  max-width: 200px;
}

.stat-comparison__empty .empty-state__icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  opacity: 0.5;
}

.stat-comparison__empty .empty-state__text {
  margin: 0 0 var(--spacing-xs);
  font-size: var(--font-size-sm);
}

.stat-comparison__empty .empty-state__hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

.stat-comparison__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.stat-comparison__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.stat-comparison__title svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Grid Layout
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.stat-comparison__header {
  display: grid;
  grid-template-columns: 1fr 70px 70px 60px;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-comparison__col-label {
  text-align: center;
}

.stat-comparison__col-label:first-child {
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stat Rows
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__row {
  display: grid;
  grid-template-columns: 1fr 70px 70px 60px;
  gap: var(--spacing-sm);
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s ease;
}

/* When no proposed column */
.stat-comparison__row:has(.stat-comparison__value--current:last-child) {
  grid-template-columns: 1fr 70px;
}

.stat-comparison__row:hover {
  background: var(--bg-hover);
}

/* Row states */
.stat-comparison__row--increase {
  background: color-mix(in srgb, var(--color-success) 10%, var(--bg-tertiary));
}

.stat-comparison__row--decrease {
  background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-tertiary));
}

/* ─────────────────────────────────────────────────────────────────────────────
   Stat Name
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__stat-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.stat-comparison__stat-icon {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Values
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__value {
  text-align: center;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.stat-comparison__value--current {
  color: var(--text-primary);
}

.stat-comparison__value--proposed {
  font-weight: 600;
}

.stat-comparison__value--diff {
  font-weight: 600;
  font-size: var(--font-size-xs);
}

/* Diff colors */
.stat-comparison__diff--increase {
  color: var(--color-success);
}

.stat-comparison__diff--decrease {
  color: var(--color-danger);
}

/* Animation for value changes */
.stat-comparison__value--animated {
  animation: value-pop 0.3s ease;
}

@keyframes value-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Action Buttons
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--border-color);
}

.stat-comparison__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
}

.stat-comparison__actions .btn svg {
  width: 14px;
  height: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Compact Mode
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison--compact .stat-comparison__header,
.stat-comparison--compact .stat-comparison__row {
  grid-template-columns: 1fr 60px 60px 50px;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
}

.stat-comparison--compact .stat-comparison__stat-name {
  font-size: var(--font-size-xs);
}

.stat-comparison--compact .stat-comparison__value {
  font-size: var(--font-size-xs);
}

.stat-comparison--compact .stat-comparison__stat-icon {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Summary Card (Alternative Layout)
   ───────────────────────────────────────────────────────────────────────────── */

.stat-comparison__summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.stat-comparison__summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs);
  min-width: 60px;
}

.stat-comparison__summary-label {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-comparison__summary-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.stat-comparison__summary-diff {
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.stat-comparison__summary-item--increase .stat-comparison__summary-diff {
  color: var(--color-success);
}

.stat-comparison__summary-item--decrease .stat-comparison__summary-diff {
  color: var(--color-danger);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Adjustments
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .stat-comparison__header,
  .stat-comparison__row {
    grid-template-columns: 1fr 50px 50px 45px;
    gap: var(--spacing-2xs);
  }

  .stat-comparison__stat-icon {
    display: none;
  }

  .stat-comparison__value {
    font-size: var(--font-size-xs);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .stat-comparison__row,
  .stat-comparison__value--animated {
    transition: none;
    animation: none;
  }
}
/**
 * Creation Preview Panel
 *
 * Live character preview during creation showing:
 * - Race/class selection
 * - Ability score summary
 * - Skills list
 * - Equipment preview
 * - Overall summary
 */

/* ─────────────────────────────────────────────────────────────────────────────
   Container
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  min-height: 200px;
}

.creation-preview--compact {
  padding: var(--spacing-sm);
  gap: var(--spacing-sm);
}

.creation-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-color);
}

.creation-preview__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.creation-preview__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Placeholder State
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--text-muted);
}

.creation-preview__placeholder-icon {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}

.creation-preview__placeholder-text {
  font-size: var(--font-size-sm);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Content Sections
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.creation-preview__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.creation-preview__section--hidden {
  display: none;
}

.creation-preview__section-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.creation-preview__section-icon {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Race & Class Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__identity {
  display: flex;
  gap: var(--spacing-md);
}

.creation-preview__identity-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.creation-preview__identity-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.creation-preview__identity-value {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--text-primary);
}

.creation-preview__identity-detail {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* Race icons */
.creation-preview__race-icon,
.creation-preview__class-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--spacing-2xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Ability Scores Grid
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs);
}

.creation-preview__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  text-align: center;
}

.creation-preview__ability-name {
  font-size: var(--font-size-2xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.creation-preview__ability-score {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.creation-preview__ability-modifier {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.creation-preview__ability-modifier--positive {
  color: var(--color-success);
}

.creation-preview__ability-modifier--negative {
  color: var(--color-danger);
}

/* Racial bonus indicator */
.creation-preview__ability--has-bonus .creation-preview__ability-score {
  color: var(--color-accent);
}

.creation-preview__ability-bonus {
  font-size: var(--font-size-2xs);
  color: var(--color-accent);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Skills Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__skills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2xs);
}

.creation-preview__skill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.creation-preview__skill-chip--proficient {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.creation-preview__skill-chip--expertise {
  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
}

.creation-preview__skill-icon {
  width: 12px;
  height: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Equipment Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__equipment {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

.creation-preview__equipment-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-2xs) var(--spacing-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.creation-preview__equipment-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.creation-preview__equipment-name {
  flex: 1;
  color: var(--text-primary);
}

.creation-preview__equipment-qty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Summary Section
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.creation-preview__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.creation-preview__summary-label {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.creation-preview__summary-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Animations
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview__section {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.creation-preview__section--entering {
  animation: creation-preview-enter 0.3s ease forwards;
}

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

.creation-preview__ability,
.creation-preview__skill-chip,
.creation-preview__equipment-item {
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.creation-preview__ability:hover,
.creation-preview__skill-chip:hover,
.creation-preview__equipment-item:hover {
  background: var(--bg-hover);
}

/* Value change highlight */
.creation-preview__ability--changed,
.creation-preview__summary-value--changed {
  animation: value-highlight 0.5s ease;
}

@keyframes value-highlight {
  0%, 100% {
    background: transparent;
  }
  50% {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Compact Mode
   ───────────────────────────────────────────────────────────────────────────── */

.creation-preview--compact .creation-preview__identity {
  flex-direction: column;
  gap: var(--spacing-xs);
}

.creation-preview--compact .creation-preview__abilities {
  grid-template-columns: repeat(6, 1fr);
}

.creation-preview--compact .creation-preview__ability {
  padding: var(--spacing-2xs);
}

.creation-preview--compact .creation-preview__ability-name {
  display: none;
}

.creation-preview--compact .creation-preview__ability-modifier {
  font-size: var(--font-size-xs);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced Motion
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .creation-preview__section,
  .creation-preview__ability,
  .creation-preview__skill-chip,
  .creation-preview__equipment-item {
    transition: none;
  }

  .creation-preview__section--entering,
  .creation-preview__ability--changed,
  .creation-preview__summary-value--changed {
    animation: none;
  }
}
/**
 * Spell Selector — Base Styles
 * ==============================
 * Panel container, header, filters, spell slots, concentration,
 * spell list, spell cards, and cast menu.
 */

/**
 * Spell Selector Panel
 * ====================
 * Displays available spells during character creation for spell-casting classes.
 * Features a searchable grid of spell cards with level filtering, school badges,
 * and selection tracking. Used in the character creation wizard's spell selection step.
 */

/* Container */
.spell-selector {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Header */
.spell-selector__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.spell-selector__icon {
  font-size: 1.2rem;
  line-height: 1;
}

.spell-selector__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Content Area */
.spell-selector__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Empty State */
.spell-selector__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.spell-selector__empty-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.spell-selector__empty-text {
  font-size: 0.9rem;
  margin: 0;
  max-width: 200px;
}

/* Footer */
.spell-selector__footer {
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border-default);
  margin-top: var(--space-4);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.spell-selector__footer:empty {
  display: none;
}

/* ========================================
 * Panel-specific Styles
 * Add custom styles below this line
 * ======================================== */

/* Title Row */
.spell-selector__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* Filters */
.spell-selector__filters {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.spell-selector__search,
.spell-selector__filter {
  flex: 1;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: 0.85rem;
  font-family: 'Fira Code', monospace;
}

.spell-selector__search:focus,
.spell-selector__filter:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

/* Spell Slots Section */
.spell-selector__slots-section {
  margin: var(--space-4) 0;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.spell-selector__section-title {
  margin: 0 0 var(--space-2) 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.spell-slot-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.spell-slot-level {
  min-width: 60px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.spell-slot-pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.spell-slot-pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 8px rgba(198, 120, 221, 0.6),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-slot-pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-slot-count {
  min-width: 40px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* Concentration Banner */
.spell-selector__concentration {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  margin: var(--space-4) 0;
  background: var(--color-accent-purple-bg, rgba(147, 51, 234, 0.1));
  border: 1px solid var(--color-accent-purple-border, rgba(147, 51, 234, 0.3));
  border-radius: var(--radius-sm);
}

.spell-selector__concentration--active {
  display: flex;
}

.spell-selector__concentration-content {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.spell-selector__concentration-icon {
  font-size: 1.1rem;
}

.spell-selector__concentration-label {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.spell-selector__concentration-spell {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-purple);
}

.spell-selector__concentration-end {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-accent-purple-border, rgba(147, 51, 234, 0.5));
  border-radius: var(--radius-sm);
  color: var(--color-accent-purple);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spell-selector__concentration-end:hover {
  background: var(--color-accent-purple-bg, rgba(147, 51, 234, 0.2));
  border-color: var(--color-accent-purple);
}

/* Spell List */
.spell-selector__spell-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.spell-level-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spell-level-title {
  margin: 0;
  padding: var(--space-1) 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border-default);
}

.spell-level-spells {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Spell Card (scoped to spell-selector) */
.spell-selector__card {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.spell-selector__card:hover {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 8px var(--color-accent-primary-glow, rgba(6, 182, 212, 0.2));
}

.spell-selector__card--cantrip {
  border-left: 3px solid var(--color-accent-warning);
}

.spell-selector__card--prepared {
  border-left: 3px solid var(--color-accent-secondary);
  background: var(--color-accent-secondary-bg, rgba(34, 197, 94, 0.05));
}

.spell-selector__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.spell-selector__card-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
}

.spell-selector__card-name:hover {
  color: var(--color-accent-primary);
}

.spell-selector__card-tags {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.spell-selector__card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.spell-selector__card-school {
  padding: 2px var(--space-1);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  text-transform: uppercase;
}

.spell-selector__card-range {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.spell-selector__card-actions {
  display: flex;
  justify-content: flex-end;
}

.spell-selector__card-cast-btn {
  padding: var(--space-1) var(--space-4);
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.spell-selector__card-cast-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--color-accent-primary);
  box-shadow: 0 0 8px var(--color-accent-primary-glow, rgba(6, 182, 212, 0.3));
}

.spell-selector__card-cast-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
  color: var(--color-text-muted);
}

/* Cast Menu */
.spell-cast-menu {
  z-index: var(--z-floating);
  min-width: 200px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px var(--overlay-medium-plus);
  overflow: hidden;
}

.spell-cast-menu__header {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-bottom: 1px solid var(--color-border-default);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.spell-cast-menu__options {
  display: flex;
  flex-direction: column;
}

.spell-cast-menu__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.spell-cast-menu__option:last-child {
  border-bottom: none;
}

.spell-cast-menu__option:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-accent-primary);
}

.spell-cast-menu__option-label {
  font-weight: 600;
}

.spell-cast-menu__option-slots {
  color: var(--color-text-muted);
  font-size: 0.75rem;
}
/**
 * Spell Selector — Details Modal & Loading
 * ==========================================
 * Spell details modal, loading state, error state,
 * footer stats, and responsive adjustments.
 */

/* Spell Details Modal */
.spell-details-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-warning);
  display: flex;
  align-items: center;
  justify-content: center;
}

.spell-details-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-heavy);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.spell-details-modal__content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  padding: var(--space-6);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px var(--overlay-heavy-plus);
  overflow-y: auto;
}

.spell-details-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.spell-details-modal__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

.spell-details-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease;
}

.spell-details-modal__close:hover {
  color: var(--color-accent-error);
}

.spell-details-modal__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.spell-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spell-stat__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-stat__value {
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.spell-details-modal__description {
  margin-bottom: var(--space-4);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.spell-details-modal__higher {
  padding: var(--space-2);
  background: var(--color-accent-primary-bg, rgba(6, 182, 212, 0.1));
  border: 1px solid var(--color-accent-primary-border, rgba(6, 182, 212, 0.3));
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Loading State */
.spell-selector__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.spell-selector__loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spell-selector__loading-text {
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* Error State */
.spell-selector__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
}

.spell-selector__error-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.spell-selector__error-text {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.spell-selector__retry-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.spell-selector__retry-btn:hover {
  background: transparent;
  color: var(--color-accent-primary);
}

/* Footer Stats */
.spell-selector__footer-stats {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.spell-selector__footer-stat {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.spell-selector__footer-stat-label {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.spell-selector__footer-stat-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .spell-selector {
    padding: var(--space-2);
  }

  .spell-selector__header {
    margin-bottom: var(--space-2);
  }
/**
 * Spell Selector — Enhanced Tooltips & Cards
 * ============================================
 * Enhanced spell tooltips and enhanced spell cards.
 */


/* ========================================
 * ENHANCED SPELL TOOLTIPS
 * Quick reference on hover
 * ======================================== */

.spell-tooltip-wrapper {
  pointer-events: none;
  animation: spell-tooltip-fade-in 0.15s ease-out;
}

@keyframes spell-tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.spell-tooltip {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  padding: 0.75rem;
  min-width: 220px;
  max-width: 320px;
  box-shadow: 0 8px 24px var(--overlay-medium-plus);
  font-size: 0.8125rem;
}

.spell-tooltip__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.spell-tooltip__school-icon {
  font-size: 1.25rem;
}

.spell-tooltip__name {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

.spell-tooltip__level {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}

.spell-tooltip__stats {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.spell-tooltip__stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spell-tooltip__stat-icon {
  font-size: 0.875rem;
  width: 1.25rem;
  text-align: center;
}

.spell-tooltip__stat-value {
  color: var(--color-text-primary);
  font-size: 0.8125rem;
}

.spell-tooltip__components {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.spell-tooltip__tags {
  display: flex;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.spell-tooltip__tag {
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.spell-tooltip__tag--conc {
  background: var(--color-accent-purple-bg, rgba(147, 51, 234, 0.2));
  color: var(--color-accent-purple-light);
  border: 1px solid var(--color-accent-purple-border, rgba(147, 51, 234, 0.3));
}

.spell-tooltip__tag--ritual {
  background: var(--color-accent-secondary-bg, rgba(34, 197, 94, 0.2));
  color: var(--color-accent-secondary-light);
  border: 1px solid var(--color-accent-secondary-border, rgba(34, 197, 94, 0.3));
}

/* ========================================
 * ENHANCED SPELL CARDS
 * School icons and better visual hierarchy
 * ======================================== */

.spell-selector__card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.spell-selector__card-school-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spell-tooltip-wrapper {
    animation: none;
  }

  .spell-slot-pip--filled {
    animation: none;
  }
}
/**
 * Spell Selector Panel — Import Hub
 * ====================================
 * Spell selector with details modal and enhanced tooltips.
 *
 * Decomposed into focused files under spell_selector/ for maintainability.



 */
/*
 * Confirm Dialog - Non-blocking confirmation modal
 * =================================================
 * Terminal-themed <dialog> replacement for window.confirm().
 * Uses native <dialog> element with showModal() for built-in
 * focus trapping and backdrop.
 */

/* ========================================
 * DIALOG ELEMENT
 * ======================================== */

.confirm-dialog {
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  padding: 0;
  max-width: 420px;
  width: calc(100% - var(--space-8, 2rem));
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(97, 175, 239, 0.15);
  animation: confirm-dialog-enter 0.15s ease-out;
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  animation: confirm-dialog-backdrop 0.15s ease-out;
}

/* ========================================
 * VARIANT BORDERS
 * ======================================== */

.confirm-dialog--danger {
  border-color: var(--color-danger, #e06c75);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(224, 108, 117, 0.15);
}

.confirm-dialog--warning {
  border-color: var(--color-warning, #e5c07b);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(229, 192, 123, 0.15);
}

/* ========================================
 * CONTENT
 * ======================================== */

.confirm-dialog__content {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

.confirm-dialog__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--text-primary, #e0e0e0);
}

.confirm-dialog__message {
  margin: 0 0 var(--space-5, 1.25rem);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
}

/* ========================================
 * ACTIONS
 * ======================================== */

.confirm-dialog__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
}

.confirm-dialog__btn {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-md, 4px);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.confirm-dialog__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* Cancel button */
.confirm-dialog__btn--cancel {
  background: transparent;
  border-color: var(--border-secondary, #444);
  color: var(--text-secondary, #aaa);
}

.confirm-dialog__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

/* Confirm button (info - default) */
.confirm-dialog__btn--confirm {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
}

.confirm-dialog__btn--confirm:hover {
  filter: brightness(1.1);
}

/* Confirm button (danger) */
.confirm-dialog__btn--danger {
  background: var(--color-danger, #e06c75);
  color: #fff;
}

.confirm-dialog__btn--danger:hover {
  filter: brightness(1.1);
}

/* Confirm button (warning) */
.confirm-dialog__btn--warning {
  background: var(--color-warning, #e5c07b);
  color: #1e1e2e;
}

.confirm-dialog__btn--warning:hover {
  filter: brightness(1.1);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes confirm-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes confirm-dialog-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .confirm-dialog {
    animation: none;
  }
  .confirm-dialog::backdrop {
    animation: none;
  }
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .confirm-dialog {
    max-width: calc(100% - var(--space-4, 1rem));
  }

  .confirm-dialog__actions {
    flex-direction: column-reverse;
  }

  .confirm-dialog__btn {
    width: 100%;
    text-align: center;
  }
}
/*
 * Message Queue Indicator
 * =======================
 * Shows when a player's message is queued in multiplayer
 * (waiting for another player's action to complete).
 */

.message-queue-indicator {
  position: relative;
  margin: 0 16px 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.message-queue-indicator.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.queue-indicator__content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.queue-indicator__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--color-text-secondary, #9ca3af);
  border-radius: 50%;
  animation: queue-spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes queue-spin {
  to {
    transform: rotate(360deg);
  }
}

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

.queue-indicator__status {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  font-family: 'Courier New', monospace;
}

.queue-indicator__reason {
  font-size: 11px;
  color: var(--text-muted, #888);
  font-family: 'Courier New', monospace;
}

.queue-indicator__message {
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 12px;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-indicator__message:empty {
  display: none;
}

.queue-indicator__cancel {
  width: 24px;
  height: 24px;
  padding: 0;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #ef4444;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.queue-indicator__cancel:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  transform: scale(1.1);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .queue-indicator__content {
    flex-wrap: wrap;
  }

  .queue-indicator__message {
    width: 100%;
    max-width: none;
    order: 1;
    margin-top: 8px;
  }
}
/**
 * NPC Quick Reference — Panel and List
 * ======================================
 * Panel container, search, filter tabs, NPC list, and scrollbar.
 */

/*
 * NPC Quick Reference Panel
 * ==========================
 * Left sidebar panel for DMs showing active NPCs in current scene.
 * Compact cards with instant stat/personality access.
 *
 * Design: Color-coded by disposition, expandable details, search/filter
 */

/* ========================================
   Panel Container
   ======================================== */

.npc-quick-reference {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-panel-bg, #1a1a2e);
  color: var(--color-text, #e0e0e0);
  overflow: hidden;
}

/* ========================================
   Header
   ======================================== */

.npc-qr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #333);
  background: rgba(212, 175, 55, 0.08);
}

.npc-qr-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.npc-qr-icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-gold, #d4af37);
}

.npc-qr-icon .svg-icon,
.npc-qr-icon svg {
  width: 100%;
  height: 100%;
}

.npc-qr-title h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-bright, #fff);
}

.npc-qr-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  background: var(--color-accent, #4a9eff);
  border-radius: 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
}

/* ========================================
   Filter Tabs
   ======================================== */

.npc-qr-filters {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #333);
  background: var(--color-panel-bg-light, #1e1e35);
}

.npc-filter-tab {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: transparent;
  border: 1px solid var(--color-border, #333);
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.npc-filter-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-bright, #555);
  color: var(--color-text, #e0e0e0);
}

.npc-filter-tab.active {
  background: var(--color-accent, #4a9eff);
  border-color: var(--color-accent, #4a9eff);
  color: #fff;
}

/* ========================================
   Search Bar
   ======================================== */

.npc-qr-search {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #333);
}

.npc-qr-search-input {
  width: 100%;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  background: var(--color-input-bg, #0f0f1e);
  border: 1px solid var(--color-border, #333);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text, #e0e0e0);
  transition: border-color 0.15s ease;
}

.npc-qr-search-input:focus {
  outline: none;
  border-color: var(--color-accent, #4a9eff);
}

.npc-qr-search-input::placeholder {
  color: var(--color-text-muted, #888);
}

.npc-qr-search-icon {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted, #888);
  pointer-events: none;
}

/* ========================================
   NPC List
   ======================================== */

.npc-qr-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Custom scrollbar */
.npc-qr-list::-webkit-scrollbar {
  width: 0.5rem;
}

.npc-qr-list::-webkit-scrollbar-track {
  background: var(--color-panel-bg, #1a1a2e);
}

.npc-qr-list::-webkit-scrollbar-thumb {
  background: var(--color-border, #333);
  border-radius: 0.25rem;
}

.npc-qr-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-bright, #555);
}

/**
 * NPC Quick Reference — NPC Cards
 * ==================================
 * Card layout, disposition coding, header, stats, personality, actions, expanded content.
 */

/* ========================================
   NPC Cards
   ======================================== */

.npc-card {
  position: relative;
  margin-bottom: 0.5rem;
  padding: 0.75rem;
  background: var(--color-panel-bg-light, #1e1e35);
  border: 1px solid var(--color-border, #333);
  border-left: 3px solid var(--npc-color, var(--color-border));
  border-radius: 0.5rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.npc-card:hover {
  border-color: var(--color-border-bright, #555);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.npc-card.expanded {
  border-left-color: var(--color-accent, #4a9eff);
}

/* Disposition color coding */
.npc-disposition-friendly,
.npc-disposition-ally {
  --npc-color: var(--color-success, #22c55e);
}

.npc-disposition-neutral {
  --npc-color: var(--color-warning, #f59e0b);
}

.npc-disposition-hostile,
.npc-disposition-enemy {
  --npc-color: var(--color-danger, #ef4444);
}

/* Card Header */
.npc-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.npc-card-title {
  flex: 1;
  min-width: 0;
}

.npc-name {
  margin: 0 0 0.125rem 0;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-bright, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.npc-role {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

.npc-expand-btn {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  color: var(--color-text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.npc-expand-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text, #e0e0e0);
}

.npc-expand-btn.expanded {
  transform: rotate(180deg);
  color: var(--color-accent, #4a9eff);
}

/* Quick Stats */
.npc-card-quick-stats {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.25rem;
}

.npc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.npc-stat-label {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
}

.npc-stat-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-bright, #fff);
  font-family: 'Courier New', monospace;
}

/* Personality Trait */
.npc-card-personality {
  margin-bottom: 0.5rem;
}

.npc-trait {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  background: rgba(212, 175, 55, 0.05);
  border-radius: 0.25rem;
}

.npc-trait-icon {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.125rem;
  color: var(--color-gold, #d4af37);
}

.npc-trait-text {
  flex: 1;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text, #e0e0e0);
}

/* Card Actions */
.npc-card-actions {
  display: flex;
  gap: 0.375rem;
}

.npc-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: var(--color-button-bg, #2a2a45);
  border: 1px solid var(--color-border, #333);
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text, #e0e0e0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.npc-action-btn:hover {
  background: var(--color-button-bg-hover, #35355a);
  border-color: var(--color-border-bright, #555);
  color: var(--color-text-bright, #fff);
}

.npc-action-btn .svg-icon,
.npc-action-btn svg {
  width: 0.875rem;
  height: 0.875rem;
}

.npc-speak-btn {
  border-color: var(--color-gold, #d4af37);
}

.npc-speak-btn:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--color-gold, #d4af37);
  color: var(--color-gold, #d4af37);
}

.npc-info-btn {
  flex: 0 0 auto;
  padding: 0.375rem;
}

/* Expanded Content */
.npc-card-expanded {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #333);
}

.npc-expanded-section {
  margin-bottom: 0.75rem;
}

.npc-expanded-section:last-child {
  margin-bottom: 0;
}

.npc-expanded-title {
  margin: 0 0 0.375rem 0;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #888);
}

.npc-voice-notes,
.npc-dm-notes {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text, #e0e0e0);
}

.npc-stat-block {
  font-size: 0.75rem;
  line-height: 1.5;
}

.npc-stat-block .stat-line {
  margin-bottom: 0.25rem;
  color: var(--color-text, #e0e0e0);
}

.npc-stat-block .stat-line strong {
  color: var(--color-text-bright, #fff);
}

.npc-stat-block .abilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.npc-stat-block .abilities span {
  font-size: 0.6875rem;
}
/**
 * NPC Quick Reference — States and Loading
 * ==========================================
 * Empty state, error state, loading spinners, and stat block display.
 */


/* ========================================
   Empty State
   ======================================== */

.npc-qr-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
}

.npc-qr-empty-icon {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: var(--color-text-muted, #888);
  opacity: 0.5;
}

.npc-qr-empty-text {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted, #888);
}

.npc-qr-empty-hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  line-height: 1.5;
}

/* ========================================
   Loading State
   ======================================== */

.npc-qr-loading {
  padding: 1rem;
}

.panel-loading-skeleton {
  padding: 1rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

/* ========================================
   Flash Messages
   ======================================== */

.npc-card-flash {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  pointer-events: none;
  animation: flash-fade-in-out 2s ease;
  z-index: var(--z-sticky);
}

.npc-card-flash-success {
  background: var(--color-success, #22c55e);
  color: #fff;
}

.npc-card-flash-error {
  background: var(--color-danger, #ef4444);
  color: #fff;
}

@keyframes flash-fade-in-out {
  0%, 100% {
    opacity: 0;
    transform: translateY(-0.25rem);
  }
  10%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================
   Error State
   ======================================== */

.npc-qr-error {
  padding: 1rem;
  text-align: center;
  color: var(--color-danger, #ef4444);
  font-size: 0.8125rem;
}

/* ========================================
   Responsive Adjustments
   ======================================== */

@media (max-width: 768px) {
  .npc-qr-filters {
    padding: 0.375rem 0.5rem;
  }

  .npc-filter-tab {
    font-size: 0.6875rem;
    padding: 0.25rem 0.375rem;
  }

  .npc-card {
    padding: 0.5rem;
  }

  .npc-card-quick-stats {
    gap: 0.5rem;
  }
}
/**
 * NPC Quick Reference Panel — Import Hub
 * =========================================
 * Panel for quick NPC lookup with cards, stats, and disposition coding.
 *
 * Decomposed into focused files under npc_quick_reference/ for maintainability.



 */
/**
 * Combat Action Dashboard
 * =======================
 * Phase 1: P0-2 - Right sidebar combat action panel
 *
 * Reduces combat turn time from 2+ minutes to <45 seconds by displaying:
 * - Action economy (Action, Bonus, Reaction, Movement)
 * - Spell slot gems with visual status
 * - Contextually filtered available actions
 * - Prominent End Turn button
 */

/* ========================================
 * Base Layout
 * ======================================== */

.combat-action-dashboard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
  overflow: hidden;
}

.combat-action-dashboard__header {
  padding: var(--space-3) var(--panel-padding);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.combat-action-dashboard__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.combat-action-dashboard__content {
  flex: 1;
  padding: var(--panel-padding);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: var(--section-spacing);
}

/* ========================================
 * Action Economy Display
 * ======================================== */

.action-economy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.action-economy__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-economy__slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.action-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  position: relative;
}

.action-slot.available {
  border-color: var(--color-accent-success);
  background: color-mix(in srgb, var(--color-accent-success) 8%, var(--color-bg-secondary));
  overflow: hidden;
}

/* Phase 4 P2-18: Action token shimmer effect */
.action-slot.available::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: actionShimmer 3s ease-in-out infinite;
}

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

.action-slot.used {
  border-color: var(--color-border-subtle);
  opacity: 0.5;
}

.action-slot__icon {
  font-size: var(--font-size-2xl);
  line-height: 1;
}

.action-slot__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
}

.action-slot.available .action-slot__label {
  color: var(--color-accent-success);
}

/* Movement bar */
.movement-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

.movement-display__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.movement-bar {
  position: relative;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.movement-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--color-accent-primary),
    color-mix(in srgb, var(--color-accent-primary) 85%, white)
  );
  transition: width var(--transition-normal);
  position: relative;
}

.movement-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.movement-text {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  text-align: center;
  margin-top: var(--space-1);
}

/* ========================================
 * Spell Slot Tracker
 * ======================================== */

.spell-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.spell-slots__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.spell-level-track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.spell-level-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  min-width: 50px;
}

.spell-slots {
  display: flex;
  gap: var(--space-1);
  flex: 1;
}

.spell-gem {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.spell-gem.available {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 8px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-gem.used {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-count {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  min-width: 30px;
  text-align: right;
}

.no-spell-slots {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * Available Actions List
 * ======================================== */

.available-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.available-actions__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.combat-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  min-height: 44px;
  text-align: left;
}

.combat-action-btn:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.combat-action-btn:active:not(:disabled) {
  transform: translateY(0);
}

.combat-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.combat-action-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.action-icon {
  font-size: var(--font-size-xl);
  line-height: 1;
  flex-shrink: 0;
}

.action-label {
  flex: 1;
  line-height: 1.3;
}

.action-cost {
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Action type specific styling */
.action-attack {
  border-left: 3px solid var(--color-accent-error);
}

.action-spell {
  border-left: 3px solid var(--color-accent-purple);
}

.action-bonus {
  border-left: 3px solid var(--color-accent-warning);
}

.no-actions {
  padding: var(--space-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ========================================
 * End Turn Button
 * ======================================== */

.combat-action-dashboard__footer {
  padding: var(--panel-padding);
  border-top: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

.end-turn-btn {
  width: 100%;
  padding: var(--space-4);
  background: var(--color-accent-error);
  border: 2px solid var(--color-accent-error);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-height: 48px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.end-turn-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-error) 85%, white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.end-turn-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.end-turn-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.end-turn-btn:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 3px;
}

/* ========================================
 * Mobile Responsive
 * ======================================== */

@media (max-width: 768px) {
  .action-economy__slots {
    grid-template-columns: 1fr 1fr;
  }

  .combat-action-btn {
    min-height: 48px;
  }

  .end-turn-btn {
    min-height: 52px;
    font-size: var(--font-size-xl);
  }
}

/* ========================================
 * Reduced Motion Support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .spell-gem.available {
    animation: none;
  }

  .combat-action-btn:hover,
  .end-turn-btn:hover {
    transform: none;
  }

  .movement-fill {
    transition: none;
  }
}
/**
 * Token Spawner — Base Styles
 * =============================
 * Base panel, entity cards, and selection controls.
 */

/* Token Spawner Panel Styles */

.token-spawner-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-panel, #1a1a2e);
  color: var(--color-text-primary, #eee);
}

.token-spawner-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-panel-header, #252540);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.spawner-icon {
  color: var(--color-accent, #9b59b6);
}

/* Search Input */
.token-spawner-search {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-search-input {
  width: 100%;
  padding: 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
}

.token-search-input:focus {
  outline: none;
  border-color: var(--color-accent, #9b59b6);
}

.token-search-input::placeholder {
  color: var(--color-text-muted, #888);
}

/* Size Selector */
.token-spawner-size-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.size-label {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #aaa);
}

.size-select {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
  font-size: 0.875rem;
}

.size-select:focus {
  outline: none;
  border-color: var(--color-accent, #9b59b6);
}

/* Tab Navigation */
.token-spawner-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--color-bg-panel-header, #252540);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-secondary, #aaa);
  font-size: 0.75rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.token-tab:hover {
  background: var(--color-bg-hover, #3a3a5a);
  color: var(--color-text-primary, #eee);
}

.token-tab.active {
  background: var(--color-accent-dark, #2d1f4e);
  color: var(--color-accent, #9b59b6);
}

.token-tab svg {
  width: 14px;
  height: 14px;
}

/* Tab Content */
.token-spawner-content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.token-tab-panel {
  display: none;
}

.token-tab-panel.active {
  display: block;
}

/* Token Grid */
.token-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.5rem;
}

/* Token Card */
.token-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--color-bg-card, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 6px;
  cursor: grab;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.token-card:hover {
  background: var(--color-bg-hover, #3a3a5a);
  border-color: var(--color-accent, #9b59b6);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.token-card:active {
  cursor: grabbing;
}

.token-card--dragging {
  opacity: 0.5;
  transform: scale(0.95);
}

.token-card-preview {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.token-symbol {
  color: white;
  font-weight: bold;
  font-size: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.token-card-name {
  font-size: 0.625rem;
  color: var(--color-text-secondary, #aaa);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Custom Token Form */
.custom-token-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.custom-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.custom-form-group label {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #aaa);
}

.custom-token-name,
.custom-token-symbol {
  padding: 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
}

.custom-token-symbol {
  width: 50px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: bold;
}

.custom-token-color {
  width: 50px;
  height: 32px;
  padding: 2px;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  cursor: pointer;
}

.create-custom-btn {
  padding: 0.5rem 1rem;
  background: var(--color-accent, #9b59b6);
  border: none;
  border-radius: 4px;
  color: white;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.create-custom-btn:hover {
  background: var(--color-accent-light, #b775d4);
}

.custom-tokens-grid {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #3a3a5a);
}

.empty-custom-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
  grid-column: 1 / -1;
}

/* Instructions */
.token-spawner-instructions {
  padding: 0.5rem 1rem;
  background: var(--color-bg-panel-header, #252540);
  border-top: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner-instructions p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.token-spawner-instructions svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent, #9b59b6);
}

/* VTT Canvas Drop Target State */
.vtt-canvas--drop-target {
  outline: 2px dashed var(--color-accent, #9b59b6);
  outline-offset: -2px;
}

/* Token Drop Preview */
.token-drop-preview {
  pointer-events: none;
  animation: drop-preview-pulse 1s ease-in-out infinite;
}

@keyframes drop-preview-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
/**
 * Token Spawner — Drawer & Batch Modes
 * ======================================
 * Bottom drawer mode and batch spawn mode.
 */

/* ========================================================================== */
/* Bottom Drawer Mode */
/* ========================================================================== */

.token-spawner--drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--color-bg-panel, #1a1a2e);
  border-top: 2px solid var(--color-accent, #9b59b6);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
  max-height: 400px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, max-height 0.3s ease;
  transform: translateY(calc(100% - 48px)); /* Show only handle when closed */
}

.token-spawner--drawer.token-spawner--open {
  transform: translateY(0); /* Fully visible when open */
}

/* Drawer Handle (Always Visible) */
.token-spawner__drawer-handle {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: var(--color-bg-panel-header, #252540);
  border-bottom: 1px solid var(--color-border, #3a3a5a);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.token-spawner__drawer-handle:hover {
  background: var(--color-bg-hover, #3a3a5a);
}

.token-spawner__drawer-icon {
  font-size: 0.875rem;
  color: var(--color-accent, #9b59b6);
  transition: transform 0.3s ease;
}

.token-spawner--open .token-spawner__drawer-icon {
  transform: rotate(180deg);
}

.token-spawner__drawer-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #eee);
}

.token-spawner__drawer-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
}

.token-spawner--open .token-spawner__drawer-hint {
  display: none;
}

/* Drawer Content (Hidden When Collapsed) */
.token-spawner--drawer .token-spawner__header {
  flex-shrink: 0;
}

.token-spawner--drawer .token-spawner__search,
.token-spawner--drawer .token-spawner__tabs,
.token-spawner--drawer .token-spawner__list-container,
.token-spawner--drawer .token-spawner__selection,
.token-spawner--drawer .token-spawner__quick-actions,
.token-spawner--drawer .token-spawner__help {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.token-spawner--drawer.token-spawner--open .token-spawner__search,
.token-spawner--drawer.token-spawner--open .token-spawner__tabs,
.token-spawner--drawer.token-spawner--open .token-spawner__list-container,
.token-spawner--drawer.token-spawner--open .token-spawner__selection,
.token-spawner--drawer.token-spawner--open .token-spawner__quick-actions,
.token-spawner--drawer.token-spawner--open .token-spawner__help {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================== */
/* Batch Spawn Mode */
/* ========================================================================== */

/* Entity Item Batch Actions */
.entity-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--color-bg-card, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.entity-item:hover {
  background: var(--color-bg-hover, #3a3a5a);
  border-color: var(--color-accent, #9b59b6);
}

.entity-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.entity-item__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.entity-item__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary, #eee);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entity-item__subtitle {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.entity-item__badge {
  flex-shrink: 0;
  padding: 0.125rem 0.375rem;
  background: var(--color-accent-dark, #2d1f4e);
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-accent, #9b59b6);
}

.entity-item__batch-actions {
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.entity-item:hover .entity-item__batch-actions {
  opacity: 1;
}

.entity-batch-btn {
  padding: 0.25rem 0.5rem;
  background: var(--color-accent, #9b59b6);
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 0.625rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.entity-batch-btn:hover {
  background: var(--color-accent-light, #b775d4);
  transform: scale(1.1);
}

.entity-batch-btn:active {
  transform: scale(0.95);
}

/* Batch Spawn Toast Notification */
.batch-spawn-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-ceiling);
  padding: 1rem 1.5rem;
  background: var(--color-bg-panel, #1a1a2e);
  border: 2px solid var(--color-accent, #9b59b6);
  border-radius: 8px;
  color: var(--color-text-primary, #eee);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: none;
  animation: toast-slide-in 0.3s ease;
}

.batch-spawn-toast--success {
  border-color: #4CAF50;
  background: rgba(76, 175, 80, 0.1);
}

.batch-spawn-toast--info {
  border-color: var(--color-accent, #9b59b6);
}

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

/* VTT Canvas in Batch Spawn Mode */
.vtt-canvas--batch-spawn-active {
  cursor: crosshair;
}

.vtt-canvas--batch-spawn-active * {
  cursor: crosshair;
}

/* Batch Spawn Markers */
.batch-spawn-marker {
  pointer-events: none;
  animation: batch-marker-appear 0.3s ease;
}

@keyframes batch-marker-appear {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/**
 * Token Spawner — Monster Filter & Preview
 * ==========================================
 * Monster filter bar, stat preview, and CR difficulty badges.
 */

/* Monster Filter Bar */
/* ========================================================================== */

.token-spawner__filters {
  display: flex;
  gap: 0.375rem;
  padding: 0.5rem;
  border-bottom: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner__filter-select {
  flex: 1;
  padding: 0.375rem 0.5rem;
  background: var(--color-bg-input, #252540);
  border: 1px solid var(--color-border, #3a3a5a);
  border-radius: 4px;
  color: var(--color-text-primary, #eee);
  font-family: inherit;
  font-size: 0.75rem;
}

.token-spawner__filter-select:focus {
  outline: none;
  border-color: var(--color-accent, #9b59b6);
}

/* Drawer filter visibility transitions */
.token-spawner--drawer .token-spawner__filters {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.token-spawner--drawer.token-spawner--open .token-spawner__filters {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================== */
/* Monster Stat Preview */
/* ========================================================================== */

.token-spawner__stat-preview {
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid var(--color-border, #3a3a5a);
}

.token-spawner__stat-loading,
.token-spawner__stat-error {
  display: block;
  padding: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.stat-block {
  padding: 0.5rem;
  font-size: 0.75rem;
}

.stat-block__name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-accent, #9b59b6);
  margin-bottom: 0.125rem;
}

.stat-block__meta {
  font-size: 0.6875rem;
  color: var(--color-text-muted, #888);
  font-style: italic;
  text-transform: capitalize;
}

.stat-block__divider {
  height: 1px;
  background: var(--color-border, #3a3a5a);
  margin: 0.375rem 0;
}

.stat-block__combat {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.stat-block__combat span {
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #aaa);
}

.stat-block__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.25rem;
  text-align: center;
}

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

.stat-block__ability-label {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-accent, #9b59b6);
}

.stat-block__ability-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-primary, #eee);
}

.stat-block__ability-mod {
  font-size: 0.5625rem;
  color: var(--color-text-muted, #888);
}

.stat-block__actions-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-accent, #9b59b6);
  margin-bottom: 0.25rem;
}

.stat-block__action {
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #aaa);
  margin-bottom: 0.125rem;
}

/* Drawer stat preview visibility */
.token-spawner--drawer .token-spawner__stat-preview {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.token-spawner--drawer.token-spawner--open .token-spawner__stat-preview {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================================================== */
/* CR Difficulty Badges */
/* ========================================================================== */

.entity-item__badge--cr-low {
  background: rgba(76, 175, 80, 0.2);
  color: #4CAF50;
}

.entity-item__badge--cr-medium {
  background: rgba(255, 193, 7, 0.2);
  color: #FFC107;
}

.entity-item__badge--cr-high {
  background: rgba(255, 152, 0, 0.2);
  color: #FF9800;
}

.entity-item__badge--cr-deadly {
  background: rgba(244, 67, 54, 0.2);
  color: #F44336;
}
/**
 * Token Spawner Panel — Import Hub
 * ===================================
 * Token spawner with drawer modes and monster filter.
 *
 * Decomposed into focused files under token_spawner/ for maintainability.



 */
/**
 * NPC Portrait Panel
 * ==================
 * Player-facing panel showing the current speaking NPC during dialogue.
 * Features animated portrait frame, disposition indicators, and personality hints.
 */

/* ========================================
   Panel Container
   ======================================== */

.npc-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-md, 12px);
  background: var(--surface-1, #1a1a2e);
  color: var(--text-1, #e0e0e0);
  min-height: 200px;
}

/* ========================================
   Placeholder State
   ======================================== */

.npc-portrait__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl, 24px);
  text-align: center;
  opacity: 0.5;
}

.npc-portrait__placeholder-icon {
  color: var(--text-3, #666);
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__placeholder-text {
  color: var(--text-3, #666);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0;
}

/* ========================================
   Active NPC Display
   ======================================== */

.npc-portrait__active {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  animation: npc-portrait-fadeIn 0.3s ease-out;
}

@keyframes npc-portrait-fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ========================================
   Portrait Frame
   ======================================== */

.npc-portrait__frame {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: var(--space-md, 12px);
}

.npc-portrait__glow {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  opacity: 0.4;
  transition: background 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease;
}

.npc-portrait__glow--friendly {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
}

.npc-portrait__glow--neutral {
  box-shadow: 0 0 20px rgba(148, 163, 184, 0.3);
  background: radial-gradient(circle, rgba(148, 163, 184, 0.1) 0%, transparent 70%);
}

.npc-portrait__glow--hostile {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  background: radial-gradient(circle, rgba(239, 68, 68, 0.15) 0%, transparent 70%);
}

.npc-portrait__frame--speaking .npc-portrait__glow {
  opacity: 0.7;
  animation: npc-glow-pulse 1s ease-in-out infinite;
}

@keyframes npc-glow-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

.npc-portrait__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #2a2a3e);
  border: 2px solid var(--border-1, #444);
  border-radius: 50%;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.npc-portrait__frame--speaking .npc-portrait__avatar {
  border-color: var(--color-gold, #d4af37);
}

.npc-portrait__avatar-icon {
  color: var(--text-2, #a0a0a0);
  opacity: 0.7;
}

.npc-portrait__avatar-icon svg {
  width: 60px;
  height: 60px;
}

/* Speaking Indicator */
.npc-portrait__speaking {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  padding: 3px 8px;
  background: var(--surface-2, #2a2a3e);
  border-radius: 10px;
  border: 1px solid var(--color-gold, #d4af37);
}

.npc-portrait__speaking-dot {
  width: 6px;
  height: 6px;
  background: var(--color-gold, #d4af37);
  border-radius: 50%;
  animation: speaking-bounce 1.2s ease-in-out infinite;
}

.npc-portrait__speaking-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.npc-portrait__speaking-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes speaking-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ========================================
   NPC Info
   ======================================== */

.npc-portrait__info {
  text-align: center;
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-bright, #fff);
  margin-bottom: var(--space-2xs, 2px);
}

.npc-portrait__role {
  font-size: 0.8rem;
  color: var(--text-2, #a0a0a0);
  margin-bottom: var(--space-xs, 4px);
}

.npc-portrait__disposition {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 2px);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.npc-portrait__disposition-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.npc-portrait__disposition--friendly {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.npc-portrait__disposition--friendly .npc-portrait__disposition-indicator {
  background: #22c55e;
}

.npc-portrait__disposition--neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.npc-portrait__disposition--neutral .npc-portrait__disposition-indicator {
  background: #94a3b8;
}

.npc-portrait__disposition--hostile {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.npc-portrait__disposition--hostile .npc-portrait__disposition-indicator {
  background: #ef4444;
}

/* ========================================
   Personality Section
   ======================================== */

.npc-portrait__personality {
  width: 100%;
  padding: var(--space-sm, 8px);
  background: var(--surface-2, #2a2a3e);
  border-radius: 6px;
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__personality-label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 2px);
  font-size: 0.7rem;
  color: var(--text-3, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2xs, 2px);
}

.npc-portrait__personality-text {
  font-size: 0.8rem;
  color: var(--text-2, #a0a0a0);
  font-style: italic;
  line-height: 1.4;
}

/* ========================================
   Quick Stats
   ======================================== */

.npc-portrait__stats {
  width: 100%;
  margin-bottom: var(--space-sm, 8px);
}

.npc-portrait__stats-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  background: var(--surface-2, #2a2a3e);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-2, #a0a0a0);
  cursor: pointer;
  list-style: none;
}

.npc-portrait__stats-toggle::-webkit-details-marker {
  display: none;
}

.npc-portrait__stats-toggle svg {
  transition: transform 0.2s ease;
}

.npc-portrait__stats[open] .npc-portrait__stats-toggle svg {
  transform: rotate(180deg);
}

.npc-portrait__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs, 4px);
  padding: var(--space-sm, 8px);
  background: var(--surface-1, #1a1a2e);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 0 0 4px 4px;
}

.npc-portrait__stat {
  text-align: center;
}

.npc-portrait__stat-label {
  display: block;
  font-size: 0.65rem;
  color: var(--text-3, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.npc-portrait__stat-value {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-1, #e0e0e0);
}

/* ========================================
   Actions
   ======================================== */

.npc-portrait__actions {
  width: 100%;
  display: flex;
  justify-content: center;
}

.npc-portrait__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 2px);
  padding: var(--space-xs, 4px) var(--space-sm, 8px);
  background: var(--surface-2, #2a2a3e);
  border: 1px solid var(--border-1, #444);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-2, #a0a0a0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.npc-portrait__action:hover {
  background: var(--surface-3, #3a3a4e);
  color: var(--text-1, #e0e0e0);
  border-color: var(--color-gold, #d4af37);
}

.npc-portrait__action svg {
  opacity: 0.7;
}

.npc-portrait__action:hover svg {
  opacity: 1;
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .npc-portrait__active {
    animation: none;
  }

  .npc-portrait__frame--speaking .npc-portrait__glow {
    animation: none;
  }

  .npc-portrait__speaking-dot {
    animation: none;
    opacity: 1;
  }
}
/**
 * Party Wizard Modal — Base Flow
 * ================================
 * Dialog base, content wrapper, steps, header, choose options,
 * form elements, play mode selection, actions, error, and loading states.
 */

/*
 * Party Wizard Modal - Create/Join Party Flow
 * ============================================
 * Step-through wizard for party formation.
 * Uses native <dialog> with terminal theme.
 */

/* ========================================
 * DIALOG BASE
 * ======================================== */

.party-wizard-modal {
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  padding: 0;
  max-width: 480px;
  width: calc(100% - var(--space-8, 2rem));
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  animation: party-wizard-enter 0.2s ease-out;
  overflow: hidden;
}

.party-wizard-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  animation: party-wizard-backdrop 0.2s ease-out;
}

.party-wizard-modal[open] {
  display: flex;
}

/* ========================================
 * CONTENT WRAPPER
 * ======================================== */

.party-wizard-modal__content {
  position: relative;
  width: 100%;
  min-height: 320px;
}

.party-wizard-modal__close {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.party-wizard-modal__close:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__close svg {
  width: 16px;
  height: 16px;
}

/* ========================================
 * STEP CONTAINERS
 * ======================================== */

.party-wizard-modal__step {
  padding: var(--space-6, 1.5rem);
  animation: party-wizard-step-in 0.2s ease-out;
}

/* ========================================
 * HEADER
 * ======================================== */

.party-wizard-modal__header {
  text-align: center;
  margin-bottom: var(--space-6, 1.5rem);
  position: relative;
}

.party-wizard-modal__back {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.party-wizard-modal__back:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
}

/* ========================================
 * CHOOSE OPTIONS (Step 1)
 * ======================================== */

.party-wizard-modal__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.party-wizard-modal__option {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.party-wizard-modal__option:hover {
  background: rgba(97, 175, 239, 0.1);
  border-color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.party-wizard-modal__option-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.15);
  border-radius: var(--radius-md, 6px);
  color: var(--color-accent-primary, #61afef);
  flex-shrink: 0;
}

.party-wizard-modal__option-icon svg {
  width: 24px;
  height: 24px;
}

.party-wizard-modal__option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.party-wizard-modal__option-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__option-desc {
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
}

.party-wizard-modal__option-arrow {
  font-size: 1.25rem;
  color: var(--text-muted, #888);
  transition: transform 0.15s ease;
}

.party-wizard-modal__option:hover .party-wizard-modal__option-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * FORM ELEMENTS
 * ======================================== */

.party-wizard-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5, 1.25rem);
}

.party-wizard-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.party-wizard-modal__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-wizard-modal__input {
  padding: var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--text-primary, #e0e0e0);
  font-size: 1rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.party-wizard-modal__input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.party-wizard-modal__input::placeholder {
  color: var(--text-muted, #888);
}

.party-wizard-modal__input--code {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 1.125rem;
  text-align: center;
}

.party-wizard-modal__hint {
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
  margin: 0;
}

/* ========================================
 * PLAY MODE SELECTION
 * ======================================== */

.party-wizard-modal__play-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 0.75rem);
}

.party-wizard-modal__play-mode {
  cursor: pointer;
}

.party-wizard-modal__play-mode input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.party-wizard-modal__play-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem) var(--space-2, 0.5rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.party-wizard-modal__play-mode:hover .party-wizard-modal__play-mode-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-muted, #888);
}

.party-wizard-modal__play-mode input:checked + .party-wizard-modal__play-mode-card {
  background: rgba(97, 175, 239, 0.15);
  border-color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__play-mode input:focus-visible + .party-wizard-modal__play-mode-card {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.party-wizard-modal__play-mode-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #888);
}

.party-wizard-modal__play-mode input:checked + .party-wizard-modal__play-mode-card .party-wizard-modal__play-mode-icon {
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__play-mode-icon svg {
  width: 20px;
  height: 20px;
}

.party-wizard-modal__play-mode-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__play-mode-desc {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  text-align: center;
}

/* ========================================
 * ACTIONS
 * ======================================== */

.party-wizard-modal__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
  margin-top: var(--space-2, 0.5rem);
}

.party-wizard-modal__btn {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
}

.party-wizard-modal__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.party-wizard-modal__btn--cancel {
  background: transparent;
  border-color: var(--border-secondary, #444);
  color: var(--text-secondary, #aaa);
}

.party-wizard-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__btn--primary {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
}

.party-wizard-modal__btn--primary:hover {
  filter: brightness(1.1);
}

.party-wizard-modal__btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ========================================
 * ERROR STATE
 * ======================================== */

.party-wizard-modal__error {
  padding: var(--space-3, 0.75rem);
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid var(--color-danger, #e06c75);
  border-radius: var(--radius-md, 6px);
  color: var(--color-danger, #e06c75);
  font-size: 0.875rem;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.party-wizard-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  background: var(--color-bg-primary, #1e1e2e);
}

.party-wizard-modal__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary, #444);
  border-top-color: var(--color-accent-primary, #61afef);
  border-radius: 50%;
  animation: party-wizard-spin 0.8s linear infinite;
}

.party-wizard-modal__loading-text {
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  margin: 0;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes party-wizard-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes party-wizard-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes party-wizard-step-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes party-wizard-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .party-wizard-modal,
  .party-wizard-modal::backdrop,
  .party-wizard-modal__step,
  .party-wizard-modal__spinner {
    animation: none;
  }
/**
 * Party Wizard Modal — Animations & Waiting Room
 * =================================================
 * Animations, waiting room (step 4), and responsive adjustments.
 */


/* ========================================
 * WAITING ROOM (Step 4)
 * ======================================== */

.party-wizard-modal__invite-section {
  text-align: center;
  margin-bottom: var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem);
  background: rgba(97, 175, 239, 0.1);
  border-radius: var(--radius-md, 6px);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

.party-wizard-modal__invite-label {
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
  margin: 0 0 var(--space-2, 0.5rem);
}

.party-wizard-modal__invite-code-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.party-wizard-modal__invite-code-text {
  font-size: 1.25rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-accent-primary, #61afef);
  letter-spacing: 0.05em;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm, 4px);
}

.party-wizard-modal__copy-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.party-wizard-modal__copy-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__copy-btn svg {
  width: 18px;
  height: 18px;
}

.party-wizard-modal__members-section {
  margin-bottom: var(--space-4, 1rem);
}

.party-wizard-modal__section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.party-wizard-modal__members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  max-height: 200px;
  overflow-y: auto;
  padding-right: var(--space-2, 0.5rem);
}

.party-wizard-modal__member {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.party-wizard-modal__member--ready {
  background: rgba(152, 195, 121, 0.15);
  border-color: var(--color-success, #98c379);
}

.party-wizard-modal__member--placeholder {
  opacity: 0.6;
  border-style: dashed;
}

.party-wizard-modal__member-avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-full, 50%);
  color: var(--color-accent-primary, #61afef);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.party-wizard-modal__member--ready .party-wizard-modal__member-avatar {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-success, #98c379);
}

.party-wizard-modal__member-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.party-wizard-modal__member-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.party-wizard-modal__member-status {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.party-wizard-modal__member--ready .party-wizard-modal__member-status {
  color: var(--color-success, #98c379);
}

.party-wizard-modal__member-ready-icon {
  font-size: 1.25rem;
  color: var(--text-muted, #888);
}

.party-wizard-modal__member--ready .party-wizard-modal__member-ready-icon {
  color: var(--color-success, #98c379);
}

.party-wizard-modal__waiting-message,
.party-wizard-modal__all-ready-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  font-size: 0.875rem;
  border-radius: var(--radius-md, 6px);
  margin-bottom: var(--space-4, 1rem);
}

.party-wizard-modal__waiting-message {
  background: rgba(255, 193, 7, 0.1);
  color: var(--color-warning, #e5c07b);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.party-wizard-modal__waiting-message svg {
  width: 18px;
  height: 18px;
}

.party-wizard-modal__all-ready-message {
  background: rgba(152, 195, 121, 0.15);
  color: var(--color-success, #98c379);
  border: 1px solid rgba(152, 195, 121, 0.3);
}

.party-wizard-modal__all-ready-message svg {
  width: 18px;
  height: 18px;
}

.party-wizard-modal__actions--waiting {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: center;
}

.party-wizard-modal__btn--secondary {
  background: transparent;
  border: 1px solid var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.party-wizard-modal__btn--secondary:hover {
  background: rgba(97, 175, 239, 0.15);
}

.party-wizard-modal__btn--ready {
  background: var(--color-success, #98c379);
  border-color: var(--color-success, #98c379);
  color: var(--color-bg-primary, #1e1e2e);
}

.party-wizard-modal__btn--ready:hover {
  filter: brightness(0.9);
}

.party-wizard-modal__leave-btn {
  display: block;
  width: 100%;
  margin-top: var(--space-4, 1rem);
  padding: var(--space-2, 0.5rem);
  background: transparent;
  border: none;
  color: var(--text-muted, #888);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: color 0.15s ease;
}

.party-wizard-modal__leave-btn:hover {
  color: var(--color-danger, #e06c75);
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .party-wizard-modal {
    max-width: calc(100% - var(--space-4, 1rem));
  }

  .party-wizard-modal__play-modes {
    grid-template-columns: 1fr;
  }

  .party-wizard-modal__play-mode-card {
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--space-3, 0.75rem);
  }

  .party-wizard-modal__play-mode-desc {
    text-align: left;
  }

  .party-wizard-modal__actions {
    flex-direction: column-reverse;
  }

  .party-wizard-modal__btn {
    width: 100%;
    text-align: center;
  }
}
/**
 * Party Wizard Modal — Import Hub
 * ==================================
 * Create/Join party flow with waiting room and responsive styles.
 *
 * Decomposed into focused files under party_wizard_modal/ for maintainability.


 */
/* ==========================================================================
 * Party Invite Card — structured MP invite panel (#4396)
 *
 * Renders inside the party-manager controller's invite section.
 * Three copy-button rows: URL, invite code, /join command.
 * Extracted from _campaign.css to keep that file under hard cap.
 * ========================================================================== */

.invite-card {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
}

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

.invite-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}

.invite-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.invite-card__uses {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
}

.invite-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.invite-card__row:last-of-type {
  margin-bottom: 0;
}

/* URL row — full-width read-only input */
.invite-card__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Code row — monospace chip */
.invite-card__code {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* /join command row */
.invite-card__command {
  flex: 1;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invite-card__copy-btn {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.invite-card__copy-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-focus);
}

.invite-card__copy-btn.copied {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.invite-card__footer {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-default);
}

.invite-card__expiry {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/**
 * Character Story — Timeline & History
 * ======================================
 * Story viewer, header, filters, loading/error/empty states,
 * content, sections, backstory, and timeline.
 */

/* Character Story Viewer Panel */
/* Timeline visualization of adventure history and memories */

.character-story {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary);
}

/* Header */
.character-story__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}

.character-story__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.character-story__title h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.character-story__icon {
  color: var(--color-primary);
}

.character-story__actions {
  display: flex;
  gap: var(--spacing-xs);
}

/* Filters */
.character-story__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.filter-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
}

.filter-tabs {
  display: flex;
  gap: 2px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.filter-tab {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.filter-tab.active {
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.filter-select {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.filter-importance {
  display: flex;
  gap: 2px;
}

.importance-btn {
  padding: 4px 6px;
  background: var(--color-bg-tertiary);
  border: 1px solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.importance-btn:hover {
  background: var(--color-bg-hover);
}

.importance-btn.active {
  background: var(--color-bg-primary);
  border-color: var(--color-border);
}

.importance-star {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.importance-btn.active .importance-star {
  color: #fbbf24;
}

/* Loading state */
.character-story__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  color: var(--color-text-secondary);
}

.character-story__loading.hidden {
  display: none;
}

.loading-text {
  font-style: italic;
}

/* Error state */
.character-story__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  color: var(--color-error);
}

.character-story__error.hidden {
  display: none;
}

.error-icon {
  font-size: 2rem;
}

/* Empty state */
.character-story__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-xl);
  text-align: center;
}

.character-story__empty.hidden {
  display: none;
}

.empty-illustration {
  font-size: 3rem;
  color: var(--color-text-muted);
  opacity: 0.5;
}

.empty-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.empty-message {
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 300px;
}

/* Content area */
.character-story__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-md);
}

.character-story__content.hidden {
  display: none;
}

/* Sections */
.story-section {
  margin-bottom: var(--spacing-xl);
}

.story-section.hidden {
  display: none;
}

.story-section .section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-md) 0;
  padding-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  border-bottom: 2px solid var(--color-primary);
}

.section-icon {
  color: var(--color-primary);
}

.section-count {
  margin-left: auto;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-full);
}

.section-content {
  color: var(--color-text-primary);
  line-height: 1.6;
}

.empty-text {
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-md);
}

/* Backstory */
.backstory-origin {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.backstory-text {
  margin-bottom: var(--spacing-md);
  white-space: pre-wrap;
}

.backstory-traits,
.backstory-ideals,
.backstory-bonds,
.backstory-flaws {
  margin-bottom: var(--spacing-md);
}

.backstory-traits h4,
.backstory-ideals h4,
.backstory-bonds h4,
.backstory-flaws h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.backstory-traits ul,
.backstory-ideals ul,
.backstory-bonds ul,
.backstory-flaws ul {
  margin: 0;
  padding-left: var(--spacing-lg);
}

.backstory-traits li,
.backstory-ideals li,
.backstory-bonds li,
.backstory-flaws li {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
}

/* Timeline */
.timeline-container {
  position: relative;
}

.timeline-period {
  margin-bottom: var(--spacing-md);
}

.period-title {
  margin: 0 0 var(--spacing-sm) 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.timeline-entry {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-sm);
}

.timeline-entry.hidden {
  display: none;
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
  flex-shrink: 0;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--color-bg-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline-line {
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin-top: var(--spacing-xs);
}

.timeline-content {
  flex: 1;
  padding: var(--spacing-sm);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.timeline-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
}

.timeline-date {
  color: var(--color-text-secondary);
}

.timeline-category {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  font-weight: 500;
  text-transform: capitalize;
}

.timeline-category.category-combat {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.timeline-category.category-social {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.timeline-category.category-exploration {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.timeline-category.category-discovery {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
}

.timeline-category.category-quest {
  background: rgba(234, 179, 8, 0.1);
  color: #eab308;
}

.timeline-category.category-lore {
  background: rgba(236, 72, 153, 0.1);
  color: #ec4899;
}

.timeline-importance {
  color: #fbbf24;
  letter-spacing: -2px;
}

.timeline-importance.importance-1 { opacity: 0.4; }
.timeline-importance.importance-2 { opacity: 0.6; }
.timeline-importance.importance-3 { opacity: 0.8; }
.timeline-importance.importance-4 { opacity: 0.9; }
.timeline-importance.importance-5 { opacity: 1; text-shadow: 0 0 4px rgba(251, 191, 36, 0.5); }

.timeline-title {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.timeline-summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.timeline-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
/**
 * Character Story — Relationships, Quests & Achievements
 * =======================================================
 * Relationships grid, quests list, and achievements display.
 */


/* Relationships */
.relationships-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.relationship-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.relationship-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.relationship-avatar {
  width: 48px;
  height: 48px;
  margin-bottom: var(--spacing-sm);
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-bg-tertiary);
  border-radius: 50%;
  font-size: 1.5rem;
}

.avatar-placeholder::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-user) no-repeat center / contain;
}

.relationship-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.relationship-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.relationship-disposition {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.disposition-label {
  color: var(--color-text-muted);
}

.disposition-value {
  font-weight: 600;
  text-transform: capitalize;
}

.disposition-friendly { color: #22c55e; }
.disposition-neutral { color: var(--color-text-secondary); }
.disposition-hostile { color: #ef4444; }
.disposition-trusted { color: #3b82f6; }

.relationship-history {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Quests */
.quests-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.quests-group h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.quest-entry {
  padding: var(--spacing-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
}

.quest-entry.quest-active {
  border-left-color: #eab308;
}

.quest-entry.quest-completed {
  border-left-color: #22c55e;
  opacity: 0.8;
}

.quest-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.quest-description {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.quest-reward {
  font-size: var(--font-size-xs);
  color: #eab308;
}

/* Achievements */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--spacing-md);
}

.achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.1));
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.achievement-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.achievement-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-sm);
  background: linear-gradient(135deg, #a855f7, #3b82f6);
  border-radius: 50%;
  color: white;
}

.achievement-name {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.achievement-description {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.achievement-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/**
 * Character Story Viewer Panel — Import Hub
 * ============================================
 * Timeline visualization of adventure history, memories, and relationships.
 *
 * Decomposed into focused files under character_story/ for maintainability.


 */
/**
 * Companions Panel (Task #328)
 * ============================
 * Manages companion and familiar display.
 */

.companions-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel, #1a1a2e);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.companions-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.companions-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.companions-panel__icon {
  font-size: 1.2em;
}

.companions-panel__count {
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-muted, #9ca3af);
  font-size: var(--font-size-sm, 12px);
}

.companions-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.companions-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  text-align: center;
}

.companions-panel__empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: var(--space-3, 12px);
}

.companions-panel__empty-text {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-muted, #9ca3af);
}

.companions-panel__empty-hint {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #6b7280);
  max-width: 250px;
}

.companions-panel__footer {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.companions-panel__action {
  flex: 1;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.companions-panel__action:hover {
  background: var(--color-bg-tertiary, #3a3a5a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

/* Companion List */
.companions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Companion Card */
.companion-card {
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.companion-card:hover {
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.2));
}

.companion-card--updated {
  animation: companion-flash 0.5s ease;
}

@keyframes companion-flash {
  0%, 100% { background: var(--color-bg-secondary); }
  50% { background: rgba(97, 175, 239, 0.15); }
}

.companion-card--dismissed {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Type-specific borders */
.companion-card--ally { border-left: 3px solid #10b981; }
.companion-card--hireling { border-left: 3px solid #f59e0b; }
.companion-card--animal { border-left: 3px solid #8b5cf6; }
.companion-card--summoned { border-left: 3px solid #ec4899; }
.companion-card--rescued { border-left: 3px solid #06b6d4; }

.companion-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
}

.companion-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.companion-card__type-icon {
  font-size: 1.2em;
}

.companion-card__name {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.companion-card__status {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.companion-card__status--active {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.companion-card__status--dismissed {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.companion-card__status--unconscious {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.companion-card__status--dead {
  background: rgba(55, 65, 81, 0.4);
  color: #6b7280;
}

/* Stats */
.companion-card__stats {
  margin-bottom: var(--space-2, 8px);
}

.companion-card__hp {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.companion-card__stat-label {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 24px;
}

.companion-card__hp-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.companion-card__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease;
}

.companion-card__hp-fill--healthy { background: linear-gradient(90deg, #10b981, #34d399); }
.companion-card__hp-fill--bloodied { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.companion-card__hp-fill--critical { background: linear-gradient(90deg, #ef4444, #f87171); }

.companion-card__hp-text {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

.companion-card__stat-row {
  display: flex;
  gap: var(--space-3, 12px);
}

.companion-card__stat {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-secondary, #d1d5db);
}

.companion-card__stat-icon {
  font-size: 0.9em;
}

/* Loyalty */
.companion-card__loyalty {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.companion-card__loyalty-label {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
  width: 48px;
}

.companion-card__loyalty-bar {
  flex: 1;
  height: 4px;
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.companion-card__loyalty-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.companion-card__loyalty-fill--devoted { background: linear-gradient(90deg, #ec4899, #f472b6); }
.companion-card__loyalty-fill--friendly { background: linear-gradient(90deg, #10b981, #34d399); }
.companion-card__loyalty-fill--neutral { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.companion-card__loyalty-fill--wary { background: linear-gradient(90deg, #ef4444, #f87171); }

.companion-card__loyalty-level {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
}

/* Abilities */
.companion-card__abilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}

.companion-card__ability {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.companion-card__ability--more {
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

/* Actions */
.companion-card__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.companion-card__action {
  flex: 1;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-2xs, 10px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.companion-card__action:hover {
  background: var(--color-bg-secondary, #2a2a4a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

.companion-card__action--secondary {
  background: transparent;
  color: var(--color-text-muted, #9ca3af);
}

.companion-card__action--secondary:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
  color: #ef4444;
}

/* Responsive */
@media (max-width: 640px) {
  .companion-card__stat-row {
    flex-wrap: wrap;
  }

  .companion-card__actions {
    flex-wrap: wrap;
  }

  .companion-card__action {
    flex: 1 1 calc(50% - var(--space-1, 4px));
  }
}
/**
 * Faction Reputation Panel (Task #329)
 * =====================================
 * Displays and tracks faction reputation levels.
 */

.faction-reputation-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel, #1a1a2e);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.faction-reputation-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.faction-reputation-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.faction-reputation-panel__icon {
  font-size: 1.2em;
}

.faction-reputation-panel__count {
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-muted, #9ca3af);
  font-size: var(--font-size-sm, 12px);
}

.faction-reputation-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.faction-reputation-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  text-align: center;
}

.faction-reputation-panel__empty-icon {
  font-size: 3rem;
  opacity: 0.3;
  margin-bottom: var(--space-3, 12px);
}

.faction-reputation-panel__empty-text {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-muted, #9ca3af);
}

.faction-reputation-panel__empty-hint {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #6b7280);
  max-width: 250px;
}

.faction-reputation-panel__footer {
  display: flex;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.faction-reputation-panel__action {
  flex: 1;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 11px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.faction-reputation-panel__action:hover {
  background: var(--color-bg-tertiary, #3a3a5a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

/* Faction List */
.faction-reputation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Faction Card */
.faction-card {
  position: relative;
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.faction-card:hover {
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.2));
}

.faction-card--updated {
  animation: faction-flash 0.5s ease;
}

@keyframes faction-flash {
  0%, 100% { background: var(--color-bg-secondary); }
  50% { background: rgba(97, 175, 239, 0.15); }
}

/* Level-specific border colors */
.faction-card--revered { border-left: 3px solid #f59e0b; }
.faction-card--honored { border-left: 3px solid #10b981; }
.faction-card--friendly { border-left: 3px solid #22c55e; }
.faction-card--neutral { border-left: 3px solid #6b7280; }
.faction-card--unfriendly { border-left: 3px solid #f97316; }
.faction-card--hostile { border-left: 3px solid #ef4444; }
.faction-card--hated { border-left: 3px solid #7f1d1d; }

.faction-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
}

.faction-card__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.faction-card__icon {
  font-size: 1.2em;
}

.faction-card__name {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.faction-card__level {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.faction-card__level--revered { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.faction-card__level--honored { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.faction-card__level--friendly { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.faction-card__level--neutral { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
.faction-card__level--unfriendly { background: rgba(249, 115, 22, 0.2); color: #f97316; }
.faction-card__level--hostile { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.faction-card__level--hated { background: rgba(127, 29, 29, 0.3); color: #fca5a5; }

/* Reputation Bar */
.faction-card__reputation {
  margin-bottom: var(--space-2, 8px);
}

.faction-card__reputation-bar {
  position: relative;
  height: 8px;
  background: linear-gradient(90deg, #7f1d1d 0%, #374151 50%, #f59e0b 100%);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.faction-card__reputation-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  transition: width 0.3s ease;
  border-radius: var(--radius-full, 9999px);
}

/* Semi-transparent overlay that shows progress */
.faction-card__reputation-fill::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 2px;
}

.faction-card__reputation-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%);
}

.faction-card__reputation-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-1, 4px);
}

.faction-card__reputation-min,
.faction-card__reputation-max {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #6b7280);
}

.faction-card__reputation-value {
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-secondary, #d1d5db);
  font-variant-numeric: tabular-nums;
}

.faction-card__reputation-value.positive {
  color: #10b981;
}

.faction-card__reputation-value.negative {
  color: #ef4444;
}

.faction-card__trend {
  font-size: var(--font-size-2xs, 10px);
  margin-left: var(--space-1, 4px);
}

.faction-card__trend--positive { color: #10b981; }
.faction-card__trend--negative { color: #ef4444; }

/* Description and Meta */
.faction-card__description {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

.faction-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.faction-card__modifier,
.faction-card__leader {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.faction-card__modifier-icon,
.faction-card__leader-icon {
  font-size: 0.9em;
}

.faction-card__reason {
  margin: 0 0 var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
}

/* Actions */
.faction-card__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.faction-card__action {
  flex: 1;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-2xs, 10px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.faction-card__action:hover {
  background: var(--color-bg-secondary, #2a2a4a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

/* History Overlay */
.faction-card__history {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(26, 26, 46, 0.95);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  z-index: var(--z-sticky);
}

.faction-card__history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2, 8px);
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
}

.faction-card__history-close {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9ca3af);
  font-size: 1.2em;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.faction-card__history-close:hover {
  color: var(--color-text-primary, #fff);
}

.faction-card__history-note {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #9ca3af);
}

/* Level Change Notification */
.faction-card__level-change {
  position: absolute;
  top: var(--space-2, 8px);
  right: var(--space-2, 8px);
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  animation: level-change-fade 3s ease forwards;
  z-index: var(--z-float);
}

.faction-card__level-change--up {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.faction-card__level-change--down {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.faction-card__level-change-arrow {
  font-size: 1.1em;
}

@keyframes level-change-fade {
  0% { opacity: 1; transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

/* Responsive */
@media (max-width: 640px) {
  .faction-card__actions {
    flex-wrap: wrap;
  }

  .faction-card__action {
    flex: 1 1 calc(50% - var(--space-1, 4px));
  }
}
/**
 * Treasury Item Cards (Task #354)
 * ================================
 * Styles for treasury item management cards.
 */

/* Item List Container */
.treasury-items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Empty State */
.treasury-items-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6, 24px);
  text-align: center;
}

.treasury-items-empty__icon {
  font-size: 2.5rem;
  opacity: 0.3;
  margin-bottom: var(--space-3, 12px);
}

.treasury-items-empty__text {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-base, 14px);
  color: var(--color-text-muted, #9ca3af);
}

.treasury-items-empty__hint {
  margin: 0;
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #6b7280);
  max-width: 250px;
}

/* Treasury Item Card */
.treasury-item-card {
  position: relative;
  background: var(--color-bg-secondary, #2a2a4a);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3, 12px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.treasury-item-card:hover {
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.2));
  transform: translateY(-1px);
}

.treasury-item-card--updated {
  animation: treasury-item-flash 0.5s ease;
}

@keyframes treasury-item-flash {
  0%, 100% { background: var(--color-bg-secondary); }
  50% { background: rgba(97, 175, 239, 0.15); }
}

.treasury-item-card--claimed {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Rarity-specific borders */
.treasury-item-card--common { border-left: 3px solid #9ca3af; }
.treasury-item-card--uncommon { border-left: 3px solid #22c55e; }
.treasury-item-card--rare { border-left: 3px solid #3b82f6; }
.treasury-item-card--very-rare,
.treasury-item-card--very_rare { border-left: 3px solid #8b5cf6; }
.treasury-item-card--legendary { border-left: 3px solid #f59e0b; }
.treasury-item-card--artifact { border-left: 3px solid #ef4444; }

/* Header */
.treasury-item-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2, 8px);
}

.treasury-item-card__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
}

.treasury-item-card__icon {
  font-size: 1.3em;
  flex-shrink: 0;
}

.treasury-item-card__name-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.treasury-item-card__name {
  margin: 0;
  font-size: var(--font-size-sm, 13px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #fff);
  line-height: 1.2;
}

.treasury-item-card__type {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.treasury-item-card__badges {
  display: flex;
  gap: var(--space-1, 4px);
  align-items: center;
  flex-shrink: 0;
}

.treasury-item-card__quantity {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 11px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-secondary, #d1d5db);
}

.treasury-item-card__rarity {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.treasury-item-card__rarity--common { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
.treasury-item-card__rarity--uncommon { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.treasury-item-card__rarity--rare { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.treasury-item-card__rarity--very-rare,
.treasury-item-card__rarity--very_rare { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.treasury-item-card__rarity--legendary { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.treasury-item-card__rarity--artifact { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Description */
.treasury-item-card__description {
  margin: 0 0 var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, #9ca3af);
  line-height: 1.4;
}

/* Meta Info */
.treasury-item-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.treasury-item-card__value,
.treasury-item-card__contributor,
.treasury-item-card__date {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.treasury-item-card__value-icon,
.treasury-item-card__contributor-icon {
  font-size: 0.9em;
}

.treasury-item-card__total-value {
  color: var(--color-text-muted, #9ca3af);
}

.treasury-item-card__date {
  color: var(--color-text-muted, #6b7280);
}

/* Properties */
.treasury-item-card__properties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-2, 8px);
}

.treasury-item-card__property {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-text-secondary, #d1d5db);
}

.treasury-item-card__property--more {
  color: var(--color-text-muted, #9ca3af);
  font-style: italic;
}

/* Actions */
.treasury-item-card__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
}

.treasury-item-card__action {
  flex: 1;
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #d1d5db);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-2xs, 10px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.treasury-item-card__action:hover {
  background: var(--color-bg-secondary, #2a2a4a);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-text-primary, #fff);
}

.treasury-item-card__action--primary {
  background: var(--color-accent-primary, #61afef);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1a1a2e);
  font-weight: var(--font-weight-semibold, 600);
}

.treasury-item-card__action--primary:hover {
  background: var(--color-accent-secondary, #51a0df);
  border-color: var(--color-accent-secondary, #51a0df);
  color: var(--color-bg-primary, #1a1a2e);
}

/* Panel Update Animation */
.panel-party-treasury.treasury-updated {
  animation: treasury-panel-flash 0.5s ease;
}

@keyframes treasury-panel-flash {
  0%, 100% { background: transparent; }
  50% { background: rgba(97, 175, 239, 0.05); }
}

/* Responsive */
@media (max-width: 640px) {
  .treasury-item-card__header {
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .treasury-item-card__badges {
    align-self: flex-start;
  }

  .treasury-item-card__actions {
    flex-wrap: wrap;
  }

  .treasury-item-card__action {
    flex: 1 1 calc(50% - var(--space-1, 4px));
  }
}
/* Portrait Generator Component
 * Provides UI for AI-generated character portraits
 */

.portrait-generator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.portrait-generator__preview {
  position: relative;
  width: 128px;
  height: 128px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
}

.portrait-generator__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.portrait-generator__image--hidden {
  opacity: 0;
  position: absolute;
}

.portrait-generator__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-color-subtle), var(--accent-color-subtle));
}

.portrait-generator__placeholder--hidden {
  display: none;
}

.portrait-generator__placeholder-icon {
  width: 48px;
  height: 48px;
  color: var(--text-secondary);
  opacity: 0.5;
}

.portrait-generator__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.portrait-generator__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  width: 100%;
  max-width: 200px;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: var(--text-on-primary);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.portrait-generator__button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.portrait-generator__button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.portrait-generator__button--loading {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.portrait-generator__button--loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--text-secondary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: portrait-spin 0.8s linear infinite;
}

@keyframes portrait-spin {
  to {
    transform: rotate(360deg);
  }
}

.portrait-generator__button-icon {
  width: 16px;
  height: 16px;
}

/* Re-roll appearance descriptor (#3787). Secondary affordance — toned-down */
/* styling so it doesn't compete with the primary "Generate Portrait" button. */
.portrait-generator__button--reroll {
  background: var(--bg-secondary, var(--bg-tertiary));
  color: var(--text-primary);
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15));
  font-weight: 500;
}

.portrait-generator__button--reroll:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
}

.portrait-generator__status {
  font-size: var(--font-size-xs);
  text-align: center;
  min-height: 1.2em;
  transition: opacity 0.2s ease;
}

.portrait-generator__status--loading {
  color: var(--text-secondary);
  animation: portrait-pulse 1.5s ease-in-out infinite;
}

@keyframes portrait-pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

.portrait-generator__status--success {
  color: var(--success-color);
}

.portrait-generator__status--error {
  color: var(--error-color);
}

/* Empty state when no character is selected */
.portrait-generator__empty-state {
  text-align: center;
  padding: var(--spacing-sm);
}

.portrait-generator__empty-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* Compact variant for inline use */
.portrait-generator--compact {
  flex-direction: row;
  padding: var(--spacing-sm);
}

.portrait-generator--compact .portrait-generator__preview {
  width: 64px;
  height: 64px;
}

.portrait-generator--compact .portrait-generator__controls {
  flex: 1;
  align-items: flex-start;
}

.portrait-generator--compact .portrait-generator__button {
  max-width: none;
  width: auto;
}

/* Character sheet integration */
.character-sheet .portrait-generator {
  margin-bottom: var(--spacing-md);
}
/**
 * Narrative Bookmarks — Panel and Header
 * =========================================
 * Panel container, header, search, filters, content area, empty/loading states.
 */

/**
 * Narrative Bookmarks
 * ===================
 * Styles for bookmarking and highlighting narrative moments
 */

/* ============================================
   Bookmark Button (inline with narrative entries)
   ============================================ */

.narrative-bookmark__btn {
  --bookmark-color: var(--color-text-muted);
  --bookmark-active-color: var(--color-gold);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-xl);
  color: var(--bookmark-color);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}

.narrative-bookmark__btn:hover {
  opacity: 1;
  color: var(--bookmark-active-color);
  background: var(--overlay-gold-subtle);
}

.narrative-bookmark__btn--active {
  opacity: 1;
  color: var(--bookmark-active-color);
}

.narrative-bookmark__btn--active:hover {
  color: var(--color-accent-error);
}

.narrative-bookmark__btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Type Selector Popup
   ============================================ */

.narrative-bookmark__type-selector {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 180px;
  padding: 8px 0;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 25px var(--overlay-light-plus);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.narrative-bookmark__type-selector--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.narrative-bookmark__type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.narrative-bookmark__type-option:hover {
  background: var(--overlay-white-subtle);
}

.narrative-bookmark__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xl);
}

.narrative-bookmark__type-icon--memorable { background: var(--color-entity-npc-bg); color: var(--color-entity-npc); }
.narrative-bookmark__type-icon--epic_moment { background: var(--overlay-gold-light); color: var(--color-gold); }
.narrative-bookmark__type-icon--combat_victory { background: var(--color-entity-creature-bg); color: var(--color-entity-creature); }
.narrative-bookmark__type-icon--funny { background: var(--color-warning-subtle); color: var(--color-accent-warning); }
.narrative-bookmark__type-icon--lore { background: var(--color-entity-spell-bg); color: var(--color-entity-spell); }
.narrative-bookmark__type-icon--custom { background: var(--overlay-white-light); color: var(--color-text-muted); }

/* ============================================
   Bookmarks Panel
   ============================================ */

.bookmarks-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
}

.bookmarks-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-default);
}

.bookmarks-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.bookmarks-panel__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-gold);
}

.bookmarks-panel__subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Filters */
.bookmarks-panel__filters {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border-default);
  overflow-x: auto;
}

.bookmarks-panel__filter {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.bookmarks-panel__filter:hover {
  border-color: var(--color-gold);
  color: var(--color-text-primary);
}

.bookmarks-panel__filter--active {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-fg-on-emphasis);
}

/* Content area */
.bookmarks-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

/* Empty state */
.bookmarks-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.bookmarks-panel__empty-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-gold-subtle);
  border-radius: 50%;
  color: var(--color-gold);
  font-size: 2rem;
}

.bookmarks-panel__empty-icon svg {
  width: 32px;
  height: 32px;
}

.bookmarks-panel__empty-title {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.bookmarks-panel__empty-desc {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.bookmarks-panel__icon-sample {
  display: inline-flex;
  vertical-align: middle;
  color: var(--color-gold);
}

.bookmarks-panel__icon-sample svg {
  width: 14px;
  height: 14px;
}

/* Loading state */
.bookmarks-panel__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-text-muted);
}

.bookmarks-panel__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: bookmarks-spin 0.8s linear infinite;
}

@keyframes bookmarks-spin {
  to { transform: rotate(360deg); }
}

/**
 * Narrative Bookmarks — Bookmark Items
 * =======================================
 * Bookmark item cards, metadata, tags, excerpt, and error state.
 */

/* ============================================
   Bookmark Item
   ============================================ */

.narrative-bookmark__item {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  transition: border-color 0.2s ease;
}

.narrative-bookmark__item:hover {
  border-color: var(--color-gold);
}

.narrative-bookmark__item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.narrative-bookmark__type-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--color-entity-npc-bg);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-entity-npc);
}

.narrative-bookmark__character {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.narrative-bookmark__preview {
  margin: 0 0 10px;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.narrative-bookmark__note {
  margin: 0 0 10px;
  padding: 10px;
  background: var(--overlay-light);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.narrative-bookmark__item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.narrative-bookmark__item-footer time {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.narrative-bookmark__share-btn {
  padding: 4px 12px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.narrative-bookmark__share-btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-fg-on-emphasis);
}
/**
 * Narrative Bookmarks — Images and Actions
 * ==========================================
 * Image section, action buttons, thumbnails, and responsive layout.
 */


/* ============================================
   Image Section (action buttons & thumbnails)
   ============================================ */

.narrative-bookmark__image-section {
  margin-bottom: 10px;
}

.narrative-bookmark__action-btn {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.narrative-bookmark__action-btn:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-fg-on-emphasis);
}

.narrative-bookmark__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.narrative-bookmark__action-btn:disabled:hover {
  background: transparent;
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.narrative-bookmark__thumbnail {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  border: 1px solid var(--color-border-default);
}

.narrative-bookmark__footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Error state */
.bookmarks-panel__error {
  padding: 12px 20px;
  background: var(--color-danger-subtle);
  color: var(--color-accent-error);
  font-size: 0.875rem;
}

/* ============================================
   Adventure Card (for sharing)
   ============================================ */

.adventure-card {
  --card-accent: var(--color-entity-npc);

  position: relative;
  width: 320px;
  padding: 24px;
  background: var(--color-bg-secondary);
  border: 2px solid var(--card-accent);
  border-radius: var(--radius-xl);
  box-shadow: 0 10px 40px var(--overlay-medium-plus);
  overflow: hidden;
}

.adventure-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-accent);
}

.adventure-card__header {
  margin-bottom: 16px;
}

.adventure-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--color-entity-npc-bg);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--card-accent);
  margin-bottom: 8px;
}

.adventure-card__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.adventure-card__content {
  margin-bottom: 16px;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.adventure-card__character {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-default);
}

.adventure-card__avatar {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-accent);
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-fg-on-emphasis);
}

.adventure-card__character-info {
  flex: 1;
}

.adventure-card__character-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.adventure-card__character-class {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.adventure-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-default);
}

.adventure-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.adventure-card__branding {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
/**
 * Narrative Bookmarks — Import Hub
 * ===================================
 * Saved narrative moments panel with filtering, bookmark cards, and images.
 *
 * Decomposed into focused files under narrative_bookmarks/ for maintainability.



 */
/**
 * Scene Snapshot
 * ==============
 * Styles for the inline scene snapshot button (camera icon) in narrative entries
 * and the snapshot preview modal that displays generated scene images.
 */

/* ============================================
   Snapshot Button (in narrative entry actions)
   ============================================ */

.narrative-entry__actions .narrative-snapshot__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.narrative-entry__actions .narrative-snapshot__btn:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: var(--color-accent-purple, #8b5cf6);
  color: var(--color-accent-purple, #8b5cf6);
}

.narrative-entry__actions .narrative-snapshot__btn:focus-visible {
  outline: 2px solid var(--color-accent-purple, #8b5cf6);
  outline-offset: 2px;
}

/* Loading state — pulsing animation while image generates */
.narrative-entry__actions .narrative-snapshot__btn--loading {
  color: var(--color-accent-purple, #8b5cf6);
  cursor: wait;
  pointer-events: none;
}

.narrative-entry__actions .narrative-snapshot__btn--loading svg {
  animation: snapshot-pulse 1.2s ease-in-out infinite;
}

@keyframes snapshot-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* Success state — has a generated image */
.narrative-entry__actions .narrative-snapshot__btn--has-image {
  color: var(--color-accent-purple, #8b5cf6);
}

.narrative-entry__actions .narrative-snapshot__btn--has-image:hover {
  background: rgba(139, 92, 246, 0.3);
}

/* Error state — brief flash on failure */
.narrative-entry__actions .narrative-snapshot__btn--error {
  color: var(--color-danger, #dc2626);
  border-color: var(--color-danger, #dc2626);
  animation: snapshot-shake 0.4s ease;
}

@keyframes snapshot-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* ============================================
   Scene Snapshot Preview (modal content)
   ============================================ */

.scene-snapshot-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scene-snapshot-preview__image {
  width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border, #374151);
  background: var(--color-surface, #111827);
}

.scene-snapshot-preview__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-text-muted, #9ca3af);
}

.scene-snapshot-preview__prompt-details {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #9ca3af);
}

.scene-snapshot-preview__prompt-details summary {
  cursor: pointer;
  color: var(--color-text, #f9fafb);
  font-weight: 500;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.scene-snapshot-preview__prompt-details summary:hover {
  color: var(--color-accent-purple, #8b5cf6);
}

.scene-snapshot-preview__prompt {
  margin: 8px 0 0;
  padding: 12px;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.3));
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-muted, #9ca3af);
  white-space: pre-wrap;
  word-break: break-word;
}

.scene-snapshot-preview__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.scene-snapshot-preview__regenerate {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text, #f9fafb);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.scene-snapshot-preview__regenerate:hover {
  background: var(--color-accent-purple, #8b5cf6);
  border-color: var(--color-accent-purple, #8b5cf6);
  color: white;
}

.scene-snapshot-preview__regenerate:disabled {
  opacity: 0.5;
  cursor: wait;
}

.scene-snapshot-preview__regenerate:disabled:hover {
  background: transparent;
  border-color: var(--color-border, #374151);
  color: var(--color-text, #f9fafb);
}

/* ============================================
   Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .narrative-entry__actions .narrative-snapshot__btn,
  .narrative-entry__actions .narrative-snapshot__btn--loading svg,
  .narrative-entry__actions .narrative-snapshot__btn--error {
    transition: none;
    animation: none;
  }
}
/**
 * Loot Split Modal — Base Styles
 * =================================
 * Core modal layout, header, and party member displays.
 */

/*
 * Loot Split Modal - Party Treasury Distribution
 * ==============================================
 * Dialog for distributing party loot among members.
 * Uses native <dialog> with terminal theme.
 */

/* ========================================
 * DIALOG BASE
 * ======================================== */

.loot-split-modal {
  border: 1px solid var(--color-accent-gold, #d4a574);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1e1e2e);
  color: var(--text-primary, #e0e0e0);
  padding: 0;
  max-width: 540px;
  width: calc(100% - var(--space-8, 2rem));
  max-height: 85vh;
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(212, 165, 116, 0.2);
  animation: loot-split-enter 0.2s ease-out;
  overflow: hidden;
}

.loot-split-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  animation: loot-split-backdrop 0.2s ease-out;
}

.loot-split-modal[open] {
  display: flex;
}

/* ========================================
 * CONTENT WRAPPER
 * ======================================== */

.loot-split-modal__content {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

.loot-split-modal__close {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: var(--z-sticky);
}

.loot-split-modal__close:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__close svg {
  width: 16px;
  height: 16px;
}

/* ========================================
 * HEADER
 * ======================================== */

.loot-split-modal__header {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--border-secondary, #333);
  text-align: center;
}

.loot-split-modal__title {
  margin: 0 0 var(--space-2, 0.5rem);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-accent-gold, #d4a574);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.loot-split-modal__title svg {
  width: 24px;
  height: 24px;
}

.loot-split-modal__subtitle {
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
}

/* ========================================
 * BODY
 * ======================================== */

.loot-split-modal__body {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  overflow-y: auto;
  flex: 1;
}

.loot-split-modal__section-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.loot-split-modal__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 0.75rem);
}

.loot-split-modal__section-header .loot-split-modal__section-title {
  margin-bottom: 0;
}

.loot-split-modal__action-btn {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: transparent;
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #aaa);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.loot-split-modal__action-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.loot-split-modal__item-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

/* ========================================
 * METHOD SELECTION
 * ======================================== */

.loot-split-modal__method-section {
  margin-bottom: var(--space-5, 1.25rem);
}

.loot-split-modal__method-options {
  display: flex;
  gap: var(--space-3, 0.75rem);
}

.loot-split-modal__method-option {
  flex: 1;
  cursor: pointer;
}

.loot-split-modal__method-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.loot-split-modal__method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-md, 6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.loot-split-modal__method-option:hover .loot-split-modal__method-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-muted, #888);
}

.loot-split-modal__method-option input:checked + .loot-split-modal__method-card {
  background: rgba(212, 165, 116, 0.15);
  border-color: var(--color-accent-gold, #d4a574);
}

.loot-split-modal__method-icon {
  font-size: 1.25rem;
  color: var(--text-muted, #888);
}

.loot-split-modal__method-option input:checked + .loot-split-modal__method-card .loot-split-modal__method-icon {
  color: var(--color-accent-gold, #d4a574);
}

.loot-split-modal__method-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__method-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

/* ========================================
 * CURRENCY SECTION
 * ======================================== */

.loot-split-modal__currency-section {
  margin-bottom: var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem);
  background: rgba(212, 165, 116, 0.08);
  border-radius: var(--radius-md, 6px);
  border: 1px solid rgba(212, 165, 116, 0.2);
}

.loot-split-modal__currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3, 0.75rem);
}

.loot-split-modal__currency-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.loot-split-modal__currency-input .currency-label {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: 0.8125rem;
}

.loot-split-modal__currency-input .currency-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full, 50%);
  font-size: 0.625rem;
  font-weight: 700;
}

.loot-split-modal__currency-input .currency-icon.pp {
  background: linear-gradient(135deg, #e0e0e0, #a0a0a0);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.gp {
  background: linear-gradient(135deg, #ffd700, #daa520);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.ep {
  background: linear-gradient(135deg, #c0c0c0, #808080);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.sp {
  background: linear-gradient(135deg, #c0c0c0, #a0a0a0);
  color: #333;
}

.loot-split-modal__currency-input .currency-icon.cp {
  background: linear-gradient(135deg, #cd7f32, #8b4513);
  color: #fff;
}

.loot-split-modal__currency-input .currency-available {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.loot-split-modal__currency-input input {
  padding: var(--space-2, 0.5rem);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-secondary, #444);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-primary, #e0e0e0);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.875rem;
  text-align: center;
}

.loot-split-modal__currency-input input:focus {
  outline: none;
  border-color: var(--color-accent-gold, #d4a574);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2);
}

/**
 * Loot Split Modal — Items Section
 * ==================================
 * Item list, item cards, and quantity controls.
 */

/* ========================================
 * ITEMS SECTION
 * ======================================== */

.loot-split-modal__items-section {
  margin-bottom: var(--space-5, 1.25rem);
}

.loot-split-modal__items-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  max-height: 150px;
  overflow-y: auto;
  padding: var(--space-3, 0.75rem);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md, 6px);
}

.loot-split-modal__item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background 0.15s ease;
}

.loot-split-modal__item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.loot-split-modal__item input[type="checkbox"] {
  accent-color: var(--color-accent-gold, #d4a574);
}

.loot-split-modal__item-info {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex: 1;
}

.loot-split-modal__item-name {
  font-size: 0.875rem;
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__item-quantity {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm, 4px);
}

/* ========================================
 * MEMBERS SECTION
 * ======================================== */

.loot-split-modal__members-section {
  margin-bottom: var(--space-5, 1.25rem);
}

.loot-split-modal__members-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.loot-split-modal__member {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md, 6px);
}

.loot-split-modal__member-avatar {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-full, 50%);
  color: var(--color-accent-primary, #61afef);
  font-weight: 700;
  font-size: 0.75rem;
}

.loot-split-modal__member-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.loot-split-modal__member-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}

.loot-split-modal__member-class {
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

/**
 * Loot Split Modal — Preview and Actions
 * =========================================
 * Split preview, loading state, action buttons, and responsive.
 */

/* ========================================
 * PREVIEW
 * ======================================== */

.loot-split-modal__preview {
  padding: var(--space-3, 0.75rem);
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid rgba(152, 195, 121, 0.3);
  border-radius: var(--radius-md, 6px);
}

.loot-split-modal__preview-content {
  font-size: 0.875rem;
  line-height: 1.5;
}

.loot-split-modal__preview-section {
  margin-bottom: var(--space-2, 0.5rem);
}

.loot-split-modal__preview-section:last-child {
  margin-bottom: 0;
}

.loot-split-modal__preview-split {
  color: var(--color-success, #98c379);
  font-style: italic;
}

.loot-split-modal__preview-items {
  margin: var(--space-1, 0.25rem) 0 0 var(--space-4, 1rem);
  padding: 0;
  list-style: disc;
  color: var(--text-secondary, #aaa);
  font-size: 0.8125rem;
}

.loot-split-modal__preview-empty {
  color: var(--text-muted, #888);
  font-style: italic;
  text-align: center;
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.loot-split-modal__empty {
  padding: var(--space-4, 1rem);
  text-align: center;
  color: var(--text-muted, #888);
  font-style: italic;
}

/* ========================================
 * ERROR STATE
 * ======================================== */

.loot-split-modal__error {
  padding: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid var(--color-danger, #e06c75);
  border-radius: var(--radius-md, 6px);
  color: var(--color-danger, #e06c75);
  font-size: 0.875rem;
}

/* ========================================
 * ACTIONS
 * ======================================== */

.loot-split-modal__actions {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--border-secondary, #333);
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
}

.loot-split-modal__btn {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.loot-split-modal__btn svg {
  width: 16px;
  height: 16px;
}

.loot-split-modal__btn--cancel {
  background: transparent;
  border-color: var(--border-secondary, #444);
  color: var(--text-secondary, #aaa);
}

.loot-split-modal__btn--cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--text-secondary, #aaa);
}

.loot-split-modal__btn--primary {
  background: var(--color-accent-gold, #d4a574);
  color: var(--color-bg-primary, #1e1e2e);
}

.loot-split-modal__btn--primary:hover {
  filter: brightness(1.1);
}

.loot-split-modal__btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

/* ========================================
 * LOADING STATE
 * ======================================== */

.loot-split-modal__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4, 1rem);
  background: var(--color-bg-primary, #1e1e2e);
  z-index: var(--z-docked);
}

.loot-split-modal__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary, #444);
  border-top-color: var(--color-accent-gold, #d4a574);
  border-radius: 50%;
  animation: loot-split-spin 0.8s linear infinite;
}

.loot-split-modal__loading-text {
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  margin: 0;
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes loot-split-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes loot-split-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loot-split-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .loot-split-modal,
  .loot-split-modal::backdrop,
  .loot-split-modal__spinner {
    animation: none;
  }
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .loot-split-modal {
    max-width: calc(100% - var(--space-4, 1rem));
  }

  .loot-split-modal__currency-grid {
    grid-template-columns: 1fr 1fr;
  }

  .loot-split-modal__actions {
    flex-direction: column-reverse;
  }

  .loot-split-modal__btn {
    width: 100%;
    justify-content: center;
  }
}
/**
 * Loot Split Modal — Import Hub
 * ================================
 * Party treasury distribution modal with item allocation and preview.
 *
 * Decomposed into focused files under loot_split_modal/ for maintainability.



 */
/**
 * Quality Rating (Thumbs Up/Down)
 * ================================
 * Styles for AI response quality rating buttons.
 *
 * Positioning: absolute overlay at the bottom-right of the narrative entry.
 * Hidden by default (opacity 0, pointer-events none); revealed on hover/focus
 * so it doesn't interrupt reading flow. Keyboard-accessible via focus-within.
 *
 * UX Standards Applied:
 * - Touch targets: 44x44px minimum (WCAG 2.5.5)
 * - Focus states: Visible focus indicators
 * - Contrast: Sufficient disabled state contrast
 * - Opacity/visibility used (not display:none) so screen readers find elements
 */

.quality-rating {
  /* Absolute overlay — does NOT affect document flow / reading layout */
  position: absolute;
  bottom: var(--space-1, 4px);
  right: var(--space-2, 8px);
  display: flex;
  align-items: center;
  gap: 2px;
  /* Hidden by default — revealed on hover or keyboard focus */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  /* Prevent click-through when invisible */
  pointer-events: none;
  /* Sit above text but below modals */
  z-index: var(--z-sticky, 10);
}

/* DM entries contain a quality-rating overlay; reserve bottom padding so the
   buttons don't overlap the last line of narrative text. Only applied when
   the widget is present (DM entries only). */
.narrative-entry:has(.quality-rating) {
  padding-bottom: calc(var(--space-2, 8px) + 28px);
}

.narrative-entry:hover .quality-rating,
.quality-rating:focus-within,
.quality-rating--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.quality-rating__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Visual size matches other action buttons (copy, bookmark, TTS) */
  width: 28px;
  height: 28px;
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.4));
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted, #6b7280);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  /* WCAG 2.5.5: extend touch target to 44×44 via pseudo-element */
}

/* Expanded touch target — pseudo-element adds invisible tappable area */
.quality-rating__btn::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.quality-rating__btn:hover {
  color: var(--color-text, #f9fafb);
  background: rgba(255, 255, 255, 0.1);
}

/* Focus states - visible outline for keyboard navigation */
.quality-rating__btn:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
  color: var(--color-text, #f9fafb);
}

.quality-rating__btn--up:hover,
.quality-rating__btn--up:focus-visible,
.quality-rating__btn--up.quality-rating__btn--active {
  color: var(--color-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
}

.quality-rating__btn--up:focus-visible {
  outline-color: var(--color-success, #22c55e);
}

.quality-rating__btn--down:hover,
.quality-rating__btn--down:focus-visible,
.quality-rating__btn--down.quality-rating__btn--active {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.15);
}

.quality-rating__btn--down:focus-visible {
  outline-color: var(--color-danger, #ef4444);
}

.quality-rating__btn svg {
  width: 14px;
  height: 14px;
  pointer-events: none;
}

/* Feedback panel — opens above the rating buttons */
.quality-rating__feedback {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: var(--space-1, 4px);
  z-index: var(--z-panel);
  width: 280px;
  padding: 12px;
  background: var(--color-surface-elevated, #1f2937);
  border: 1px solid var(--color-border, #374151);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.quality-rating__feedback--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.quality-rating__feedback-title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #f9fafb);
}

.quality-rating__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.quality-rating__category {
  /* Increased padding for better touch targets */
  padding: 8px 12px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 12px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.quality-rating__category:hover {
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-text, #f9fafb);
}

.quality-rating__category:focus-visible {
  outline: 2px solid var(--color-accent, #4ECDC4);
  outline-offset: 2px;
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-text, #f9fafb);
}

.quality-rating__category--selected {
  background: var(--color-accent, #4ECDC4);
  border-color: var(--color-accent, #4ECDC4);
  color: var(--color-surface, #111827);
}

.quality-rating__textarea {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  padding: 8px;
  background: var(--color-surface, #111827);
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text, #f9fafb);
  font-size: 0.8125rem;
  resize: vertical;
}

.quality-rating__textarea:focus {
  outline: none;
  border-color: var(--color-accent, #4ECDC4);
  box-shadow: 0 0 0 2px rgba(78, 205, 196, 0.2);
}

.quality-rating__textarea::placeholder {
  color: var(--color-text-muted, #6b7280);
}

.quality-rating__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

.quality-rating__submit {
  padding: 8px 16px;
  min-height: 36px;
  background: var(--color-accent, #4ECDC4);
  border: none;
  border-radius: 4px;
  color: var(--color-surface, #111827);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.quality-rating__submit:hover:not(:disabled) {
  opacity: 0.9;
}

.quality-rating__submit:focus-visible {
  outline: 2px solid var(--color-accent, #4ECDC4);
  outline-offset: 2px;
}

.quality-rating__submit:disabled {
  opacity: 0.4;
  background: var(--color-text-muted, #6b7280);
  cursor: not-allowed;
}

.quality-rating__cancel {
  padding: 8px 16px;
  min-height: 36px;
  background: transparent;
  border: 1px solid var(--color-border, #374151);
  border-radius: 4px;
  color: var(--color-text-muted, #9ca3af);
  font-size: 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.quality-rating__cancel:hover {
  color: var(--color-text, #f9fafb);
  border-color: var(--color-text-muted, #9ca3af);
}

.quality-rating__cancel:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .quality-rating,
  .quality-rating__btn,
  .quality-rating__feedback {
    transition: none;
  }
}
/**
 * TTS Audio Player
 * ================
 * Inline audio player bar shown above input area when TTS audio is available.
 */

.tts-audio-player {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: var(--color-surface-elevated, #1f2937);
  border-top: 1px solid var(--color-border, #374151);
  gap: 8px;
}

.tts-audio-player[hidden] {
  display: none;
}

.tts-audio-player__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.tts-audio-player__play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-accent, #4ECDC4);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tts-audio-player__play-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.tts-audio-player__play-btn.playing {
  color: var(--color-warning, #f59e0b);
}

.tts-audio-player__play-btn svg {
  width: 20px;
  height: 20px;
}

.tts-audio-player__progress {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border, #374151);
  border-radius: 2px;
  outline: none;
}

.tts-audio-player__progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: var(--color-accent, #4ECDC4);
  border-radius: 50%;
  cursor: pointer;
}

.tts-audio-player__volume {
  width: 60px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border, #374151);
  border-radius: 2px;
  outline: none;
  flex-shrink: 0;
}

.tts-audio-player__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  background: var(--color-text-muted, #9ca3af);
  border-radius: 50%;
  cursor: pointer;
}

.tts-audio-player__status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted, #4b5563);
  flex-shrink: 0;
  transition: background 0.3s ease;
}

.tts-audio-player__status.audio-available {
  background: var(--color-success, #22c55e);
  animation: tts-pulse 2s ease-in-out infinite;
}

@keyframes tts-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
/**
 * OOC Modals — Shared & Session Notes
 * ======================================
 * Shared modal styles and session notes modal.
 */

/**
 * OOC Sidebar Modals
 * ==================
 * Styles for session notes and schedule modals in the OOC sidebar.
 * Uses native <dialog> element for proper modal behavior.
 */

/* ========================================
 * SHARED MODAL STYLES
 * ======================================== */

.session-notes-dialog,
.session-schedule-dialog {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 480px;
  width: 90vw;
  max-height: 80vh;
  overflow: visible;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
}

.session-notes-dialog::backdrop,
.session-schedule-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.session-notes-dialog__content,
.session-schedule-dialog__content {
  background: #1a1a2e;
  border: 2px solid #4a4a6e;
  border-radius: 12px;
  min-height: 300px;
  max-height: 80vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 16px 64px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Headers */
.session-notes-dialog__header,
.session-schedule-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #3a3a5e;
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.08) 0%,
    rgba(0, 212, 255, 0.02) 100%);
}

.session-notes-dialog__title,
.session-schedule-dialog__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #00d4ff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.session-notes-dialog__icon,
.session-schedule-dialog__icon {
  font-size: 1.25rem;
}

.session-notes-dialog__close,
.session-schedule-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  color: #888;
  cursor: pointer;
  font-size: 1.25rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-notes-dialog__close:hover,
.session-schedule-dialog__close:hover {
  color: #00d4ff;
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

/* Footers */
.session-notes-dialog__footer,
.session-schedule-dialog__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-top: 1px solid #3a3a5e;
  background: #151525;
}

/* ========================================
 * SESSION NOTES MODAL
 * ======================================== */

/* AI Recap Section */
.session-notes__recap-section {
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg,
    rgba(138, 43, 226, 0.08) 0%,
    rgba(138, 43, 226, 0.02) 100%);
  border-bottom: 1px solid #3a3a5e;
}

.session-notes__recap-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.session-notes__recap-icon {
  font-size: 1.25rem;
}

.session-notes__recap-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #b388ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-notes__recap-description {
  font-size: 0.8125rem;
  color: #888;
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.session-notes__recap-actions {
  display: flex;
  gap: 0.5rem;
}

.session-notes__btn--recap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #8a2be2 0%, #6b1fa8 100%);
  border-color: #8a2be2;
  color: #fff;
  font-weight: 600;
}

.session-notes__btn--recap:hover {
  background: linear-gradient(135deg, #9b4dca 0%, #7c25c4 100%);
  border-color: #9b4dca;
}

.session-notes__btn--recap:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.session-notes__btn--loading {
  opacity: 0.7;
  pointer-events: none;
}

.session-notes__btn-icon {
  font-size: 1rem;
}

/* Loading state */
.session-notes__recap-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-top: 0.75rem;
  background: rgba(138, 43, 226, 0.1);
  border: 1px solid rgba(138, 43, 226, 0.2);
  border-radius: 6px;
  color: #b388ff;
  font-size: 0.8125rem;
}

.session-notes__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(179, 136, 255, 0.3);
  border-top-color: #b388ff;
  border-radius: 50%;
  animation: session-notes-spin 0.8s linear infinite;
}

@keyframes session-notes-spin {
  to { transform: rotate(360deg); }
}

/* Error state */
.session-notes__recap-error {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
  border-radius: 6px;
  color: #ff6b6b;
  font-size: 0.8125rem;
}

/* Recap note item styling */
.session-notes__item--recap {
  border-color: rgba(138, 43, 226, 0.4);
  background: linear-gradient(180deg,
    rgba(138, 43, 226, 0.1) 0%,
    rgba(138, 43, 226, 0.03) 100%);
}

.session-notes__item--recap .session-notes__item-title {
  color: #b388ff;
}

.session-notes__item--recap::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5rem;
  background: var(--icon-sparkles) no-repeat center / contain;
}

/* Notes List */
.session-notes__list {
  flex: 1;
  min-height: 120px;
  max-height: 300px;
  overflow-y: auto;
  padding: 0.75rem;
}

.session-notes__loading,
.session-notes__error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  color: #888;
  font-size: 0.875rem;
}

.session-notes__error {
  color: #ff6b6b;
}

.session-notes__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
  color: #888;
  text-align: center;
}

.session-notes__empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.session-notes__empty p {
  margin: 0;
  font-size: 0.875rem;
}

/* Note Items */
.session-notes__item {
  background: #0a0a14;
  border: 1px solid #2a2a4e;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  transition: border-color 0.15s ease;
}

.session-notes__item:last-child {
  margin-bottom: 0;
}

.session-notes__item:hover {
  border-color: #3a3a5e;
}

.session-notes__item--pinned {
  border-color: #00d4ff;
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.08) 0%,
    rgba(0, 212, 255, 0.02) 100%);
}

.session-notes__item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.375rem;
}

.session-notes__item-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-notes__item-time {
  font-size: 0.6875rem;
  color: #666;
}

.session-notes__item-content {
  font-size: 0.8125rem;
  color: #b0b0b0;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.session-notes__item-actions {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}

.session-notes__item-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 0.25rem;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}

.session-notes__item-btn:hover {
  color: #00d4ff;
}

.session-notes__item-btn--delete:hover {
  color: #ff6b6b;
}

/* Separator */
.session-notes__separator {
  height: 1px;
  background: #3a3a5e;
  margin: 0;
}

/* Add Form */
.session-notes__add-form {
  padding: 1rem 1.25rem;
  background: #151525;
}

.session-notes__label {
  display: block;
  font-size: 0.75rem;
  color: #00d4ff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.session-notes__input-row {
  margin-bottom: 0.5rem;
}

.session-notes__title-input,
.session-notes__content-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: #0a0a14;
  border: 1px solid #2a2a4e;
  border-radius: 6px;
  color: #e0e0e0;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.8125rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.session-notes__title-input:focus,
.session-notes__content-input:focus {
  outline: none;
  border-color: #00d4ff;
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.session-notes__title-input::placeholder,
.session-notes__content-input::placeholder {
  color: #555;
}

.session-notes__content-input {
  resize: vertical;
  min-height: 60px;
}

.session-notes__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.session-notes__pin-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: #888;
  cursor: pointer;
}

.session-notes__pin-label input {
  accent-color: #00d4ff;
}

.session-notes__pin-icon {
  font-size: 0.875rem;
}

/* Buttons */
.session-notes__btn {
  padding: 0.5rem 1rem;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  background: #2a2a4e;
  color: #e0e0e0;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-notes__btn:hover {
  background: #3a3a5e;
  border-color: #00d4ff;
}

.session-notes__btn--primary {
  background: #00d4ff;
  border-color: #00d4ff;
  color: #000;
  font-weight: 600;
}

.session-notes__btn--primary:hover {
  background: #00b8e6;
  border-color: #00b8e6;
}

.session-notes__link {
  font-size: 0.75rem;
  color: #888;
  text-decoration: none;
  transition: color 0.15s ease;
}

.session-notes__link:hover {
  color: #00d4ff;
  text-decoration: underline;
}

/**
 * OOC Modals — Schedule & Responsive
 * =====================================
 * Session schedule modal and responsive adjustments.
 */

 * SESSION SCHEDULE MODAL
 * ======================================== */

/* Campaign Info */
.session-schedule__campaign {
  padding: 0.75rem 1.25rem;
  background: #151525;
  border-bottom: 1px solid #3a3a5e;
}

.session-schedule__campaign-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-schedule__no-campaign {
  font-size: 0.875rem;
  color: #888;
  font-style: italic;
}

/* Next Session */
.session-schedule__next {
  padding: 1rem 1.25rem;
}

.session-schedule__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: #888;
  font-size: 0.875rem;
}

.session-schedule__error {
  text-align: center;
  padding: 1rem;
  color: #ff6b6b;
  font-size: 0.875rem;
}

.session-schedule__next-session {
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.12) 0%,
    rgba(0, 212, 255, 0.04) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

.session-schedule__next-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-schedule__next-icon {
  font-size: 1.5rem;
}

.session-schedule__next-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00d4ff;
  font-weight: 600;
}

.session-schedule__next-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 0.75rem;
}

.session-schedule__next-datetime {
  margin-bottom: 0.375rem;
}

.session-schedule__next-date {
  font-size: 0.9375rem;
  color: #e0e0e0;
}

.session-schedule__next-time {
  font-size: 0.875rem;
  color: #888;
}

.session-schedule__next-relative {
  font-size: 0.75rem;
  color: #00d4ff;
  font-weight: 600;
}

.session-schedule__no-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  color: #888;
}

.session-schedule__no-next-icon {
  font-size: 1.25rem;
  opacity: 0.5;
}

.session-schedule__no-next-text {
  font-size: 0.875rem;
}

/* Proposals */
.session-schedule__proposals {
  padding: 0 1.25rem 1rem;
  max-height: 250px;
  overflow-y: auto;
}

.session-schedule__proposals-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-schedule__proposals-icon {
  font-size: 1rem;
}

.session-schedule__proposals-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #00d4ff;
  font-weight: 600;
}

.session-schedule__proposals-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Proposal Card */
.session-schedule__proposal {
  background: #0a0a14;
  border: 1px solid #2a2a4e;
  border-radius: 8px;
  padding: 0.875rem;
  transition: border-color 0.15s ease;
}

.session-schedule__proposal:hover {
  border-color: #3a3a5e;
}

.session-schedule__proposal--voted {
  border-color: rgba(0, 212, 255, 0.3);
  background: linear-gradient(180deg,
    rgba(0, 212, 255, 0.05) 0%,
    rgba(0, 212, 255, 0.02) 100%);
}

.session-schedule__proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.session-schedule__proposal-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-schedule__proposal-status {
  font-size: 0.6875rem;
  color: #888;
}

.session-schedule__proposal-desc {
  font-size: 0.75rem;
  color: #888;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.session-schedule__proposal-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.session-schedule__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: #1a1a2e;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-schedule__slot:hover:not(:disabled) {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.1);
}

.session-schedule__slot--voted {
  border-color: #00d4ff;
  background: rgba(0, 212, 255, 0.15);
  cursor: default;
}

.session-schedule__slot-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: #e0e0e0;
}

.session-schedule__slot-time {
  font-size: 0.6875rem;
  color: #888;
}

.session-schedule__slot-check {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.session-schedule__proposal-voted-msg {
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: #00d4ff;
  text-align: center;
}

/* Empty State */
.session-schedule__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  text-align: center;
}

.session-schedule__empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  opacity: 0.5;
}

.session-schedule__empty-text {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  color: #e0e0e0;
}

.session-schedule__empty-hint {
  margin: 0;
  font-size: 0.8125rem;
  color: #888;
  font-style: italic;
}

/* Footer */
.session-schedule__btn {
  padding: 0.5rem 1rem;
  border: 1px solid #3a3a5e;
  border-radius: 6px;
  background: #2a2a4e;
  color: #e0e0e0;
  font-family: 'Fira Code', 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.session-schedule__btn:hover {
  background: #3a3a5e;
  border-color: #00d4ff;
}

.session-schedule__link {
  font-size: 0.75rem;
  color: #888;
  text-decoration: none;
  transition: color 0.15s ease;
}

.session-schedule__link:hover {
  color: #00d4ff;
  text-decoration: underline;
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 500px) {
  .session-notes-dialog,
  .session-schedule-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 90vh;
    margin: 0;
    margin-top: auto;
  }

  .session-notes-dialog__content,
  .session-schedule-dialog__content {
    border-radius: 12px 12px 0 0;
    max-height: 90vh;
  }

  .session-notes__list {
    max-height: 200px;
  }

  .session-schedule__proposals {
    max-height: 180px;
  }
}
/**
 * OOC Sidebar Modals — Import Hub
 * ==================================
 * Out-of-character sidebar modals for session notes and scheduling.
 *
 * Decomposed into focused files under ooc_modals/ for maintainability.


 */
/**
 * Script Room — Screenplay Format
 * ==================================
 * Room layout, screenplay formatting elements (sluglines, action, dialogue, etc).
 */

/* ========================================
 * SCRIPT ROOM - Full-page Screenplay View
 * ========================================
 * A dedicated room rendering the game as a screenplay document.
 * Dark background, centered white page, interactive margins.
 */

/* ----------------------------------------
 * Room Container: Dark background
 * ---------------------------------------- */
.script-room {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--script-bg);
  overflow: hidden;
}

/* ----------------------------------------
 * Script Room Header: Minimal, top-right
 * ---------------------------------------- */
.script-room__header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  flex-shrink: 0;
  z-index: var(--z-sticky);
}

.script-room__header-label {
  font-family: var(--screenplay-font);
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.script-room__exit-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--screenplay-font);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.script-room__exit-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ----------------------------------------
 * Script Room Body: Scrollable content area
 * ---------------------------------------- */
.script-room__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ----------------------------------------
 * Script Page: White page container
 * ---------------------------------------- */
.script-room__page-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-8) var(--space-4);
  display: flex;
  justify-content: center;
}

.script-room__page {
  width: var(--script-page-width);
  max-width: 100%;
  min-height: 100%;
  background: var(--script-page-bg);
  box-shadow: var(--script-page-shadow);
  padding: 1in 1.25in;
  font-family: var(--screenplay-font);
  font-size: 12pt;
  line-height: 1.5;
  color: var(--screenplay-text);
  position: relative;
}

/* ----------------------------------------
 * Screenplay Elements (reuse from narrative_panel.css)
 * ---------------------------------------- */

/* Scene Headings / Sluglines */
.script-room__scene-heading {
  text-transform: uppercase;
  font-weight: bold;
  margin: 24pt 0 12pt 0;
  padding: 0;
  color: var(--screenplay-text);
  letter-spacing: normal;
}

.script-room__scene-heading:first-child {
  margin-top: 0;
}

/* Action Lines (DM narration) */
.script-room__action {
  margin: 12pt 0;
  color: var(--screenplay-text);
}

/* Character Name (centered in screenplay format) */
.script-room__character-name {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  margin: 12pt 0 0 0;
  padding-left: 2.5in;
  color: var(--screenplay-action);
  letter-spacing: 0.05em;
}

/* Player character name distinguished */
.script-room__character-name--player {
  color: var(--screenplay-player);
}

/* Parenthetical */
.script-room__parenthetical {
  display: block;
  font-style: italic;
  font-size: 0.9em;
  color: var(--screenplay-muted);
  padding-left: 2in;
  margin: 0 0 2pt 0;
}

.script-room__parenthetical::before {
  content: '(';
}

.script-room__parenthetical::after {
  content: ')';
}

/* Dialogue */
.script-room__dialogue {
  margin: 0 0 12pt 0;
  padding-left: 1.5in;
  max-width: 4in;
  color: var(--screenplay-text);
}

.script-room__dialogue--player {
  color: var(--screenplay-player);
}

/* System Messages / Stage Directions */
.script-room__stage-direction {
  font-style: italic;
  color: var(--screenplay-muted);
  margin: 12pt 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--screenplay-muted);
}

/* Transitions */
.script-room__transition {
  text-align: right;
  text-transform: uppercase;
  font-weight: bold;
  margin: 24pt 0;
}

/* Roll Results */
.script-room__roll-result {
  color: var(--screenplay-muted);
  font-size: 10pt;
  font-style: italic;
  margin: 4pt 0 12pt 1.5in;
}

/* Quick Actions (subtle inline choices) */
.script-room__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 12pt 0;
  padding-left: 1.5in;
}

.script-room__quick-action {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  color: var(--screenplay-player);
  font-family: var(--screenplay-font);
  font-size: 10pt;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.script-room__quick-action:hover {
  background: rgba(0, 68, 136, 0.08);
  border-color: var(--screenplay-player);
}

/* ----------------------------------------
/**
 * Script Room — Cursor and Margin Notes
 * =======================================
 * Inline cursor input, blinking cursor, and margin note annotations.
 */

 * Cursor Input: Inline with document
 * ---------------------------------------- */
.script-room__cursor-input {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: 12pt;
  padding-left: 1.5in;
  max-width: 4in;
  min-height: 1.5em;
}

.script-room__cursor-prompt {
  color: var(--screenplay-player);
  font-weight: 600;
  user-select: none;
  flex-shrink: 0;
}

.script-room__cursor-field {
  flex: 1;
  min-height: 1.5em;
  outline: none;
  font-family: var(--screenplay-font);
  font-size: 12pt;
  line-height: 1.5;
  color: var(--screenplay-player);
  caret-color: var(--screenplay-player);
  border: none;
  background: transparent;
  padding: 0;
  word-wrap: break-word;
}

.script-room__cursor-field:empty::before {
  content: attr(data-placeholder);
  color: var(--screenplay-muted);
  pointer-events: none;
}

/* Blinking cursor animation */
.script-room__cursor-field:focus {
  outline: none;
}

/* ----------------------------------------
 * Margin Area: Interactive sidebar
 * ---------------------------------------- */
.script-room__margin {
  width: var(--script-margin-width);
  flex-shrink: 0;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.script-room__margin-title {
  font-family: var(--screenplay-font);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Margin Notes */
.script-room__margin-note {
  background: var(--script-margin-note-bg);
  border: 1px solid var(--script-margin-note-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--screenplay-font);
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

.script-room__margin-note-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.script-room__margin-note--npc {
  border-left: 2px solid var(--color-entity-npc);
}

.script-room__margin-note--location {
  border-left: 2px solid var(--color-entity-location);
}

.script-room__margin-note--lore {
  border-left: 2px solid var(--color-entity-lore);
}

.script-room__margin-note--comment {
  border-left: 2px solid var(--color-accent-warning);
}
/**
 * Script Room — Popover and Responsive
 * =======================================
 * Highlight popover, print styles, and responsive mobile layout.
 */


/* ----------------------------------------
 * Highlight Popover (for text selection)
 * ---------------------------------------- */
.script-room__highlight-popover {
  position: absolute;
  display: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  gap: var(--space-1);
  z-index: var(--z-tooltip);
  box-shadow: var(--elevation-floating);
}

.script-room__highlight-popover.visible {
  display: flex;
}

.script-room__highlight-btn {
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast);
}

.script-room__highlight-btn:hover {
  background: var(--color-bg-hover);
}

/* ----------------------------------------
 * Dice Roll Modal Overlay
 * ---------------------------------------- */
.script-room__dice-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.script-room__dice-modal.visible {
  display: flex;
}

.script-room__dice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.script-room__dice-card {
  position: relative;
  background: var(--script-page-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--elevation-modal);
  font-family: var(--screenplay-font);
  color: var(--screenplay-text);
  text-align: center;
  min-width: 280px;
  max-width: 400px;
}

.script-room__dice-title {
  font-size: 14pt;
  font-weight: bold;
  margin-bottom: var(--space-2);
}

.script-room__dice-description {
  font-size: 11pt;
  color: var(--screenplay-muted);
  margin-bottom: var(--space-6);
}

.script-room__dice-result {
  font-size: 36pt;
  font-weight: bold;
  margin: var(--space-4) 0;
  color: var(--screenplay-text);
}

.script-room__dice-result--success {
  color: #2d8a2d;
}

.script-room__dice-result--failure {
  color: #c0392b;
}

.script-room__dice-roll-btn {
  display: inline-block;
  padding: var(--space-2) var(--space-6);
  background: var(--screenplay-player);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--screenplay-font);
  font-size: 12pt;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.script-room__dice-roll-btn:hover {
  opacity: 0.85;
}

.script-room__dice-dismiss-btn {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--space-1) var(--space-4);
  background: transparent;
  border: 1px solid var(--screenplay-muted);
  border-radius: var(--radius-sm);
  font-family: var(--screenplay-font);
  font-size: 10pt;
  color: var(--screenplay-muted);
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.script-room__dice-dismiss-btn:hover {
  border-color: var(--screenplay-text);
  color: var(--screenplay-text);
}

/* ----------------------------------------
 * Responsive: Collapse margin on small screens
 * ---------------------------------------- */
@media (max-width: 1200px) {
  .script-room__margin {
    display: none;
  }

  .script-room__page {
    padding: 0.5in 0.75in;
  }
}

@media (max-width: 768px) {
  .script-room__page {
    padding: var(--space-4) var(--space-6);
    font-size: 11pt;
  }

  .script-room__character-name {
    padding-left: 1.5in;
  }

  .script-room__parenthetical {
    padding-left: 1.2in;
  }

  .script-room__dialogue,
  .script-room__cursor-input {
    padding-left: 1in;
    max-width: none;
  }
}

/* ----------------------------------------
 * Scrollbar Styling (dark theme for page wrapper)
 * ---------------------------------------- */
.script-room__page-wrapper::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

.script-room__page-wrapper::-webkit-scrollbar-track {
  background: var(--script-bg);
}

.script-room__page-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--scrollbar-thumb-radius);
}

.script-room__page-wrapper::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Margin scrollbar */
.script-room__margin::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
}

.script-room__margin::-webkit-scrollbar-track {
  background: transparent;
}

.script-room__margin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--scrollbar-thumb-radius);
}
/**
 * Script Room — Import Hub
 * ==========================
 * Full-page screenplay view with formatting, annotations, and responsive layout.
 *
 * Decomposed into focused files under script_room/ for maintainability.



 */
/**
 * Billing — Base Styles
 * =======================
 * Billing page layout, pricing cards, feature lists, plan tiers, and progress indicators.
 */

/**
 * Billing Page Styles
 * ===================
 * Subscription and billing management page with
 * plan cards, usage meters, and action buttons.
 */

/* ==========================================
   CSS Custom Properties (Billing-specific)
   ========================================== */

.billing-page {
  /* Base page styles */
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;

  /* Billing-specific custom properties */
  --billing-card-radius: 12px;
  --billing-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  --billing-card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.3);
  --billing-transition: 0.2s ease;
  --billing-spacing-xs: 4px;
  --billing-spacing-sm: 8px;
  --billing-spacing-md: 16px;
  --billing-spacing-lg: 24px;
  --billing-spacing-xl: 32px;
}

/* ==========================================
   Base Layout
   ========================================== */

.billing-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-lg);
}

.billing-header {
  text-align: center;
  margin-bottom: var(--billing-spacing-lg);
}

.billing-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-accent-primary);
  margin-bottom: var(--billing-spacing-sm);
}

.billing-title::before {
  content: '> ';
  color: var(--color-text-muted);
}

.billing-subtitle {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

/* ==========================================
   Flash Messages
   ========================================== */

.billing-page .flash-messages {
  margin-bottom: var(--billing-spacing-lg);
}

.billing-page .flash {
  padding: var(--billing-spacing-md);
  border-radius: var(--billing-card-radius);
  font-size: 0.875rem;
  margin-bottom: var(--billing-spacing-md);
  display: flex;
  align-items: center;
  gap: var(--billing-spacing-sm);
}

.billing-page .flash.alert {
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid var(--color-accent-error);
  color: var(--color-accent-error);
}

.billing-page .flash.notice {
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid var(--color-accent-secondary);
  color: var(--color-accent-secondary);
}

/* ==========================================
   Billing Notice (System Messages)
   ========================================== */

.billing-notice {
  padding: var(--billing-spacing-md);
  border-radius: var(--billing-card-radius);
  margin-bottom: var(--billing-spacing-lg);
}

.billing-notice--warning {
  background: rgba(229, 192, 123, 0.1);
  border: 1px solid var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.billing-notice strong {
  display: block;
  margin-bottom: var(--billing-spacing-sm);
}

.billing-notice p {
  margin: 0;
  font-size: 0.875rem;
}

/* ==========================================
   Billing Cards
   ========================================== */

.billing-card {
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-elevated));
  border: 1px solid var(--color-border-default);
  border-radius: var(--billing-card-radius);
  margin-bottom: var(--billing-spacing-lg);
  box-shadow: var(--billing-card-shadow);
  overflow: hidden;
}

.billing-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--billing-spacing-md) var(--billing-spacing-lg);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
}

.billing-card__header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.billing-card__body {
  padding: var(--billing-spacing-lg);
}

/* ==========================================
   Tier Badges
   ========================================== */

.billing-tier {
  display: inline-block;
  padding: var(--billing-spacing-xs) var(--billing-spacing-md);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.billing-tier--free {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
  border: 1px solid var(--color-accent-secondary);
}

.billing-tier--pro {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
}

.billing-tier--dm {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-tertiary);
  border: 1px solid var(--color-accent-tertiary);
}

/* ==========================================
   Plan Details
   ========================================== */

.billing-plan-details {
  margin-bottom: var(--billing-spacing-lg);
}

.billing-plan-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--billing-spacing-sm);
}

.billing-plan-price .price-amount {
  color: var(--color-accent-primary);
}

.billing-plan-price .price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.billing-status {
  display: inline-block;
  padding: var(--billing-spacing-sm) var(--billing-spacing-md);
  border-radius: var(--billing-card-radius);
  font-size: 0.875rem;
  margin-top: var(--billing-spacing-sm);
}

.billing-status--canceled {
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid var(--color-accent-error);
  color: var(--color-accent-error);
}

.billing-status--past_due {
  background: rgba(229, 192, 123, 0.1);
  border: 1px solid var(--color-accent-warning);
  color: var(--color-accent-warning);
}

.billing-status--trialing {
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* ==========================================
   Usage Summary
   ========================================== */

.billing-usage {
  margin-bottom: var(--billing-spacing-lg);
  padding-top: var(--billing-spacing-lg);
  border-top: 1px solid var(--color-border-default);
}

.billing-usage h3 {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--billing-spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--billing-spacing-md);
}

.usage-item {
  background: var(--color-bg-primary);
  padding: var(--billing-spacing-md);
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
}

.usage-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--billing-spacing-xs);
}

.usage-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--billing-spacing-sm);
}

.usage-bar {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.usage-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-secondary), var(--color-accent-primary));
  border-radius: 3px;
  transition: width var(--billing-transition);
}
/**
 * Billing — Actions and Forms
 * =============================
 * Billing action buttons, payment form, confirmation modals.
 */


/* ==========================================
   Billing Actions
   ========================================== */

.billing-actions {
  display: flex;
  gap: var(--billing-spacing-md);
  flex-wrap: wrap;
  padding-top: var(--billing-spacing-lg);
  border-top: 1px solid var(--color-border-default);
}

.billing-actions .btn {
  padding: var(--billing-spacing-sm) var(--billing-spacing-lg);
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--billing-transition), color var(--billing-transition), border-color var(--billing-transition);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.billing-actions .btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.billing-actions .btn--primary:hover {
  background: var(--color-accent-primary-hover, var(--color-accent-primary));
  filter: brightness(1.1);
}

.billing-actions .btn--secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
}

.billing-actions .btn--secondary:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.billing-actions .btn--danger {
  background: transparent;
  color: var(--color-accent-error);
  border: 1px solid var(--color-accent-error);
}

.billing-actions .btn--danger:hover {
  background: rgba(224, 108, 117, 0.1);
}

/* ==========================================
   Invoice Preview
   ========================================== */

.billing-invoice {
  margin-top: var(--billing-spacing-lg);
  padding: var(--billing-spacing-md);
  background: var(--color-bg-primary);
  border-radius: 6px;
  border: 1px solid var(--color-border-default);
}

.billing-invoice h4 {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--billing-spacing-xs) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.billing-invoice p {
  margin: 0;
  color: var(--color-text-primary);
}

/* ==========================================
   Available Plans Grid
   ========================================== */

.billing-plans {
  margin-bottom: var(--billing-spacing-lg);
}

.billing-plans h2 {
  font-size: 1.25rem;
  color: var(--color-text-primary);
  margin-bottom: var(--billing-spacing-lg);
  text-align: center;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--billing-spacing-lg);
}

/* ==========================================
   Plan Cards
   ========================================== */

.plan-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--billing-card-radius);
  padding: var(--billing-spacing-lg);
  display: flex;
  flex-direction: column;
  transition: background var(--billing-transition), color var(--billing-transition), border-color var(--billing-transition), transform var(--billing-transition);
  position: relative;
}

.plan-card:hover {
  box-shadow: var(--billing-card-shadow-hover);
  transform: translateY(-2px);
}

.plan-card--featured {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 20px rgba(97, 175, 239, 0.1);
}

.plan-card--current {
  border-color: var(--color-accent-secondary);
  background: linear-gradient(135deg, var(--color-bg-secondary), rgba(152, 195, 121, 0.05));
}

.plan-card__badge {
  display: inline-block;
  padding: var(--billing-spacing-xs) var(--billing-spacing-md);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--billing-spacing-md);
  align-self: flex-start;
}

.plan-card__badge[data-tier="free"] {
  background: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
}

.plan-card__badge[data-tier="pro"] {
  background: rgba(97, 175, 239, 0.2);
  color: var(--color-accent-primary);
}

.plan-card__badge[data-tier="dm"] {
  background: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-tertiary);
}

.plan-card__price {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: var(--billing-spacing-md);
}

.plan-card__price .price-amount {
  color: var(--color-text-primary);
}

.plan-card__price .price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--billing-spacing-lg) 0;
  flex: 1;
}

.plan-card__features li {
  padding: var(--billing-spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.plan-card__features li:last-child {
  border-bottom: none;
}

.plan-card__features li::before {
  content: '✓ ';
  color: var(--color-accent-secondary);
  font-weight: 700;
}

.plan-card__action {
  margin-top: auto;
}

.plan-card__action .btn {
  width: 100%;
  padding: var(--billing-spacing-md);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--billing-transition), color var(--billing-transition), border-color var(--billing-transition), transform var(--billing-transition);
  border: none;
}

.plan-card__action .btn--primary {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.plan-card__action .btn--primary:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

.current-plan-badge {
  display: block;
  text-align: center;
  padding: var(--billing-spacing-md);
  background: rgba(152, 195, 121, 0.1);
  border: 1px solid var(--color-accent-secondary);
  border-radius: 6px;
  color: var(--color-accent-secondary);
  font-weight: 600;
  font-size: 0.875rem;
}
/**
 * Billing — Footer and Links
 * ============================
 * Footer links, return navigation, and supplemental billing links.
 */


/* ==========================================
   Footer Links
   ========================================== */

.billing-page .return-link {
  text-align: center;
  margin-top: var(--billing-spacing-xl);
  padding-top: var(--billing-spacing-lg);
  border-top: 1px solid var(--color-border-default);
}

.billing-page .return-link a {
  color: var(--color-accent-primary);
  text-decoration: none;
  transition: color var(--billing-transition);
}

.billing-page .return-link a:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.billing-page .footer-info {
  text-align: center;
  margin-top: var(--billing-spacing-lg);
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

/* ==========================================
   Responsive Design
   ========================================== */

@media (max-width: 768px) {
  .billing-container {
    padding: var(--billing-spacing-md);
  }

  .billing-card__header {
    flex-direction: column;
    gap: var(--billing-spacing-sm);
    text-align: center;
  }

  .billing-actions {
    flex-direction: column;
  }

  .billing-actions .btn {
    width: 100%;
  }

  .usage-grid {
    grid-template-columns: 1fr;
  }

  .plans-grid {
    grid-template-columns: 1fr;
  }
}
/**
 * Billing Page — Import Hub
 * ===========================
 * Subscription billing page with pricing cards, plan tiers, and payment forms.
 *
 * Decomposed into focused files under billing/ for maintainability.



 */
/**
 * Selection Panel — Header and Chips
 * =====================================
 * Panel container, creation options container, header, context, and chip styles.
 */

/**
 * Selection Panel (shared primitive)
 * ==================================
 * Single source of truth for the purple-gradient selection-panel chrome used
 * by spells, languages, and creation-cards (race/class/background/etc.).
 *
 * Extracted (#4168, narrative shape Phase 4) from three duplicated blocks:
 *   - `.spell-selection-panel` family in `_terminal_show.css:1473-1664`
 *   - `.language-selection-panel` reuse via `creation_languages_controller.js`
 *   - `.creation-options` overlay block (#4166) in `_creation_cards.css`
 *
 * Naming
 * ------
 * Canonical primitive: `.selection-panel` + BEM children
 *   `.selection-panel__header`, `__title`, `__count`, `__grid`,
 *   `.selection-panel__chip`, `.selection-panel__confirm-area`,
 *   `.selection-panel__confirm`.
 *
 * Type modifiers describe what's being chosen and only override what differs:
 *   `.selection-panel--spells`     accents, school-badge palette
 *   `.selection-panel--languages`  accents (script badge supplied inline)
 *   `.selection-panel--race`       card-grid layout (cards, not chips)
 *   `.selection-panel--class`      card-grid layout
 *   (creation-cards categories all use the card-grid behaviour today)
 *
 * Legacy aliases
 * --------------
 * Existing controllers/markup (`creation_spells_controller.js`,
 * `creation_languages_controller.js`) emit literal `.spell-selection-panel`,
 * `.spell-header`, `.spell-grid`, `.spell-chip`, `.spell-confirm-area`,
 * `.spell-confirm-btn`, etc. Likewise `creation_card_html.js` emits
 * `.creation-options`, `.creation-options__header`, etc. To avoid touching ~15
 * call sites across 4+ files in this refactor (and risk regressions), each
 * rule below grouped-selectors the canonical class with the legacy classes,
 * so both spellings render identically. New code should prefer the canonical
 * `.selection-panel` family.
 */

/* ========================================
   PANEL ROOT — quiet chrome (default) + gradient variant (spells)
   ----------------------------------------
   #4273 (audit finding 12.1): the purple gradient + 2px accent border was
   spreading to every selection panel (race, class, background, languages,
   spells). Demoted to the spells-only variant; race/class/etc. inherit the
   quieter base chrome. The shared base remains visually consistent (margin,
   padding, slide-in, accent border) but loses the heavy gradient signal so
   the gradient itself stays a distinctive, single-purpose idiom rather than
   a generic "selection panel" template.
   ======================================== */

.selection-panel,
.spell-selection-panel,
.creation-options {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-lg);
  animation: slideIn var(--duration-normal) ease-out;
}

/* Spells variant retains the original gradient + accent border per JP's
   stated preference (`/ai-slop-check` audit 12.1). One panel type owns the
   distinctive purple-gradient idiom; everything else uses the quiet base. */
.spell-selection-panel,
.selection-panel--spells {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
  border: 2px solid rgba(139, 92, 246, 0.5);
}

/* `.creation-options` carries extra defensive properties from #1343, #839,
   #2063, #2961 — preserved exactly. Folded back in here as a creation-options
   addendum so the merged primitive doesn't lose them. */
.creation-options {
  /* Cards expand to full natural height — parent panel handles scrolling.
     Removes nested scroll that trapped mouse wheel events (#1343). */
  max-height: none;
  overflow-y: visible;
  /* Keep cards below sticky creation-progress bar (--z-sticky) when
     scrolling within the narrative output area (#839). */
  position: relative;
  z-index: var(--z-raised);
  /* Ensure cards receive pointer events even when narrative-output scroll
     container intercepts them (#2063). */
  pointer-events: auto;
  isolation: isolate;
  /* #2961 / #4257 belt-and-suspenders: root cause was a missing
     `flex-wrap: wrap` on `.creation-options__header` (now fixed above).
     Keeping `min-width: 0` here so any future ancestor flex context that
     forgets `min-width: 0` can't re-trigger the 1ch char-stack via this
     leaf. Cheap and harmless. */
  min-width: 0;
}

.creation-options--selected {
  transition: opacity 0.3s ease;
}

/* Limit-reached flash (creation-cards previously used a different keyframe;
   spell/language panels rely on the `limit-reached` class added/removed in
   JS). Both routes flash the border briefly. */
.creation-options--limit-reached {
  animation: limit-flash 0.3s ease;
}

@keyframes limit-flash {
  /* `to`/`from` use `currentColor`-equivalent transparency so the flash
     resolves back to whatever border is configured on the panel root —
     `.creation-options` (0.3) and `.spell-selection-panel` (0.5) both look
     correct. Previously hard-coded to 0.5 which was wrong for the demoted
     creation-options chrome. */
  0%, 100% { border-color: rgba(139, 92, 246, 0.3); }
  50% { border-color: var(--color-warning-fg, #f59e0b); }
}

/* ========================================
   HEADER ROW — icon, title, count, controls
   ======================================== */

.selection-panel__header,
.spell-header,
.creation-options__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  /* #2961 / #4257 ROOT CAUSE: the header is a row flex container with three
     children: the heading (`__context`), an optional pick-for-me button, and
     an optional count chip. The pick-for-me button has `white-space: nowrap`
     and refuses to shrink. Without `flex-wrap: wrap`, the heading is forced
     to flex-shrink to a sub-`min-content` width on narrow viewports (~400px
     on iOS Safari with the right-panels hidden). When the container is
     narrower than the longest word, `overflow-wrap: break-word` falls
     through to character-by-character wrapping ("c / h / o / o / s / e").
     Allowing the row to wrap lets the button drop to a second line so the
     heading keeps its full width — the structural fix the leaf-level
     `min-width: 0` defenses below were papering over. The peer
     `.spell-header` rule in application.css already had `flex-wrap: wrap`;
     this brings the canonical primitive in line with that rule. */
  flex-wrap: wrap;
  min-width: 0;
}

.selection-panel__icon,
.spell-icon {
  font-size: var(--font-size-2xl);
}

.selection-panel__title,
.spell-title,
.creation-options__context {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

/* #4273 (audit finding 12.4): the creation-options heading sits on a darker
   neutral panel (since 12.1 demoted the gradient) — purple-on-purple no
   longer applies, but moving the heading to the high-contrast text token is
   still the WCAG AA win. Token measures at 11.5:1 against #14141e per the
   `_tokens.css` annotation; comfortably clears the 4.5:1 AA target. The
   spell variant keeps its purple title (it lives on the gradient, where the
   purple is intentional contrast against the lighter gradient background). */
.creation-options__context {
  color: var(--color-text-primary);
}

/* `.creation-options__context` carries word-wrap defenses from #2961 — kept
   as belt-and-suspenders alongside the structural `flex-wrap: wrap` fix on
   the header above (#4257). Tied to this selector only so the simpler
   spell/language headers stay identical to today's rendering. */
.creation-options__context {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  min-width: 0;
}

.selection-panel__count,
.spell-count,
.creation-options__count {
  margin-left: auto;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(139, 92, 246, 0.3);
  font-size: var(--font-size-sm);
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

.selection-panel__count.is-complete,
.spell-count.complete,
.creation-options__count--complete {
  background: rgba(34, 197, 94, 0.3);
  color: var(--color-success-fg);
}

/* `.creation-options__count` is laid out via the footer (justify-content:
   space-between), not pushed by margin-left:auto in the header — drop the
   header-pin for that variant only. */
.creation-options__count {
  margin-left: 0;
}

/* ========================================
   GRID — chip-style (spells/languages) vs card-style (creation-cards)
/**
 * Selection Panel — Grid and Cards
 * ==================================
 * Grid layouts, option cards, single-select rows, multi-select states.
 */

   ======================================== */

.selection-panel__grid,
.spell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
  padding: var(--space-1);
}

.selection-panel__grid::-webkit-scrollbar,
.spell-grid::-webkit-scrollbar {
  width: var(--scrollbar-width-thin);
}

.selection-panel__grid::-webkit-scrollbar-track,
.spell-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
}

.selection-panel__grid::-webkit-scrollbar-thumb,
.spell-grid::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-sm);
}

/* ========================================
   CHIP — compact selectable item
   (spells, languages — and the .selection-panel--chips modifier)
   ======================================== */

.selection-panel__chip,
.spell-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: var(--font-mono);
  color: rgba(255, 255, 255, 0.8);
}

.selection-panel__chip:hover:not(.is-selected):not(.selected),
.spell-chip:hover:not(.selected) {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
}

.selection-panel__chip.is-selected,
.selection-panel__chip.selected,
.spell-chip.selected {
  background: rgba(139, 92, 246, 0.3);
  border-color: var(--color-accent-purple);
  color: var(--color-text-primary);
}

.selection-panel__chip.is-hidden,
.spell-chip.hidden {
  display: none;
}

/* School/script badge — small accent pill inside a chip. The base shape is
   neutral; per-school colors live on .selection-panel--spells (the only
   variant with a real school taxonomy). */
.selection-panel__chip-badge,
.spell-school-badge {
  font-size: var(--font-size-xs);
  padding: var(--space-0-5) var(--space-1-5);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  text-transform: uppercase;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.5px;
  min-width: 28px;
  text-align: center;
}

.selection-panel__chip-name,
.spell-name {
  font-size: var(--font-size-xs);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection-panel__chip-check,
.spell-check {
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}

/* ========================================
   CONFIRM AREA + BUTTON
   ======================================== */

.selection-panel__confirm-area,
.spell-confirm-area {
  margin-top: var(--space-4);
  display: flex;
  justify-content: center;
}

.selection-panel__confirm,
.spell-confirm-btn {
  padding: var(--space-2-5) var(--space-6);
  background: var(--color-accent-purple);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}

.selection-panel__confirm:hover:not(:disabled),
.spell-confirm-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-purple) 70%, black);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.selection-panel__confirm:disabled,
.selection-panel__confirm.is-disabled,
.spell-confirm-btn:disabled,
.spell-confirm-btn.disabled {
  background: rgba(139, 92, 246, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* ========================================
   CREATION-OPTIONS variant — card grid + bespoke footer
   The card-grid layout differs from the chip grid (full-width flex columns,
   not auto-fill 180px); rule for `.creation-options__grid` lives in
   `_creation_cards.css` so it stays adjacent to `.creation-card`.
   ======================================== */

.creation-options__footer {
  /* Quieter than the prior bordered row; the panel border + gradient
     already separate the footer visually. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: none;
}

.creation-options__confirm {
  /* Reset native button defaults so the gradient panel chrome does not show
     through the OS button styling on Safari/Firefox. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  padding: var(--space-2-5) var(--space-6);
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-accent-purple);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.creation-options__confirm--disabled {
  background-color: rgba(139, 92, 246, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

.creation-options__confirm--ready {
  opacity: 1;
}

.creation-options__confirm--ready:hover {
  background-color: color-mix(in srgb, var(--color-accent-purple) 70%, black);
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* In multi-select mode, selected cards show checkmark but no spinner */
.creation-options[data-max-select]:not([data-max-select="1"]) .creation-card--selected::after {
  content: '✓';
  border: none;
  animation: none;
}

/**
 * Selection Panel — Spells Variant
 * ==================================
 * Spell school filter tabs, school badge colors for spells variant.
 */

/* ========================================
   SPELLS modifier — school filter tabs and per-school badge palette
   These are spell-domain data and live on `--spells` only.
   ======================================== */

.school-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin-bottom: var(--space-3);
}

.school-tab {
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.school-tab:hover {
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
  color: var(--color-accent-purple);
}

.school-tab.active {
  background: rgba(139, 92, 246, 0.4);
  border-color: rgba(139, 92, 246, 0.6);
  color: var(--color-text-primary);
}

/* School-specific badge colors — only meaningful in the spells variant. */
.spell-school-badge[data-school="Abjuration"] { background: rgba(59, 130, 246, 0.3); color: var(--color-accent-fg); }
.spell-school-badge[data-school="Conjuration"] { background: rgba(245, 158, 11, 0.3); color: var(--color-warning-fg); }
.spell-school-badge[data-school="Divination"] { background: rgba(139, 92, 246, 0.3); color: var(--color-accent-purple); }
.spell-school-badge[data-school="Enchantment"] { background: rgba(236, 72, 153, 0.3); color: var(--color-accent-purple); }
.spell-school-badge[data-school="Evocation"] { background: rgba(239, 68, 68, 0.3); color: var(--color-danger-fg); }
.spell-school-badge[data-school="Illusion"] { background: rgba(99, 102, 241, 0.3); color: var(--color-accent-fg); }
.spell-school-badge[data-school="Necromancy"] { background: rgba(75, 85, 99, 0.4); color: var(--color-text-secondary); }
.spell-school-badge[data-school="Transmutation"] { background: rgba(34, 197, 94, 0.3); color: var(--color-success-fg); }

/* ========================================
   SPELL TRAY (sticky bottom bar) — kept here because it travels with the
   spells variant, but it's not strictly part of the panel primitive.
   ======================================== */

.spell-tray {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: var(--radius-md);
  animation: slideIn var(--duration-fast) ease-out;
  z-index: var(--z-panel);
  max-width: 90vw;
}

/* Visibility — BEM state class is the canonical mechanism (#4268, finding 7.1).
   The legacy `.hidden` class selector remains for back-compat with any callers
   still toggling generic `.hidden`. New callers should toggle `--hidden`. */
.spell-tray--hidden,
.spell-tray.hidden {
  display: none;
}

.spell-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  flex: 1;
}

.spell-tray-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  color: var(--color-accent-purple);
  font-family: var(--font-mono);
}

.send-spell-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-purple);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
  white-space: nowrap;
}

.send-spell-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-accent-purple) 70%, black);
  transform: scale(1.02);
}

.send-spell-btn:disabled {
  background: rgba(139, 92, 246, 0.3);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 600px) {
  .selection-panel__grid,
  .spell-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .spell-tray {
    flex-direction: column;
    gap: var(--space-2);
    left: var(--space-2);
    right: var(--space-2);
    transform: none;
  }

  .spell-summary {
    justify-content: center;
  }

  .send-spell-btn {
    width: 100%;
  }
}
/**
 * Selection Panel — Import Hub
 * ==============================
 * Shared primitive for race/class/spell selection grids with chip and card variants.
 *
 * Decomposed into focused files under selection_panel/ for maintainability.



 */
/**
 * Creation Cards — Base & Mobile
 * ================================
 * Filter toolbar, color accents, multi-select footer, desktop and mobile layouts.
 */

/**
 * Creation Cards
 * ==============
 * Interactive option cards for character creation.
 * Rendered in the narrative when AI calls show_creation_options.
 *
 * Panel chrome lives in `_selection_panel.css` (shared with spells/languages
 * via the `.selection-panel` primitive — #4168, narrative shape Phase 4).
 * That file owns:
 *   - `.creation-options` root (quiet base chrome + animation + #1343/#839
 *     /#2063 defenses + #2961 leaf belt-and-suspenders). The heavier purple
 *     gradient + 2px accent border now lives on `.spell-selection-panel`
 *     only (#4273 audit finding 12.1).
 *   - `.creation-options--selected` opacity transition
 *   - `.creation-options__header` flex row with `flex-wrap: wrap`
 *     (#2961/#4257 root cause: row had no flex-wrap, the nowrap pick-for-me
 *     button forced the heading below min-content width → char-stack)
 *   - `.creation-options__context` accent title with #2961 word-wrap belt
 *   - `.creation-options__footer`, `__count`, `__confirm`, `__count--complete`,
 *     `__confirm--disabled`, `__confirm--ready`
 *   - `.creation-options--limit-reached` flash + keyframes
 *
 * This file owns the bits unique to the card-grid variant: search input,
 * source-tinted left borders, the card itself, and the responsive grid.
 */

.creation-options__search {
  margin-bottom: 12px;
}

.creation-options__search-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--input-bg, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #fff);
  font-size: 13px;
}

.creation-options__search-input:focus {
  outline: none;
  border-color: var(--accent-color, #4f46e5);
}

.creation-options__search-input::placeholder {
  color: var(--text-muted, #888);
}

/* ============================================
   FILTER TOOLBAR
   Category filter buttons above the card grid.
   Allows filtering by source (Core, Expanded, Homebrew).
   ============================================ */

.creation-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.creation-filter__btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  /* #4273 (audit finding 12.3): unify button shape with the creation cards
     below. The toolbar previously used pill buttons (--radius-full / 9999px)
     while the cards underneath used --radius-md — two shape languages on one
     screen. Match the card radius so the toolbar reads as part of the same
     surface family. */
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary, #888);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.creation-filter__btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-hover, #555);
  color: var(--text-primary, #fff);
}

.creation-filter__btn--active {
  background: rgba(79, 70, 229, 0.15);
  border-color: var(--accent-color, #4f46e5);
  color: var(--accent-color, #4f46e5);
}

.creation-filter__btn--active:hover {
  background: rgba(79, 70, 229, 0.2);
}

/* ============================================
   COLOR ACCENTS — Source-tinted left border
   Subtle tinted left-border per card source type.
   Preserves the terminal dark theme.
   ============================================ */

.creation-card--source-core {
  border-left: 3px solid rgba(59, 130, 246, 0.4);
}

.creation-card--source-core:hover {
  border-left-color: rgba(59, 130, 246, 0.7);
}

.creation-card--source-expanded {
  border-left: 3px solid rgba(245, 158, 11, 0.4);
}

.creation-card--source-expanded:hover {
  border-left-color: rgba(245, 158, 11, 0.7);
}

.creation-card--source-homebrew {
  border-left: 3px solid rgba(139, 92, 246, 0.4);
}

.creation-card--source-homebrew:hover {
  border-left-color: rgba(139, 92, 246, 0.7);
}

/* Recommended cards keep their green accent — override source border */
.creation-card--recommended {
  border-left: 3px solid rgba(16, 185, 129, 0.5);
}

.creation-card--recommended:hover {
  border-left-color: rgba(16, 185, 129, 0.8);
}

.creation-options__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

/* Narrow-phone guard (#2683, #2978): minmax(180px) exceeds 375px viewport after
   padding, causing card truncation in the 360-399px band. Tighten the minmax
   floor to 140px and cap it at 100% of container width so the column track
   never forces horizontal overflow below 400px. */
@media (max-width: 399px) {
  .creation-options__grid {
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  }
}

/* Card Styles — font-family: inherit picks up var(--font-mono) from .narrative-output,
   matching .masonry-card and .selection-card for consistent typography (#556). */
/* Using button.creation-card for higher specificity than user-agent button styles (#1108). */
button.creation-card,
.creation-card {
  /* Button reset — required for <button> elements to override browser defaults.
     Without appearance:none, Safari/WebKit renders native platform button chrome
     (gray background, system border) over custom styles. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
  outline: none;

  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background-color: var(--card-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  touch-action: manipulation; /* Allow tap-select without conflicting with scroll */
}

.creation-card:hover {
  background-color: var(--card-hover-bg, rgba(255, 255, 255, 0.06));
  border-color: var(--border-hover, #555);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.creation-card:active {
  transform: translateY(0);
}

.creation-card--recommended {
  border-color: var(--success-color, #10b981);
  background-color: rgba(16, 185, 129, 0.06);
  background-image: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.08) 0%,
    rgba(16, 185, 129, 0.02) 100%
  );
}

.creation-card--recommended:hover {
  border-color: var(--success-color-bright, #34d399);
}

.creation-card--selected {
  border-color: var(--accent-color, #4f46e5);
  background-color: rgba(79, 70, 229, 0.15);
}

.creation-card--selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: var(--accent-color, #4f46e5);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* Thinking state: spinner replaces checkmark while server processes */
.creation-card--thinking::after {
  content: '';
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: creation-card-spin 0.6s linear infinite;
}

@keyframes creation-card-spin {
  to { transform: rotate(360deg); }
}

/* Locked container: immediate pointer-event block + dim unselected cards */
.creation-options--locked {
  pointer-events: none;
}

.creation-options--locked .creation-card:not(.creation-card--selected) {
  opacity: 0.35;
  transition: opacity 0.2s ease;
}

.creation-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.creation-card__name {
  font-weight: 600;
  color: var(--text-primary, #fff);
  font-size: 14px;
}

.creation-card__badge {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: var(--radius-full, 9999px);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.creation-card__badge--recommended {
  background: rgba(16, 185, 129, 0.2);
  color: var(--success-color, #10b981);
}

.creation-card__badge--homebrew {
  background: rgba(139, 92, 246, 0.2);
  color: var(--purple-400, #a78bfa);
}

.creation-card__tagline {
  font-size: 12px;
  color: var(--text-secondary, #888);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creation-card__highlights {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.creation-card__highlight {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--tag-bg, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #888);
}

/* ============================================
   MULTI-SELECT FOOTER, CONFIRM, COUNT, LIMIT-REACHED
   Moved to `_selection_panel.css` (#4168) — see top-of-file note.
   ============================================ */

/* ============================================
   DESKTOP: Enhanced flex grid layout (>= 768px)
   Cards flow 2-3 per row on desktop viewports
   for better visual scanning.
   ============================================ */
@media (min-width: 768px) {
  .creation-options__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .creation-options__grid .creation-card {
    /* Flex items: 2 columns minimum, 3 on wider viewports.
       calc() leaves room for the gap between items. */
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
    min-width: 200px;
  }
}

@media (min-width: 1024px) {
  .creation-options__grid .creation-card {
    /* 3 columns on desktop viewports (#4186) — was 1100px, lowered to
       match the codebase desktop breakpoint convention so 6-card grids
       (alignment) don't render with an empty third column at 1024-1099px. */
    flex: 1 1 calc(33.333% - 8px);
    max-width: calc(33.333% - 8px);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* Cards flow naturally; the parent handles all vertical scrolling.
   * Nested scroll was removed — conflicts with parent .narrative-output
   * scroller on mobile (touch events are ambiguous). */
  .creation-options {
    max-height: none;
    overflow-y: visible;
  }
}

/* ============================================
   MOBILE: Full-width list layout (< 768px)
   Cards render as a scrollable list inside the
   bottom sheet, not a grid. Touch targets >= 48px.
   ============================================ */
@media (max-width: 767px) {
  .creation-options__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .creation-options {
    padding: 12px;
    border-radius: var(--radius-md, 8px);
  }

  .creation-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    width: 100%;
    min-height: 48px;
    /* Remove hover transforms on touch devices */
    transform: none;
  }

  .creation-card:hover {
    transform: none;
    box-shadow: none;
  }

  .creation-card:active {
    background-color: var(--card-hover-bg, rgba(255, 255, 255, 0.06));
    border-color: var(--border-hover, #555);
  }

  .creation-card__header {
    flex: 1;
    min-width: 0;
  }

  .creation-card__name {
    font-size: 14px;
  }

  .creation-card__tagline {
    font-size: 12px;
    -webkit-line-clamp: 1;
    margin-top: 2px;
  }

  .creation-card__highlights {
    margin-top: 2px;
  }

  .creation-card__highlight {
    font-size: 10px;
    padding: 1px 6px;
  }

  /* Checkmark stays right-aligned in row layout */
  .creation-card--selected::after {
    position: static;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* Multi-select footer touch-friendly */
  .creation-options__footer {
    padding-top: 10px;
    margin-top: 10px;
  }

  .creation-options__confirm {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
  }

  /* Search input touch-friendly */
  .creation-options__search-input {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Filter buttons: touch-friendly sizing */
  .creation-filter__btn {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 12px;
  }
/**
 * Creation Cards — Selection & Creation Room
 * ============================================
 * Mobile inline panel, selection status, and character creation room fix.
 */


/* ============================================
   MOBILE INLINE CARD PANEL (< 768px, .mf-layout only)
   #4184: Card scrolls WITH the narrative instead of
   floating as a fixed bottom sheet. The prior bottom-sheet
   pattern (position: fixed; bottom: 0; max-height: 50vh)
   trapped the card behind the sticky composer on iOS Safari
   when ancestor transforms / overflow chains created the
   wrong containing block — players couldn't reach race
   traits, stat bonuses, or the select button.

   The natural inline mobile layout (lines 487-575 above)
   already gives full-width, big-touch-target cards. Letting
   the card flow inside .narrative-output means:
   - Card content scrolls with narrative inside .narrative-main
   - Sticky composer (.input-area, position: sticky bottom: 0)
     stays pinned at viewport bottom and never overlays the card
   - All card contents (traits, bonuses, select CTA) reachable
     by scrolling the same surface that scrolls the narrative

   Desktop layout (>=768px) is unaffected — the fixed-sheet
   pattern only ever applied at <=767px under .mf-layout.
   ============================================ */
@media (max-width: 767px) {
  .mf-layout .creation-options {
    /* Stay in-flow: do NOT use position: fixed. */
    position: relative;
    /* Visual chrome retained — quiet panel background + subtle accent border
       come from the unscoped .creation-options block in _selection_panel.css
       (#4273 demoted gradient to spells-only); we only override layout. */
    border-radius: var(--radius-md, 8px);
    margin: var(--space-3, 12px) 0;
    /* Trailing space so the final card / select button visibly clears the
       sticky composer when scrolled to the bottom. */
    margin-bottom: calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px));
    padding: var(--space-3, 12px);
    /* No internal scroll: the parent .narrative-main owns vertical scroll.
       Nested scroll fights touch-event ownership on iOS Safari (#1343, #2942). */
    max-height: none;
    overflow: visible;
    /* Touch action stays default so vertical scroll bubbles to .narrative-main. */
    touch-action: auto;
  }

  /* Category header — prominent at top of card panel */
  .mf-layout .creation-options__context {
    display: block;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding-bottom: var(--space-2, 8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-3, 12px);
  }

  /* Wrapper narrative-entry stays in normal flow (no clipping needed
     for inline cards). */
  .mf-layout .narrative-entry:has(.creation-options) {
    position: static;
    overflow: visible;
  }
}

/* #4184: sheet-slide-up / sheet-dismiss / sheet-backdrop-in / sheet-backdrop-out
   keyframes removed along with the bottom-sheet pattern. The card now flows
   inline in the narrative scroll container; the parent .creation-options
   slideIn animation (defined unscoped at the top of this file) provides the
   only entrance motion. The reduced-motion block they powered is no longer
   necessary since no mobile-specific animations remain. */

/* ============================================
   SELECTION STATUS (#1467)
   Brief "Saving your choice..." feedback shown
   while the server processes a card selection.
   ============================================ */

.creation-options__status {
  margin-top: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--text-muted, #888);
  text-align: center;
  animation: status-fade-in 0.2s ease;
}

@keyframes status-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .creation-options__status {
    animation: none;
  }
}

/* Animation for card appearance */
@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.creation-options__grid .creation-card {
  animation: card-fade-in 0.2s ease forwards;
}

.creation-options__grid .creation-card:nth-child(1) { animation-delay: 0.02s; }
.creation-options__grid .creation-card:nth-child(2) { animation-delay: 0.04s; }
.creation-options__grid .creation-card:nth-child(3) { animation-delay: 0.06s; }
.creation-options__grid .creation-card:nth-child(4) { animation-delay: 0.08s; }
.creation-options__grid .creation-card:nth-child(5) { animation-delay: 0.10s; }
.creation-options__grid .creation-card:nth-child(6) { animation-delay: 0.12s; }
.creation-options__grid .creation-card:nth-child(7) { animation-delay: 0.14s; }
.creation-options__grid .creation-card:nth-child(8) { animation-delay: 0.16s; }
.creation-options__grid .creation-card:nth-child(9) { animation-delay: 0.18s; }
.creation-options__grid .creation-card:nth-child(10) { animation-delay: 0.20s; }
.creation-options__grid .creation-card:nth-child(11) { animation-delay: 0.22s; }
.creation-options__grid .creation-card:nth-child(12) { animation-delay: 0.24s; }

/* Reduced motion: disable animations, ensure cards are visible */
@media (prefers-reduced-motion: reduce) {
  .creation-options__grid .creation-card {
    animation: none;
    opacity: 1;
  }

  .creation-card--thinking::after {
    animation: none;
    content: '…';
    border: none;
  }

  .creation-options--locked .creation-card:not(.creation-card--selected) {
    transition: none;
  }
}

/* #3846 — disable per-card stagger animation inside the mobile bottom sheet.
 *
 * The sheet itself already animates `sheet-slide-up` (300ms slide + fade) on
 * its parent. Adding a 12-card stagger animation INSIDE that slide creates
 * compounding paint events. Observed 2026-04-27 on iOS Safari (~390x844):
 * the sheet header, filter toolbar, search input, and "Pick for me" button
 * paint, but the race grid below them stays at the keyframe's `from` state
 * (opacity 0, translateY(10px)) — leaving the grid empty even though the
 * cards are in the DOM.
 *
 * Cancelling the per-card animation in the bottom-sheet context is safe:
 * users still see the slide-up motion of the entire sheet, which is the
 * dominant motion at this viewport. The card grid simply paints at full
 * opacity once the sheet finishes sliding up.
 *
 * Scoped to `.mf-layout` + `<= 767px` so desktop / tablet keep the stagger.
 * The complementary JS guard in `lib/creation_card_filters.js#setCardVisibility`
 * forces explicit opacity/transform when the JS filter runs (hides expanded
 * races on initial render); together they cover both rendering paths. */
@media (max-width: 767px) {
  .mf-layout .creation-options__grid .creation-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Selection summary — replaces cards after a choice is made */
.creation-selection-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  border-left: 2px solid var(--accent-color, #4f46e5);
}

.creation-selection-summary__label {
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.creation-selection-summary__value {
  color: var(--text-primary, #fff);
  font-weight: 500;
}

.narrative-entry--selection-summary {
  margin: 4px 0;
}

/* ============================================
   CHARACTER CREATION ROOM: Click-through fix (#2063)

   During character creation the narrative-output scroll container
   intercepts pointer events on creation cards — Playwright
   reports "click intercepted by narrative-output div".

   Root cause: the scroll container (.narrative-output) with
   overflow-y:auto creates a hit-test surface that sits above
   its children in certain layout configurations (flex column
   with the mf-layout display:flex override). When elementFromPoint
   is called at the card's center coordinates, the scroll
   container itself is returned instead of the child button.

   Fix: in character_creation room only, set pointer-events:none
   on the narrative-output so it passes clicks through, then
   re-enable pointer-events on all direct children. Scroll via
   mouse wheel still works because the scrollable children
   (narrative entries) have pointer-events:auto and propagate
   wheel events to their scroll container parent.

   SCOPE: character_creation room only AND desktop only — game
   room narrative scrolling/clicking is unaffected; mobile
   touch scrolling on the narrative-output (behind the cards-2+
   bottom sheet) is preserved (#3887). On mobile, the scroll
   gesture has to start on .narrative-output itself and would be
   blocked by pointer-events:none — the elementFromPoint bug
   the original rule fixes is a mouse-only hit-test concern.
   ============================================ */

@media (hover: hover) and (pointer: fine) {
  [data-room="character_creation"] .narrative-output {
    pointer-events: none;
  }

  [data-room="character_creation"] .narrative-output > * {
    pointer-events: auto;
  }

  [data-room="character_creation"] .narrative-output .creation-card {
    pointer-events: auto;
  }
}
/**
 * Creation Cards — Import Hub
 * =============================
 * Selection card grid for character creation with filter and mobile support.
 *
 * Decomposed into focused files under creation_cards/ for maintainability.


 */
/* Expedition Status Panel
   ========================
   Player-facing UI for expedition supplies and watch schedules.
   Displays rations, water, torches with visual bars and projections.
*/

.expedition-status-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  height: 100%;
  overflow-y: auto;
}

/* Header */
.expedition-status__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-terminal-border);
}

.expedition-status__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-terminal-amber);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
}

.expedition-status__refresh {
  background: none;
  border: none;
  color: var(--color-terminal-text-muted);
  cursor: pointer;
  padding: var(--space-xs);
  transition: color 0.2s;
}

.expedition-status__refresh:hover {
  color: var(--color-terminal-amber);
}

/* Section */
.expedition-status__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.expedition-status__section-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-terminal-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* Supplies Grid */
.expedition-status__supplies {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.expedition-status__supply-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-terminal-overlay);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-terminal-border);
  transition: border-color 0.2s;
}

.expedition-status__supply-item[data-status="critical"] {
  border-color: var(--color-terminal-red);
  background: rgba(239, 68, 68, 0.1);
}

.expedition-status__supply-item[data-status="low"] {
  border-color: var(--color-terminal-amber);
  background: rgba(245, 158, 11, 0.1);
}

/* Supply Header */
.expedition-status__supply-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.expedition-status__supply-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-terminal-amber);
}

.expedition-status__supply-name {
  flex: 1;
  font-weight: 600;
  color: var(--color-terminal-text);
}

.expedition-status__supply-amount {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-terminal-amber);
}

.expedition-status__supply-item[data-status="critical"] .expedition-status__supply-amount {
  color: var(--color-terminal-red);
}

.expedition-status__supply-item[data-status="low"] .expedition-status__supply-amount {
  color: var(--color-terminal-amber);
}

/* Supply Bar */
.expedition-status__supply-bar {
  height: 8px;
  background: var(--color-terminal-overlay-dark);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  position: relative;
}

.expedition-status__supply-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-terminal-green), var(--color-terminal-green-light));
  border-radius: var(--border-radius-sm);
  transition: width 0.4s ease, background 0.4s ease;
}

.expedition-status__supply-item[data-status="low"] .expedition-status__supply-fill {
  background: linear-gradient(90deg, var(--color-terminal-amber), var(--color-terminal-amber-light));
}

.expedition-status__supply-item[data-status="critical"] .expedition-status__supply-fill {
  background: linear-gradient(90deg, var(--color-terminal-red), var(--color-terminal-red-light));
  animation: pulse-critical 1.5s ease-in-out infinite;
}

@keyframes pulse-critical {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* Supply Status */
.expedition-status__supply-status {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-terminal-text-muted);
}

.expedition-status__days-remaining,
.expedition-status__watches-remaining {
  font-weight: 500;
}

/* Overall Status */
.expedition-status__overall {
  display: flex;
  justify-content: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-terminal-border);
}

.expedition-status__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--border-radius-md);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.expedition-status__badge--good {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-terminal-green);
  border: 1px solid var(--color-terminal-green);
}

.expedition-status__badge--low {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-terminal-amber);
  border: 1px solid var(--color-terminal-amber);
}

.expedition-status__badge--critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-terminal-red);
  border: 1px solid var(--color-terminal-red);
}

/* Watch Schedule */
.expedition-status__watches {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.expedition-status__watch-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-terminal-overlay);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-terminal-border);
}

.expedition-status__watch-item--active {
  border-color: var(--color-terminal-amber);
  background: rgba(245, 158, 11, 0.1);
}

.expedition-status__watch-number {
  font-weight: 700;
  color: var(--color-terminal-amber);
  min-width: 60px;
}

.expedition-status__watch-character {
  flex: 1;
  color: var(--color-terminal-text);
}

.expedition-status__watch-time {
  font-size: var(--font-size-sm);
  color: var(--color-terminal-text-muted);
}

/* Actions */
.expedition-status__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-terminal-border);
}

.expedition-status__action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-terminal-overlay);
  border: 1px solid var(--color-terminal-border);
  border-radius: var(--border-radius-md);
  color: var(--color-terminal-text);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}

.expedition-status__action-btn:hover {
  background: var(--color-terminal-overlay-hover);
  border-color: var(--color-terminal-amber);
  color: var(--color-terminal-amber);
}

.expedition-status__action-btn:active {
  transform: scale(0.98);
}

.expedition-status__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State */
.expedition-status__empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl);
  text-align: center;
  color: var(--color-terminal-text-muted);
}

.expedition-status__empty.visible {
  display: flex;
}

.expedition-status__help-text {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .expedition-status__actions {
    grid-template-columns: 1fr;
  }
}
/**
 * Experience Features — Base Modals
 * ===================================
 * Session recap modal, consequence preview modal, and quick actions palette.
 */

/* ==========================================================================
   Experience Features - Modal and Controls Styles
   ========================================================================== */

/* Base Modal Styles */
.experience-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: var(--z-modal, 1000);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.experience-modal--open {
  display: flex;
  opacity: 1;
}

.experience-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(2px);
}

.experience-modal__content {
  position: relative;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-primary);
  border-radius: 0.5rem;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 20px rgba(var(--terminal-primary-rgb), 0.3);
}

.experience-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--terminal-border);
}

.experience-modal__header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--terminal-primary);
  font-family: var(--font-terminal);
}

.experience-modal__close {
  background: transparent;
  border: none;
  color: var(--terminal-dim);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s ease;
}

.experience-modal__close:hover {
  color: var(--terminal-primary);
}

.experience-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  color: var(--terminal-text);
}

.experience-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--terminal-border);
  gap: 1rem;
}

/* ==========================================================================
   Session Recap Modal
   ========================================================================== */

.session-recap-modal .experience-modal__content {
  max-width: 700px;
}

.session-recap {
  line-height: 1.7;
}

.session-recap p {
  margin-bottom: 1em;
}

.session-recap strong {
  color: var(--terminal-primary);
}

.session-recap em {
  color: var(--terminal-cyan);
  font-style: italic;
}

/* Recap style variants */
.recap-style--dramatic strong {
  color: var(--terminal-amber);
}

.recap-style--epic strong {
  color: var(--terminal-gold);
}

.recap-style--mysterious {
  font-style: italic;
}

.recap-style--mysterious strong {
  color: var(--terminal-magenta);
}

.recap-style--brief {
  font-size: 0.9rem;
}

.session-recap__meta {
  color: var(--terminal-dim);
  font-size: 0.8rem;
}

/* ==========================================================================
   Consequence Preview Modal
   ========================================================================== */

.consequence-preview-modal .experience-modal__content {
  max-width: 550px;
}

.consequence-action {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--terminal-border);
}

.consequence-action strong {
  color: var(--terminal-cyan);
}

.consequence-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.consequence-item {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  border-left: 3px solid;
  background: rgba(255, 255, 255, 0.02);
}

.consequence-item--low {
  border-color: var(--terminal-green);
}

.consequence-item--medium {
  border-color: var(--terminal-amber);
}

.consequence-item--high {
  border-color: var(--terminal-red);
}

.consequence-likelihood {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terminal-dim);
  margin-bottom: 0.25rem;
}

.consequence-outcome {
  margin: 0.25rem 0 0.5rem;
  color: var(--terminal-text);
  line-height: 1.5;
}

.consequence-risk {
  font-size: 0.75rem;
  color: var(--terminal-dim);
}

.consequence-item--low .consequence-risk {
  color: var(--terminal-green);
}

.consequence-item--medium .consequence-risk {
  color: var(--terminal-amber);
}

.consequence-item--high .consequence-risk {
  color: var(--terminal-red);
}

/* ==========================================================================
   Quick Actions Palette
   ========================================================================== */

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.quick-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 1rem;
  color: var(--terminal-text);
  font-size: 0.8rem;
  font-family: var(--font-terminal);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.quick-action-chip:hover {
  background: rgba(var(--terminal-primary-rgb), 0.1);
  border-color: var(--terminal-primary);
  color: var(--terminal-primary);
}

.quick-action-chip:active {
  transform: scale(0.97);
}

.quick-action-chip__icon {
  font-size: 1rem;
}
/**
 * Experience Features — Atmosphere & Bookmarks
 * ==============================================
 * Atmosphere controls, bookmarks list, and modal body state.
 */

/* ==========================================================================
   Atmosphere Controls
   ========================================================================== */

.atmosphere-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.375rem;
}

.atmosphere-controls__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.atmosphere-controls__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--terminal-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.atmosphere-controls__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.375rem;
  background: var(--terminal-border);
  border-radius: 0.25rem;
  outline: none;
}

.atmosphere-controls__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  background: var(--terminal-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.atmosphere-controls__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.atmosphere-controls__slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  background: var(--terminal-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.atmosphere-controls__select {
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 0.25rem;
  color: var(--terminal-text);
  padding: 0.5rem;
  font-family: var(--font-terminal);
  font-size: 0.85rem;
}

.atmosphere-controls__select:focus {
  outline: none;
  border-color: var(--terminal-primary);
}

/* ==========================================================================
   Bookmarks List
   ========================================================================== */

.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookmark-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.bookmark-item:hover {
  border-color: var(--terminal-primary);
}

.bookmark-item__icon {
  flex-shrink: 0;
  color: var(--terminal-amber);
  font-size: 1.1rem;
}

.bookmark-item__content {
  flex: 1;
  min-width: 0;
}

.bookmark-item__label {
  font-weight: 600;
  color: var(--terminal-text);
  margin-bottom: 0.25rem;
}

.bookmark-item__excerpt {
  font-size: 0.85rem;
  color: var(--terminal-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bookmark-item__meta {
  font-size: 0.7rem;
  color: var(--terminal-dim);
  margin-top: 0.25rem;
}

/* ==========================================================================
   Body modal-open state
   ========================================================================== */

body.modal-open {
  overflow: hidden;
}

/* ==========================================================================
   Relationship Map Modal
   ========================================================================== */

.relationship-map-modal .experience-modal__content {
  max-width: 650px;
}

.relationship-map__nodes,
.relationship-map__edges {
  margin-bottom: 1.5rem;
}

.relationship-map__nodes h3,
.relationship-map__edges h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terminal-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.relationship-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.relationship-node--player {
  border-color: var(--terminal-primary);
  background: rgba(var(--terminal-primary-rgb), 0.1);
}

.relationship-node--npc {
  border-left: 3px solid var(--terminal-cyan);
}

.relationship-node__label {
  font-weight: 500;
  color: var(--terminal-text);
}

.relationship-node__disposition {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--terminal-bg);
  color: var(--terminal-dim);
}

.relationship-edge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
  color: var(--terminal-text);
  border-bottom: 1px solid var(--terminal-border);
}

.relationship-edge:last-child {
  border-bottom: none;
}

.relationship-edge__label {
  color: var(--terminal-cyan);
}

.relationship-edge__strength {
  color: var(--terminal-dim);
  font-size: 0.75rem;
}
/**
 * Experience Features — Relationship Map & Goals
 * =================================================
 * Relationship map modal, character goals panel, downtime cards,
 * and living lore encyclopedia.
 */

/* ==========================================================================
   Character Goals Panel
   ========================================================================== */

.character-goals {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.goal-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.375rem;
}

.goal-item--completed {
  opacity: 0.6;
  border-color: var(--terminal-green);
}

.goal-item__checkbox {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--terminal-border);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.goal-item__checkbox:hover {
  border-color: var(--terminal-primary);
}

.goal-item--completed .goal-item__checkbox {
  background: var(--terminal-green);
  border-color: var(--terminal-green);
}

.goal-item__content {
  flex: 1;
  min-width: 0;
}

.goal-item__text {
  color: var(--terminal-text);
  line-height: 1.4;
}

.goal-item--completed .goal-item__text {
  text-decoration: line-through;
}

.goal-item__meta {
  font-size: 0.75rem;
  color: var(--terminal-dim);
  margin-top: 0.25rem;
}

.goal-item__type {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  background: var(--terminal-bg);
}

/* ==========================================================================
   Downtime Activity Cards
   ========================================================================== */

.downtime-activities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}

.downtime-activity {
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--terminal-border);
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.downtime-activity:hover {
  background: rgba(var(--terminal-primary-rgb), 0.1);
  border-color: var(--terminal-primary);
}

.downtime-activity__icon {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.downtime-activity__label {
  font-weight: 500;
  color: var(--terminal-text);
  font-size: 0.9rem;
}

.downtime-activity__desc {
  font-size: 0.75rem;
  color: var(--terminal-dim);
  margin-top: 0.25rem;
}

/* ==========================================================================
   Living Lore Encyclopedia Modal
   ========================================================================== */

.lore-encyclopedia-modal .experience-modal__content {
  max-width: 750px;
  max-height: 85vh;
}

.lore-encyclopedia__toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--terminal-border);
  background: rgba(255, 255, 255, 0.01);
}

.lore-encyclopedia__search {
  display: flex;
  gap: 0.5rem;
}

.lore-encyclopedia__search input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background: var(--terminal-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 0.25rem;
  color: var(--terminal-text);
  font-family: var(--font-terminal);
  font-size: 0.85rem;
}

.lore-encyclopedia__search input:focus {
  outline: none;
  border-color: var(--terminal-primary);
}

.lore-encyclopedia__search button {
  padding: 0.5rem 1rem;
  background: var(--terminal-primary);
  border: none;
  border-radius: 0.25rem;
  color: var(--terminal-bg);
  font-family: var(--font-terminal);
  font-size: 0.85rem;
  cursor: pointer;
}

.lore-encyclopedia__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.lore-category-btn {
  padding: 0.25rem 0.625rem;
  background: transparent;
  border: 1px solid var(--terminal-border);
  border-radius: 1rem;
  color: var(--terminal-dim);
  font-size: 0.75rem;
  font-family: var(--font-terminal);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lore-category-btn:hover {
  border-color: var(--terminal-primary);
  color: var(--terminal-primary);
}

.lore-category-btn--active {
  background: var(--terminal-primary);
  border-color: var(--terminal-primary);
  color: var(--terminal-bg);
}

.lore-encyclopedia__body {
  max-height: 400px;
  overflow-y: auto;
}

.lore-encyclopedia__count {
  flex: 1;
  font-size: 0.8rem;
  color: var(--terminal-dim);
  text-align: center;
}

.lore-entry {
  padding: 1rem;
  border-bottom: 1px solid var(--terminal-border);
}

.lore-entry:last-child {
  border-bottom: none;
}

.lore-entry:hover {
  background: rgba(255, 255, 255, 0.02);
}

.lore-entry__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.lore-entry__category {
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lore-entry--npc .lore-entry__category {
  background: var(--terminal-cyan-dim);
  color: var(--terminal-cyan);
}

.lore-entry--location .lore-entry__category {
  background: var(--terminal-green-dim);
  color: var(--terminal-green);
}

.lore-entry--item .lore-entry__category {
  background: var(--terminal-amber-dim);
  color: var(--terminal-amber);
}

.lore-entry--custom .lore-entry__category {
  background: var(--terminal-magenta-dim);
  color: var(--terminal-magenta);
}

.lore-entry--faction .lore-entry__category {
  background: var(--terminal-red-dim);
  color: var(--terminal-red);
}

.lore-entry--history .lore-entry__category {
  background: var(--terminal-blue-dim);
  color: var(--terminal-blue);
}

.lore-entry__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--terminal-text);
}

.lore-entry__description {
  margin: 0;
  font-size: 0.85rem;
  color: var(--terminal-dim);
  line-height: 1.5;
}

.lore-entry__meta {
  margin-top: 0.5rem;
}

.lore-entry__player-added {
  font-size: 0.7rem;
  color: var(--terminal-cyan);
  font-style: italic;
}

.lore-entry--empty {
  padding: 2rem;
  text-align: center;
  color: var(--terminal-dim);
  font-style: italic;
}
/**
 * Experience Features — Import Hub
 * ===================================
 * Session recap, consequence preview, atmosphere, relationship map, and goals.
 *
 * Decomposed into focused files under experience_features/ for maintainability.



 */
/*
 * Guest Export Banner
 * ====================
 * Banner shown to guest users in Creator Studio when they have local content.
 * Provides export options and sign-up CTA.
 */

.guest-export-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(217, 119, 6, 0.1) 100%
  );
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
}

.guest-export-banner[hidden] {
  display: none;
}

.guest-export-banner__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(245, 158, 11, 0.2);
  border-radius: var(--radius-full);
  color: #FBBF24;
}

.guest-export-banner__content {
  flex: 1;
  min-width: 0;
}

.guest-export-banner__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 2px 0;
}

.guest-export-banner__subtitle {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin: 0;
}

.guest-export-banner__actions {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
}

.guest-export-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  border: 1px solid transparent;
}

.guest-export-banner__btn .btn--icon {
  display: flex;
  align-items: center;
}

.guest-export-banner__btn .btn--icon svg {
  width: 14px;
  height: 14px;
}

.guest-export-banner__btn--secondary {
  background: rgba(45, 45, 45, 0.8);
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.guest-export-banner__btn--secondary:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-secondary);
}

.guest-export-banner__btn--primary {
  background: #F59E0B;
  color: var(--gray-900);
  border-color: #F59E0B;
}

.guest-export-banner__btn--primary:hover {
  background: #FBBF24;
  border-color: #FBBF24;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .guest-export-banner {
    flex-wrap: wrap;
  }

  .guest-export-banner__content {
    flex-basis: calc(100% - 56px);
  }

  .guest-export-banner__actions {
    flex-basis: 100%;
    margin-top: var(--spacing-xs);
    justify-content: flex-end;
  }
}
/*
 * Lobby Modal - AI-DM Triggered Meta-game Coordination Modal
 * ===========================================================
 * Triggered via WebSocket for session pauses, character selection,
 * party invitations, downtime activities, and custom DM content.
 *
 * Overlays game content without disrupting gameplay state.
 */

/* ========================================
 * BODY STATE
 * ======================================== */

.lobby-modal-open {
  overflow: hidden;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.lobby-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 1000);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal, 0.2s) ease;
  padding: var(--space-4, 1rem);
}

.lobby-modal--visible {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
 * BACKDROP
 * ======================================== */

.lobby-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  cursor: pointer;
  animation: lobby-modal-backdrop-in 0.2s ease-out;
}

.lobby-modal--visible .lobby-modal__backdrop {
  animation: lobby-modal-backdrop-in 0.2s ease-out forwards;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.lobby-modal__container {
  position: relative;
  max-width: 500px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #1e1e2e);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  overflow: hidden;
  animation: lobby-modal-enter 0.25s ease-out;
}

.lobby-modal--visible .lobby-modal__container {
  animation: lobby-modal-enter 0.25s ease-out forwards;
}

/* ========================================
 * MODAL HEADER
 * ======================================== */

.lobby-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border-subtle, #333);
  text-align: center;
}

.lobby-modal__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(97, 175, 239, 0.15);
  border: 2px solid var(--color-accent-primary, #61afef);
  border-radius: 50%;
  color: var(--color-accent-primary, #61afef);
}

.lobby-modal__icon-symbol {
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* Icon variants */
.lobby-modal__icon--pause {
  background: rgba(229, 192, 123, 0.15);
  border-color: var(--color-warning, #e5c07b);
  color: var(--color-warning, #e5c07b);
}

.lobby-modal__icon--character {
  background: rgba(152, 195, 121, 0.15);
  border-color: var(--color-success, #98c379);
  color: var(--color-success, #98c379);
}

.lobby-modal__icon--party {
  background: rgba(198, 120, 221, 0.15);
  border-color: var(--color-accent-secondary, #c678dd);
  color: var(--color-accent-secondary, #c678dd);
}

.lobby-modal__icon--downtime {
  background: rgba(86, 182, 194, 0.15);
  border-color: var(--color-info, #56b6c2);
  color: var(--color-info, #56b6c2);
}

.lobby-modal__icon--custom {
  background: rgba(97, 175, 239, 0.15);
  border-color: var(--color-accent-primary, #61afef);
  color: var(--color-accent-primary, #61afef);
}

.lobby-modal__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-text-primary, #e0e0e0);
}

/* ========================================
 * MODAL BODY
 * ======================================== */

.lobby-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

/* Custom scrollbar */
.lobby-modal__body::-webkit-scrollbar {
  width: var(--scrollbar-width, 8px);
}

.lobby-modal__body::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, #1e1e2e);
}

.lobby-modal__body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, #444);
  border-radius: var(--radius-full, 9999px);
}

.lobby-modal__message {
  margin: 0 0 var(--space-3, 0.75rem);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary, #e0e0e0);
  text-align: center;
}

.lobby-modal__submessage {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted, #888);
  text-align: center;
}

.lobby-modal__empty {
  text-align: center;
  color: var(--color-text-muted, #888);
  font-style: italic;
  padding: var(--space-4, 1rem);
}

/* ========================================
 * CHARACTER LIST (character_select)
 * ======================================== */

.lobby-modal__character-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.lobby-modal__character-option {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-subtle, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-primary, #e0e0e0);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}

.lobby-modal__character-option:hover {
  background: rgba(97, 175, 239, 0.1);
  border-color: var(--color-accent-primary, #61afef);
}

.lobby-modal__character-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.lobby-modal__character-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.lobby-modal__character-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
}

.lobby-modal__character-details {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
}

.lobby-modal__character-arrow {
  font-size: 1.25rem;
  color: var(--color-text-muted, #888);
  transition: transform 0.15s ease;
}

.lobby-modal__character-option:hover .lobby-modal__character-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * PARTY INVITE
 * ======================================== */

.lobby-modal__party-members {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md, 6px);
}

.lobby-modal__party-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
  margin-bottom: var(--space-2, 0.5rem);
}

.lobby-modal__member-list {
  margin: 0;
  padding-left: var(--space-5, 1.25rem);
  list-style: disc;
}

.lobby-modal__member-list li {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #bbb);
  margin-bottom: var(--space-1, 0.25rem);
}

/* ========================================
 * ACTIVITY LIST (downtime)
 * ======================================== */

.lobby-modal__activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.lobby-modal__activity-option {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-subtle, #444);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-primary, #e0e0e0);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  font-family: inherit;
}

.lobby-modal__activity-option:hover {
  background: rgba(86, 182, 194, 0.1);
  border-color: var(--color-info, #56b6c2);
}

.lobby-modal__activity-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.lobby-modal__activity-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}

.lobby-modal__activity-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #e0e0e0);
}

.lobby-modal__activity-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #888);
}

.lobby-modal__activity-duration {
  font-size: 0.75rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  color: var(--color-info, #56b6c2);
  white-space: nowrap;
}

/* ========================================
 * CUSTOM CONTENT
 * ======================================== */

.lobby-modal__custom-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary, #bbb);
}

/* ========================================
 * MODAL FOOTER
 * ======================================== */

.lobby-modal__footer {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: flex-end;
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border-subtle, #333);
  background: var(--color-bg-secondary, #252535);
}

/* ========================================
 * BUTTONS
 * ======================================== */

.lobby-modal__btn {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: var(--radius-md, 6px);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  border: 1px solid transparent;
}

.lobby-modal__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.lobby-modal__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lobby-modal__btn--primary {
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  border-color: var(--color-accent-primary, #61afef);
}

.lobby-modal__btn--primary:hover:not(:disabled) {
  filter: brightness(1.1);
}

.lobby-modal__btn--secondary {
  background: transparent;
  border-color: var(--color-border-subtle, #444);
  color: var(--color-text-secondary, #aaa);
}

.lobby-modal__btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-secondary, #aaa);
  color: var(--color-text-primary, #e0e0e0);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes lobby-modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes lobby-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .lobby-modal {
    transition: none;
  }

  .lobby-modal__backdrop,
  .lobby-modal__container {
    animation: none;
  }
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 600px) {
  .lobby-modal {
    padding: var(--space-2, 0.5rem);
  }

  .lobby-modal__container {
    max-width: none;
    max-height: calc(100vh - var(--space-4, 1rem));
    max-height: calc(100dvh - var(--space-4, 1rem));
  }

  .lobby-modal__header,
  .lobby-modal__body,
  .lobby-modal__footer {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
  }

  .lobby-modal__footer {
    flex-direction: column-reverse;
  }

  .lobby-modal__btn {
    width: 100%;
    text-align: center;
  }
}
/*
 * Lobby Preview Modal
 * Shows campaign preview before joining
 */

.lobby-preview-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.lobby-preview-modal.detail-modal--open {
  display: flex;
}

.lobby-preview-modal__content {
  width: 90%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--color-bg-primary, #0d0d0d);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl), 0 0 20px rgba(97, 175, 239, 0.2);
  padding: var(--space-5, 1.25rem);
}

/* Loading State */
.lobby-preview__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-8, 2rem);
  color: var(--color-text-muted, #808080);
}

.lobby-preview__loading svg {
  animation: spin 1s linear infinite;
}

/* Error State */
.lobby-preview__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-8, 2rem);
  color: var(--color-accent-danger, #ff453a);
}

/* Header */
.lobby-preview__header {
  margin-bottom: var(--space-4, 1rem);
}

.lobby-preview__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-bold, 600);
  color: var(--color-accent-primary, #61afef);
  margin: 0 0 var(--space-2, 0.5rem);
}

.lobby-preview__badges {
  display: flex;
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__badge {
  padding: 0.125rem var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 500);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.lobby-preview__badge--status {
  background: rgba(52, 199, 89, 0.15);
  color: var(--color-accent-success, #34c759);
  border: 1px solid rgba(52, 199, 89, 0.3);
}

.lobby-preview__badge--visibility {
  background: rgba(97, 175, 239, 0.15);
  color: var(--color-accent-primary, #61afef);
  border: 1px solid rgba(97, 175, 239, 0.3);
}

/* Sections */
.lobby-preview__section {
  margin-bottom: var(--space-4, 1rem);
  padding-bottom: var(--space-4, 1rem);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.lobby-preview__section:last-of-type {
  border-bottom: none;
}

.lobby-preview__section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 500);
  color: var(--color-text-secondary, #c0c0c0);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3, 0.75rem);
}

.lobby-preview__description {
  font-family: var(--font-mono);
  font-size: var(--font-size-md, 1rem);
  color: var(--color-text-primary, #e0e0e0);
  line-height: 1.5;
  margin: 0;
}

/* Lobby Message */
.lobby-preview__message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: rgba(218, 165, 32, 0.1);
  border: 1px solid rgba(218, 165, 32, 0.3);
  border-radius: var(--radius-md, 6px);
  color: var(--color-gold, #daa520);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
}

.lobby-preview__message svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Details Grid */
.lobby-preview__details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__detail {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #c0c0c0);
}

.lobby-preview__detail svg {
  color: var(--color-text-muted, #808080);
  flex-shrink: 0;
}

.lobby-preview__detail strong {
  color: var(--color-text-primary, #e0e0e0);
}

/* Party Composition */
.lobby-preview__party {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__empty-party {
  padding: var(--space-4, 1rem);
  text-align: center;
  color: var(--color-text-muted, #808080);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  font-style: italic;
}

.lobby-preview__member {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem);
  background: var(--color-bg-secondary, #1a1a1a);
  border-radius: var(--radius-md, 6px);
}

.lobby-preview__member--dm {
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.1), transparent);
  border: 1px solid rgba(218, 165, 32, 0.3);
}

.lobby-preview__member-portrait-wrapper {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-purple, #9B59B6));
}

.lobby-preview__member-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-preview__member-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
}

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

.lobby-preview__member-name {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-family: var(--font-mono);
  font-size: var(--font-size-md, 1rem);
  font-weight: var(--font-weight-semibold, 500);
  color: var(--color-text-primary, #e0e0e0);
}

.lobby-preview__member-role {
  padding: 0 var(--space-1, 0.25rem);
  background: var(--color-gold, #daa520);
  color: var(--color-bg-primary, #0d0d0d);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 600);
  text-transform: uppercase;
}

.lobby-preview__member-class {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #808080);
}

/* Actions */
.lobby-preview__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.lobby-preview__join-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
}

.lobby-preview__close-btn {
  flex: 0;
}

/* Responsive */
@media (max-width: 600px) {
  .lobby-preview-modal__content {
    width: 95%;
    max-height: 90vh;
    padding: var(--space-4, 1rem);
  }

  .lobby-preview__details {
    grid-template-columns: 1fr;
  }
}
/* ========================================
 * Panel Palette (Ctrl+B ? Command Palette)
 * ======================================== */

.panel-palette {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
}

.panel-palette--open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.panel-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.panel-palette-modal {
  position: relative;
  width: 400px;
  max-width: 90vw;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #1a1a1a);
  border: 1px solid var(--color-accent-purple, #7c3aed);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(124, 58, 237, 0.2);
  overflow: hidden;
  animation: palette-slide-in 0.15s ease-out;
}

@keyframes palette-slide-in {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.panel-palette-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #333);
}

.panel-palette-title {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: bold;
  color: var(--color-accent-purple, #7c3aed);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.panel-palette-hint {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: var(--text-muted, #888);
  padding: 2px 6px;
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}

.panel-palette-search {
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  border-bottom: 1px solid var(--border-color, #333);
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  outline: none;
}

.panel-palette-search::placeholder {
  color: var(--text-muted, #888);
}

.panel-palette-search:focus {
  background: rgba(0, 0, 0, 0.5);
}

.panel-palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.panel-palette-category {
  margin-bottom: 4px;
}

.panel-palette-category-header {
  padding: 6px 8px;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #888);
}

.panel-palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.panel-palette-item:hover,
.panel-palette-item--selected {
  background: rgba(124, 58, 237, 0.15);
}

.panel-palette-item--open {
  opacity: 0.5;
}

.panel-palette-item-title {
  flex: 1;
}

.panel-palette-item-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(124, 58, 237, 0.2);
  color: var(--accent-light, #a78bfa);
}

@media (prefers-reduced-motion: reduce) {
  .panel-palette-modal {
    animation: none;
  }
}
/* Party Chat Panel */

.panel-party-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 300px;
}

.party-chat-header {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.party-chat-messages {
  flex: 1;
  padding: var(--spacing-sm);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.party-chat-message {
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: messageSlideIn 0.2s ease-out;
}

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

.party-chat-message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
}

.party-chat-sender {
  font-weight: 600;
  color: var(--color-accent);
}

.party-chat-timestamp {
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.party-chat-message-content {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Self message styling */
.party-chat-message[data-self="true"] .party-chat-sender {
  color: var(--color-success);
}

.party-chat-message[data-self="true"] .party-chat-message-content {
  background: var(--color-bg-accent, rgba(34, 197, 94, 0.1));
  border-color: var(--color-success);
}

/* Input area */
.party-chat-input-container {
  padding: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.party-chat-input-wrapper {
  display: flex;
  gap: var(--spacing-xs);
}

.party-chat-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  transition: border-color 0.2s ease;
}

.party-chat-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb, 59, 130, 246), 0.1);
}

.party-chat-send-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-accent);
  border: none;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.party-chat-send-btn:hover:not(:disabled) {
  background: var(--color-accent-hover, #2563eb);
}

.party-chat-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.party-chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.party-chat-send-btn svg {
  width: 16px;
  height: 16px;
}

/* System messages */
.party-chat-system-message {
  padding: var(--spacing-xs) var(--spacing-sm);
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Empty state */
.party-chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-lg);
}

/* Scroll hint when new messages arrive */
.party-chat-scroll-hint {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: var(--spacing-xs);
  background: var(--color-accent);
  color: white;
  font-size: 0.75rem;
  cursor: pointer;
  animation: fadeIn 0.3s ease;
  z-index: var(--z-sticky);
}

/* ========================================
 * Party Chat - Voting Integration
 * ======================================== */

.party-chat-votes {
  padding: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}

.party-chat-votes:empty {
  display: none;
  padding: 0;
  border: none;
}

.party-chat-vote-form {
  padding: var(--spacing-sm);
  padding-top: 0;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* Vote Card (inline with chat) */
.vote-card {
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  animation: messageSlideIn 0.2s ease-out;
}

.vote-card--complete {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.05);
}

.vote-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.vote-card__action {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  flex: 1;
  word-break: break-word;
}

.vote-card__timer {
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-bg-tertiary, #1f2937);
  white-space: nowrap;
}

.vote-card__timer--urgent {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-urgent 1s ease-in-out infinite;
}

.vote-card__timer--expired {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

@keyframes pulse-urgent {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.vote-card__status {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
}

.vote-card__status--complete {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.vote-card__progress {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-xs);
}

.vote-card__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Vote Option Button */
.vote-option-btn {
  padding: 4px var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-tertiary, #1f2937);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vote-option-btn:hover:not(:disabled) {
  border-color: var(--color-accent-primary, #3b82f6);
  background: rgba(59, 130, 246, 0.1);
}

.vote-option-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.vote-option-btn--selected {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.vote-option-btn--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.vote-check {
  font-size: 0.7rem;
}

/* Vote Results */
.vote-card__results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--spacing-xs);
}

.vote-result {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px var(--spacing-xs);
  border-radius: 3px;
  font-size: 0.8rem;
}

.vote-result--winner {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.vote-result__option {
  flex: 1;
  color: var(--color-text-primary);
}

.vote-result__count {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.vote-result__badge {
  color: #22c55e;
  font-weight: 700;
}

/* Vote Form Accordion (in chat) */
.vote-form-accordion {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
}

.vote-form-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  transition: background-color 0.15s ease;
  list-style: none;
}

.vote-form-toggle::-webkit-details-marker {
  display: none;
}

.vote-form-toggle:hover {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.vote-form-toggle__icon {
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.2s ease;
}

details[open] .vote-form-toggle__icon {
  transform: rotate(45deg);
}

/* Vote Form */
.vote-form {
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  border-top: 1px solid var(--color-border);
}

.vote-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vote-form__field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}

.vote-form__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vote-form__hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-text-muted);
}

.vote-form__input,
.vote-form__select {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-tertiary, #1f2937);
  color: var(--color-text-primary);
  font-size: 0.8rem;
  font-family: inherit;
}

.vote-form__input:focus,
.vote-form__select:focus {
  outline: none;
  border-color: var(--color-accent-primary, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.vote-form__input::placeholder {
  color: var(--color-text-muted);
}

.vote-form__select {
  cursor: pointer;
  min-width: 100px;
}

.vote-form__submit {
  align-self: flex-start;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-accent-primary, #3b82f6);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.vote-form__submit:hover {
  background: var(--color-accent-primary-hover, #2563eb);
}

.vote-form__submit:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .vote-card__timer--urgent,
  .vote-form-toggle__icon,
  .vote-option-btn,
  .vote-form__submit,
  .vote-card {
    animation: none;
    transition: none;
  }
}
/* Party Lobby Modal
 * ==================
 * In-game modal for party management, join requests, and spectators.
 */

.party-lobby-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 0;
  width: Min(500px, 90vw);
  max-height: 80vh;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.party-lobby-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.party-lobby-modal__content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}

/* Header */
.party-lobby-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.party-lobby-modal__title {
  margin: 0;
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.party-lobby-modal__title svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.party-lobby-modal__count {
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
}

.party-lobby-modal__close {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.party-lobby-modal__close:hover {
  color: var(--color-text);
}

.party-lobby-modal__close svg {
  width: 16px;
  height: 16px;
}

/* Tabs */
.party-lobby-modal__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
}

.party-lobby-modal__tab {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.party-lobby-modal__tab:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}

.party-lobby-modal__tab.active {
  color: var(--color-primary);
  background: var(--color-surface);
}

.party-lobby-modal__tab svg {
  width: 14px;
  height: 14px;
}

.party-lobby-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: var(--weight-bold);
}

.party-lobby-modal__badge:empty,
.party-lobby-modal__badge.hidden {
  display: none;
}

/* Body */
.party-lobby-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

.party-lobby-modal__panel {
  display: none;
}

.party-lobby-modal__panel.active {
  display: block;
}

.party-lobby-modal__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Member Card */
.party-lobby-modal__member {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

.party-lobby-modal__member:hover {
  background: var(--color-surface-hover);
}

.party-lobby-modal__member-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.party-lobby-modal__member-status.status--online {
  background: var(--color-success);
  box-shadow: 0 0 6px var(--color-success);
}

.party-lobby-modal__member-status.status--offline {
  background: var(--color-text-muted);
}

.party-lobby-modal__member-info {
  flex: 1;
  min-width: 0;
}

.party-lobby-modal__member-name {
  display: block;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.party-lobby-modal__member-character {
  display: block;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-lobby-modal__member-role {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--size-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-lobby-modal__member-role.role--dm {
  background: var(--color-primary-bg, rgba(139, 92, 246, 0.15));
  color: var(--color-primary);
}

.party-lobby-modal__member-role.role--player {
  background: var(--color-info-bg, rgba(59, 130, 246, 0.15));
  color: var(--color-info, #3b82f6);
}

.party-lobby-modal__member-actions {
  display: flex;
  gap: var(--space-1);
}

/* Request Card */
.party-lobby-modal__request {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.party-lobby-modal__request-info {
  flex: 1;
}

.party-lobby-modal__request-name {
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.party-lobby-modal__request-message {
  margin: var(--space-1) 0 0;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.party-lobby-modal__request-actions {
  display: flex;
  gap: var(--space-2);
}

/* Spectator */
.party-lobby-modal__spectator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.party-lobby-modal__spectator-name {
  font-size: var(--size-sm);
  color: var(--color-text);
}

/* Empty State */
.party-lobby-modal__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}

.party-lobby-modal__empty svg {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-2);
  opacity: 0.5;
}

.party-lobby-modal__empty p {
  margin: 0;
}

/* Loading */
.party-lobby-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.party-lobby-modal__loading .loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Footer */
.party-lobby-modal__footer {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  justify-content: flex-end;
}

.party-lobby-modal__footer .btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.party-lobby-modal__footer .btn svg {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 480px) {
  .party-lobby-modal__tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .party-lobby-modal__member {
    flex-wrap: wrap;
  }

  .party-lobby-modal__member-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: var(--space-2);
  }

  .party-lobby-modal__request {
    flex-direction: column;
  }

  .party-lobby-modal__request-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .party-lobby-modal__footer {
    flex-wrap: wrap;
  }

  .party-lobby-modal__footer .btn {
    flex: 1;
    min-width: calc(50% - var(--space-1));
  }
}
/**
 * Player Notes Panel
 * ==================
 * Free-form markdown notes panel with edit/preview toggle.
 * Follows BEM naming convention with terminal theme variables.
 */

/* Container */
.player-notes {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--terminal-bg-secondary, var(--color-surface, #1a1a2e));
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  border-radius: var(--terminal-radius-md, 8px);
  overflow: hidden;
}

/* ========================================
 * Toolbar
 * ======================================== */

.player-notes__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-bottom: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  flex-shrink: 0;
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.15));
}

.player-notes__toolbar-left,
.player-notes__toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.player-notes__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border: 1px solid transparent;
  border-radius: var(--terminal-radius-sm, 4px);
  background: transparent;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  line-height: 1;
}

.player-notes__btn:hover {
  background: var(--terminal-bg-hover, rgba(255, 255, 255, 0.05));
  color: var(--terminal-text-primary, var(--color-text, #e0e0e0));
}

.player-notes__btn--active {
  color: var(--terminal-cyan, var(--color-accent-primary, #3498db));
}

.player-notes__btn--icon {
  padding: var(--space-1, 0.25rem);
}

.player-notes__btn--icon svg {
  width: 14px;
  height: 14px;
}

.player-notes__btn--danger:hover {
  color: var(--terminal-red, var(--color-danger, #e74c3c));
}

.player-notes__btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ========================================
 * Content Area
 * ======================================== */

.player-notes__content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Editor */
.player-notes__editor {
  flex: 1;
  display: flex;
  min-height: 0;
}

.player-notes__textarea {
  flex: 1;
  width: 100%;
  padding: var(--space-3, 0.75rem);
  border: none;
  background: transparent;
  color: var(--terminal-text-primary, var(--color-text, #e0e0e0));
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: none;
  outline: none;
  overflow-y: auto;
}

.player-notes__textarea::placeholder {
  color: var(--terminal-text-muted, var(--color-text-muted, #555));
  font-style: italic;
}

.player-notes__textarea:focus {
  outline: none;
}

/* Preview */
.player-notes__preview {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 0.75rem);
}

.player-notes__preview-content {
  color: var(--terminal-text-primary, var(--color-text, #e0e0e0));
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Markdown rendered content styles */
.player-notes__preview-content h1,
.player-notes__preview-content h2,
.player-notes__preview-content h3,
.player-notes__preview-content h4,
.player-notes__preview-content h5,
.player-notes__preview-content h6 {
  color: var(--terminal-cyan, var(--color-accent-primary, #3498db));
  margin: 0.8em 0 0.4em;
  line-height: 1.3;
}

.player-notes__preview-content h1 { font-size: 1.3rem; }
.player-notes__preview-content h2 { font-size: 1.15rem; }
.player-notes__preview-content h3 { font-size: 1.05rem; }

.player-notes__preview-content p {
  margin: 0 0 0.6em;
}

.player-notes__preview-content ul,
.player-notes__preview-content ol {
  margin: 0 0 0.6em;
  padding-left: 1.5em;
}

.player-notes__preview-content li {
  margin-bottom: 0.2em;
}

.player-notes__preview-content code {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.3));
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.9em;
  color: var(--terminal-green, var(--color-success, #2ecc71));
}

.player-notes__preview-content pre {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.3));
  padding: var(--space-2, 0.5rem);
  border-radius: var(--terminal-radius-sm, 4px);
  overflow-x: auto;
  margin: 0 0 0.6em;
}

.player-notes__preview-content pre code {
  background: none;
  padding: 0;
}

.player-notes__preview-content blockquote {
  border-left: 3px solid var(--terminal-cyan, var(--color-accent-primary, #3498db));
  margin: 0 0 0.6em;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  font-style: italic;
}

.player-notes__preview-content hr {
  border: none;
  border-top: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  margin: 0.8em 0;
}

.player-notes__preview-content strong {
  color: var(--terminal-yellow, var(--color-warning, #f39c12));
}

.player-notes__preview-content a {
  color: var(--terminal-cyan, var(--color-accent-primary, #3498db));
  text-decoration: underline;
}

.player-notes__preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 0.6em;
}

.player-notes__preview-content th,
.player-notes__preview-content td {
  border: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  text-align: left;
  font-size: 0.85rem;
}

.player-notes__preview-content th {
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.2));
  font-weight: 600;
}

/* ========================================
 * Empty State
 * ======================================== */

.player-notes__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--space-6, 1.5rem);
  text-align: center;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
}

.player-notes__empty-icon {
  margin-bottom: var(--space-3, 0.75rem);
  opacity: 0.4;
}

.player-notes__empty-icon svg {
  width: 32px;
  height: 32px;
}

.player-notes__empty-text {
  font-size: 0.9rem;
  margin: 0 0 var(--space-1, 0.25rem);
  font-weight: 500;
}

.player-notes__empty-hint {
  font-size: 0.8rem;
  margin: 0;
  max-width: 240px;
  opacity: 0.7;
}

/* ========================================
 * Status Bar
 * ======================================== */

.player-notes__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-top: 1px solid var(--terminal-border, var(--color-border, #2a2a4a));
  font-size: 0.7rem;
  color: var(--terminal-text-muted, var(--color-text-muted, #888));
  flex-shrink: 0;
  background: var(--terminal-bg-tertiary, rgba(0, 0, 0, 0.1));
}

.player-notes__char-count {
  opacity: 0.8;
}

.player-notes__save-indicator {
  opacity: 0.6;
  font-style: italic;
}

.player-notes__save-indicator--saving {
  color: var(--terminal-yellow, var(--color-warning, #f39c12));
}

.player-notes__save-indicator--saved {
  color: var(--terminal-green, var(--color-success, #2ecc71));
}

.player-notes__error {
  color: var(--terminal-red, var(--color-danger, #e74c3c));
  font-style: italic;
  padding: var(--space-3, 0.75rem);
}

/* ========================================
 * Sidebar Mode
 * ======================================== */

.player-notes--sidebar-mode {
  border: none;
  border-radius: 0;
}

.player-notes--sidebar-mode .player-notes__toolbar {
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}

.player-notes--sidebar-mode .player-notes__textarea {
  font-size: 0.8rem;
  padding: var(--space-2, 0.5rem);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .player-notes__toolbar {
    padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  }

  .player-notes__textarea {
    font-size: 0.8rem;
    padding: var(--space-2, 0.5rem);
  }
}
/**
 * Stream Panel — Base & Density
 * ================================
 * Container, stream message base, and density variants.
 */

/**
 * Stream Panel Styles
 * ===================
 * Density-responsive streaming content with container queries.
 * Three density levels: minimal, compact, full.
 */

/* ========================================
   CONTAINER SETUP
   ======================================== */

.floating-stream-panel__content,
.tab-group__content[data-stream-content] {
  container-type: size;
  container-name: stream-content;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ========================================
   STREAM MESSAGE BASE
   ======================================== */

.stream-message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  transition: background-color 150ms ease;
}

.stream-message:hover {
  background-color: var(--color-surface-hover);
}

.stream-message:last-child {
  border-bottom: none;
}

/* Message type icons */
.stream-message__icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 2px;
}

.stream-message__icon--info {
  background-color: var(--color-info);
}

.stream-message__icon--success {
  background-color: var(--color-success);
}

.stream-message__icon--warning {
  background-color: var(--color-warning);
}

.stream-message__icon--error {
  background-color: var(--color-error);
}

.stream-message__icon--debug {
  background-color: var(--color-text-muted);
}

.stream-message__icon--tool {
  background-color: var(--color-accent);
}

.stream-message__icon--ai {
  background-color: var(--color-primary);
}

.stream-message__icon--combat {
  background-color: var(--color-error);
}

.stream-message__icon--roll {
  background-color: var(--color-warning);
}

/* ========================================
   DENSITY: MINIMAL (icon + count only)
   ======================================== */

.stream-message--minimal {
  padding: var(--space-2xs) var(--space-xs);
  justify-content: center;
}

.stream-message--minimal .stream-message__icon {
  width: 10px;
  height: 10px;
}

/* Container query for minimal density */
@container stream-content (max-width: 200px) {
  .stream-message {
    padding: var(--space-2xs) var(--space-xs);
    justify-content: center;
  }

  .stream-message__text,
  .stream-message__time,
  .stream-message__header,
  .stream-message__body,
  .stream-message__details {
    display: none;
  }

  .stream-message__icon {
    width: 10px;
    height: 10px;
  }
}

/* ========================================
   DENSITY: COMPACT (truncated single line)
   ======================================== */

.stream-message--compact {
  flex-wrap: nowrap;
}

.stream-message--compact .stream-message__text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.stream-message--compact .stream-message__time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Expand on hover for compact */
.stream-message--compact:hover .stream-message__text {
  white-space: normal;
  word-break: break-word;
}

/* Container query for compact density */
@container stream-content (min-width: 201px) and (max-width: 350px) {
  .stream-message {
    flex-wrap: nowrap;
  }

  .stream-message__text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stream-message__header,
  .stream-message__body,
  .stream-message__details {
    display: none;
  }

  .stream-message:hover .stream-message__text {
    white-space: normal;
    word-break: break-word;
  }
}

/* ========================================
   DENSITY: FULL (complete with details)
   ======================================== */

.stream-message--full {
  flex-direction: column;
  gap: var(--space-2xs);
}

.stream-message__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
}

.stream-message__title {
  flex: 1;
  font-weight: 500;
  color: var(--color-text);
}

.stream-message__time {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.stream-message__body {
  color: var(--color-text-secondary);
  padding-left: calc(14px + var(--space-xs));
}

.stream-message__details {
  padding-left: calc(14px + var(--space-xs));
  margin-top: var(--space-2xs);
}

.stream-message__details code {
  display: block;
  padding: var(--space-xs);
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 100px;
  overflow-y: auto;
}

/* Container query for full density */
@container stream-content (min-width: 351px) {
  .stream-message {
    flex-direction: column;
    gap: var(--space-2xs);
  }

  .stream-message__header {
    display: flex;
  }

  .stream-message__body,
  .stream-message__details {
    display: block;
  }

  .stream-message__text {
    display: none;
  }
}

/* ========================================
   CHANNEL SELECTOR DROPDOWN
   ======================================== */

.channel-selector {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 200px;
  max-width: 280px;
  max-height: 300px;
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}

.channel-selector--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.channel-selector__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
}

.channel-selector__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.channel-selector__close:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.channel-selector__list {
  padding: var(--space-xs);
  max-height: 250px;
  overflow-y: auto;
}

.channel-selector__option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.channel-selector__option:hover {
  background-color: var(--color-surface-hover);
}

.channel-selector__option input[type="checkbox"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--color-primary);
}

.channel-selector__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.channel-selector__label {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
/**
 * Stream Panel — Channel Selector & Badges
 * ==========================================
 * Channel selector dropdown, stream badge, density indicator, and floating panel.
 */


/* ========================================
   STREAM BADGE (buffered message count)
   ======================================== */

.stream-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-2xs);
  background-color: var(--color-error);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.stream-badge--visible {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   DENSITY INDICATOR
   ======================================== */

.density-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.density-indicator:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

/* ========================================
   FLOATING STREAM PANEL SPECIFICS
   ======================================== */

.floating-stream-panel {
  display: flex;
  flex-direction: column;
}

.floating-stream-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background-color: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  cursor: move;
  user-select: none;
}

.floating-stream-panel__title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-stream-panel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  position: relative;
}

.floating-stream-panel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 150ms ease, color 150ms ease;
}

.floating-stream-panel__btn:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text);
}

.floating-stream-panel__btn--close:hover {
  background-color: var(--color-error-muted);
  color: var(--color-error);
}

.floating-stream-panel__content {
  flex: 1;
  overflow-y: auto;
  background-color: var(--color-surface);
}

/* ========================================
   ANIMATIONS
   ======================================== */

.floating-stream-panel--entering {
  animation: stream-panel-enter 200ms ease-out;
}

.floating-stream-panel--exiting {
  animation: stream-panel-exit 150ms ease-in forwards;
}

.floating-stream-panel--minimizing {
  animation: stream-panel-minimize 200ms ease-in forwards;
}

@keyframes stream-panel-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes stream-panel-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes stream-panel-minimize {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }
/**
 * Stream Panel — Animations & States
 * =====================================
 * Animations, minimized state, and ghost mode.
 */


/* ========================================
   MINIMIZED STATE
   ======================================== */

.floating-stream-panel--minimized {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}

.floating-stream-panel--minimized .floating-stream-panel__content,
.floating-stream-panel--minimized .floating-stream-panel__resize {
  display: none;
}

.floating-stream-panel--minimized .floating-stream-panel__header {
  border-bottom: none;
  border-radius: var(--radius-md);
}

/* ========================================
   GHOST MODE (inherits from floating panel)
   ======================================== */

.floating-stream-panel--ghost {
  backdrop-filter: blur(var(--ghost-blur-subtle));
  transition: opacity var(--ghost-transition), backdrop-filter var(--ghost-transition);
}

.floating-stream-panel--ghost-ethereal {
  opacity: var(--ghost-opacity-ethereal);
}

.floating-stream-panel--ghost-wisp {
  opacity: var(--ghost-opacity-wisp);
}

.floating-stream-panel--ghost-shade {
  opacity: var(--ghost-opacity-shade);
}

.floating-stream-panel--ghost-phantom {
  opacity: var(--ghost-opacity-phantom);
}

.floating-stream-panel--ghost:hover {
  opacity: calc(var(--ghost-opacity-shade) + var(--ghost-hover-opacity-boost));
  backdrop-filter: blur(var(--ghost-blur-strong));
}

/* ========================================
   RESIZE HANDLES
   ======================================== */

.floating-stream-panel__resize {
  position: absolute;
  z-index: var(--z-sticky);
}

.floating-stream-panel__resize--n {
  top: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  cursor: n-resize;
}

.floating-stream-panel__resize--ne {
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  cursor: ne-resize;
}

.floating-stream-panel__resize--e {
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 4px;
  cursor: e-resize;
}

.floating-stream-panel__resize--se {
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  cursor: se-resize;
}

.floating-stream-panel__resize--s {
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 4px;
  cursor: s-resize;
}

.floating-stream-panel__resize--sw {
  bottom: 0;
  left: 0;
  width: 8px;
  height: 8px;
  cursor: sw-resize;
}

.floating-stream-panel__resize--w {
  top: 8px;
  left: 0;
  bottom: 8px;
  width: 4px;
  cursor: w-resize;
}

.floating-stream-panel__resize--nw {
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  cursor: nw-resize;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .stream-message,
  .channel-selector,
  .stream-badge,
  .floating-stream-panel--entering,
  .floating-stream-panel--exiting,
  .floating-stream-panel--minimizing {
    animation: none;
    transition: none;
  }
}

@media (prefers-contrast: high) {
  .floating-stream-panel--ghost,
  .floating-stream-panel--ghost-ethereal,
  .floating-stream-panel--ghost-wisp,
  .floating-stream-panel--ghost-shade,
  .floating-stream-panel--ghost-phantom {
    opacity: 1;
    backdrop-filter: none;
  }

  .stream-message__icon {
    border: 2px solid currentColor;
  }
}
/**
 * Stream Panel Styles — Import Hub
 * ===================================
 * Real-time stream panel with density variants and channel controls.
 *
 * Decomposed into focused files under stream_panel/ for maintainability.



 */
/**
 * Tab Group — Base Layout
 * ========================
 * Container, orientation, tab list, tab button styles.
 */

/**
 * Tab Group System
 * ================
 * Styles for tabbed floating panel groups.
 * Supports multiple tab orientations and ghost mode.
 *
 * .tab-group--sheet-host modifier (#3653):
 *   Applied to the docked character sheet so TabMergeService.findMergeTarget
 *   recognises it as a tab-group drop zone without the floating-panel layout.
 *   Overrides position:fixed, z-index, box-shadow, and sizing constraints
 *   so the sheet remains in its normal grid slot.
 *
 * .tab-group--docked-host modifier (#3654):
 *   Applied to a tab group injected in-place into a docked grid panel by
 *   handleMergeFloatingIntoDocked.  Same override set as --sheet-host but
 *   fills the parent .grid-panel__content area instead of being a free-standing
 *   host.  The grid panel header stays in place; only the content area is
 *   replaced with the tab group.
 */

/* Sheet-host variant — docked character sheet as merge target (#3653) */
.tab-group--sheet-host {
  position: relative !important;
  z-index: auto !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  display: block !important;
  background: transparent !important;
}

/* Invisible header marker for drag-zone hit-testing (#3653).
   Zero height so it takes no visual space; TabMergeService picks it up via
   getBoundingClientRect(), which for a zero-height element returns the rect
   at the top edge of the tab-nav row (sufficient for MERGE_ZONE_PADDING). */
.tab-group__header--sheet-host {
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Docked-host variant — injected into a grid panel's content area (#3654 T5.2).
   The tab group fills the available space inside the grid panel slot; the outer
   .grid-panel wrapper handles grid positioning so we reset all floating styles. */
.tab-group--docked-host {
  position: relative !important;
  z-index: auto !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  background: transparent !important;
}

/* Compact header for docked hosts — inherits grid-panel's existing header chrome,
   so we only need to ensure the tablist strip is visible; the panel header title/
   icon above already serves as the panel label. */
.tab-group__header--docked-host {
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Drop-zone visual feedback for docked panel header merge target (#3654) */
.grid-panel--tab-merge-target {
  box-shadow: inset 0 0 0 2px var(--color-accent-primary) !important;
  background: color-mix(in srgb, var(--color-accent-primary) 8%, var(--color-bg-primary)) !important;
}

.grid-panel--tab-merge-target .grid-panel__header {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-secondary)) !important;
  color: var(--color-accent-primary) !important;
}

/* ========================================
 * BASE TAB GROUP
 * ======================================== */

.tab-group {
  position: fixed;
  z-index: var(--z-floating);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  min-width: 300px;
  min-height: 250px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: hidden;
}

/* Focused state */
.tab-group:focus-within,
.tab-group--focused {
  z-index: var(--z-floating-above);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
              0 6px 16px rgba(0, 0, 0, 0.3),
              0 0 0 2px var(--color-accent-primary);
}

/* ========================================
 * ORIENTATION: HORIZONTAL TOP (default)
 * ======================================== */

.tab-group,
.tab-group--horizontal-top {
  flex-direction: column;
}

.tab-group--horizontal-top .tab-group__header {
  flex-direction: row;
  border-bottom: 1px solid var(--color-border-default);
}

.tab-group--horizontal-top .tab-group__tablist {
  flex-direction: row;
  border-bottom: 1px solid var(--color-border-default);
}

.tab-group--horizontal-top .tab-group__tab {
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
}

.tab-group--horizontal-top .tab-group__tab--active {
  border-bottom-color: var(--color-accent-primary);
}

/* ========================================
 * ORIENTATION: HORIZONTAL BOTTOM
 * ======================================== */

.tab-group--horizontal-bottom {
  flex-direction: column-reverse;
}

.tab-group--horizontal-bottom .tab-group__header {
  flex-direction: row;
  border-top: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--horizontal-bottom .tab-group__tablist {
  flex-direction: row;
  border-top: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--horizontal-bottom .tab-group__tab {
  border-top: 2px solid transparent;
  border-bottom: none;
  border-radius: 0 0 4px 4px;
}

.tab-group--horizontal-bottom .tab-group__tab--active {
  border-top-color: var(--color-accent-primary);
}

/* ========================================
 * ORIENTATION: VERTICAL LEFT
 * ======================================== */

.tab-group--vertical-left {
  flex-direction: row;
}

.tab-group--vertical-left .tab-group__header {
  flex-direction: column;
  border-right: 1px solid var(--color-border-default);
  border-bottom: none;
  width: auto;
}

.tab-group--vertical-left .tab-group__tablist {
  flex-direction: column;
  border-right: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--vertical-left .tab-group__tab {
  border-right: 2px solid transparent;
  border-bottom: none;
  border-radius: 4px 0 0 4px;
  flex-direction: column;
  padding: 8px 6px;
}

.tab-group--vertical-left .tab-group__tab--active {
  border-right-color: var(--color-accent-primary);
}

.tab-group--vertical-left .tab-group__tab-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  max-width: none;
  max-height: 100px;
}

.tab-group--vertical-left .tab-group__content-wrapper {
  flex: 1;
  min-width: 0;
}

/* ========================================
 * ORIENTATION: VERTICAL RIGHT
 * ======================================== */

.tab-group--vertical-right {
  flex-direction: row-reverse;
}

.tab-group--vertical-right .tab-group__header {
  flex-direction: column;
  border-left: 1px solid var(--color-border-default);
  border-bottom: none;
  width: auto;
}

.tab-group--vertical-right .tab-group__tablist {
  flex-direction: column;
  border-left: 1px solid var(--color-border-default);
  border-bottom: none;
}

.tab-group--vertical-right .tab-group__tab {
  border-left: 2px solid transparent;
  border-bottom: none;
  border-radius: 0 4px 4px 0;
  flex-direction: column;
  padding: 8px 6px;
}

.tab-group--vertical-right .tab-group__tab--active {
  border-left-color: var(--color-accent-primary);
}

.tab-group--vertical-right .tab-group__tab-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  max-width: none;
  max-height: 100px;
}

.tab-group--vertical-right .tab-group__content-wrapper {
  flex: 1;
  min-width: 0;
}

/* ========================================
 * HEADER
 * ======================================== */

.tab-group__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  background: var(--color-bg-secondary);
  cursor: move;
  -webkit-user-select: none;
  user-select: none;
  flex-shrink: 0;
  gap: 8px;
}

.tab-group__header:active {
  cursor: grabbing;
}

.tab-group__header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ========================================
 * TAB LIST
 * ======================================== */

.tab-group__tablist {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  background: var(--color-bg-secondary);
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.tab-group__tablist::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}

.tab-group__tablist::-webkit-scrollbar-thumb {
  background: var(--color-bg-tertiary);
  border-radius: 2px;
}

/* ========================================
 * TAB BUTTON
 * ======================================== */

.tab-group__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  position: relative;
}

.tab-group__tab:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.tab-group__tab--active {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.tab-group__tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tab-group__tab-icon svg {
  width: 14px;
  height: 14px;
}

.tab-group__tab-title {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-group__tab-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
  cursor: pointer;
}

.tab-group__tab:hover .tab-group__tab-close {
  opacity: 1;
}

.tab-group__tab-close:hover {
  background: var(--color-accent-error);
  color: white;
}

.tab-group__tab-close svg {
  width: 10px;
  height: 10px;
}

/* ========================================
 * ADD TAB BUTTON
 * ======================================== */

.tab-group__tab-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
  align-self: center;
}

.tab-group__tab-add:hover:not(.tab-group__tab-add--disabled) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.tab-group__tab-add svg {
  width: 12px;
  height: 12px;
}

.tab-group__tab-add--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ========================================
 * TAB RENAME (contenteditable)
 * ======================================== */

.tab-group__tab-title--editing {
  outline: none;
  border-bottom: 1px solid var(--color-accent-primary);
  min-width: 40px;
  cursor: text;
  padding-bottom: 1px;
  white-space: nowrap;
  overflow: visible;
  /* Suppress ellipsis while editing */
  text-overflow: clip;
  max-width: 200px;
}

/* Custom (user-created) tab visual distinction */
.tab-group__tab--custom .tab-group__tab-icon {
  opacity: 0.6;
}

/* ========================================
 * BLANK TAB PLACEHOLDER
 * ======================================== */

.tab-group__panel--blank {
  display: none;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.tab-group__panel--blank.tab-group__panel--active {
  display: flex;
}

.tab-group__blank-hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: 24px;
  max-width: 240px;
  line-height: 1.5;
  opacity: 0.7;
}
/**
 * Tab Group — Controls & State
 * ==============================
 * Content area, header buttons, add-tab, resize, ghost mode,
 * merge preview, state classes, mobile, and reduced motion.
 */

/* ========================================
 * CONTENT AREA
 * ======================================== */

.tab-group__content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.tab-group__content {
  flex: 1;
  overflow: auto;
  padding: 8px;
  min-height: 0;
}

/* Panel containers */
.tab-group__panel {
  display: none;
  height: 100%;
}

.tab-group__panel--active {
  display: block;
}

/* ========================================
 * HEADER BUTTONS
 * ======================================== */

.tab-group__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-group__btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.tab-group__btn svg {
  width: 14px;
  height: 14px;
}

.tab-group__btn--close:hover {
  background: var(--color-accent-error);
  color: white;
}

.tab-group__btn--orientation {
  font-size: 10px;
}

.tab-group__btn--ghost.active {
  color: var(--color-accent-cyan);
}

/* ========================================
 * RESIZE HANDLES
 * ======================================== */

.tab-group__resize {
  position: absolute;
  z-index: var(--z-sticky);
  background: transparent;
}

.tab-group__resize--n,
.tab-group__resize--s {
  height: 8px;
  left: 12px;
  right: 12px;
}

.tab-group__resize--n {
  top: -4px;
  cursor: ns-resize;
}

.tab-group__resize--s {
  bottom: -4px;
  cursor: ns-resize;
}

.tab-group__resize--e,
.tab-group__resize--w {
  width: 8px;
  top: 12px;
  bottom: 12px;
}

.tab-group__resize--e {
  right: -4px;
  cursor: ew-resize;
}

.tab-group__resize--w {
  left: -4px;
  cursor: ew-resize;
}

.tab-group__resize--ne,
.tab-group__resize--nw,
.tab-group__resize--se,
.tab-group__resize--sw {
  width: 16px;
  height: 16px;
}

.tab-group__resize--ne {
  top: -4px;
  right: -4px;
  cursor: nesw-resize;
}

.tab-group__resize--nw {
  top: -4px;
  left: -4px;
  cursor: nwse-resize;
}

.tab-group__resize--se {
  bottom: -4px;
  right: -4px;
  cursor: nwse-resize;
}

.tab-group__resize--sw {
  bottom: -4px;
  left: -4px;
  cursor: nesw-resize;
}

/* Corner grip indicator */
.tab-group__resize--se::after {
  content: '';
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: linear-gradient(
    135deg,
    transparent 50%,
    var(--color-text-muted) 50%,
    var(--color-text-muted) 60%,
    transparent 60%,
    transparent 70%,
    var(--color-text-muted) 70%,
    var(--color-text-muted) 80%,
    transparent 80%
  );
  opacity: 0.5;
  pointer-events: none;
}

.tab-group:hover .tab-group__resize--se::after {
  opacity: 0.8;
}

/* ========================================
 * GHOST MODE
 * ======================================== */

.tab-group--ghost {
  backdrop-filter: blur(var(--ghost-blur-subtle));
  -webkit-backdrop-filter: blur(var(--ghost-blur-subtle));
  transition:
    opacity var(--ghost-transition),
    backdrop-filter var(--ghost-transition),
    box-shadow var(--ghost-transition);
}

.tab-group--ghost.tab-group--ghost-ethereal {
  opacity: var(--ghost-opacity-ethereal);
  background: rgba(26, 26, 26, 0.4);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.tab-group--ghost.tab-group--ghost-ethereal:hover {
  opacity: calc(var(--ghost-opacity-ethereal) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost.tab-group--ghost-wisp {
  opacity: var(--ghost-opacity-wisp);
  background: rgba(26, 26, 26, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.tab-group--ghost.tab-group--ghost-wisp:hover {
  opacity: calc(var(--ghost-opacity-wisp) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost.tab-group--ghost-shade {
  opacity: var(--ghost-opacity-shade);
  background: rgba(26, 26, 26, 0.6);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.tab-group--ghost.tab-group--ghost-shade:hover {
  opacity: calc(var(--ghost-opacity-shade) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost.tab-group--ghost-phantom {
  opacity: var(--ghost-opacity-phantom);
  background: rgba(26, 26, 26, 0.75);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.tab-group--ghost.tab-group--ghost-phantom:hover {
  opacity: calc(var(--ghost-opacity-phantom) + var(--ghost-hover-opacity-boost));
}

.tab-group--ghost .tab-group__header,
.tab-group--ghost .tab-group__tablist {
  background: rgba(45, 45, 45, 0.5);
}

.tab-group--ghost .tab-group__header-controls {
  opacity: 0.5;
  transition: opacity var(--ghost-transition);
}

.tab-group--ghost:hover .tab-group__header-controls {
  opacity: 1;
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .tab-group--ghost,
  .tab-group--ghost.tab-group--ghost-ethereal,
  .tab-group--ghost.tab-group--ghost-wisp,
  .tab-group--ghost.tab-group--ghost-shade,
  .tab-group--ghost.tab-group--ghost-phantom {
    opacity: 1;
    background: var(--color-bg-primary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ========================================
 * STATE CLASSES
 * ======================================== */

.tab-group--dragging {
  opacity: 0.9;
  transition: none;
}

.tab-group--resizing {
  transition: none;
}

.tab-group--minimized {
  display: none;
}

/* Animations */
@keyframes tab-group-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.tab-group--entering {
  animation: tab-group-enter 0.2s ease-out;
}

@keyframes tab-group-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.tab-group--exiting {
  animation: tab-group-exit 0.15s ease-in;
  pointer-events: none;
}

@keyframes tab-group-minimize {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.5) translateY(100px);
  }
}

.tab-group--minimizing {
  animation: tab-group-minimize 0.2s ease-in forwards;
}

/* ========================================
 * MERGE PREVIEW OVERLAY
 * ======================================== */

.tab-merge-preview {
  position: fixed;
  z-index: var(--z-ceiling);
  display: none;
  background: rgba(90, 159, 216, 0.2);
  border: 2px dashed var(--color-accent-primary);
  border-radius: 6px;
  pointer-events: none;
  animation: merge-preview-pulse 1s ease-in-out infinite;
}

.tab-merge-preview--visible {
  display: block;
}

@keyframes merge-preview-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.01);
  }
}

/* Merge zone indicator on headers */
.tab-group--merge-target .tab-group__header,
.floating-panel--merge-target .floating-panel__header {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    rgba(90, 159, 216, 0.3) 50%,
    var(--color-bg-secondary) 100%
  );
  animation: merge-target-glow 1.5s ease-in-out infinite;
}

@keyframes merge-target-glow {
  0%, 100% {
    box-shadow: inset 0 0 10px rgba(90, 159, 216, 0.2);
  }
  50% {
    box-shadow: inset 0 0 20px rgba(90, 159, 216, 0.4);
  }
}

/* ========================================
 * MOBILE: DISABLE TAB GROUPS
 * ======================================== */

@media (max-width: 768px) {
  .tab-group,
  .tab-merge-preview {
    display: none;
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .tab-group--ghost {
    transition: none;
  }

  .tab-group--entering,
  .tab-group--exiting,
  .tab-group--minimizing {
    animation: none;
  }

  .tab-merge-preview,
  .tab-group--merge-target .tab-group__header,
  .floating-panel--merge-target .floating-panel__header {
    animation: none;
  }
}
/**
 * Tab Group System — Import Hub
 * ===============================
 * tmux-like tab group system with orientations, resizing, and state.
 *
 * Decomposed into focused files under tab_group/ for maintainability.


 */
/**
 * Turn Rhythm System — Base Layout, Phase Indicator, Timer & Mode Selector
 */

/* ========================================
 * CSS Custom Properties (Scoped)
 * ======================================== */

.turn-rhythm-panel {
  --turn-rhythm-planning-color: var(--color-green-500);
  --turn-rhythm-resolving-color: var(--color-orange-500);
  --turn-rhythm-paused-color: var(--color-gray-500);
  --turn-rhythm-timer-warning: var(--color-yellow-500);
  --turn-rhythm-timer-critical: var(--color-red-500);
}

/* ========================================
 * Main Panel Layout
 * ======================================== */

.turn-rhythm-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
}

.turn-rhythm-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.turn-rhythm-panel__phase {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.turn-rhythm-panel__timer {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.turn-rhythm-panel__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
}

.turn-rhythm-panel__resolution {
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.turn-rhythm-panel__resolution.hidden {
  display: none;
}

/* ========================================
 * Phase Indicator
 * ======================================== */

.phase-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}

.phase-indicator.phase-planning {
  background: color-mix(in srgb, var(--turn-rhythm-planning-color) 20%, transparent);
  color: var(--turn-rhythm-planning-color);
}

.phase-indicator.phase-resolution {
  background: color-mix(in srgb, var(--turn-rhythm-resolving-color) 20%, transparent);
  color: var(--turn-rhythm-resolving-color);
}

.round-indicator {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* ========================================
 * Timer Display
 * ======================================== */

.timer-display {
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

.timer-display.timer-warning {
  color: var(--turn-rhythm-timer-warning);
}

.timer-display.timer-critical {
  color: var(--turn-rhythm-timer-critical);
  animation: timer-pulse 1s ease-in-out infinite;
}

.timer-display.timer-expired {
  color: var(--turn-rhythm-timer-critical);
  font-weight: var(--font-weight-bold);
}

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ========================================
 * Mode Selector (Compact Single-Click Design)
 * ======================================== */

.mode-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

/* Compact variant - single clickable control (inline with input) */
.mode-selector--compact {
  display: inline-flex;
  position: relative;
  padding: 0;
  background: transparent;
  margin: 0;
  flex-shrink: 0;
}

/* Inline mode selector button with icon + label */
.mode-selector__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mode-selector__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.mode-selector__btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 1px;
}

/* Mode change animation */
.mode-selector__btn.mode-changed {
  animation: mode-pulse 0.3s ease-out;
}

@keyframes mode-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); background: var(--color-accent-primary); }
  100% { transform: scale(1); }
}

/* Educational tooltip */
.mode-selector__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  z-index: var(--z-panel);
  animation: tooltip-bounce 0.4s ease-out;
}

.mode-selector__tooltip[data-dismissed="true"] {
  display: none;
}

.mode-selector__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 16px;
  border: 6px solid transparent;
  border-top-color: var(--color-accent-primary);
}

.mode-selector__tooltip-text {
  font-size: 11px;
  color: var(--color-text-primary);
}

.mode-selector__tooltip-text kbd {
  display: inline-block;
  padding: 1px 4px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}

.mode-selector__tooltip-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.mode-selector__tooltip-dismiss:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

@keyframes tooltip-bounce {
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Legacy control style (kept for non-compact usage) */
.mode-selector__control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.mode-selector__control:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.mode-selector__control:focus-visible {
  outline: 2px solid var(--color-accent-emphasis);
  outline-offset: 2px;
}

.mode-selector__control.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mode-specific colors */
.mode-selector__btn.mode-color-gray,
.mode-selector__control.mode-color-gray {
  border-color: var(--color-text-tertiary);
}
.mode-selector__btn.mode-color-gray:hover,
.mode-selector__control.mode-color-gray:hover {
  border-color: var(--color-text-secondary);
  background: rgba(128, 128, 128, 0.15);
}

.mode-selector__btn.mode-color-purple,
.mode-selector__control.mode-color-purple {
  border-color: var(--color-accent-purple, #a855f7);
}
.mode-selector__btn.mode-color-purple:hover,
.mode-selector__control.mode-color-purple:hover {
  border-color: var(--color-accent-purple, #a855f7);
  background: rgba(168, 85, 247, 0.15);
}

.mode-selector__btn.mode-color-blue,
.mode-selector__control.mode-color-blue {
  border-color: var(--color-accent-info, #3b82f6);
}
.mode-selector__btn.mode-color-blue:hover,
.mode-selector__control.mode-color-blue:hover {
  border-color: var(--color-accent-info, #3b82f6);
  background: rgba(59, 130, 246, 0.15);
}

.mode-selector__btn.mode-color-yellow,
.mode-selector__control.mode-color-yellow {
  border-color: var(--color-accent-warning, #eab308);
}
.mode-selector__btn.mode-color-yellow:hover,
.mode-selector__control.mode-color-yellow:hover {
  border-color: var(--color-accent-warning, #eab308);
  background: rgba(234, 179, 8, 0.15);
}

.mode-selector__btn.mode-color-green,
.mode-selector__control.mode-color-green {
  border-color: var(--color-accent-success, #22c55e);
}
.mode-selector__btn.mode-color-green:hover,
.mode-selector__control.mode-color-green:hover {
  border-color: var(--color-accent-success, #22c55e);
  background: rgba(34, 197, 94, 0.15);
}

.mode-selector__btn.mode-color-orange,
.mode-selector__control.mode-color-orange {
  border-color: var(--color-accent-warning, #f97316);
}
.mode-selector__btn.mode-color-orange:hover,
.mode-selector__control.mode-color-orange:hover {
  border-color: var(--color-accent-warning, #f97316);
  background: rgba(249, 115, 22, 0.15);
}

/* Icon in the compact control */
.mode-selector__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.mode-selector__icon svg {
  width: 14px;
  height: 14px;
}

/* Label in the compact control */
.mode-selector__label {
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
  font-size: 11px;
}

/* Keyboard hint - hidden in compact mode */
.mode-selector--compact .mode-selector__hint {
  display: none;
}

.mode-selector__hint {
  display: flex;
  align-items: center;
  margin-left: var(--space-1);
  color: var(--color-text-muted);
}

.mode-selector__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
}

/* Legacy button styles (kept for compatibility) */
.mode-selector__btn.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.mode-selector__shortcut {
  font-size: var(--font-size-2xs);
  color: var(--color-text-tertiary);
  margin-left: var(--space-1);
}
/**
 * Turn Rhythm System — Action Queue & Ready States
 */

/* ========================================
 * Action Queue
 * ======================================== */

.action-queue {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.action-queue__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.action-queue__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.action-queue__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  background: var(--color-bg-tertiary);
  padding: var(--space-half) var(--space-2);
  border-radius: var(--radius-pill);
}

.action-queue__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}

.action-queue__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Action Items */
.queued-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background 0.15s ease;
}

.queued-action:last-child {
  border-bottom: none;
}

.queued-action:hover {
  background: var(--color-bg-hover);
}

.queued-action__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.queued-action__content {
  flex: 1;
  min-width: 0;
}

.queued-action__verb {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.queued-action__target {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.queued-action__type {
  font-size: var(--font-size-2xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.queued-action__remove {
  padding: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.queued-action:hover .queued-action__remove {
  opacity: 1;
}

.queued-action__remove:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger-fg);
}

/* Conditional Actions */
.queued-action.conditional {
  border-left: 3px solid var(--color-warning-emphasis);
}

.queued-action__trigger {
  font-size: var(--font-size-xs);
  color: var(--color-warning-fg);
  background: var(--color-warning-subtle);
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

/* ========================================
 * Ready States
 * ======================================== */

.ready-states {
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
}

.ready-states__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
}

.ready-states__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ready-state {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
}

.ready-state.ready {
  background: var(--color-success-subtle);
  border-color: var(--color-success-emphasis);
}

.ready-state.not-ready {
  background: var(--color-bg-primary);
  border-color: var(--color-border-default);
}

.ready-state__indicator {
  font-size: var(--font-size-sm);
}

.ready-state.ready .ready-state__indicator {
  color: var(--color-success-fg);
}

.ready-state.not-ready .ready-state__indicator {
  color: var(--color-text-tertiary);
}

.ready-state__name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.waiting-message {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-2);
  font-style: italic;
}
/**
 * Turn Rhythm System — Telegraphs & DM Bump Panel
 */

/* ========================================
 * Telegraphs
 * ======================================== */

.telegraphs {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-danger-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.telegraphs.hidden {
  display: none;
}

.telegraphs__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.telegraphs__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-fg);
  margin: 0;
}

.telegraphs__hint {
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
}

.telegraphs__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
}

.telegraphs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.telegraphs__empty {
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
}

/* Telegraph Items */
.telegraph-item {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--threat-color, var(--color-border-default));
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.telegraph-item:hover {
  background: var(--color-bg-hover);
}

/* Threat level colors */
.telegraph-item.threat-immediate { --threat-color: var(--color-danger-emphasis); }
.telegraph-item.threat-high { --threat-color: var(--color-severe-emphasis); }
.telegraph-item.threat-moderate { --threat-color: var(--color-warning-emphasis); }
.telegraph-item.threat-low { --threat-color: var(--color-text-tertiary); }

.telegraph-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.telegraph-item__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-fg);
}

.telegraph-item__threat {
  font-size: var(--font-size-sm);
}

.telegraph-item__body {
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.telegraph-stance {
  font-size: var(--font-size-base);
}

.telegraph-hint {
  color: var(--color-text-secondary);
}

/* Clarity-based hint styling */
.telegraph-item.clarity-clear .telegraph-hint { color: var(--color-text-primary); }
.telegraph-item.clarity-good .telegraph-hint { color: var(--color-text-secondary); }
.telegraph-item.clarity-partial .telegraph-hint { color: var(--color-text-tertiary); font-style: italic; }
.telegraph-item.clarity-vague .telegraph-hint { color: var(--color-text-disabled); font-style: italic; }
.telegraph-item.clarity-none .telegraph-hint { color: var(--color-text-disabled); font-style: italic; }

.telegraph-hint--none {
  color: var(--color-text-disabled);
  font-style: italic;
}

.telegraph-target {
  font-size: var(--font-size-xs);
  background: var(--color-danger-subtle);
  color: var(--color-danger-fg);
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
}

.telegraph-item__meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
}

.telegraph-insight {
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius-sm);
}

.telegraph-insight.success {
  background: var(--color-success-subtle);
  color: var(--color-success-fg);
}

.telegraph-insight.failure {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
}

/* ========================================
 * DM Bump Panel
 * ======================================== */

.dm-bump {
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.dm-bump__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dm-bump__icon {
  font-size: var(--font-size-lg);
}

.dm-bump__title {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  color: var(--color-warning-fg);
}

.dm-bump__timer {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-warning-fg);
}

.dm-bump__body {
  margin-bottom: var(--space-3);
}

.dm-bump__message {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  margin: 0;
}

.dm-bump__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.dm-bump__remember {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.dm-bump__remember .checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
/**
 * Turn Rhythm System — Autopilot Settings, Display, Control Buttons & Resolution
 */

/* ========================================
 * Autopilot Settings
 * ======================================== */

.autopilot-display.initially-hidden,
.autopilot-settings.initially-hidden, .turn-rhythm.initially-hidden { display: none; }

.autopilot-settings {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-width: 400px;
}

.autopilot-settings__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.05em;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.autopilot-settings__toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.autopilot-settings__toggle:focus-visible {
  outline: 2px solid var(--color-accent-emphasis);
  outline-offset: 2px;
}

.autopilot-settings__toggle.active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.autopilot-settings__instructions {
  width: 100%;
  min-height: 80px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  resize: vertical;
}

.autopilot-settings__instructions:focus {
  outline: none;
  border-color: var(--color-accent-emphasis);
}

.autopilot-settings__char-count {
  display: block;
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-1);
}

.autopilot-settings__char-count.warning {
  color: var(--color-warning-fg);
}

/* ========================================
 * Autopilot Display
 * ======================================== */

.autopilot-display {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-muted);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.autopilot-display__actions {
  list-style: none;
  margin: 0 0 var(--space-2) 0;
  padding: 0;
}

.autopilot-action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.autopilot-action::before {
  content: '•';
  color: var(--color-accent-fg);
}

.autopilot-display__reasoning {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--font-size-sm);
}

.autopilot-display__reasoning .reasoning-label {
  color: var(--color-accent-fg);
  font-weight: var(--font-weight-semibold);
}

.autopilot-display__reasoning .reasoning-text {
  color: var(--color-text-secondary);
  font-style: italic;
}

.autopilot-display.dismissing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
 * Control Buttons
 * ======================================== */

.btn--ready {
  background: var(--color-success-subtle);
  border: 1px solid var(--color-success-emphasis);
  color: var(--color-success-fg);
}

.btn--ready:hover {
  background: var(--color-success-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn--ready:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--bump {
  background: var(--color-warning-subtle);
  border: 1px solid var(--color-warning-emphasis);
  color: var(--color-warning-fg);
}

.btn--bump:hover {
  background: var(--color-warning-emphasis);
  color: var(--color-fg-on-emphasis);
}

.btn--autopilot {
  background: var(--color-accent-subtle);
  border: 1px solid var(--color-accent-emphasis);
  color: var(--color-accent-fg);
}

.btn--autopilot:hover {
  background: var(--color-accent-emphasis);
  color: var(--color-fg-on-emphasis);
}

/* ========================================
 * Resolution Pending State
 * ======================================== */

.turn-rhythm-panel.resolution-pending {
  border-color: var(--turn-rhythm-resolving-color);
}

.turn-rhythm-panel.resolution-pending .phase-indicator {
  animation: resolution-pending-pulse 2s ease-in-out infinite;
}

@keyframes resolution-pending-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.resolution-countdown {
  text-align: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.resolution-countdown.hidden {
  display: none;
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

@media (max-width: 640px) {
  .turn-rhythm-panel {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .mode-selector {
    gap: var(--space-half);
  }

  .mode-selector__btn {
    padding: var(--space-half) var(--space-1);
    font-size: var(--font-size-2xs);
  }

  .mode-selector__shortcut {
    display: none;
  }

  .action-queue__list {
    max-height: 150px;
  }

  .dm-bump__actions {
    flex-direction: column;
  }

  .autopilot-settings {
    max-width: 100%;
  }
}
/**
 * Turn Rhythm System — Import Hub
 * ================================
 * Simultaneous action collection and resolution UI.
 * Phase indicator, mode selector, action queue, ready states,
 * telegraphs, DM bump panel, and autopilot components.
 *
 * Decomposed into focused files under turn_rhythm/ for maintainability (#2783).




 */
/* ==========================================================================
   Workflow Panels
   ========================================================================== */

/* ----------------------------------------
   Workflow Status Panel
   ---------------------------------------- */

.workflow-status-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.workflow-status-panel.compact {
  padding: var(--space-2);
  gap: var(--space-1);
}

/* Mode-specific theming */
.workflow-status-panel.workflow-mode-sketch {
  border-left: 3px solid var(--color-warning);
}

.workflow-status-panel.workflow-mode-guided {
  border-left: 3px solid var(--color-primary);
}

.workflow-status-panel.workflow-mode-quick {
  border-left: 3px solid var(--color-success);
}

.workflow-status-panel.workflow-mode-polish {
  border-left: 3px solid var(--color-info);
}

/* Header */
.workflow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.workflow-type {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  color: var(--text-primary);
}

.workflow-type svg {
  color: var(--color-primary);
}

.workflow-name {
  font-size: var(--text-sm);
}

.workflow-mode-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: help;
}

.workflow-mode-badge svg {
  width: 12px;
  height: 12px;
}

/* Progress bar */
.workflow-progress-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.workflow-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.workflow-progress-bar .progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease-out;
}

.progress-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 2.5rem;
  text-align: right;
}

/* Phase indicators */
.workflow-phases {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.phase-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  transition: background 0.2s ease, color 0.2s ease;
}

.phase-indicator.phase-complete {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.phase-indicator.phase-current {
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  font-weight: 600;
}

.phase-indicator.phase-pending {
  background: var(--surface-secondary);
  color: var(--text-muted);
}

.phase-indicator.skipped {
  text-decoration: line-through;
  opacity: 0.6;
}

.phase-check,
.phase-current,
.phase-pending {
  font-size: 10px;
}

.phase-label {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Workflow controls */
.workflow-controls {
  display: flex;
  gap: var(--space-1);
  padding-top: var(--space-2);
}

.workflow-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.workflow-btn:hover:not(:disabled) {
  background: var(--surface-tertiary);
  color: var(--text-primary);
}

.workflow-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.workflow-btn svg {
  width: 14px;
  height: 14px;
}

.btn-label {
  display: none;
}

@media (min-width: 640px) {
  .btn-label {
    display: inline;
  }
}

/* Timer */
.workflow-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.workflow-timer svg {
  width: 12px;
  height: 12px;
}

/* ----------------------------------------
   Workflow History Panel
   ---------------------------------------- */

.workflow-history-panel {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 300px;
  overflow-y: auto;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.history-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.history-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Empty state */
.history-empty {
  text-align: center;
  padding: var(--space-4);
  color: var(--text-muted);
}

.history-empty p {
  margin: 0;
  font-size: var(--text-sm);
}

.history-hint {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* History sections */
.history-section {
  margin-bottom: var(--space-2);
}

.section-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}

.section-label svg {
  width: 12px;
  height: 12px;
}

/* History list */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.history-entry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 8px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.history-entry:hover {
  background: var(--surface-tertiary);
}

.history-entry:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.redo-entry {
  opacity: 0.6;
  border-left: 2px solid var(--color-info);
}

.undo-entry {
  border-left: 2px solid var(--color-primary);
}

.entry-phase {
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 60px;
}

.entry-input {
  flex: 1;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-time {
  color: var(--text-muted);
  font-size: 10px;
}

.entry-action {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.history-entry:hover .entry-action {
  opacity: 1;
}

.entry-action svg {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
}

/* Current marker */
.history-current-marker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.marker-line {
  flex: 1;
  height: 1px;
  background: var(--color-primary);
}

.marker-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* History controls */
.history-controls {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  justify-content: flex-end;
}

.history-btn {
  padding: 4px 8px;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.history-btn:hover:not(:disabled) {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.history-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ----------------------------------------
   Mode Switcher (inline component)
   ---------------------------------------- */

.workflow-mode-switcher {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.mode-switch-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mode-switch-btn:hover {
  color: var(--text-secondary);
}

.mode-switch-btn.active {
  background: var(--surface-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.mode-switch-btn svg {
  width: 12px;
  height: 12px;
}
/*
 * Narrative Annotations
 * =====================
 * Text selection annotations on narrative entries.
 * Includes: popover, highlights, margin indicators.
 */

/* ========================================
 * Annotation Popover (floating above selection)
 * ======================================== */

.annotation-popover {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-floating);
  padding: var(--space-3);
  min-width: 240px;
  max-width: 360px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  animation: annotationPopoverIn 150ms ease-out;
}

@keyframes annotationPopoverIn {
  from {
    opacity: 0;
    transform: translate(-50%, -100%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -100%) translateY(0);
  }
}

.annotation-popover__selected-text {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-xs);
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--color-accent-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annotation-popover__input {
  width: 100%;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
  margin-bottom: var(--space-2);
}

.annotation-popover__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(90, 159, 216, 0.2);
}

.annotation-popover__input::placeholder {
  color: var(--color-text-muted);
}

.annotation-popover__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

.annotation-popover__btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.annotation-popover__btn--cancel {
  background: transparent;
  color: var(--color-text-muted);
}

.annotation-popover__btn--cancel:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.annotation-popover__btn--save {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.annotation-popover__btn--save:hover {
  filter: brightness(1.1);
}

/* ========================================
 * Annotation Highlight (on annotated text)
 * ======================================== */

.annotation-highlight {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
  border-bottom: 1px dashed var(--color-accent-primary);
  border-radius: 2px;
  cursor: help;
  transition: background var(--transition-fast);
}

.annotation-highlight:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* ========================================
 * Margin Indicator (dot in entry left margin)
 * ======================================== */

.annotation-margin-indicator {
  position: absolute;
  left: -12px;
  top: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.annotation-margin-indicator:hover {
  opacity: 1;
  transform: scale(1.5);
}

.annotation-margin-indicator--multiple {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Show count as pseudo-element for multiple annotations */
.annotation-margin-indicator--multiple::after {
  content: attr(data-count);
  position: absolute;
  top: -4px;
  left: 8px;
  font-size: 9px;
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  line-height: 1;
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .annotation-popover {
    animation: none;
  }

  .annotation-margin-indicator {
    transition: none;
  }

  .annotation-highlight {
    transition: none;
  }
}
/**
 * Moment Capture Component
 * ========================
 * Floating camera button for capturing memorable narrative moments.
 * Positioned top-right of the narrative area, semi-transparent until hover.
 */

/*
 * #3879 — Repositioned from top-right (where it overlapped the channel-tabs
 * row, including the admin DEBUG tier-tab) to bottom-right of the narrative
 * area, just above the input bar. Sits next to scroll-to-latest without
 * crossing any interactive control in the header.
 */
.moment-capture {
  position: absolute;
  bottom: calc(var(--space-4, 16px) + 60px); /* Above input area, matches scroll-to-latest */
  right: var(--space-3, 12px);
  z-index: var(--z-floating);
  pointer-events: auto;
}

.moment-capture__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0.4;
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.moment-capture__button:hover {
  opacity: 1;
  background: var(--color-surface-hover);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.moment-capture__button:active {
  transform: scale(0.95);
}

.moment-capture__button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* Capturing state - pulsing animation */
.moment-capture__button--capturing {
  opacity: 1;
  animation: moment-capture-pulse 0.8s ease-in-out infinite;
}

@keyframes moment-capture-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Success flash animation */
.moment-capture__button--success {
  animation: moment-capture-success 0.6s ease-out;
}

@keyframes moment-capture-success {
  0% {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    transform: scale(1);
  }
}

/* Icon styling */
.moment-capture__button .svg-icon {
  width: 18px;
  height: 18px;
}

/* Feedback toast — anchored above the button (#3879 reposition). */
.moment-capture__feedback {
  position: absolute;
  bottom: calc(100% + var(--spacing-2));
  right: 0;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  animation: moment-feedback-in 0.2s ease-out;
}

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

.moment-capture__feedback--success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.moment-capture__feedback--error {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.moment-capture__feedback-text {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tooltip on hover */
.moment-capture__button[title] {
  position: relative;
}

.moment-capture__button[title]::after {
  content: attr(title);
  position: absolute;
  /* #3879: render above the button (it now sits bottom-right, above input). */
  bottom: calc(100% + var(--spacing-1));
  right: 0;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  /* Keep tooltip narrow so it can't span across the panel into adjacent
     controls (e.g. the DEBUG tier-tab); break long titles instead. */
  max-width: 220px;
  white-space: normal;
  text-align: right;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-fast),
    visibility var(--transition-fast);
  pointer-events: none;
  z-index: var(--z-raised);
}

.moment-capture__button[title]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Position context - ensure parent has position relative */
.narrative-main {
  position: relative;
}

/* ============================================================
 * Prompt Panel - Image prompt display with copy functionality
 * ============================================================ */

.moment-capture__prompt-panel {
  position: absolute;
  /* #3879: anchor above the button (bottom-right placement). */
  bottom: calc(100% + var(--spacing-2));
  right: 0;
  width: 320px;
  max-width: calc(100vw - var(--spacing-6));
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: moment-panel-in 0.3s ease-out;
  z-index: calc(var(--z-floating) + 1);
}

@keyframes moment-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.moment-capture__prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-2) var(--spacing-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-success);
}

.moment-capture__prompt-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.moment-capture__prompt-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Tabs for switching between prompt formats */
.moment-capture__prompt-tabs {
  display: flex;
  gap: var(--spacing-1);
  padding: var(--spacing-2);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.moment-capture__prompt-tab {
  flex: 1;
  padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.moment-capture__prompt-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.moment-capture__prompt-tab--active {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Prompt content area */
.moment-capture__prompt-contents {
  padding: var(--spacing-2);
}

.moment-capture__prompt-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.moment-capture__prompt-content.hidden {
  display: none;
}

.moment-capture__prompt-text {
  margin: 0;
  padding: var(--spacing-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow-y: auto;
}

.moment-capture__copy-btn {
  padding: var(--spacing-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.moment-capture__copy-btn:hover {
  background: var(--color-accent);
  color: var(--color-surface);
}

.moment-capture__copy-btn--success {
  background: var(--color-success);
  border-color: var(--color-success);
  color: white;
}

/* Footer with help text */
.moment-capture__prompt-footer {
  padding: var(--spacing-2) var(--spacing-3);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.moment-capture__prompt-footer small {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .moment-capture__prompt-panel {
    width: calc(100vw - var(--spacing-4));
    right: calc(-100% + 36px + var(--spacing-2));
  }

  .moment-capture__prompt-tabs {
    flex-wrap: wrap;
  }

  .moment-capture__prompt-tab {
    flex: 1 1 calc(50% - var(--spacing-1));
  }
}
/**
 * Imagine Entry
 * =============
 * Inline image entries in the narrative panel from /imagine command.
 * Three states: loading (shimmer), complete (image), error.
 *
 * Collapsed-by-default (#5083)
 * ----------------------------
 * When loading, the entry renders as a thin ≤32px pill. The player can
 * click/tap the pill to expand and see the shimmer preview. The complete
 * and error states auto-expand so the result is always visible immediately.
 *
 * Mechanism:
 *   .imagine-entry--loading                → collapsed pill (28px)
 *   .imagine-entry--loading.imagine-entry--expanded → full shimmer
 *   .imagine-entry--complete               → always expanded (auto-expand via JS)
 *   .imagine-entry--error                  → always expanded
 */

/* ================================================================
 * Base shell — shared across all states
 * ================================================================ */

.imagine-entry {
  margin: 8px 0;
  background: var(--panel-bg, rgba(0, 0, 0, 0.2));
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-color, #333);
  overflow: hidden;
}

/* ================================================================
 * Loading state — collapsed pill (≤32px resting height)
 * ================================================================ */

/* Collapsed pill: icon + label + expand hint, height 28px */
.imagine-entry--loading {
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.imagine-entry--loading:hover {
  background: rgba(79, 70, 229, 0.08);
  border-color: rgba(79, 70, 229, 0.35);
}

.imagine-entry--loading:focus-visible {
  outline: 2px solid var(--accent-color, #4f46e5);
  outline-offset: 1px;
}

/* Collapsed header row — full-width clickable strip */
.imagine-entry--loading .imagine-entry__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 28px;              /* resting height: 28px (≤32px target) */
  margin-bottom: 0;
}

/* Expanded loading state — shimmer visible */
.imagine-entry--loading.imagine-entry--expanded {
  padding: 10px;
  cursor: default;
}

.imagine-entry--loading.imagine-entry--expanded:hover {
  background: var(--panel-bg, rgba(0, 0, 0, 0.2));
  border-color: var(--border-color, #333);
}

.imagine-entry--loading.imagine-entry--expanded .imagine-entry__header {
  height: auto;
  padding: 0;
  margin-bottom: 8px;
}

/* Expand hint — only shown in collapsed pill */
.imagine-entry__expand-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted, #888);
  font-style: italic;
  white-space: nowrap;
  user-select: none;
}

.imagine-entry--expanded .imagine-entry__expand-hint,
.imagine-entry--complete .imagine-entry__expand-hint,
.imagine-entry--error .imagine-entry__expand-hint {
  display: none;
}

.imagine-entry__icon {
  display: flex;
  align-items: center;
  color: var(--accent-color, #4f46e5);
  flex-shrink: 0;
}

.imagine-entry__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  white-space: nowrap;
}

.imagine-entry--loading .imagine-entry__label {
  color: var(--text-secondary, #888);
}

/* Prompt text — shown in expanded loading and complete states */
.imagine-entry__prompt {
  font-size: 11px;
  color: var(--text-muted, #888);
  margin-top: 6px;
  font-style: italic;
  word-break: break-word;
}

/* Hide prompt in collapsed pill */
.imagine-entry--loading:not(.imagine-entry--expanded) .imagine-entry__prompt {
  display: none;
}

/* Pulsing icon in collapsed loading state */
.imagine-entry--loading:not(.imagine-entry--expanded) .imagine-entry__icon {
  animation: imagine-icon-pulse 1.8s ease-in-out infinite;
}

@keyframes imagine-icon-pulse {
  0%, 100% { opacity: 0.45; }
  50%       { opacity: 1; }
}

/* ================================================================
 * Shimmer — visible only when expanded
 * ================================================================ */

.imagine-entry__shimmer {
  display: none;  /* hidden in collapsed pill */
  height: 160px;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: imagine-shimmer 1.5s ease-in-out infinite;
}

.imagine-entry--expanded .imagine-entry__shimmer {
  display: block;
}

@keyframes imagine-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================================
 * Complete state — auto-expanded, always shows image
 * ================================================================ */

.imagine-entry--complete {
  padding: 10px;
  border-color: var(--accent-color, #4f46e5);
}

.imagine-entry--complete .imagine-entry__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.imagine-entry__image-container {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.imagine-entry__image {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.imagine-entry__image:hover {
  opacity: 0.9;
}

/* ================================================================
 * Error state — auto-expanded, shows error message
 * ================================================================ */

.imagine-entry--error {
  padding: 10px;
  border-color: var(--color-error, #cf6068);
}

.imagine-entry--error .imagine-entry__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.imagine-entry--error .imagine-entry__icon {
  color: var(--color-error, #cf6068);
  animation: none;
}

.imagine-entry--error .imagine-entry__label {
  color: var(--color-error, #cf6068);
}

.imagine-entry__error {
  font-size: 12px;
  color: var(--text-secondary, #888);
  padding: 4px 0;
}

/* ================================================================
 * Mobile — even tighter on small viewports
 * ================================================================ */

@media (max-width: 600px) {
  .imagine-entry--loading .imagine-entry__header {
    height: 26px;  /* slightly smaller on mobile */
  }

  .imagine-entry__image {
    max-height: 220px;
  }

  .imagine-entry__expand-hint {
    display: none;  /* omit hint text on small screens to save space */
  }
}

/* ================================================================
 * Reduced motion
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
  .imagine-entry__shimmer {
    animation: none;
    background: rgba(255, 255, 255, 0.05);
  }

  .imagine-entry--loading:not(.imagine-entry--expanded) .imagine-entry__icon {
    animation: none;
    opacity: 0.65;
  }
}
/**
 * Creator Studio Panels — Title, Homebrew & Balance
 * ===================================================
 * Shared panel title, homebrew status panel, and balance reference panel.
 */

/*
 * Creator Studio Sub-Panels
 * =========================
 * Styles for homebrew_status, balance_reference, encounter_builder, export_preview panels.
 * These panels appear in the Creator Studio layout modes (Mechanics, Campaign Prep, Publishing).
 * Uses design tokens from: terminal/_tokens.css
 */

/* ==========================================================================
 * Shared Panel Title
 * ========================================================================== */

.panel-homebrew-status .panel-title,
.panel-balance-reference .panel-title,
.panel-encounter-builder .panel-title,
.panel-export-preview .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.panel-homebrew-status .panel-icon,
.panel-balance-reference .panel-icon,
.panel-encounter-builder .panel-icon,
.panel-export-preview .panel-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
}

/* ==========================================================================
 * Homebrew Status Panel
 * ========================================================================== */

.panel-homebrew-status {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.homebrew-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.homebrew-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.homebrew-status-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

/* Empty state */
.homebrew-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.homebrew-empty-state .empty-icon {
  display: flex;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.homebrew-empty-state .empty-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}

.homebrew-empty-state .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
  line-height: var(--line-height-normal);
}

.homebrew-empty-state .empty-suggestions {
  text-align: left;
  width: 100%;
  max-width: 240px;
}

.homebrew-empty-state .suggestion-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-medium);
}

.homebrew-empty-state .suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.homebrew-empty-state .suggestion-list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

/* Type summary badges */
.homebrew-type-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.type-badge .badge-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
}

.type-badge .badge-label {
  color: var(--color-text-secondary);
}

/* Recent items */
.homebrew-recent .section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
}

.homebrew-item-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.homebrew-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.homebrew-item:hover {
  background: var(--color-bg-hover);
}

.homebrew-item .item-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

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

.homebrew-item .item-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.homebrew-item .item-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.homebrew-item .item-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==========================================================================
 * Balance Reference Panel
 * ========================================================================== */

.panel-balance-reference {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.balance-ref-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.balance-ref-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ref-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ref-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Reference tables */
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.ref-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.ref-table td {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.ref-table tr:last-child td {
  border-bottom: none;
}

/* Rarity colors */
.rarity-common { color: var(--color-text-secondary); }
.rarity-uncommon { color: var(--color-accent-success, #98c379); }
.rarity-rare { color: var(--color-accent-primary, #61afef); }
.rarity-very-rare { color: var(--color-accent-purple, #c678dd); }
.rarity-legendary { color: var(--color-accent-warning, #e5c07b); }

/* Reference list */
.ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ref-list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
  line-height: var(--line-height-normal);
}

.ref-list li strong {
  color: var(--color-text-secondary);
}
/**
 * Creator Studio Panels — Encounter Builder & Export
 * ====================================================
 * Encounter builder panel and export preview panel.
 */

/* ==========================================================================
 * Encounter Builder Panel
 * ========================================================================== */

.panel-encounter-builder {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.encounter-builder-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.encounter-builder-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.eb-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.eb-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Party info */
.eb-party-info {
  display: flex;
  gap: var(--space-4);
}

.party-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
}

.party-stat .stat-num {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  line-height: 1;
}

.party-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.eb-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  font-style: italic;
}

/* XP Threshold grid */
.eb-threshold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.threshold-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
}

.threshold-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.threshold-value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Threshold difficulty colors */
.threshold-easy .threshold-label { color: var(--color-accent-success, #98c379); }
.threshold-medium .threshold-label { color: var(--color-accent-warning, #e5c07b); }
.threshold-hard .threshold-label { color: var(--color-accent-error, #e06c75); }
.threshold-deadly .threshold-label { color: var(--color-accent-purple, #c678dd); }

/* CR table */
.eb-cr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.eb-cr-table th {
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.eb-cr-table td {
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
}

.eb-cr-table tr:last-child td {
  border-bottom: none;
}

/* Multiplier list */
.eb-multiplier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.eb-multiplier-list li {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  padding: var(--space-1) 0;
}

.eb-multiplier-list li strong {
  color: var(--color-text-secondary);
}

/* Suggestions */
.eb-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.eb-suggestions li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}
/**
 * Creator Studio Panels — Scrollbar & Motion
 * ============================================
 * Scrollbar styling and reduced motion support.
 */

/* ==========================================================================
 * Export Preview Panel
 * ========================================================================== */

.panel-export-preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.export-preview-header {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.export-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-4);
}

/* Empty state */
.export-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
}

.export-empty-state .empty-icon {
  display: flex;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}

.export-empty-state .empty-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}

.export-empty-state .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-normal);
}

/* Summary stats */
.export-summary {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.export-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-0-5);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  flex: 1;
}

.export-stat .stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  line-height: 1;
}

.export-stat .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Sections */
.export-section {
  margin-bottom: var(--space-4);
}

.export-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Category list */
.export-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.export-category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.export-category .category-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.export-category .category-name {
  flex: 1;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.export-category .category-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-primary);
}

/* Type breakdown list */
.export-type-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.export-type-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  border-radius: var(--radius-sm);
}

.export-type-item:hover {
  background: var(--color-bg-hover);
}

.export-type-item .type-name {
  color: var(--color-text-primary);
}

.export-type-item .type-count {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* Export suggestions */
.export-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.export-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.export-suggestions li {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
 * Scrollbar Styling (all sub-panels)
 * ========================================================================== */

.homebrew-status-body::-webkit-scrollbar,
.balance-ref-body::-webkit-scrollbar,
.encounter-builder-body::-webkit-scrollbar,
.export-preview-body::-webkit-scrollbar {
  width: var(--scrollbar-width, 6px);
}

.homebrew-status-body::-webkit-scrollbar-track,
.balance-ref-body::-webkit-scrollbar-track,
.encounter-builder-body::-webkit-scrollbar-track,
.export-preview-body::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, transparent);
}

.homebrew-status-body::-webkit-scrollbar-thumb,
.balance-ref-body::-webkit-scrollbar-thumb,
.encounter-builder-body::-webkit-scrollbar-thumb,
.export-preview-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, var(--color-bg-tertiary));
  border-radius: var(--radius-sm);
}

.homebrew-status-body::-webkit-scrollbar-thumb:hover,
.balance-ref-body::-webkit-scrollbar-thumb:hover,
.encounter-builder-body::-webkit-scrollbar-thumb:hover,
.export-preview-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color, var(--color-bg-hover));
}

/* ==========================================================================
 * Reduced Motion Support
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .homebrew-item,
  .export-type-item {
    transition: none;
  }
}
/**
 * Creator Studio Sub-Panels — Import Hub
 * =========================================
 * Creator studio sub-panels for homebrew, encounters, and export.
 *
 * Decomposed into focused files under creator_studio_panels/ for maintainability.



 */
/**
 * Notice Board — Base Styles
 * ============================
 * Base notice board panel, cards, and community posts.
 */

/* Notice Board Panel - LFG Quest Poster System */

.notice-board-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.notice-board-panel .panel-header {
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.notice-board-panel .panel-title {
  margin: 0;
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.notice-board-panel .panel-subtitle {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Tab Navigation */
.notice-board-panel .panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.notice-board-panel .tab-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.notice-board-panel .tab-btn:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.notice-board-panel .tab-btn.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

/* Tab Content */
.notice-board-panel .tab-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
}

.notice-board-panel .tab-content.hidden {
  display: none;
}

/* Filters */
.notice-board-panel .panel-filters {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.notice-board-panel .filter-select {
  flex: 1;
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Quest Poster Card */
.quest-poster-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.quest-poster-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.quest-poster-card.status-filled,
.quest-poster-card.status-withdrawn,
.quest-poster-card.status-expired {
  opacity: 0.7;
}

.quest-poster-card .poster-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.quest-poster-card .poster-title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--accent-primary);
}

.quest-poster-card .poster-status {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
}

.quest-poster-card .poster-hook {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  font-style: italic;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent-primary);
}

.quest-poster-card .poster-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.quest-poster-card .meta-item {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.quest-poster-card .poster-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.quest-poster-card .style-tag {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.quest-poster-card .poster-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}

.quest-poster-card .quest-giver {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.quest-poster-card .poster-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.quest-poster-card .inquiry-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--warning-subtle);
  color: var(--warning);
}

/* Inquiry Section in Poster Card */
.poster-inquiries {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-subtle);
}

.inquiry-item {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.inquiry-item .inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.inquiry-item .character-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.inquiry-item .inquiry-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.inquiry-item.status-pending .inquiry-status {
  background: var(--warning-subtle);
  color: var(--warning);
}

.inquiry-item.status-accepted .inquiry-status {
  background: var(--success-subtle);
  color: var(--success);
}

.inquiry-item.status-declined .inquiry-status {
  background: var(--error-subtle);
  color: var(--error);
}

.inquiry-item .inquiry-message {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-xs) 0;
}

.inquiry-item .inquiry-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Inquiry Card (Player view) */
.inquiry-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.inquiry-card .inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.inquiry-card .poster-title {
  margin: 0;
  font-size: var(--font-size-md);
}

.inquiry-card .character-info {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.inquiry-card .inquiry-message,
.inquiry-card .response-message {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin: var(--space-sm) 0;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Modal */
.notice-board-panel .modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-floating);
}

.notice-board-panel .modal.hidden {
  display: none;
}

.notice-board-panel .modal-content {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-lg);
}

.notice-board-panel .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.notice-board-panel .modal-header h3 {
  margin: 0;
}

.notice-board-panel .btn-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--space-xs);
}

/* Form */
.notice-board-panel .form-group {
  margin-bottom: var(--space-md);
}

.notice-board-panel .form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.notice-board-panel .form-group input,
.notice-board-panel .form-group textarea,
.notice-board-panel .form-group select {
  width: 100%;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

.notice-board-panel .form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.notice-board-panel .form-row {
  display: flex;
  gap: var(--space-md);
}

.notice-board-panel .form-group.half {
  flex: 1;
}

.notice-board-panel .range-inputs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.notice-board-panel .range-inputs input {
  width: 60px;
  text-align: center;
}

.notice-board-panel .range-inputs span {
  color: var(--text-muted);
}

.notice-board-panel .tag-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.notice-board-panel .tag-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.notice-board-panel .tag-checkbox input {
  width: auto;
}

.notice-board-panel .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Poster Preview in Inquiry Modal */
.notice-board-panel .poster-preview {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.notice-board-panel .poster-preview h4 {
  margin: 0 0 var(--space-sm);
  color: var(--accent-primary);
}

.notice-board-panel .poster-preview p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

/* Tab Header */
.notice-board-panel .tab-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-md);
}

/* Loading and Empty States */
.notice-board-panel .loading-state,
.notice-board-panel .empty-state,
.notice-board-panel .error-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.notice-board-panel .loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.notice-board-panel .empty-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
  opacity: 0.5;
}
/**
 * Notice Board — LFG Players
 * ============================
 * Looking for group players tab and player cards.
 */

/* ==================== LFG Players Tab ==================== */

/* Mode Toggle (Browse Players / My Listing) */
.notice-board-panel .lfg-mode-toggle {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  padding: var(--space-xs);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

.notice-board-panel .mode-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.notice-board-panel .mode-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.notice-board-panel .mode-btn.active {
  color: var(--text-primary);
  background: var(--bg-primary);
  box-shadow: 0 1px 3px var(--shadow-color);
}

.notice-board-panel .lfg-mode-content.hidden {
  display: none;
}

/* Player Listing Card */
.player-listing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.player-listing-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 2px 8px var(--shadow-color);
}

.player-listing-card .listing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.player-listing-card .listing-title {
  margin: 0;
  font-size: var(--font-size-md);
  color: var(--accent-primary);
}

.player-listing-card .listing-character {
  margin-bottom: var(--space-sm);
}

.player-listing-card .character-summary {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.player-listing-card .listing-pitch {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent-primary);
  font-style: italic;
}

.player-listing-card .listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.player-listing-card .listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.player-listing-card .listing-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}

.player-listing-card .player-name {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Compatibility Badge */
.compatibility-badge {
  font-size: var(--font-size-xs);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.compatibility-badge.compatibility-high {
  background: var(--success-subtle);
  color: var(--success);
}

.compatibility-badge.compatibility-medium {
  background: var(--warning-subtle);
  color: var(--warning);
}

.compatibility-badge.compatibility-low {
  background: var(--error-subtle);
  color: var(--error);
}

/* My Listing Card (Player's own listing view) */
.my-listing-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.my-listing-card .listing-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.my-listing-card .listing-title {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--accent-primary);
}

.my-listing-card .listing-status {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-muted);
  text-transform: uppercase;
}

.my-listing-card.status-active .listing-status {
  background: var(--success-subtle);
  color: var(--success);
}

.my-listing-card.status-matched .listing-status {
  background: var(--accent-primary-subtle);
  color: var(--accent-primary);
}

.my-listing-card.status-withdrawn .listing-status {
  background: var(--warning-subtle);
  color: var(--warning);
}

.my-listing-card .listing-character {
  margin-bottom: var(--space-sm);
}

.my-listing-card .character-summary {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.my-listing-card .listing-pitch {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-md);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--accent-primary);
}

.my-listing-card .listing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.my-listing-card .listing-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.my-listing-card .listing-actions {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

/* DM Inquiry Items (shown on player's listing) */
.my-listing-card .listing-inquiries {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--border-subtle);
}

.my-listing-card .listing-inquiries h5 {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.dm-inquiry-item {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.dm-inquiry-item .inquiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
}

.dm-inquiry-item .dm-name {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.dm-inquiry-item .inquiry-status {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.dm-inquiry-item.status-pending .inquiry-status {
  background: var(--warning-subtle);
  color: var(--warning);
}

.dm-inquiry-item.status-accepted .inquiry-status {
  background: var(--success-subtle);
  color: var(--success);
}

.dm-inquiry-item.status-declined .inquiry-status {
  background: var(--error-subtle);
  color: var(--error);
}

.dm-inquiry-item .quest-link {
  font-size: var(--font-size-xs);
  color: var(--accent-primary);
  margin: var(--space-xs) 0;
}

.dm-inquiry-item .inquiry-message {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-xs) 0;
  font-style: italic;
}

.dm-inquiry-item .inquiry-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Listing Preview in Recruit Modal */
.notice-board-panel .listing-preview {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.notice-board-panel .listing-preview h4 {
  margin: 0 0 var(--space-sm);
  color: var(--accent-primary);
}

.notice-board-panel .listing-preview p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
/**
 * Notice Board Panel — Import Hub
 * ==================================
 * LFG quest poster system with community posts and player cards.
 *
 * Decomposed into focused files under notice_board/ for maintainability.


 */
/* Party Activity Feed Panel */

.panel-party-activity-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.party-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.party-activity-header .panel-title {
  margin: 0;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.activity-filter-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-xs);
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.activity-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--accent-primary);
}

.activity-filter-btn svg {
  width: 14px;
  height: 14px;
}

.party-activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
}

.party-activity-filters[hidden] {
  display: none;
}

.activity-filter-option {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  cursor: pointer;
}

.activity-filter-option input {
  accent-color: var(--accent-primary);
}

.party-activity-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  line-height: 1.4;
  transition: background 0.2s ease;
}

.activity-item:hover {
  background: var(--bg-tertiary);
}

.activity-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: bold;
  border-radius: var(--radius-sm);
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-description {
  color: var(--text-secondary);
  word-break: break-word;
}

.activity-timestamp {
  font-size: var(--font-size-xxs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* Activity type colors */
.activity-positive .activity-icon {
  color: var(--success);
  background: var(--success-subtle);
}

.activity-negative .activity-icon {
  color: var(--error);
  background: var(--error-subtle);
}

.activity-combat .activity-icon {
  color: var(--warning);
  background: var(--warning-subtle);
}

.activity-dm .activity-icon {
  color: var(--accent-secondary);
  background: var(--accent-secondary-subtle);
}

.activity-quest .activity-icon {
  color: var(--accent-primary);
  background: var(--accent-primary-subtle);
}

.activity-loot .activity-icon {
  color: var(--gold);
  background: var(--gold-subtle);
}

.activity-default .activity-icon {
  color: var(--text-muted);
  background: var(--bg-tertiary);
}

/* Empty state */
.activity-empty {
  text-align: center;
  padding: var(--space-lg);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
/**
 * Campaign Lobby — Player List
 * ==============================
 * Lobby header, player list, skeleton states, ready summary, and status notices.
 */

/* Campaign Lobby Panel - Subtle/Compact Style */
.panel-campaign-lobby {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.campaign-lobby-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.campaign-lobby-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Header meta cluster (#4272 finding 11.1): replaces the player-count tab
   badge after tabs were removed. Player count + status badge sit together
   in the right side of the panel header. */
.campaign-lobby-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.lobby-status-badge {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.lobby-status-badge.status--open {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.lobby-status-badge.status--in_game {
  background: rgba(251, 191, 36, 0.15);
  color: var(--color-warning);
}

.lobby-status-badge.status--closed {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-error);
}

.player-count-badge {
  font-size: var(--font-size-xs);
  padding: 0 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
  color: var(--text-primary);
}

.campaign-lobby-body {
  flex: 1;
  padding: var(--space-2);
  overflow-y: auto;
}

.lobby-section {
  margin-bottom: var(--space-2);
}

/* Player List */
.lobby-player-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--timing-instant);
}

.lobby-player:hover {
  background: rgba(255, 255, 255, 0.04);
}

.lobby-player--dm {
  background: rgba(255, 215, 0, 0.08);
}

.lobby-player-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-player-status.online {
  background: var(--color-success);
  box-shadow: 0 0 4px var(--color-success);
}

.lobby-player-status.offline {
  background: var(--text-muted);
  opacity: 0.5;
}

.lobby-player-name {
  flex: 1;
  font-size: var(--font-size-sm);
}

.lobby-player-role {
  font-size: 9px;
  padding: 1px 5px;
  background: rgba(255, 215, 0, 0.2);
  color: var(--color-gold, #ffd700);
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lobby-player-ready {
  display: flex;
  align-items: center;
}

.lobby-player-ready svg {
  width: 14px;
  height: 14px;
}

.lobby-player-ready.ready {
  color: var(--color-success);
}

.lobby-player-ready.not-ready {
  color: var(--text-muted);
  opacity: 0.5;
}

.lobby-player-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-2);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

.lobby-player-empty svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}

.lobby-kick-btn {
  opacity: 0;
  transition: opacity var(--timing-fast);
  padding: 2px 4px;
}

.lobby-player:hover .lobby-kick-btn {
  opacity: 0.6;
}

.lobby-kick-btn:hover {
  opacity: 1;
  color: var(--color-error);
}

/* Skeleton state (#4272 finding 11.2): shaped placeholder rows that match
   the real player-row geometry (status dot + name + ready badge) so the
   list doesn't reflow when real data lands. The base shimmer comes from
   the global .skeleton-line in components/_skeleton.css. */
.lobby-player--skeleton {
  pointer-events: none;
  opacity: 0.7;
}

.lobby-player--skeleton .skeleton-line--dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.lobby-player--skeleton .skeleton-line--name {
  flex: 1;
  height: 12px;
  max-width: 140px;
  border-radius: var(--radius-xs);
}

.lobby-player--skeleton .skeleton-line--ready {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Vary skeleton name widths slightly so the list reads as multiple players
   rather than a uniform stack. */
.lobby-player--skeleton:nth-child(2) .skeleton-line--name {
  max-width: 100px;
}

.lobby-player--skeleton:nth-child(3) .skeleton-line--name {
  max-width: 120px;
}

/* Ready Summary */
.lobby-ready-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
}

.ready-count {
  font-weight: 600;
  color: var(--color-success);
}

.ready-label {
  color: var(--text-muted);
}

/*
 * Lobby status notices (#3764, unified in #4272 finding 11.3).
 *
 * Single component used for both "waiting for DM" and "late joiner" notices.
 * Variant modifiers control palette only — base layout is shared so the
 * two notices read as siblings of one component, not parallel implementations.
 *
 * - .lobby-status-notice--waiting-for-dm: shown when the player is ready,
 *   all players are ready, but the DM hasn't pressed Start Game yet.
 * - .lobby-status-notice--late-joiner: shown when a player joins a campaign
 *   that already transitioned to in_game.
 */
.lobby-status-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.lobby-status-notice.hidden {
  display: none;
}

.lobby-status-notice__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.lobby-status-notice__icon svg {
  width: 16px;
  height: 16px;
}

.lobby-status-notice__body {
  flex: 1;
  min-width: 0;
}

.lobby-status-notice__body strong {
  display: block;
  margin-bottom: 2px;
}

.lobby-status-notice__body p {
  margin: 0;
  color: var(--text-muted);
}

/* Late-joiner — "paused for you" framing, blue/info palette. */
.lobby-status-notice--late-joiner {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.25);
  color: var(--text-primary);
}

.lobby-status-notice--late-joiner .lobby-status-notice__icon {
  color: var(--accent-primary, #60a5fa);
}

.lobby-status-notice--late-joiner .lobby-status-notice__body strong {
  color: var(--accent-primary, #60a5fa);
}

/* Waiting-for-DM — gating warning, amber palette. */
.lobby-status-notice--waiting-for-dm {
  align-items: center;
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  color: var(--color-warning, #fbbf24);
}

.lobby-status-notice--waiting-for-dm .lobby-status-notice__icon {
  color: var(--color-warning, #fbbf24);
}
/**
 * Campaign Lobby — Actions and Settings
 * =======================================
 * Lobby action buttons, settings panel, and settings groups.
 */


/* Lobby Actions */
.lobby-actions {
  display: flex;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lobby-actions .btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 32px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), opacity var(--timing-fast) var(--ease-default);
}

.lobby-actions .btn:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

.lobby-actions .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.lobby-actions .btn-leave {
  flex: 0 0 auto;
}

.lobby-actions .btn-leave:hover {
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
}

/* Settings — inline collapsible (#4272 finding 11.1). Replaces the Settings
   tab. Uses native <details>/<summary> for keyboard + screen-reader support
   without adding an extra Stimulus action. */
.lobby-settings-details {
  margin-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: var(--space-2);
}

.lobby-settings-summary {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Hide default disclosure marker; we draw our own affordance via the icon. */
.lobby-settings-summary::-webkit-details-marker { display: none; }
.lobby-settings-summary::marker { content: ''; }

.lobby-settings-summary:hover,
.lobby-settings-details[open] .lobby-settings-summary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
}

.lobby-settings-summary:focus-visible {
  outline: 2px solid var(--accent-primary, #60a5fa);
  outline-offset: 2px;
}

.lobby-settings-summary__icon {
  display: inline-flex;
  align-items: center;
  transition: transform var(--timing-fast) var(--ease-default);
}

.lobby-settings-summary__icon svg {
  width: 12px;
  height: 12px;
}

.lobby-settings-details[open] .lobby-settings-summary__icon {
  transform: rotate(45deg);
}

.lobby-settings-content {
  padding-top: var(--space-2);
}

/* Settings groups (carried over from the previous Settings-tab styles). */
.lobby-settings-group {
  margin-bottom: var(--space-3);
}

.settings-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-select {
  width: 100%;
  padding: 6px 10px;
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}

.settings-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.settings-select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.settings-hint {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: 4px;
  font-style: italic;
}

.settings-buttons {
  display: flex;
  gap: 8px;
}

.settings-buttons .btn {
  padding: 5px 10px;
  font-size: var(--font-size-xs);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

.settings-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.06);
/**
 * Campaign Lobby — Player Settings and Plans
 * ============================================
 * Player settings view, pulse animations, and party plans log.
 */

  color: var(--text-primary);
}

/* Player Settings View */
.lobby-settings-info {
  padding: var(--space-3);
  text-align: center;
}

.settings-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.settings-note svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

/* Pulse animation for start button when ready */
.btn-pulse {
  animation: pulse 1.5s infinite;
}

/* Party plans log (#4819 follow-up) — renders /plan broadcasts */
.lobby-party-plans {
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.lobby-party-plans__title {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.lobby-party-plans__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 200px;
  overflow-y: auto;
}

.lobby-party-plans__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-radius: var(--radius-xs);
}

.lobby-party-plans__item:nth-child(odd) {
  background: rgba(255, 255, 255, 0.02);
}

.lobby-party-plans__author {
  font-weight: 600;
  color: var(--text-accent, var(--text-primary));
  white-space: nowrap;
}

.lobby-party-plans__author::after {
  content: ":";
  margin-left: 1px;
}

.lobby-party-plans__content {
  flex: 1;
  word-break: break-word;
}

.lobby-party-plans__timestamp {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.lobby-party-plans__empty {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
}

.lobby-party-plans__empty code {
  font-style: normal;
  padding: 0 var(--space-1);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xs);
}
/**
 * Campaign Lobby Panel — Import Hub
 * ====================================
 * Multiplayer lobby with player list, ready states, actions, and settings.
 *
 * Decomposed into focused files under campaign_lobby/ for maintainability.



 */
/**
 * Creation Reference Panel — Entity List
 * =========================================
 * Panel header, search, tabs, content, entity list, category sections, and entity cards.
 */

/**
 * Creation Reference Panel
 * ========================
 * Browsable entity list for character creation.
 * Shows races, classes, backgrounds, etc. based on current creation step.
 */

.creation-reference-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel-bg, #0a0a14);
  border-radius: 8px;
  overflow: hidden;
}

/* Header */
.creation-reference-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--panel-header-bg, #1a1a2e);
  border-bottom: 1px solid var(--border-color, #2a2a4e);
}

.creation-reference-panel__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}

.creation-reference-panel__title .svg-icon--16 {
  width: 16px;
  height: 16px;
  color: var(--accent-color, #00d4ff);
}

.creation-reference-panel__step-label {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #2a2a4e);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* Search */
.creation-reference-panel__search {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color, #2a2a4e);
}

/* Tabs */
.creation-reference-panel__tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color, #2a2a4e);
  overflow-x: auto;
}

.creation-reference-panel__tabs:empty {
  display: none;
}

.creation-reference-panel__tab {
  padding: 0.375rem 0.75rem;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted, #888);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.creation-reference-panel__tab:hover {
  color: var(--text-primary, #e0e0e0);
  background: var(--bg-tertiary, #2a2a4e);
}

.creation-reference-panel__tab--active {
  color: var(--accent-color, #00d4ff);
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

/* Content */
.creation-reference-panel__content {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.creation-reference-panel__content::-webkit-scrollbar {
  width: 6px;
}

.creation-reference-panel__content::-webkit-scrollbar-track {
  background: var(--bg-primary, #0a0a14);
}

.creation-reference-panel__content::-webkit-scrollbar-thumb {
  background: var(--border-color, #3a3a5e);
  border-radius: 3px;
}

.creation-reference-panel__content::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover, #4a4a6e);
}

/* Entity List */
.creation-browser__entities {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Category Section */
.creation-browser__category {
  margin-bottom: 1rem;
}

.creation-browser__category-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.5rem;
}

.creation-browser__category-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-color, #2a2a4e);
}

/* Entity Card */
.creation-browser__entity-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4e);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
  width: 100%;
}

.creation-browser__entity-card:hover {
  border-color: var(--accent-color, #00d4ff);
  background: var(--bg-hover, #2a2a4e);
}

/* Focus state for keyboard navigation (A11y requirement) */
.creation-browser__entity-card:focus-visible {
  outline: 2px solid var(--accent-color, #00d4ff);
  outline-offset: 2px;
  border-color: var(--accent-color, #00d4ff);
  background: var(--bg-hover, #2a2a4e);
}

.creation-browser__entity-card--selected {
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

.creation-browser__entity-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary, #2a2a4e);
  border-radius: 6px;
  color: var(--accent-color, #00d4ff);
  flex-shrink: 0;
}

.creation-browser__entity-icon svg {
  width: 20px;
  height: 20px;
}

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

.creation-browser__entity-name {
  display: block;
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 0.25rem;
}

.creation-browser__entity-desc {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creation-browser__entity-meta {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.creation-browser__entity-tag {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  /* Minimum readable size is 12px (0.75rem), was 9px */
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #2a2a4e);
  padding: 0.1875rem 0.5rem;
  border-radius: 3px;
}

.creation-browser__entity-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #555);
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.creation-browser__entity-card:hover .creation-browser__entity-arrow {
  color: var(--accent-color, #00d4ff);
}

.creation-browser__entity-arrow svg {
  width: 16px;
  height: 16px;
}

/**
 * Creation Reference Panel — States and Footer
 * ===============================================
 * Empty state, loading skeleton, footer, and 480px responsive breakpoint.
 */

/* Empty State */
.creation-reference-panel__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-muted, #888);
}

.creation-reference-panel__empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  color: var(--text-muted, #555);
}

.creation-reference-panel__empty-icon svg {
  width: 32px;
  height: 32px;
}

.creation-reference-panel__empty-text {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Loading Skeleton */
.skeleton-loader--list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-item {
  padding: 0.75rem;
  background: var(--panel-bg, #1a1a2e);
  border: 1px solid var(--border-color, #2a2a4e);
  border-radius: 6px;
}

.skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #2a2a4e 25%, #3a3a5e 50%, #2a2a4e 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line--title {
  width: 60%;
  height: 14px;
}

.skeleton-line--text {
  width: 100%;
}

.skeleton-line--short {
  width: 40%;
}

@keyframes skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Footer */
.creation-reference-panel__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border-color, #2a2a4e);
  background: var(--panel-header-bg, #1a1a2e);
  flex-shrink: 0;
}

.creation-browser__count {
  font-family: 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
}

.creation-reference-panel__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color, #2a2a4e);
  border-radius: 4px;
  color: var(--text-muted, #888);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.creation-reference-panel__action:hover {
  color: var(--accent-color, #00d4ff);
  border-color: var(--accent-color, #00d4ff);
  background: rgba(0, 212, 255, 0.1);
}

.creation-reference-panel__action svg {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 480px) {
  .creation-reference-panel__header {
    padding: 0.5rem 0.75rem;
  }

  .creation-reference-panel__content {
    padding: 0.375rem;
  }

  .creation-browser__entity-card {
    padding: 0.5rem;
  }

  .creation-browser__entity-icon {
    width: 32px;
    height: 32px;
  }

  .creation-browser__entity-icon svg {
    width: 16px;
    height: 16px;
  }
/**
 * Creation Reference Panel — Narrow Mobile
 * ==========================================
 * Narrow mobile viewport styles for 375-480px (iPhone SE, small Android phones).
 */

}

/* ========================================
 * #2685: Narrow mobile viewports (<480px)
 * ========================================
 * The 480px breakpoint above leaves 375–479px (majority of phones in
 * portrait: iPhone SE/12/13 mini/14, Pixel 5) without a compact variant.
 * At this width, the default font sizes + padding cause entity cards
 * to crowd the header label and push descriptions to three lines.
 * This block tightens spacing and drops base font to 0.85rem-equivalent
 * so two-line clamped descriptions and tag rows stay on one row.
 * Matches the density pattern from _mobile.css (<400px) and
 * mobile_enhancements.css (<375px): reduce padding, trim font-size,
 * tighten line-height.
 */
@media (max-width: 479px) {
  .creation-reference-panel__header {
    padding: 0.5rem 0.625rem;
  }

  .creation-reference-panel__title {
    font-size: 0.8125rem;
    gap: 0.375rem;
  }

  .creation-reference-panel__step-label {
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
  }

  .creation-reference-panel__search {
    padding: 0.375rem 0.625rem;
  }

  .creation-reference-panel__tabs {
    padding: 0.375rem 0.625rem;
    gap: 0.1875rem;
  }

  .creation-reference-panel__tab {
    padding: 0.3125rem 0.5625rem;
    font-size: 0.625rem;
  }

  .creation-reference-panel__content {
    padding: 0.3125rem;
  }

  .creation-browser__entities {
    gap: 0.375rem;
  }

  .creation-browser__category {
    margin-bottom: 0.75rem;
  }

  .creation-browser__category-title {
    font-size: 0.625rem;
    padding: 0.1875rem 0.375rem;
    margin-bottom: 0.375rem;
  }

  .creation-browser__entity-card {
    gap: 0.5rem;
    padding: 0.4375rem;
  }

  .creation-browser__entity-icon {
    width: 28px;
    height: 28px;
    border-radius: 5px;
  }

  .creation-browser__entity-icon svg {
    width: 14px;
    height: 14px;
  }

  .creation-browser__entity-name {
    font-size: 0.75rem;
    margin-bottom: 0.1875rem;
  }

  .creation-browser__entity-desc {
    font-size: 0.625rem;
    line-height: 1.35;
  }

  .creation-browser__entity-meta {
    gap: 0.375rem;
    margin-top: 0.25rem;
  }

  .creation-browser__entity-tag {
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
  }

  .creation-browser__entity-arrow svg {
    width: 14px;
    height: 14px;
  }

  .creation-reference-panel__empty {
    padding: 1.25rem;
  }

  .creation-reference-panel__empty-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.625rem;
  }

  .creation-reference-panel__empty-icon svg {
    width: 24px;
    height: 24px;
  }

  .creation-reference-panel__empty-text {
    font-size: 0.6875rem;
    line-height: 1.4;
  }

  .creation-reference-panel__footer {
    padding: 0.375rem 0.625rem;
  }

  .creation-browser__count {
    font-size: 0.625rem;
  }

  /* #2982: Preserve ≥44px touch target at 375-479px (iPhone SE / standard small iOS).
   * Earlier 28×28 sizing violated WCAG 2.5.5 / iOS HIG 44pt minimum. Keep the
   * SVG glyph small for visual density, but expand the button's hit area via
   * min-width/min-height so thumb taps don't miss. */
  .creation-reference-panel__action {
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.375rem;
  }

  .creation-reference-panel__action svg {
    width: 14px;
    height: 14px;
  }

  /* #2982: Tabs are horizontally scrollable but each tab must still clear
   * the 44px touch minimum on its primary tap axis (height). */
  .creation-reference-panel__tab {
    min-height: 32px;
  }

  /* #2982: Entity cards are the primary interactive surface; ensure they
   * meet the 44px minimum height at 375px even with tightened padding. */
  .creation-browser__entity-card {
    min-height: 44px;
  }
}
/**
 * Creation Reference Panel — Import Hub
 * ========================================
 * Sidebar reference panel for D&D entity lookup during character creation.
 *
 * Decomposed into focused files under creation_reference_panel/ for maintainability.



 */
/* Dungeon Map Panel - terminal-themed exploration map */

.dungeon-map-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 4px;
  overflow: hidden;
}

.dungeon-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  min-height: 28px;
}

.dungeon-map-title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-green, #00ff00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dungeon-map-controls {
  display: flex;
  gap: 2px;
}

.dungeon-map-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: 3px;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}

.dungeon-map-btn:hover {
  background: var(--color-bg-hover, #252525);
  color: var(--color-text-primary, #eee);
}

.dungeon-map-btn:active {
  background: var(--color-bg-active, #333);
}

.dungeon-map-container {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
}

.dungeon-map-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
}

.dungeon-map-empty-state {
  color: var(--color-text-secondary, #888);
  text-align: center;
  padding: var(--space-4, 16px);
}

.dungeon-map-empty-state .empty-state__icon {
  color: var(--color-text-green, #00ff00);
  opacity: 0.6;
}
/* Spatial Map Editor — terminal-themed grid editor for SpatialManifest data */

.spatial-map-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #2a2a2a);
  border-radius: 4px;
  overflow: hidden;
}

/* Header */
.spatial-map-editor__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  min-height: 28px;
}

.spatial-map-editor__title {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--color-text-green, #00ff00);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.spatial-map-editor__actions {
  display: flex;
  gap: 4px;
}

.spatial-map-editor__btn {
  padding: 2px 8px;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: 3px;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.spatial-map-editor__btn:hover {
  background: var(--color-bg-hover, #252525);
  color: var(--color-text-primary, #eee);
}

.spatial-map-editor__btn--primary {
  border-color: var(--color-text-green, #00ff00);
  color: var(--color-text-green, #00ff00);
}

.spatial-map-editor__btn--primary:hover {
  background: rgba(0, 255, 0, 0.1);
}

/* Toolbar */
.spatial-map-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--color-bg-secondary, #111);
  border-bottom: 1px solid var(--color-border, #2a2a2a);
  flex-wrap: wrap;
}

.spatial-map-editor__dimensions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.spatial-map-editor__label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-secondary, #aaa);
  display: flex;
  align-items: center;
  gap: 2px;
}

.spatial-map-editor__dim-input {
  width: 40px;
  padding: 1px 4px;
  background: var(--color-bg-primary, #0a0a0a);
  border: 1px solid var(--color-border, #333);
  border-radius: 2px;
  color: var(--color-text-green, #00ff00);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  text-align: center;
}

.spatial-map-editor__dim-input:focus {
  outline: none;
  border-color: var(--color-text-green, #00ff00);
}

.spatial-map-editor__tool-group {
  display: flex;
  gap: 2px;
  border-left: 1px solid var(--color-border, #333);
  padding-left: 6px;
}

/* Terrain brush buttons */
.spatial-map-editor__terrain-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px;
  background: var(--color-bg-tertiary, #1a1a1a);
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.spatial-map-editor__terrain-btn:hover {
  border-color: var(--color-border, #444);
}

.spatial-map-editor__terrain-btn--active {
  border-color: var(--color-text-green, #00ff00);
  box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
}

.spatial-map-editor__terrain-label {
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  color: var(--color-text-secondary, #aaa);
}

.spatial-map-editor__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.spatial-map-editor__swatch--stone-floor { background: #3a3a4a; }
.spatial-map-editor__swatch--wall { background: #1a1a2a; }
.spatial-map-editor__swatch--wood-floor { background: #6b4f2a; }
.spatial-map-editor__swatch--water { background: #1a3a6a; }
.spatial-map-editor__swatch--difficult { background: #4a3a2a; }
.spatial-map-editor__swatch--door { background: #8b5a2b; }
.spatial-map-editor__swatch--pillar { background: #5a5a6a; }
.spatial-map-editor__swatch--stairs { background: #4a4a5a; }

/* Canvas area */
.spatial-map-editor__canvas-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0f;
  padding: 8px;
}

.spatial-map-editor__canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  max-height: 100%;
  cursor: crosshair;
}

/* Footer */
.spatial-map-editor__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  background: var(--color-bg-secondary, #111);
  border-top: 1px solid var(--color-border, #2a2a2a);
  min-height: 22px;
}

.spatial-map-editor__cell-info,
.spatial-map-editor__status {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--color-text-secondary, #777);
}

.spatial-map-editor__status {
  color: var(--color-text-green, #00ff00);
}

/* Export textarea */
.spatial-map-editor__export-area {
  width: 100%;
  max-height: 120px;
  padding: 4px 8px;
  background: var(--color-bg-primary, #0a0a0a);
  border: none;
  border-top: 1px solid var(--color-border, #2a2a2a);
  color: var(--color-text-green, #00ff00);
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  resize: none;
}

.spatial-map-editor__export-area:focus {
  outline: none;
}
/* ============================================
 * Foreshadowing Panel (DM Terminal Sidebar)
 * ============================================
 * Shows active plot threads, hooks, orbits, and promises.
 * DM-only panel for tracking narrative foreshadowing elements.
 */

.panel-foreshadowing {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg-panel);
  font-family: var(--font-mono);
  overflow: hidden;
}

/* Header */
.foreshadowing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.foreshadowing-header .panel-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.foreshadowing-header .panel-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

.refresh-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.refresh-btn:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
}

.refresh-btn.refreshing .refresh-icon {
  animation: spin 1s linear infinite;
}

/* Quick Stats */
.foreshadowing-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}

.foreshadowing-stats .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.foreshadowing-stats .stat-value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.foreshadowing-stats .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Body */
.foreshadowing-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
}

/* Sections */
.foreshadowing-section {
  margin-bottom: var(--space-3);
}

.foreshadowing-section:last-child {
  margin-bottom: 0;
}

.foreshadowing-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.foreshadowing-section .section-header:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.foreshadowing-section .section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.section-toggle {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.section-content {
  margin-top: var(--space-2);
}

/* Foreshadow Items */
.foreshadow-item {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent-primary);
}

.foreshadow-item:last-child {
  margin-bottom: 0;
}

.item-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.item-title {
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  min-width: 100px;
}

.item-badge {
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

/* Badge colors */
.badge-mystery { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.badge-prophecy { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.badge-revenge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-romance { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.badge-political { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.badge-quest_hook { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.badge-subplot { background: var(--color-bg-tertiary); color: var(--color-text-muted); }
.badge-foreshadowing { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.badge-villain_scheme { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.badge-faction_conflict { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.badge-ready { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.badge-active { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

/* Importance stars */
.importance-stars {
  font-size: var(--font-size-xs);
  letter-spacing: 1px;
}

.importance-1 { color: var(--color-text-muted); }
.importance-2 { color: var(--color-text-secondary); }
.importance-3 { color: var(--color-accent-primary); }
.importance-4 { color: #eab308; }
.importance-5 { color: #ef4444; }

/* Item content */
.item-description {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.item-hint {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  font-style: italic;
}

.hint-label {
  color: var(--color-text-muted);
}

.item-npcs {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.npcs-label {
  color: var(--color-text-muted);
}

.item-meta {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Urgency indicators */
.urgency-indicator {
  font-size: var(--font-size-sm);
}

.urgency-immediate { color: #ef4444; }
.urgency-time_sensitive { color: #eab308; }
.urgency-low { color: var(--color-text-muted); }
.urgency-background { color: var(--color-text-muted); opacity: 0.6; }

/* Hook items */
.hook-item.urgency-immediate {
  border-left-color: #ef4444;
}

.hook-item.urgency-time_sensitive {
  border-left-color: #eab308;
}

.ai-badge {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  margin-left: var(--space-1);
}

/* Orbit progress */
.orbit-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-accent-primary);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 35px;
}

.orbit-ready {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: #22c55e;
  font-weight: var(--font-weight-medium);
}

/* Promise items */
.promise-direction {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.promise-npc_to_player { border-left-color: #3b82f6; }
.promise-player_to_npc { border-left-color: #22c55e; }
.promise-mutual { border-left-color: #eab308; }

.promise-text {
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--color-text-secondary);
}

.overdue-badge {
  font-size: var(--font-size-xs);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.2);
  color: #eab308;
  margin-left: var(--space-1);
}

/* Empty state */
.foreshadowing-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.foreshadowing-empty .empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.foreshadowing-empty .empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* Footer */
.foreshadowing-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
  flex-shrink: 0;
}

.footer-link {
  font-size: var(--font-size-xs);
  color: var(--color-accent-primary);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}
/* Party Roster Panel */
/* Compact party member display for character sheet sidebar */

.party-roster {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-xs, 4px) 0;
}

/* Empty state */
.party-roster__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg, 16px);
  text-align: center;
  color: var(--color-text-muted, #6b7280);
}

.party-roster__empty-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm, 8px);
  opacity: 0.5;
}

.party-roster__empty-icon svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
}

.party-roster__empty-message {
  margin: 0;
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  color: var(--color-text-secondary, #9ca3af);
}

.party-roster__empty-hint {
  margin: var(--spacing-xs, 4px) 0 0;
  font-size: var(--font-size-sm, 0.875rem);
}

/* Loading state */
.party-roster__loading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-md, 12px);
}

/* Party members list */
.party-roster__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 4px);
}

/* Individual member card */
.party-roster__member {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  padding: var(--spacing-sm, 8px);
  background: var(--color-bg-secondary, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--color-border, #374151);
  border-radius: var(--radius-sm, 4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.party-roster__member--clickable {
  cursor: pointer;
}

.party-roster__member--clickable:hover {
  border-color: var(--color-text-secondary, #9ca3af);
  box-shadow: 0 0 6px rgba(156, 163, 175, 0.15);
}

.party-roster__member--self {
  border-color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 5%, transparent);
}

/* Member portrait */
.party-roster__portrait {
  position: relative;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-tertiary, #1f2937);
  border: 2px solid var(--color-border, #374151);
}

.party-roster__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.party-roster__portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--color-text-muted, #6b7280);
}

.party-roster__portrait-placeholder svg {
  width: 20px;
  height: 20px;
}

/* Online indicator on portrait */
.party-roster__online-indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-text-muted, #6b7280);
  border: 2px solid var(--color-bg-secondary, #1f2937);
}

.party-roster__online-indicator--online {
  background: #22c55e;
}

.party-roster__online-indicator--idle {
  background: #eab308;
}

.party-roster__online-indicator--away {
  background: #6b7280;
}

/* Member info section */
.party-roster__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.party-roster__name-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
}

.party-roster__name {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e5e7eb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-roster__you-badge {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-accent-primary, #6366f1);
  background: color-mix(in srgb, var(--color-accent-primary, #6366f1) 15%, transparent);
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Friend icon — small heart shown next to the name of party members who are
   confirmed friends of the viewer. Only visible to the viewer themselves;
   the server only sets is_friend=true for the requesting user's own friend graph. */
.party-roster__friend-badge {
  font-size: 0.65rem;
  color: #e879f9;
  line-height: 1;
  flex-shrink: 0;
  cursor: default;
}

.party-roster__class {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Health status section */
.party-roster__status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

/* HP status badge (privacy-aware) */
.party-roster__hp-status {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.party-roster__hp-status--healthy {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.party-roster__hp-status--injured {
  color: #eab308;
  background: rgba(234, 179, 8, 0.15);
}

.party-roster__hp-status--bloodied {
  color: #f97316;
  background: rgba(249, 115, 22, 0.15);
}

.party-roster__hp-status--critical {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  animation: pulse-hp-critical 1.5s ease-in-out infinite;
}

.party-roster__hp-status--down {
  color: #6b7280;
  background: rgba(107, 114, 128, 0.15);
}

@keyframes pulse-hp-critical {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* HP bar for self (shows exact HP) */
.party-roster__hp-bar {
  width: 60px;
  height: 6px;
  background: var(--color-bg-tertiary, #1f2937);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--color-border, #374151);
}

.party-roster__hp-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.party-roster__hp-fill--healthy {
  background: #22c55e;
}

.party-roster__hp-fill--wounded {
  background: #eab308;
}

.party-roster__hp-fill--critical {
  background: #ef4444;
}

.party-roster__hp-text {
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-mono, monospace);
  color: var(--color-text-secondary, #9ca3af);
}

/* Conditions display */
.party-roster__conditions {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 2px;
}

.party-roster__condition {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Condition severity colors */
.party-roster__condition--debuff {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.party-roster__condition--control {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.party-roster__condition--buff {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

/* Party header (optional) */
.party-roster__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-xs, 4px);
  margin-bottom: var(--spacing-xs, 4px);
  border-bottom: 1px solid var(--color-border, #374151);
}

.party-roster__title {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-secondary, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.party-roster__count {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #6b7280);
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .party-roster__hp-status--critical {
    animation: none;
  }

  .party-roster__member,
  .party-roster__hp-fill {
    transition: none;
  }
}
/**
 * Session Analytics Panel
 * =======================
 * Displays session statistics, progression charts, and DM metrics.
 * Extracted from inline <style> in terminal/panels/_session_analytics.html.erb.
 */

.session-analytics-panel {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  overflow-y: auto;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.analytics-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
}

.analytics-icon {
  width: 20px;
  height: 20px;
  color: var(--color-accent-primary);
}

.date-range-filters {
  display: flex;
  gap: var(--space-1);
}

.date-range-btn {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.date-range-btn:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.date-range-btn.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* Loading */
.analytics-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.analytics-loading.hidden,
.analytics-empty.hidden {
  display: none;
}

.session-analytics-panel .loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border-subtle);
  border-top-color: var(--color-accent-primary);
  border-radius: 50%;
  animation: session-analytics-spin 0.8s linear infinite;
}

@keyframes session-analytics-spin {
  to { transform: rotate(360deg); }
}

/* Empty state */
.analytics-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Sections */
.session-analytics-panel .analytics-section {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.session-analytics-panel .section-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Campaign stats grid */
.campaign-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
}

.campaign-stat {
  text-align: center;
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.campaign-stat__value {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-accent-primary);
}

.campaign-stat__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Session list */
.session-analytics-panel .session-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

.analytics-session-card {
  padding: var(--space-3);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.analytics-session-card:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-default);
}

.analytics-session-card--selected {
  border-color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 10%, var(--color-bg-tertiary));
}

.session-card__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.session-card__date {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: 500;
}

.session-card__duration {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-card__body {
  display: flex;
  gap: var(--space-3);
}

.session-card__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.session-analytics-panel .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.session-analytics-panel .stat-value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
}

.session-card__summary {
  margin: var(--space-2) 0 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Progression chart */
.progression-chart-container {
  min-height: 120px;
}

.progression-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.progression-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100px;
  padding: var(--space-2) 0;
}

.progression-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.progression-bar {
  width: 100%;
  min-height: 4px;
  background: var(--color-accent-primary);
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height 0.3s ease;
}

.progression-bar--level-up {
  background: linear-gradient(to top, var(--color-accent-primary), var(--color-accent-warning));
}

.level-marker {
  position: absolute;
  top: -16px;
  font-size: 10px;
}

.progression-chart__labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Session detail */
.session-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.session-detail__title {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.session-detail__section h5 {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.session-detail__section p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Notable moments */
.notable-moments-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.notable-moment {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.moment-icon {
  flex-shrink: 0;
}

.moment-text {
  color: var(--color-text-secondary);
}

.no-moments, .no-data {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--font-size-sm);
}

/* DM metrics */
.dm-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.dm-metric {
  text-align: center;
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.dm-metric__value {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-accent-cyan);
}

.dm-metric__label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Tool usage */
.tool-usage-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tool-usage-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-xs);
  font-size: var(--font-size-sm);
}

.tool-name {
  color: var(--color-text-secondary);
}

.tool-count {
  color: var(--color-accent-primary);
  font-weight: 500;
}
/**
 * Point Buy Panel — Base Styles
 * =================================
 * Core layout, method selection, and shared form styles.
 */

/**
 * Point Buy & Ability Score Assignment
 * =====================================
 * Styles for all three ability score methods:
 * - Standard Array (click-to-assign)
 * - Roll Dice (click-to-assign)
 * - Point Buy (+/- controls with budget)
 *
 * Source of truth for classes used in:
 *   app/javascript/controllers/terminal/creation_ability_controller.js
 */

/* ========================================
   Ability Panel Theme
   Orange accent for ability score selection
   ======================================== */

.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);
  --panel-accent-rgb: 249, 115, 22;
  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);
}

/* ========================================
   Method Selection Cards
   Three options: Standard Array, Roll, Point Buy
   ======================================== */

.ability-methods-grid.selection-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.ability-method-card.selection-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 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: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms 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: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--panel-accent-color, #fb923c);
  margin-bottom: var(--space-1, 4px);
}

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

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

/* Mobile: stack the four siblings (icon / name / description / detail) vertically
   so they don't squeeze into 4 narrow columns on phone-width viewports.
   Original row layout produces "Sta..." truncation + 3-word-wide description
   columns at <420px. */
@media (max-width: 600px) {
  .ability-method-card.selection-card,
  .ability-method-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2, 8px);
  }

  .ability-method-card .card-icon,
  .ability-method-card .method-icon {
    width: auto;
    text-align: left;
  }

  .ability-method-card .card-name,
  .ability-method-card .method-name {
    margin-bottom: 0;
  }
}

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

.ability-method-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4, 16px);
  padding: var(--space-4, 16px);
  background: rgba(251, 146, 60, 0.05);
  border: 1px solid rgba(251, 146, 60, 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms 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: var(--font-size-md, 15px);
  font-weight: var(--font-weight-semibold, 600);
  color: #fb923c;
  margin-bottom: var(--space-1, 4px);
}

.method-description {
  font-size: var(--font-size-sm, 11px);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-1, 4px);
}

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

/* ========================================
   Click-to-Assign UI (Standard Array & Roll)
   Value chips + ability slot cards
   ======================================== */

.ability-values-section {
  margin-bottom: var(--space-5, 20px);
}

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

.values-pool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 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: var(--radius-lg, 2px);
  font-size: var(--font-size-xl, 18px);
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
  cursor: pointer;
  transition: all var(--transition-normal, 200ms 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); }
}

/**
 * Point Buy Panel — Ability Slots
 * ==================================
 * Ability slot cards (shared by all methods) and point buy sliders.
 */

/* ========================================
   Ability Slot Cards (shared by all methods)
   3x2 grid of mini-cards per ability
   ======================================== */

.ability-slots-section {
  margin-bottom: var(--space-4, 16px);
}

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

/* Ability slot cards - card-style with centered content */
.ability-slot.selection-card.detailed {
  padding: var(--space-3, 12px);
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(var(--panel-accent-rgb, 249, 115, 22), 0.2);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms 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 */
.ability-slot {
  padding: var(--space-3, 12px);
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 2px);
  cursor: pointer;
  transition: all var(--transition-normal, 200ms 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: var(--space-1-5, 6px);
  margin-bottom: var(--space-2, 8px);
}

.ability-abbrev {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
}

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

.primary-badge {
  font-size: 9px;
  padding: 2px var(--space-1-5, 6px);
  background: rgba(251, 146, 60, 0.2);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: var(--radius-sm, 2px);
  color: #fb923c;
}

.ability-slot-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-1, 4px);
}

.assigned-value {
  font-size: var(--font-size-3xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: rgba(255, 255, 255, 0.9);
}

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

.racial-bonus {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: #60a5fa;
}

.ability-slot-total {
  font-size: var(--font-size-sm, 11px);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-1-5, 6px);
}

.total-value {
  font-weight: var(--font-weight-semibold, 600);
  color: rgba(255, 255, 255, 0.7);
}

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

.ability-slot-desc {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.4);
  line-height: var(--line-height-tight, 1.25);
}

/* ========================================
   Point Buy UI
   Budget header + 3x2 grid of ability cards
   ======================================== */

.point-buy-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: rgba(251, 146, 60, 0.1);
  border: 1px solid rgba(251, 146, 60, 0.3);
  border-radius: var(--radius-lg, 2px);
  margin-bottom: var(--space-4, 16px);
}

.points-remaining {
  font-size: var(--font-size-lg, 17px);
  color: rgba(255, 255, 255, 0.9);
}

.points-remaining span {
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
  font-size: var(--font-size-2xl, 20px);
}

.points-total {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
}

/* Budget Progress Bar */
.pb-budget-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full, 9999px);
  overflow: hidden;
}

.pb-budget-fill {
  height: 100%;
  background: linear-gradient(90deg, #fb923c, #fbbf24);
  border-radius: var(--radius-full, 9999px);
  transition: width 0.3s ease;
}

/* Budget exhausted state */
.budget-exhausted .pb-budget-fill {
  background: linear-gradient(90deg, var(--color-accent-error, #cf6068), #e06c75);
}

.budget-exhausted .points-remaining span {
  color: var(--color-accent-error, #cf6068);
}

/* Point Buy Sliders — 3x2 grid of mini-cards */
.point-buy-sliders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3, 12px);
}

.point-buy-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px);
  background: rgba(30, 30, 40, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg, 2px);
  transition: all var(--transition-normal, 200ms ease);
}

.point-buy-row:hover {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.03);
}

.point-buy-row.primary {
  border-color: rgba(251, 146, 60, 0.3);
  background: rgba(251, 146, 60, 0.05);
}

/* Ability info: abbreviation + primary badge */
.pb-ability-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1-5, 6px);
  width: 100%;
}

.pb-ability-name {
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-bold, 700);
  color: #fb923c;
}

.point-buy-row.primary .pb-ability-name {
  color: #fbbf24;
}

.pb-ability-desc {
  display: none; /* Hidden in card layout; info is conveyed by abbreviation */
}

/* Score display: large centered number + modifier */
.pb-score-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pb-score {
  font-size: var(--font-size-3xl, 24px);
  font-weight: var(--font-weight-bold, 700);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
}

.pb-modifier {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: rgba(255, 255, 255, 0.5);
}

/* Controls: +/- buttons flanking the score */
.pb-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pb-btn {
  width: 32px;
  height: 32px;
  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: var(--radius-lg, 2px);
  color: #fb923c;
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--font-weight-bold, 700);
  cursor: pointer;
  transition: all var(--transition-fast, 100ms ease);
}

.pb-btn:hover:not(:disabled) {
  background: rgba(251, 146, 60, 0.3);
  border-color: #fb923c;
  transform: scale(1.05);
}

.pb-btn:active:not(:disabled) {
  transform: scale(0.95);
}

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

/* Racial bonus */
.pb-racial {
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-semibold, 600);
  color: #60a5fa;
}

/* Total score */
.pb-total {
  font-size: var(--font-size-lg, 17px);
  font-weight: var(--font-weight-bold, 700);
  color: #4ade80;
  padding: 2px var(--space-1-5, 6px);
  background: rgba(74, 222, 128, 0.1);
  border-radius: var(--radius-sm, 2px);
}

/* Cost display */
.pb-cost {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
}

.pb-cost span {
  color: #fbbf24;
  font-weight: var(--font-weight-semibold, 600);
}

/* Accessible summary (screen readers + visual) */
.pb-summary {
  font-size: var(--font-size-xs, 10px);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-2, 8px);
  min-height: 1em;
}
/**
 * Point Buy Panel — Confirm and Responsive
 * ==========================================
 * Confirm button and responsive breakpoints.
 */


/* ========================================
   Confirm Button (shared by all methods)
   ======================================== */

.ability-confirm-section {
  margin-top: var(--space-4, 16px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid rgba(251, 146, 60, 0.2);
}

.ability-confirm-btn {
  width: 100%;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  background: rgba(251, 146, 60, 0.15);
  border: 1px solid rgba(251, 146, 60, 0.4);
  border-radius: var(--radius-lg, 2px);
  color: rgba(251, 146, 60, 0.6);
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  cursor: not-allowed;
  transition: all var(--transition-normal, 200ms 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: 2-col on small screens
   ======================================== */

@media (max-width: 640px) {
  .ability-slots-grid.selection-grid,
  .point-buy-sliders {
    grid-template-columns: repeat(2, 1fr);
  }

  .ability-value-chip {
    width: 38px;
    height: 38px;
    font-size: var(--font-size-lg, 17px);
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ability-value-chip.selected {
    animation: none;
  }

  .pb-budget-fill {
    transition: none;
  }
}
/**
 * Point Buy & Ability Score Assignment — Import Hub
 * ====================================================
 * Point buy system, standard array, manual roll, and ability assignment methods.
 *
 * Decomposed into focused files under point_buy/ for maintainability.



 */
/**
 * Creator Studio Manual Tools — Base
 * =====================================
 * Section toggle, body, search input, recent-use chips, categories, and tool rows.
 */

/**
 * Creator Studio — Manual Tools Panel Section
 * ============================================
 * Collapsible catalog of all 98 tools available in Creator Studio dashboard
 * mode. Rendered inside the dashboard panel, above the Tips section.
 *
 * See: app/views/terminal/panels/_creator_studio_manual_tools.html.erb
 *      app/javascript/controllers/creator_studio_manual_tools_controller.js
 */

.cs-manual-tools {
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  overflow: hidden;
}

/* ==========================================================================
 * Section toggle header
 * ========================================================================== */

.cs-manual-tools__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-3);
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__toggle:hover {
  background: var(--color-bg-tertiary);
}

.cs-manual-tools__toggle-label {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cs-manual-tools__count {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  text-transform: none;
  letter-spacing: normal;
}

.cs-manual-tools__toggle-chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.cs-manual-tools__toggle--expanded .cs-manual-tools__toggle-chevron {
  transform: rotate(180deg);
}

/* ==========================================================================
 * Section body
 * ========================================================================== */

.cs-manual-tools__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
}

.cs-manual-tools__body[hidden] {
  display: none;
}

/* ==========================================================================
 * Search input
 * ========================================================================== */

.cs-manual-tools__search {
  display: flex;
  flex-direction: column;
}

.cs-manual-tools__search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.cs-manual-tools__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 122, 162, 247), 0.15);
}

/* ==========================================================================
 * Recent-use chip row
 * ========================================================================== */

.cs-manual-tools__recent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-manual-tools__recent[hidden] {
  display: none;
}

.cs-manual-tools__recent-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cs-manual-tools__recent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cs-manual-tools__chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-0-5) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-pill, 12px);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.cs-manual-tools__chip:hover {
  background: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
}

/* ==========================================================================
 * Categories
 * ========================================================================== */

.cs-manual-tools__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cs-manual-tools__category {
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  overflow: hidden;
}

.cs-manual-tools__category[hidden] {
  display: none;
}

.cs-manual-tools__category-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__category-header:hover {
  background: var(--color-bg-tertiary);
}

.cs-manual-tools__category-chevron {
  display: inline-flex;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
}

.cs-manual-tools__category--open .cs-manual-tools__category-chevron {
  transform: rotate(90deg);
}

.cs-manual-tools__category-name {
  flex: 1;
  font-weight: var(--font-weight-medium);
}

.cs-manual-tools__category-count {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__category-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.05));
}

.cs-manual-tools__category-body[hidden] {
  display: none;
}

/* ==========================================================================
 * Tool rows
 * ========================================================================== */

.cs-manual-tools__row {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  background: var(--color-bg-secondary);
  overflow: hidden;
}

.cs-manual-tools__row[hidden] {
  display: none;
}

.cs-manual-tools__row-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 0;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__row-header:hover,
.cs-manual-tools__row--open .cs-manual-tools__row-header {
  background: var(--color-bg-tertiary);
}

.cs-manual-tools__tool-name {
  flex-shrink: 0;
  font-family: var(--font-family-mono, monospace);
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.cs-manual-tools__tool-desc {
  flex: 1;
  min-width: 0;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-manual-tools__row-body {
  padding: var(--space-2) var(--space-3);
  border-top: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.05));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-manual-tools__row-body[hidden] {
  display: none;
}

.cs-manual-tools__tool-desc-full {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.cs-manual-tools__row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-manual-tools__run-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cs-manual-tools__run-btn:hover,
.cs-manual-tools__run-btn:focus {
  background: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
  outline: none;
}

.cs-manual-tools__run-btn:disabled,
.cs-manual-tools__run-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-text-muted);
}

.cs-manual-tools__pending-notice {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
/**
 * Creator Studio Manual Tools — Schema Forms
 * ============================================
 * Schema-driven parameter form (#2958).
 */

/* ==========================================================================
 * Schema-driven parameter form (#2958)
 * Mounted inline in the tool row body when `Run` is activated.
 * ========================================================================== */

.cs-manual-tools__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
  border-top: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.05));
}

.cs-manual-tools__form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-manual-tools__form-empty {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.cs-manual-tools__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-field--dryrun {
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
}

.cs-manual-tools__form-label {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono, monospace);
}

.cs-manual-tools__form-required {
  color: var(--color-accent-warning, #ffb86b);
  font-weight: var(--font-weight-bold);
}

.cs-manual-tools__form-hint {
  font-family: inherit;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
}

.cs-manual-tools__form-input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-accent-primary-rgb, 122, 162, 247), 0.15);
}

.cs-manual-tools__form-input--checkbox {
  width: auto;
  margin: 0;
}

.cs-manual-tools__form-input--object {
  font-family: var(--font-family-mono, monospace);
  resize: vertical;
  min-height: 80px;
}

.cs-manual-tools__form-field--error .cs-manual-tools__form-input {
  border-color: var(--color-accent-danger, #ff5c5c);
  box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.15);
}

.cs-manual-tools__form-error {
  color: var(--color-accent-danger, #ff5c5c);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-error[hidden] {
  display: none;
}

.cs-manual-tools__form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.cs-manual-tools__form-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-primary, #7aa2f7);
  border: 1px solid var(--color-accent-primary, #7aa2f7);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cs-manual-tools__form-submit:hover {
  opacity: 0.9;
}

.cs-manual-tools__form-submit:disabled,
.cs-manual-tools__form-submit[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

.cs-manual-tools__form-banner {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.cs-manual-tools__form-banner[hidden] {
  display: none;
}

.cs-manual-tools__form-banner--error {
  background: rgba(255, 92, 92, 0.1);
  border: 1px solid rgba(255, 92, 92, 0.3);
  color: var(--color-accent-danger, #ff5c5c);
}

.cs-manual-tools__form-banner--success {
  background: rgba(122, 162, 247, 0.08);
  border: 1px solid rgba(122, 162, 247, 0.25);
  color: var(--color-accent-primary, #7aa2f7);
}

.cs-manual-tools__form-result {
  margin: 0;
  padding: var(--space-2);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-xs);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow: auto;
}

.cs-manual-tools__form-result[hidden] {
  display: none;
}
/**
 * Creator Studio Manual Tools — Destructive Preview
 * ====================================================
 * Destructive-tool preview panel (#2959) and empty state.
 */

/* ==========================================================================
 * Destructive-tool preview panel (#2959)
 * Rendered inline when a destructive tool's first submit returns a preview
 * payload. Replaces the submit action row until Confirm or Cancel fires.
 * ========================================================================== */

.cs-manual-tools__row--destructive .cs-manual-tools__tool-name {
  color: var(--color-accent-warning, #ffb86b);
}

.cs-manual-tools__preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: rgba(255, 184, 107, 0.08);
  border: 1px solid rgba(255, 184, 107, 0.35);
  border-radius: var(--radius-sm);
}

.cs-manual-tools__preview-heading {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning, #ffb86b);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cs-manual-tools__preview-summary {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
}

.cs-manual-tools__preview-affected {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.cs-manual-tools__preview-label {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
}

.cs-manual-tools__preview-affected code {
  font-family: var(--font-family-mono, monospace);
  color: var(--color-accent-primary, #7aa2f7);
}

.cs-manual-tools__preview-reversible {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.cs-manual-tools__preview-irreversible {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-accent-danger, #ff5c5c);
  font-weight: var(--font-weight-bold);
}

.cs-manual-tools__preview-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.cs-manual-tools__preview-confirm {
  padding: var(--space-1) var(--space-3);
  background: var(--color-accent-warning, #ffb86b);
  border: 1px solid var(--color-accent-warning, #ffb86b);
  border-radius: var(--radius-sm);
  color: var(--color-bg-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.cs-manual-tools__preview-confirm:hover,
.cs-manual-tools__preview-confirm:focus {
  opacity: 0.9;
  outline: none;
}

.cs-manual-tools__preview-confirm:disabled,
.cs-manual-tools__preview-confirm[aria-busy="true"] {
  opacity: 0.6;
  cursor: wait;
}

.cs-manual-tools__preview-cancel {
  padding: var(--space-1) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.cs-manual-tools__preview-cancel:hover,
.cs-manual-tools__preview-cancel:focus {
  background: var(--color-bg-tertiary);
  outline: none;
}

.cs-manual-tools__preview-cancel:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
 * Empty-state (no search matches)
 * ========================================================================== */

.cs-manual-tools__empty {
  padding: var(--space-3);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-style: italic;
}

.cs-manual-tools__empty[hidden] {
  display: none;
}
/**
 * Creator Studio — Manual Tools Panel — Import Hub
 * ===================================================
 * Manual tools panel with schema forms and destructive preview.
 *
 * Decomposed into focused files under creator_studio_manual_tools/ for maintainability.



 */
/* Content Icon Slot — image-flywheel Phase 2 (#3994)
 * Click-to-generate placeholder + rendered icon container, used on
 * Item / Spell / Monster cards that lack a canonical :icon attachment.
 */

.content-icon-slot {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  position: relative;
}

.content-icon-slot__image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface-2, rgba(255, 255, 255, 0.04));
  border: 1px dashed var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  overflow: hidden;
}

.content-icon-slot--sm .content-icon-slot__image {
  width: 32px;
  height: 32px;
}

.content-icon-slot--md .content-icon-slot__image {
  width: 64px;
  height: 64px;
}

.content-icon-slot--lg .content-icon-slot__image {
  width: 128px;
  height: 128px;
}

.content-icon-slot__img,
.content-icon-slot__image .content-icon-generator__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When an icon image is present, the dashed placeholder border is irrelevant. */
.content-icon-slot__image:has(img) {
  border-style: solid;
  border-color: var(--color-border, rgba(255, 255, 255, 0.25));
  background: transparent;
}

.content-icon-slot__generate-btn {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--spacing-2xs, 2px);
  background: transparent;
  border: none;
  color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
  cursor: pointer;
  font-size: var(--font-size-xs, 11px);
  line-height: 1;
  transition: background 120ms ease, color 120ms ease;
}

.content-icon-slot__generate-btn:hover:not([disabled]),
.content-icon-slot__generate-btn:focus-visible:not([disabled]) {
  background: var(--color-surface-3, rgba(255, 255, 255, 0.08));
  color: var(--color-text, rgba(255, 255, 255, 0.92));
  outline: none;
}

.content-icon-slot__generate-btn[disabled] {
  cursor: progress;
  opacity: 0.6;
}

.content-icon-slot__generate-btn[aria-busy="true"] {
  animation: content-icon-slot-pulse 1.4s ease-in-out infinite;
}

.content-icon-slot__generate-icon {
  font-size: 1.6em;
  font-weight: 600;
  line-height: 0.9;
}

.content-icon-slot--sm .content-icon-slot__generate-label {
  display: none;
}

.content-icon-slot__status {
  font-size: var(--font-size-xs, 11px);
  color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
  text-align: center;
  min-height: 1em;
  max-width: 16ch;
}

.content-icon-slot__status[data-state="error"] {
  color: var(--color-danger, #ff6b6b);
}

.content-icon-slot__status[data-state="rate-limited"] {
  color: var(--color-warning, #f5b942);
}

.content-icon-slot__status[data-state="pending"] {
  color: var(--color-text-muted, rgba(255, 255, 255, 0.55));
  font-style: italic;
}

@keyframes content-icon-slot-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .content-icon-slot__generate-btn[aria-busy="true"] {
    animation: none;
  }
}
/**
 * Surface Category Primitives — CONTAINER-IDENTITY scaffolding (#4230)
 * ====================================================================
 * Six `.surface-*` classes that declare which container family a partial
 * belongs to. Each derives its base visual treatment from existing tokens
 * (`--color-bg-*`, `--color-border-*`, `--shadow-*`, `--radius-*`,
 * `--space-*`). No new color values.
 *
 * This is ADDITIVE on top of existing atomic CSS. The classes establish a
 * minimal, predictable baseline so that a future CONTAINER-IDENTITY
 * pre-commit ratchet can require every panel root to declare its category.
 * Specific component classes (`.inventory`, `.spellbook`, `.lobby-modal`,
 * etc.) continue to layer their bespoke styling on top — this layer is the
 * lowest-specificity background, border, and radius default.
 *
 * Zero-specificity contract (#4307 regression fix):
 *   Every selector below is wrapped in `:where(.surface-foo)` so it
 *   evaluates as specificity (0,0,0). ANY concrete single-class selector
 *   (e.g. `.status-bar`, `.inventory`) automatically wins regardless of
 *   source order. This is the canonical CSS pattern for "low-priority
 *   default" and was the original design intent of this file. The first
 *   shipped version (commit ff99128ca) used bare `.surface-*` selectors
 *   which had specificity (0,1,0) — equal to organism roots — and the
 *   later import order silently overrode `.status-bar` (#4307).
 *
 * Categories:
 *   .surface-chat-content   — chat / dialogue / narration scrollback
 *   .surface-panel          — full-width panel body (inventory, party, map)
 *   .surface-floating-panel — modal / drawer / floating overlay panel
 *   .surface-overlay        — full-screen overlay (input-blocked, scene)
 *   .surface-lobby-card     — lobby / landing card surface
 *   .surface-status-zone    — status bar / breadcrumb / chrome surface
 *
 * Visual regression: zero. Concrete component / organism classes have
 * specificity ≥ (0,1,0); the `:where()`-wrapped surface primitives have
 * specificity (0,0,0). The primitives only show through where the
 * concrete class leaves a property unset.
 */

/* Chat / dialogue / narration containers. Slight inset to match the
 * narrative reading pane's calm aesthetic. */
:where(.surface-chat-content) {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--narrative-padding);
  line-height: var(--line-height-narrative);
  box-shadow: var(--elevation-base);
}

/* Full-width panel body (inventory, party, dungeon map, quests, etc.).
 * The dominant in-grid container family. */
:where(.surface-panel) {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--panel-padding);
  box-shadow: var(--elevation-raised);
}

/* Floating / modal / drawer panels. Elevated above panel grid; uses the
 * floating elevation token so dimming/shadow stays consistent with
 * `.floating-panel`'s established treatment. */
:where(.surface-floating-panel) {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-floating);
}

/* Full-screen overlays (input-blocked, scene-transition, modal backdrops).
 * Spans the viewport with a translucent dim so underlying content remains
 * visible but de-emphasized. */
:where(.surface-overlay) {
  position: fixed;
  inset: 0;
  background: var(--overlay-darker);
  color: var(--color-text-primary);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lobby / landing card surfaces. Slightly elevated background to suggest
 * a Battle.net-style card on the lobby canvas. */
:where(.surface-lobby-card) {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--elevation-raised);
}

/* Status bar / breadcrumb / chrome surfaces. Compact horizontal strip
 * along the top/bottom of the viewport. */
:where(.surface-status-zone) {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--status-bar-padding);
  font-size: var(--font-size-sm);
}
.admin-floating-widget {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: var(--z-notification, 1100);
  width: 288px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #4a9eff);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  display: none;
  flex-direction: column;
  font-size: var(--font-size-sm, 0.75rem);
}

.admin-floating-widget[data-state="open"] {
  display: flex;
}

/* ── Header ── */

.admin-floating-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-default, #333);
  background: rgba(74, 158, 255, 0.08);
  border-radius: var(--radius-md, 8px) var(--radius-md, 8px) 0 0;
}

.admin-floating-widget__title {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-primary, #4a9eff);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
}

.admin-floating-widget__close {
  background: none;
  border: none;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
}

.admin-floating-widget__close:hover {
  color: var(--color-text-primary, #fff);
}

/* ── Stat tiles grid ── */

.admin-floating-widget__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border-default, #333);
  border-bottom: 1px solid var(--color-border-default, #333);
}

.admin-floating-widget__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 8px;
  background: var(--color-bg-secondary, #1a1a2e);
}

.admin-floating-widget__tile-label {
  color: var(--color-text-secondary, #888);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin-floating-widget__tile-value {
  color: var(--color-text-primary, #fff);
  font-size: 1.05rem;
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

/* ── Action buttons ── */

.admin-floating-widget__actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
}

.admin-floating-widget__btn {
  width: 100%;
  padding: 6px 10px;
  background: rgba(74, 158, 255, 0.08);
  border: 1px solid rgba(74, 158, 255, 0.3);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-accent-primary, #4a9eff);
  cursor: pointer;
  font-size: 0.7rem;
  text-align: center;
  transition: background 0.15s ease;
}

.admin-floating-widget__btn:hover {
  background: rgba(74, 158, 255, 0.18);
}

.admin-floating-widget__btn--danger {
  border-color: rgba(255, 80, 80, 0.4);
  color: var(--bio-accent-danger, #ff5050);
  background: rgba(255, 80, 80, 0.06);
}

.admin-floating-widget__btn--danger:hover {
  background: rgba(255, 80, 80, 0.14);
}
/*
 * Admin HUD Overlay (Slice 1, task #3458; refined #4219)
 * =======================================
 * HUD that literally "descends from the status bar" — the overlay's
 * top edge is anchored to var(--status-bar-height) so the slide
 * animation originates beneath the status bar (the status bar
 * remains visible above the HUD at all times). Z-index sits at
 * --z-overlay (200) so it covers narrative and grid panels but
 * stays UNDER popped-out floating panels (--z-floating: 1000) per
 * the JP reframe: popped panels remain visible during HUD open and
 * after close.
 *
 * Hidden-by-default contract: the HUD partial sets data-state="closed"
 * server-side; CSS uses transform + opacity + pointer-events to keep
 * the element off-canvas without removing it from the document
 * (so the Stimulus controller's listeners stay alive).
 */

.admin-hud {
  position: fixed;
  /* Anchor below the status bar so the slide originates from beneath it. */
  top: var(--status-bar-height, 48px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-overlay, 200);
  pointer-events: none; /* lets clicks fall through when closed */
}

.admin-hud[data-state="open"] {
  pointer-events: auto;
}

/* ── Backdrop ─────────────────────────────────────────────────── */

.admin-hud__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.admin-hud[data-state="open"] .admin-hud__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* ── Panel (descends from status bar) ─────────────────────────── */

.admin-hud__panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary, #0d0d1a);
  border-bottom: 2px solid var(--color-accent-primary, #4a9eff);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.7);
  transform: translateY(-100%);
  transition: transform 240ms ease-out;
  pointer-events: none;
}

.admin-hud[data-state="open"] .admin-hud__panel {
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Header ───────────────────────────────────────────────────── */

.admin-hud__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-default, #333);
  background: rgba(74, 158, 255, 0.08);
}

.admin-hud__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-primary, #4a9eff);
}

.admin-hud__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-hud__close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-secondary, #888);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 2px 10px;
  border-radius: var(--radius-sm, 4px);
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}

.admin-hud__close:hover,
.admin-hud__close:focus-visible {
  color: var(--color-text-primary, #fff);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-border-default, #333);
  outline: none;
}

/* ── Slot grid ────────────────────────────────────────────────── */

.admin-hud__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 14px 16px 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  scrollbar-gutter: stable;
}

.admin-hud__slot {
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mobile: HUD is intentionally heavy; allow it but stack to one column. */
@media (max-width: 768px) {
  .admin-hud__slots {
    grid-template-columns: 1fr;
    padding: 12px;
    gap: 10px;
  }
}
/**
 * Pipeline Progress — Merged into DM Responding Bar
 * ==================================================
 * Transient transcript that replaces the silent "AI is thinking..." spinner
 * with legible per-stage lines (Classifying intent..., Reasoning..., Composing
 * narrative..., Done.).
 *
 * Container identity: surface-chat-content (CONTAINER-IDENTITY).
 *
 * Merged layout: #pipeline-progress-host is moved at runtime (by
 * loading_state_manager.ts) from #dm-responding-bar-host into the
 * #dm-responding-bar element itself, so the step list renders within the
 * purple surface rather than as a separate dark-gray popover above it.
 * No absolute positioning needed — it flows below the status row as a normal
 * block child of the bar's flex column.
 *
 * #4390: Default state is COLLAPSED — the step list is hidden until an
 * operation exceeds the min display threshold or the user clicks the header.
 *
 * Visual language is intentionally calm — no glowing animation, no spinner.
 */

.pipeline-progress-host {
  /* Flows inline within .dm-responding-bar (flex column). No absolute
     positioning — the bar's purple border wraps both the status row and
     the step list. surface-chat-content class is removed at render time
     because the bar provides the surface styling. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow: hidden;
  max-height: 40vh;
}

.pipeline-progress-host[hidden] {
  display: none;
}

/* When the progress host lives inside .dm-responding-bar (merged layout),
   hide the redundant "DM is working" header row — the bar's own status row
   already carries the title and animated dots. Only the step entries show. */
.dm-responding-bar .pipeline-progress__header {
  display: none;
}

/* Inside the bar, add a subtle top separator before the step list so it
   reads as a secondary section below the status row. */
.dm-responding-bar .pipeline-progress-host:not([hidden]) {
  border-top: 1px solid rgba(168, 85, 247, 0.25);
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
}

/* Inside the bar, always expand the step list (no collapse toggle needed —
   the header/toggle is hidden). This matches JP's request: steps visible
   inside the purple surface without a separate expand gesture.
   `!important` is needed to override the UA-stylesheet display:none that
   the `hidden` HTML attribute applies via the browser default. */
.dm-responding-bar .pipeline-progress--active .pipeline-progress__entries {
  display: flex !important;
}

.pipeline-progress__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-secondary, #aaa);
  letter-spacing: 0.02em;
  /* #4390: make the full header row a click target so users can tap anywhere
     on the pill to expand/collapse, not just the small toggle button. */
  cursor: pointer;
  user-select: none;
}

.pipeline-progress__header:hover {
  color: var(--color-text-primary, #fff);
}

.pipeline-progress__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.pipeline-progress__title::before {
  /* Pulsing dot indicates the pipeline is active; pure CSS so no JS lifecycle
     to manage. Removed automatically when host is hidden. */
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary, #a855f7);
  animation: pipelineProgressPulse 1.4s ease-in-out infinite;
}

.pipeline-progress__toggle {
  background: transparent;
  border: 1px solid var(--color-border-subtle, #444);
  border-radius: var(--radius-sm, 4px);
  color: inherit;
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  padding: 0 var(--space-2, 8px);
  line-height: 1.4;
  min-height: 22px;
}

.pipeline-progress__toggle:hover,
.pipeline-progress__toggle:focus-visible {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
  outline: none;
}

.pipeline-progress__entries {
  list-style: none;
  margin: 0;
  padding: var(--space-2, 8px) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
  overflow-y: auto;
  max-height: 32vh;
}

.pipeline-progress__entries[hidden] {
  display: none;
}

.pipeline-progress__entry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-sm, 0.875rem);
  font-family: var(--font-family-mono, monospace);
  line-height: 1.4;
  padding: 2px var(--space-1, 4px);
}

.pipeline-progress__icon {
  width: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary, #888);
}

.pipeline-progress__entry[data-state="running"] .pipeline-progress__icon::before {
  content: '·';
  animation: pipelineProgressDot 1s ease-in-out infinite;
  color: var(--color-accent-primary, #a855f7);
}

.pipeline-progress__entry[data-state="completed"] .pipeline-progress__icon::before {
  content: '✓';
  color: var(--color-success, #4ade80);
}

.pipeline-progress__entry[data-state="error"] .pipeline-progress__icon::before {
  content: '✗';
  color: var(--color-danger, #f87171);
}

.pipeline-progress__label {
  color: var(--color-text-primary, #fff);
}

.pipeline-progress__entry[data-state="running"] .pipeline-progress__label {
  color: var(--color-text-secondary, #ccc);
}

.pipeline-progress__entry[data-state="error"] .pipeline-progress__label {
  color: var(--color-danger, #f87171);
}

.pipeline-progress__detail {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

.pipeline-progress__duration {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@keyframes pipelineProgressPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.0); }
}

@keyframes pipelineProgressDot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}

/* Accessibility: respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .pipeline-progress__title::before,
  .pipeline-progress__entry[data-state="running"] .pipeline-progress__icon::before {
    animation: none;
  }
}

/* Mobile: smaller font and capped step-list height inside the bar. */
@media (max-width: 640px) {
  .pipeline-progress-host {
    font-size: var(--font-size-xs, 0.75rem);
  }

  .pipeline-progress__entries {
    max-height: 24vh;
  }
}
/*
 * Clarification Modal - Socratic Clarification UI
 * ================================================
 * Displays when player input is ambiguous (confidence < 0.65).
 * Presents 2-3 clarification options instead of guessing.
 *
 * Features:
 * - Keyboard shortcuts (1-9 for options, Escape to cancel)
 * - Touch-friendly on mobile
 * - Auto-hides after selection
 * - Confidence percentage badges
 */

/* ========================================
 * BACKDROP
 * ======================================== */

.clarification-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-modal, 1000);
  animation: clarification-backdrop-enter 0.2s ease-out;
}

.clarification-backdrop.hidden {
  display: none;
}

/* ========================================
 * MODAL CONTAINER
 * ======================================== */

.clarification-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal-content, 1001);
  max-width: 480px;
  width: calc(100% - var(--space-8, 2rem));
  background: var(--color-bg-primary, #1e1e2e);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 30px rgba(97, 175, 239, 0.2);
  animation: clarification-modal-enter 0.2s ease-out;
  overflow: hidden;
}

.clarification-modal.hidden {
  display: none;
}

/* ========================================
 * HEADER / MESSAGE
 * ======================================== */

.clarification-header {
  padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
  background: var(--color-bg-secondary, #2a2a3e);
  border-bottom: 1px solid var(--color-border-default, #444);
}

.clarification-message {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-md, 0.9375rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-normal, 1.5);
  margin: 0;
}

/* ========================================
 * OPTIONS CONTAINER
 * ======================================== */

.clarification-options {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* ========================================
 * OPTION BUTTONS
 * ======================================== */

.clarification-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem);
  background: var(--color-bg-tertiary, #282840);
  border: 1px solid var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.clarification-option:hover {
  border-color: var(--color-accent-primary, #61afef);
  background: rgba(97, 175, 239, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2),
              0 0 12px rgba(97, 175, 239, 0.15);
}

.clarification-option:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.clarification-option:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* ========================================
 * OPTION HEADER
 * ======================================== */

.option-header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.option-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-accent-primary, #61afef);
  color: var(--color-bg-primary, #1e1e2e);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-bold, 700);
  border-radius: var(--radius-full, 50%);
  flex-shrink: 0;
}

.option-description {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-normal, 1.5);
  flex: 1;
}

/* ========================================
 * CONFIDENCE BADGE
 * ======================================== */

.option-confidence {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  padding-left: calc(24px + var(--space-3, 0.75rem));
}

/* ========================================
 * CANCEL SECTION
 * ======================================== */

.clarification-cancel {
  padding: var(--space-4, 1rem) var(--space-6, 1.5rem);
  border-top: 1px solid var(--color-border-subtle, #333);
  background: var(--color-bg-secondary, #2a2a3e);
}

.clarification-cancel-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  background: transparent;
  border: 1px dashed var(--color-border-default, #444);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  color: var(--color-text-secondary, #aaa);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
}

.clarification-cancel-button:hover {
  border-color: var(--color-text-secondary, #aaa);
  border-style: solid;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary, #e0e0e0);
}

.clarification-cancel-button:focus-visible {
  outline: 2px solid var(--color-text-secondary, #aaa);
  outline-offset: 2px;
}

.cancel-text {
  font-weight: var(--font-weight-medium, 500);
}

.cancel-hint {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #888);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  background: var(--color-bg-tertiary, #282840);
  border-radius: var(--radius-sm, 3px);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

@keyframes clarification-modal-enter {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(0);
  }
}

@keyframes clarification-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
 * RESPONSIVE - MOBILE
 * ======================================== */

@media (max-width: 640px) {
  .clarification-modal {
    max-width: calc(100% - var(--space-4, 1rem));
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: clarification-modal-enter-mobile 0.25s ease-out;
  }

  .clarification-header,
  .clarification-options,
  .clarification-cancel {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
  }

  .clarification-option {
    padding: var(--space-4, 1rem);
    /* Larger tap targets on mobile */
    min-height: 64px;
  }

  .option-number {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-sm, 0.875rem);
  }

  .option-description {
    font-size: var(--font-size-md, 0.9375rem);
  }

  @keyframes clarification-modal-enter-mobile {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ========================================
 * RESPONSIVE - TABLET
 * ======================================== */

@media (min-width: 641px) and (max-width: 1024px) {
  .clarification-modal {
    max-width: 520px;
  }
}

/* ========================================
 * TOUCH DEVICES
 * ======================================== */

@media (hover: none) and (pointer: coarse) {
  .clarification-option {
    /* Disable hover transform on touch devices to prevent flicker */
    transform: none;
  }

  .clarification-option:active {
    background: rgba(97, 175, 239, 0.15);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .clarification-modal {
    animation: none;
  }

  .clarification-backdrop {
    animation: none;
  }

  .clarification-option {
    transition: none;
  }

  .clarification-option:hover {
    transform: none;
  }

  @keyframes clarification-modal-enter-mobile {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* ========================================
 * DARK MODE ADJUSTMENTS
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .clarification-modal {
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.7)),
                0 0 40px rgba(97, 175, 239, 0.25);
  }

  .clarification-option:hover {
    background: rgba(97, 175, 239, 0.12);
  }
}
/*
 * Pane Tab Strip
 * ==============
 * Visual treatment for the merged-pane tab strip primitive
 * (lib/pane_tab_strip.ts). Companion to umbrella #3878 panel-flexibility,
 * activated when phase 4 (#3876) drop-onto-header center-zone merges
 * multiple panels into one pane.
 *
 * Conventions reused from _room_tab_menu.css so the merged-pane strip and
 * the existing room-tab strip feel of-a-piece. Notable difference: tabs
 * here are >=44x44 unconditionally (touch-target minimum), since merged
 * panes can appear inside floating layers where the desktop sub-44 size
 * isn't ergonomic.
 */

.pane-tab-strip {
  --pane-tab-bg: var(--surface-darker, #0a0a0a);
  --pane-tab-border: var(--surface-border, rgba(255, 255, 255, 0.1));
  --pane-tab-inactive: var(--text-muted, rgba(255, 255, 255, 0.5));
  --pane-tab-hover: var(--text-secondary, rgba(255, 255, 255, 0.8));
  --pane-tab-active: var(--accent-gold, #d4af37);
  --pane-tab-min-size: 44px;

  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem 0.375rem;
  background: var(--pane-tab-bg);
  border-bottom: 1px solid var(--pane-tab-border);
  z-index: var(--z-sticky, 10);
  /* Allow horizontal scrolling when many panels are merged into one pane. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.pane-tab-strip::-webkit-scrollbar {
  height: 4px;
}

.pane-tab-strip::-webkit-scrollbar-thumb {
  background: var(--pane-tab-border);
  border-radius: 2px;
}

/* Tab Button */
.pane-tab-strip__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: var(--pane-tab-min-size);
  min-height: var(--pane-tab-min-size);
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: var(--pane-tab-inactive);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pane-tab-strip__tab:hover {
  color: var(--pane-tab-hover);
  background: rgba(255, 255, 255, 0.05);
}

.pane-tab-strip__tab:focus-visible {
  outline: 2px solid var(--pane-tab-active);
  outline-offset: 2px;
}

.pane-tab-strip__tab--active {
  color: var(--pane-tab-active);
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(212, 175, 55, 0.35);
}

.pane-tab-strip__tab--active:hover {
  color: var(--pane-tab-active);
  background: rgba(212, 175, 55, 0.14);
}

/* Active tab indicator strip along bottom edge. */
.pane-tab-strip__tab--active::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: var(--pane-tab-active);
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

/* Icon */
.pane-tab-strip__tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
}

.pane-tab-strip__tab-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

/* Label — visible alongside icon when there's room, otherwise hidden
 * (icon-only with aria-label / title carrying the name). */
.pane-tab-strip__tab-label {
  margin-left: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Compact variant: hide labels (icon + tooltip pattern, like room-tab-menu). */
.pane-tab-strip--compact .pane-tab-strip__tab-label {
  display: none;
}

/* Mobile: enforce >=44x44 hit targets even on the compact variant, keep
 * labels visible because tooltips are unreliable on touch. */
@media (max-width: 768px) {
  .pane-tab-strip {
    padding: 0.25rem;
    gap: 0.125rem;
  }

  .pane-tab-strip__tab {
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
  }

  .pane-tab-strip__tab-label {
    display: inline;
    font-size: 0.6875rem;
  }
}

@media (max-width: 480px) {
  .pane-tab-strip__tab-label {
    /* On the smallest screens, show only icons (more tabs visible) but
     * keep aria-label / title for accessibility. */
    display: none;
  }
}
/* ========================================
 * PANE DROP PREVIEW (Phase 4, #3876)
 *
 * Five-zone drop-target overlay shown during panel drag. Painted on top of
 * the layout but never captures pointer events — pointer-events: none is
 * load-bearing so the underlying mousemove keeps firing on the layout.
 *
 * Sizing/positioning is set inline by JS each frame. CSS here only handles
 * the *visual* treatment (color, border, transitions).
 * ======================================== */

.pane-drop-preview {
  position: fixed;
  pointer-events: none;
  z-index: var(--z-overlay, 1000);
  /* Subtle terminal-aesthetic green tint, matching --color-accent-secondary. */
  background-color: rgba(164, 214, 130, 0.18);
  border: 1px dashed var(--color-accent-secondary, #a4d682);
  box-sizing: border-box;
  /* Animate position/size changes between zone switches so the overlay
     glides instead of teleporting when the cursor crosses a zone boundary. */
  transition:
    left 90ms ease-out,
    top 90ms ease-out,
    width 90ms ease-out,
    height 90ms ease-out,
    background-color 120ms ease-out;
  display: none;
}

.pane-drop-preview[data-visible="true"] {
  display: block;
}

/* Per-zone variant emphasis: a thicker, fully-opaque accent border on the
   side of the pane the panel will dock against, mirroring iTerm2's visual
   language. The translucent fill stays subtle. */

.pane-drop-preview[data-zone="top"] {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: var(--color-accent-secondary, #a4d682);
}

.pane-drop-preview[data-zone="bottom"] {
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-accent-secondary, #a4d682);
}

.pane-drop-preview[data-zone="left"] {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: var(--color-accent-secondary, #a4d682);
}

.pane-drop-preview[data-zone="right"] {
  border-right-width: 2px;
  border-right-style: solid;
  border-right-color: var(--color-accent-secondary, #a4d682);
}

/* Center (tab-merge / dock-to-center) uses a fully-dashed border on all sides
   plus a slightly stronger fill to distinguish it from the half-pane variants. */
.pane-drop-preview[data-zone="center"] {
  background-color: rgba(164, 214, 130, 0.22);
  border: 2px dashed var(--color-accent-secondary, #a4d682);
}

/* Occupied-slot replace signal (#4475):
   When a center-zone drop would displace an existing panel (replace + pop-out),
   the overlay switches to an amber warning palette and shows a "REPLACE" label
   via ::after. This gives the user a predictable signal before releasing.
   The canonical behavior is: incoming panel replaces the target, displaced
   panel pops out to floating with a toast notification. */
.pane-drop-preview[data-zone="center"][data-outcome="replace"] {
  background-color: rgba(214, 163, 64, 0.22);
  border: 2px solid var(--color-warning, #d6a340);
  position: relative;
}

.pane-drop-preview[data-zone="center"][data-outcome="replace"]::after {
  content: "REPLACE";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-warning, #d6a340);
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
}

/* Reduced-motion: skip the glide transition, snap immediately. */
@media (prefers-reduced-motion: reduce) {
  .pane-drop-preview {
    transition: none;
  }
}
/**
 * Section Component
 * =================
 * Shared section header and title styles used across panels.
 * Consolidates duplicate .section-header and .section-title definitions
 * from 9+ organism files into a single mobile-first source of truth.
 *
 * Usage:
 *   <div class="section-header">
 *     <span class="section-toggle-icon">...</span>
 *     <h3 class="section-title">Section Name</h3>
 *     <span class="section-count">3</span>
 *   </div>
 */

/* ============================================================================
   Section Header - clickable/collapsible container
   ============================================================================ */

.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: 44px; /* Touch target */
  background: var(--color-bg-tertiary);
  user-select: none;
}

/* Interactive section headers (collapsible) */
.section-header--interactive {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.section-header--interactive:hover {
  background: var(--color-bg-hover);
}

.section-header--interactive:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-border-focus);
}

/* Warning variant */
.section-header--warning {
  color: var(--color-accent-warning);
}

/* Section header description text */
.section-header .section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Desktop: compact headers */
@media (min-width: 1024px) {
  .section-header {
    min-height: auto;
    padding: var(--space-1-5) var(--space-3);
  }
}

/* ============================================================================
   Section Title - heading text within sections
   ============================================================================

   Note: Base .section-title is defined in atoms/_atoms.css (line 467).
   This file provides additional section title variants and context modifiers.
   Organisms should scope overrides via their parent class, e.g.:
     .my-panel .section-title { color: var(--color-accent-cyan); }
*/

/* Section title inside a section-header */
.section-header .section-title {
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
  flex: 1;
}

/* Toggle icon for collapsible sections */
.section-toggle-icon {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

/* Section count badge */
.section-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-full);
  min-width: 1.5rem;
  text-align: center;
}

/* ============================================================================
   Section Heading - larger heading variant
   ============================================================================ */

.section-heading {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2) 0;
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .section-header--interactive,
  .section-toggle-icon {
    transition: none;
  }
}
/**
 * Condition Badge Component
 * =========================
 * D&D 5e condition status badges with type-specific color coding.
 * Consolidates duplicate .condition-badge definitions from 5+ organism files.
 *
 * Usage:
 *   <span class="condition-badge condition-badge--poisoned">
 *     <span class="condition-badge__icon">...</span>
 *     <span class="condition-badge__name">Poisoned</span>
 *   </span>
 */

/* ============================================================================
   Base Condition Badge
   ============================================================================ */

.condition-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 12px;
  background: var(--color-bg-elevated, #1a1a1a);
  border: 1px solid var(--color-border-default, #333);
  color: var(--color-text-secondary, #999);
  min-height: 24px; /* Touch-friendly even at small size */
}

.condition-badge__icon {
  font-size: 0.875rem;
  line-height: 1;
}

.condition-badge__name {
  line-height: 1;
}

/* Interactive badges (hoverable in combat tracker, etc.) */
.condition-badge--interactive {
  cursor: help;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.condition-badge--interactive:hover,
.condition-badge--interactive:focus {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  outline: none;
}

/* Duration indicator */
.condition-badge .condition-duration {
  font-size: 0.625rem;
  opacity: 0.8;
  margin-left: 0.125rem;
}

/* Enter animation */
@keyframes condition-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.condition-badge--entering {
  animation: condition-enter 0.2s ease-out;
}

/* ============================================================================
   Condition Type Colors
   ============================================================================ */

.condition-badge--poisoned {
  background: rgba(139, 195, 74, 0.15);
  border-color: #8bc34a;
  color: #aed581;
}

.condition-badge--stunned {
  background: rgba(255, 193, 7, 0.15);
  border-color: #ffc107;
  color: #ffd54f;
}

.condition-badge--paralyzed {
  background: rgba(244, 67, 54, 0.15);
  border-color: #f44336;
  color: #ef5350;
}

.condition-badge--concentrating {
  background: rgba(33, 150, 243, 0.15);
  border-color: #2196f3;
  color: #64b5f6;
}

.condition-badge--blessed {
  background: rgba(255, 215, 0, 0.15);
  border-color: #ffd700;
  color: #ffeb3b;
}

.condition-badge--prone {
  background: rgba(158, 158, 158, 0.15);
  border-color: #9e9e9e;
  color: #bdbdbd;
}

.condition-badge--blinded {
  background: rgba(75, 85, 99, 0.4);
  border-color: #6b7280;
  color: #d1d5db;
}

.condition-badge--frightened {
  background: rgba(168, 85, 247, 0.15);
  border-color: #a855f7;
  color: #c4b5fd;
}

.condition-badge--charmed {
  background: rgba(244, 114, 182, 0.15);
  border-color: #f472b6;
  color: #f9a8d4;
}

.condition-badge--restrained {
  background: rgba(234, 179, 8, 0.15);
  border-color: #eab308;
  color: #fde047;
}

.condition-badge--incapacitated {
  background: rgba(107, 114, 128, 0.3);
  border-color: #6b7280;
  color: #9ca3af;
}

.condition-badge--invisible {
  background: rgba(99, 102, 241, 0.15);
  border-color: #6366f1;
  color: #a5b4fc;
  border-style: dashed;
}

.condition-badge--deafened {
  background: rgba(156, 163, 175, 0.15);
  border-color: #9ca3af;
  color: #d1d5db;
}

.condition-badge--grappled {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fbbf24;
}

.condition-badge--petrified {
  background: rgba(120, 113, 108, 0.25);
  border-color: #78716c;
  color: #a8a29e;
}

/* ============================================================================
   Desktop: More compact badges
   ============================================================================ */

@media (min-width: 1024px) {
  .condition-badge {
    min-height: auto;
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .condition-badge--entering {
    animation: none;
  }

  .condition-badge--interactive {
    transition: none;
  }
}
/**
 * Card Component
 * ==============
 * Shared card container for creation cards, quest cards, item cards, NPC cards.
 * Mobile-first with touch-friendly sizing.
 *
 * Usage:
 *   <div class="card card--selectable">
 *     <div class="card__header">...</div>
 *     <div class="card__body">...</div>
 *     <div class="card__footer">...</div>
 *   </div>
 */

/* ============================================================================
   Base Card
   ============================================================================ */

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* ============================================================================
   Card Sections
   ============================================================================ */

.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.card__body {
  padding: var(--space-3) var(--space-4);
  flex: 1;
}

.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.card__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

.card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: var(--font-size-xl);
}

/* ============================================================================
   Selectable Card (interactive)
   ============================================================================ */

.card--selectable {
  cursor: pointer;
  min-height: 48px; /* Touch target */
}

.card--selectable:hover {
  border-color: var(--color-border-focus);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card--selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* ============================================================================
   Selected Card
   ============================================================================ */

.card--selected {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 1px var(--color-accent-primary),
              0 2px 8px color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
}

/* ============================================================================
   Disabled Card
   ============================================================================ */

.card--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(30%);
}

/* ============================================================================
   Card Accent Variants (left border color)
   ============================================================================ */

.card--accent-primary {
  border-left: 3px solid var(--color-accent-primary);
}

.card--accent-success {
  border-left: 3px solid var(--color-accent-secondary);
}

.card--accent-warning {
  border-left: 3px solid var(--color-accent-warning);
}

.card--accent-danger {
  border-left: 3px solid var(--color-accent-error);
}

.card--accent-magic {
  border-left: 3px solid var(--color-accent-purple);
}

/* ============================================================================
   Desktop: Grid-friendly cards with hover glow
   ============================================================================ */

@media (min-width: 1024px) {
  .card--selectable:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25),
                0 0 0 1px var(--color-border-focus);
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}
/**
 * List Component
 * ==============
 * Shared list and list-item styles for menu items, option lists,
 * spell lists, inventory rows, etc.
 * Mobile-first with 48px minimum touch targets.
 *
 * Usage:
 *   <ul class="list">
 *     <li class="list-item list-item--selectable">
 *       <span class="list-item__icon">...</span>
 *       <span class="list-item__content">
 *         <span class="list-item__title">Item Name</span>
 *         <span class="list-item__subtitle">Description</span>
 *       </span>
 *       <span class="list-item__trailing">...</span>
 *     </li>
 *   </ul>
 */

/* ============================================================================
   Base List
   ============================================================================ */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Bordered variant - dividers between items */
.list--bordered .list-item + .list-item {
  border-top: 1px solid var(--color-border-subtle);
}

/* Compact variant - less padding */
.list--compact .list-item {
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
}

/* ============================================================================
   List Item
   ============================================================================ */

.list-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  min-height: 48px; /* Touch target */
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ============================================================================
   List Item Sections
   ============================================================================ */

.list-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  color: var(--color-text-muted);
}

.list-item__content {
  flex: 1;
  min-width: 0; /* Allow text truncation */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-item__trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* ============================================================================
   Selectable List Items
   ============================================================================ */

.list-item--selectable {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.list-item--selectable:hover {
  background: var(--color-bg-tertiary);
}

.list-item--selectable:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

/* ============================================================================
   Active List Item
   ============================================================================ */

.list-item--active {
  background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent);
  color: var(--color-accent-primary);
}

.list-item--active .list-item__icon {
  color: var(--color-accent-primary);
}

/* ============================================================================
   Disabled List Item
   ============================================================================ */

.list-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   Desktop: Compact rows
   ============================================================================ */

@media (min-width: 1024px) {
  .list-item {
    min-height: 36px;
    padding: var(--space-1-5) var(--space-3);
  }
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .list-item--selectable {
    transition: none;
  }
}
/* ==========================================================================
 * Roll Menu Component
 * Click dropdown for dice roll options with advantage/disadvantage
 * Matches the terminal D&D dark theme aesthetic
 * Mobile-friendly with 44px tap targets
 * ========================================================================== */

/* Rollable items indicator */
.rollable {
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius-sm);
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
}

.rollable:active {
  transform: scale(0.98);
}

/* Roll Action Menu Backdrop (click-outside-to-close) */
.cs-roll-action-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Roll Action Menu - Floating contextual menu */
.cs-roll-action-menu {
  position: fixed;
  min-width: 200px;
  padding: var(--space-1) 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  animation: rollMenuFadeIn 0.12s ease-out;
}

@keyframes rollMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Menu Header */
.cs-roll-action-menu-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-1)) 0 var(--space-1) 0;
}

/* Modifier badge in header */
.cs-roll-modifier-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-2);
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
}

/* Roll Action Buttons */
.cs-roll-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px; /* Mobile-friendly tap target */
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.cs-roll-action-btn:hover {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.cs-roll-action-btn:active {
  transform: scale(0.98);
  background: rgba(97, 175, 239, 0.15);
}

/* Button icon (dice notation) */
.cs-roll-action-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* Advantage button styling */
.cs-roll-action-btn--advantage .cs-roll-action-btn-icon {
  color: var(--color-accent-secondary);
  border-color: rgba(152, 195, 121, 0.3);
}

.cs-roll-action-btn--advantage:hover {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-roll-action-btn--advantage:hover .cs-roll-action-btn-icon {
  background: rgba(152, 195, 121, 0.15);
  border-color: rgba(152, 195, 121, 0.4);
}

/* Disadvantage button styling */
.cs-roll-action-btn--disadvantage .cs-roll-action-btn-icon {
  color: var(--color-accent-error);
  border-color: rgba(224, 108, 117, 0.3);
}

.cs-roll-action-btn--disadvantage:hover {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

.cs-roll-action-btn--disadvantage:hover .cs-roll-action-btn-icon {
  background: rgba(224, 108, 117, 0.15);
  border-color: rgba(224, 108, 117, 0.4);
}

/* Keyboard focus indicator */
.cs-roll-action-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: rgba(97, 175, 239, 0.1);
}

/* Separator between normal roll and adv/dis */
.cs-roll-action-btn--advantage {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: calc(var(--space-2) + var(--space-1));
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .cs-roll-action-menu {
    min-width: 180px;
    max-width: calc(100vw - 20px);
  }

  .cs-roll-action-btn {
    min-height: 48px; /* Slightly larger on mobile */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .rollable:active {
    transform: none;
  }

  .cs-roll-action-menu {
    animation: none;
  }

  @keyframes rollMenuFadeIn {
    from, to {
      opacity: 1;
      transform: none;
    }
  }
}
/* ==========================================================================
 * Effects Display Component
 * Styles for active effects (buffs/debuffs) on character sheet and game log
 * ========================================================================== */

/* Game Log specific - ADV/DIS badges */
.gl-adv-badge,
.gl-dis-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-adv-badge {
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--accent-success, #4ade80);
}

.gl-dis-badge {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--accent-danger, #ef4444);
}

/* Game Log - Effects display row */
.gl-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
  margin-bottom: 4px;
}

.gl-effect-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(147, 112, 219, 0.15);
  border: 1px solid rgba(147, 112, 219, 0.3);
  border-radius: 4px;
  color: var(--accent-magic, #9370db);
  font-size: var(--font-size-xs);
  font-weight: 500;
}

/* Game Log - Modifier breakdown */
.gl-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-color, #3a3a5a);
}

.gl-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
}

.gl-breakdown-source {
  color: var(--text-muted, #888);
}

.gl-breakdown-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
}

.gl-breakdown-positive {
  color: var(--accent-success, #4ade80);
}

.gl-breakdown-negative {
  color: var(--accent-danger, #ef4444);
}

.gl-breakdown-dice {
  color: var(--accent-warning, #fbbf24);
}

/* Character Sheet - Active Effects Panel */
.cs-effects {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cs-effects-empty {
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: var(--font-size-sm);
  padding: 8px 0;
}

.cs-effect-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-secondary, #252545);
  border: 1px solid var(--border-color, #3a3a5a);
  border-radius: 6px;
  transition: border-color 0.15s ease;
}

.cs-effect-item:hover {
  border-color: var(--accent-primary, #4a9eff);
}

.cs-effect-item.buff {
  border-left: 3px solid var(--accent-success, #4ade80);
}

.cs-effect-item.debuff {
  border-left: 3px solid var(--accent-danger, #ef4444);
}

.cs-effect-item.concentration {
  border-left: 3px solid var(--accent-warning, #fbbf24);
}

.cs-effect-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 4px;
  flex-shrink: 0;
}

.cs-effect-icon svg {
  width: 16px;
  height: 16px;
}

.cs-effect-content {
  flex: 1;
  min-width: 0;
}

.cs-effect-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.cs-effect-name {
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--text-primary, #e0e0e0);
}

.cs-effect-conc-badge {
  padding: 1px 4px;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--accent-warning, #fbbf24);
  text-transform: uppercase;
}

.cs-effect-source {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #888);
  margin-bottom: 4px;
}

.cs-effect-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: var(--font-size-xs);
}

.cs-effect-bonus {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(74, 158, 255, 0.1);
  border-radius: 3px;
  color: var(--accent-primary, #4a9eff);
  font-family: 'JetBrains Mono', monospace;
}

.cs-effect-duration {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--bg-tertiary, #2a2a4a);
  border-radius: 3px;
  color: var(--text-secondary, #888);
}

.cs-effect-affects {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: rgba(147, 112, 219, 0.1);
  border-radius: 3px;
  color: var(--accent-magic, #9370db);
}

/* Advantage/Disadvantage indicators on effects */
.cs-effect-advantage,
.cs-effect-disadvantage {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.cs-effect-advantage {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
}

.cs-effect-disadvantage {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .cs-effect-item {
    flex-direction: column;
    gap: 6px;
  }

  .cs-effect-icon {
    width: 24px;
    height: 24px;
  }

  .cs-effect-details {
    flex-direction: column;
    gap: 4px;
  }
}

/* ==========================================================================
 * State Change Animations (Cross-Panel Synchronization)
 * Provides visual feedback when character state changes
 * ========================================================================== */

/* HP Bar state change animations */
.cs-hp-bar,
.cs-hp-display {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-hp-bar.hp-damaged,
.cs-hp-display.hp-damaged {
  animation: hp-damage-flash 1.5s ease;
}

.cs-hp-bar.hp-healed,
.cs-hp-display.hp-healed {
  animation: hp-heal-flash 1.5s ease;
}

@keyframes hp-damage-flash {
  0%, 100% {
    background-color: var(--bg-tertiary, #2a2a4a);
    box-shadow: none;
  }
  25%, 75% {
    background-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
  }
}

@keyframes hp-heal-flash {
  0%, 100% {
    background-color: var(--bg-tertiary, #2a2a4a);
    box-shadow: none;
  }
  25%, 75% {
    background-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
  }
}

/* Condition badge state change animations */
.cs-condition-badge {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cs-condition-badge.condition-added {
  animation: condition-appear 1.5s ease;
}

.cs-condition-badge.condition-pulse {
  animation: condition-pulse 2s ease;
}

@keyframes condition-appear {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  30% {
    transform: scale(1.15);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes condition-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--accent-warning, #fbbf24);
  }
  50% {
    box-shadow: 0 0 10px 3px var(--accent-warning, #fbbf24);
  }
}

/* Exhaustion display animations */
.cs-exhaustion-display {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.cs-exhaustion-display.exhaustion-increased {
  animation: exhaustion-increase 1.5s ease;
}

.cs-exhaustion-display.exhaustion-decreased {
  animation: exhaustion-decrease 1.5s ease;
}

@keyframes exhaustion-increase {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
}

@keyframes exhaustion-decrease {
  0%, 100% {
    background-color: transparent;
  }
  25%, 75% {
    background-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
  }
}

/* Disabled action state (stunned, paralyzed, etc.) */
.rollable.action-disabled,
.cs-skill-item.action-disabled,
.cs-ability-score.action-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(50%);
}

/* No spell slots available */
.cs-spell-chip.no-slots:not(.cantrip),
.cs-spell-item.no-slots:not(.cantrip) {
  opacity: 0.35;
  text-decoration: line-through;
  pointer-events: none;
}

/* ==========================================================================
 * Action Confirmation Animations
 * Visual feedback for successful/failed user actions
 * ========================================================================== */

.action-confirmed {
  animation: actionConfirmedPulse 0.5s ease-out;
}

.action-error {
  animation: actionErrorShake 0.5s ease-out;
}

@keyframes actionConfirmedPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
  }
}

@keyframes actionErrorShake {
  0%, 100% {
    transform: translateX(0);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-3px);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(3px);
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.4);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .action-confirmed,
  .action-error {
    animation: none;
  }

  .action-confirmed {
    outline: 2px solid rgba(74, 222, 128, 0.6);
    outline-offset: 2px;
  }

  .action-error {
    outline: 2px solid rgba(239, 68, 68, 0.6);
    outline-offset: 2px;
  }
}
/**
 * Skill Check — Base Styles
 * ==========================
 * Base entry, success/failure states, result badges, critical styling,
 * info row, roll breakdown, and modifier display.
 */

/* ==========================================================================
 * Skill Check Display Component
 * Styles for passive and active skill check entries in the game log
 * ========================================================================== */

/* ========================================
 * BASE SKILL CHECK ENTRY
 * ======================================== */

.gl-entry.skill_check {
  border-left: 3px solid var(--color-accent-primary);
  position: relative;
}

.gl-entry.skill_check .gl-icon {
  color: var(--color-accent-primary);
}

/* ========================================
 * PASSIVE VS ACTIVE VARIANTS
 * ======================================== */

/* Passive Checks - Blue/Perception theme */
.gl-entry.skill_check.passive {
  border-left-color: var(--color-accent-primary);
  background: linear-gradient(
    90deg,
    rgba(97, 175, 239, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.passive .gl-icon {
  color: var(--color-accent-primary);
}

/* Active Checks - Standard interactive styling */
.gl-entry.skill_check.active {
  border-left-color: var(--color-accent-secondary);
  background: linear-gradient(
    90deg,
    rgba(152, 195, 121, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.active .gl-icon {
  color: var(--color-accent-secondary);
}

/* ========================================
 * SUCCESS/FAILURE STATES
 * ======================================== */

.gl-entry.skill_check.success {
  border-left-color: var(--color-accent-secondary);
}

.gl-entry.skill_check.success .gl-icon {
  color: var(--color-accent-secondary);
}

.gl-entry.skill_check.failure {
  border-left-color: var(--color-accent-error);
  background: linear-gradient(
    90deg,
    rgba(224, 108, 117, 0.05) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.failure .gl-icon {
  color: var(--color-accent-error);
}

/* ========================================
 * CHECK TYPE BADGES
 * ======================================== */

.gl-check-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.gl-check-type-badge.passive {
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  color: var(--color-accent-primary);
}

.gl-check-type-badge.passive::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-eye);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-eye);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.gl-check-type-badge.active {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-check-type-badge.active::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * RESULT BADGES
 * ======================================== */

.gl-result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.gl-result-badge.success {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-result-badge.success::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-check);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-check);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.gl-result-badge.failure {
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  color: var(--color-accent-error);
}

.gl-result-badge.failure::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-x);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-x);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * NATURAL 20 / NATURAL 1 (CRITICAL) STYLING
 * ======================================== */

.gl-entry.skill_check.natural-20 {
  border-left-color: var(--color-gold);
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.1) 0%,
    var(--color-bg-secondary) 50%
  );
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  animation: criticalGlow 2s ease-in-out infinite;
}

.gl-entry.skill_check.natural-20 .gl-icon {
  color: var(--color-gold);
}

.gl-entry.skill_check.natural-20 .gl-result {
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

@keyframes criticalGlow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
  }
}

.gl-entry.skill_check.natural-1 {
  border-left-color: #8b0000;
  background: linear-gradient(
    90deg,
    rgba(139, 0, 0, 0.15) 0%,
    var(--color-bg-secondary) 50%
  );
}

.gl-entry.skill_check.natural-1 .gl-icon {
  color: #8b0000;
}

.gl-entry.skill_check.natural-1 .gl-result {
  color: #8b0000;
}

/* Critical badges */
.gl-nat20-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: nat20Pulse 1.5s ease-in-out infinite;
}

@keyframes nat20Pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.gl-nat1-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(139, 0, 0, 0.2);
  border: 1px solid #8b0000;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: #dc143c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * SKILL CHECK INFO ROW
 * ======================================== */

.gl-check-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.gl-skill-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: capitalize;
}

.gl-check-dc {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

.gl-check-dc::before {
  content: "DC ";
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.gl-margin {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.gl-margin.positive {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.gl-margin.positive::before {
  content: "+";
}

.gl-margin.negative {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

/* ========================================
 * ROLL BREAKDOWN
 * ======================================== */

.gl-roll-breakdown {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.gl-roll-breakdown .roll-value {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.gl-roll-breakdown .modifier {
  color: var(--color-accent-primary);
}

.gl-roll-breakdown .modifier.positive::before {
  content: "+";
}

.gl-roll-breakdown .total {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-secondary);
  padding-left: 6px;
  border-left: 1px solid var(--color-border-default);
}

/* ========================================
 * MODIFIER BREAKDOWN DISPLAY
 * Shows detailed breakdown like "DEX[+3] + Prof[+2]"
 * ======================================== */

.gl-mod-display {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  color: var(--color-accent-primary);
}

.gl-mod-part {
  display: inline-flex;
  align-items: center;
  padding: 1px 4px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-accent-primary);
  cursor: help;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.gl-mod-part:hover {
  background: rgba(97, 175, 239, 0.2);
  border-color: rgba(97, 175, 239, 0.4);
  color: var(--color-text-primary);
}

/* Modifier part type-specific colors */
.gl-mod-part[title*="Proficiency"],
.gl-mod-part[title*="proficiency"] {
  background: rgba(152, 195, 121, 0.1);
  border-color: rgba(152, 195, 121, 0.2);
  color: var(--color-accent-secondary);
}

.gl-mod-part[title*="Proficiency"]:hover,
.gl-mod-part[title*="proficiency"]:hover {
  background: rgba(152, 195, 121, 0.2);
  border-color: rgba(152, 195, 121, 0.4);
}

.gl-mod-part[title*="Expertise"],
.gl-mod-part[title*="expertise"] {
  background: rgba(229, 192, 123, 0.1);
  border-color: rgba(229, 192, 123, 0.2);
  color: var(--color-accent-warning);
}

.gl-mod-part[title*="Expertise"]:hover,
.gl-mod-part[title*="expertise"]:hover {
  background: rgba(229, 192, 123, 0.2);
  border-color: rgba(229, 192, 123, 0.4);
}

.gl-mod-part[title*="Equipment"],
.gl-mod-part[title*="equipment"],
.gl-mod-part[title*="Magic"] {
  background: rgba(198, 120, 221, 0.1);
  border-color: rgba(198, 120, 221, 0.2);
  color: var(--color-accent-purple);
}

.gl-mod-part[title*="Equipment"]:hover,
.gl-mod-part[title*="equipment"]:hover,
.gl-mod-part[title*="Magic"]:hover {
  background: rgba(198, 120, 221, 0.2);
  border-color: rgba(198, 120, 221, 0.4);
}

.gl-mod-part[title*="Effects"],
.gl-mod-part[title*="effects"] {
  background: rgba(86, 182, 194, 0.1);
  border-color: rgba(86, 182, 194, 0.2);
  color: var(--color-accent-cyan);
}

.gl-mod-part[title*="Effects"]:hover,
.gl-mod-part[title*="effects"]:hover {
  background: rgba(86, 182, 194, 0.2);
  border-color: rgba(86, 182, 194, 0.4);
}

/* Plus sign between parts */
.gl-mod-display > .gl-mod-part:not(:last-child)::after {
  content: "+";
  margin-left: 4px;
  color: var(--color-text-muted);
  font-weight: normal;
}
/**
 * Skill Check — Attack & Temp HP
 * ================================
 * Temp HP absorbed display, AC tooltip, attack breakdown,
 * and roll-for-more button.
 */

/* ========================================
 * TEMP HP ABSORBED DISPLAY
 * Shows when temporary HP absorbs damage (D&D 5e PHB p.198)
 * ======================================== */

.gl-temp-hp-absorbed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: linear-gradient(135deg,
    rgba(86, 182, 194, 0.15) 0%,
    rgba(86, 182, 194, 0.08) 100%
  );
  border: 1px solid rgba(86, 182, 194, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-accent-cyan);
}

.gl-temp-hp-icon {
  font-size: var(--font-size-md);
  filter: drop-shadow(0 0 2px rgba(86, 182, 194, 0.5));
}

.gl-temp-hp-text {
  font-weight: var(--font-weight-medium);
}

/* Animate temp HP absorption for visual feedback */
.gl-temp-hp-absorbed {
  animation: tempHpAbsorb 0.5s ease-out;
}

@keyframes tempHpAbsorb {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gl-temp-hp-absorbed {
    animation: none;
  }
}

/* ========================================
 * AC TOOLTIP AND ATTACK BREAKDOWN
 * Shows detailed AC breakdown on hover (D&D 5e PHB p.14)
 * ======================================== */

.gl-attack-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.gl-ac {
  cursor: help;
  padding: 2px 6px;
  background: rgba(224, 108, 117, 0.1);
  border: 1px solid rgba(224, 108, 117, 0.2);
  border-bottom: 1px dotted var(--color-accent-error);
  border-radius: var(--radius-sm);
  color: var(--color-accent-error);
  font-weight: var(--font-weight-bold);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  /* Enable native multiline tooltip with white-space */
  white-space: pre-line;
}

.gl-ac:hover {
  background: rgba(224, 108, 117, 0.2);
  border-color: rgba(224, 108, 117, 0.4);
  color: var(--color-text-primary);
  transform: scale(1.05);
}

/* Attack result badges */
.gl-attack-result {
  font-weight: var(--font-weight-bold);
  padding: 2px 8px;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

.gl-attack-result.hit {
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  color: var(--color-accent-secondary);
}

.gl-attack-result.miss {
  background: rgba(224, 108, 117, 0.15);
  border: 1px solid rgba(224, 108, 117, 0.3);
  color: var(--color-accent-error);
}

/* Natural 20/1 styling for attack rolls */
.gl-attack-breakdown .gl-die-result.natural-20 {
  color: var(--color-gold);
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.5);
  font-weight: var(--font-weight-bold);
}

.gl-attack-breakdown .gl-die-result.natural-1 {
  color: #8b0000;
  font-weight: var(--font-weight-bold);
}

.gl-attack-breakdown .gl-die-result.natural-high {
  color: var(--color-accent-secondary);
}

.gl-attack-breakdown .gl-die-result.natural-low {
  color: var(--color-accent-warning);
}

/* Critical hit/fumble attack results */
.gl-attack-result.hit:has(~ .gl-die-result.natural-20),
.gl-attack-breakdown:has(.gl-die-result.natural-20) .gl-attack-result.hit {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border-color: var(--color-gold);
  color: var(--color-gold);
  animation: critPulse 1s ease-in-out infinite;
}

@keyframes critPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.gl-attack-breakdown:has(.gl-die-result.natural-1) .gl-attack-result.miss {
  background: rgba(139, 0, 0, 0.2);
  border-color: #8b0000;
  color: #dc143c;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .gl-attack-breakdown {
    flex-direction: column;
    align-items: flex-start;
  }

  .gl-attack-result {
    margin-top: 4px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gl-attack-breakdown:has(.gl-die-result.natural-20) .gl-attack-result.hit {
    animation: none;
  }
}

/* ========================================
 * ROLL-FOR-MORE BUTTON
 * ======================================== */

.gl-roll-for-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.gl-roll-for-more:hover:not(:disabled) {
  background: rgba(97, 175, 239, 0.2);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
}

.gl-roll-for-more:active:not(:disabled) {
  transform: translateY(0);
}

.gl-roll-for-more:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gl-roll-for-more::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  mask-image: var(--icon-dice);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-dice);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
/**
 * Skill Check — DM Tools & Responsive
 * ======================================
 * DM-only visibility, passive score, can-dig-deeper indicator,
 * and responsive adjustments.
 */

/* ========================================
 * DM-ONLY VISIBILITY
 * ======================================== */

.gl-entry.gl-dm-only {
  border-left-style: dashed;
  position: relative;
}

.gl-entry.gl-dm-only::after {
  content: "DM";
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 6px;
  background: rgba(198, 120, 221, 0.15);
  border: 1px solid rgba(198, 120, 221, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Crown icon for DM badge */
.gl-dm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: rgba(198, 120, 221, 0.15);
  border: 1px solid rgba(198, 120, 221, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-purple);
}

.gl-dm-badge::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask-image: var(--icon-crown);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-crown);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* Hide DM-only entries from non-DM view */
body:not(.dm-mode) .gl-entry.gl-dm-only {
  display: none;
}

/* Alternative: show placeholder for hidden checks */
body:not(.dm-mode) .gl-entry.gl-hidden-check {
  opacity: 0.5;
  background: var(--color-bg-tertiary);
  border-left-color: var(--color-border-default);
}

body:not(.dm-mode) .gl-entry.gl-hidden-check .gl-body,
body:not(.dm-mode) .gl-entry.gl-hidden-check .gl-check-info {
  display: none;
}

body:not(.dm-mode) .gl-entry.gl-hidden-check::after {
  content: "The DM made a secret check...";
  display: block;
  padding: 4px 8px;
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ========================================
 * PASSIVE SCORE DISPLAY
 * ======================================== */

.gl-passive-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid rgba(97, 175, 239, 0.2);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.gl-passive-score::before {
  content: "Passive ";
  font-weight: var(--font-weight-normal);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * CAN DIG DEEPER INDICATOR
 * ======================================== */

.gl-can-dig-deeper {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(229, 192, 123, 0.1);
  border: 1px dashed rgba(229, 192, 123, 0.3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-accent-warning);
}

.gl-can-dig-deeper::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  mask-image: var(--icon-lightbulb);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: var(--icon-lightbulb);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

/* ========================================
 * RESPONSIVE ADJUSTMENTS
 * ======================================== */

@media (max-width: 480px) {
  .gl-check-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .gl-roll-breakdown {
    flex-wrap: wrap;
  }

  .gl-roll-for-more {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .gl-entry.skill_check.natural-20 {
    animation: none;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  }

  .gl-nat20-badge {
    animation: none;
  }
}
/**
 * Skill Check Display Component — Import Hub
 * ============================================
 * Styles for passive and active skill check entries in the game log.
 *
 * Decomposed into focused files under skill_check/ for maintainability.



 */
/**
 * Skeleton Loading States
 * =======================
 * Shimmer animations and loading placeholders for panels and content.
 * Uses CSS custom properties for theming consistency.
 */

/* ============================================================================
   Base Skeleton Styles
   ============================================================================ */

.skeleton-container {
  padding: 1rem;
  animation: skeleton-fade-in 0.2s ease-out;
}

@keyframes skeleton-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Base skeleton element with shimmer */
.skeleton-line,
.skeleton-title,
.skeleton-avatar,
.skeleton-icon,
.skeleton-badge,
.skeleton-button,
.skeleton-stat-box,
.skeleton-ability-score,
.skeleton-grid-item,
.skeleton-card-image,
.skeleton-checkbox,
.skeleton-initiative-order,
.skeleton-initiative-hp {
  background: linear-gradient(
    90deg,
    var(--bg-secondary, #1a1a2e) 25%,
    var(--bg-tertiary, #252540) 50%,
    var(--bg-secondary, #1a1a2e) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .skeleton-title,
  .skeleton-avatar,
  .skeleton-icon,
  .skeleton-badge,
  .skeleton-button,
  .skeleton-stat-box,
  .skeleton-ability-score,
  .skeleton-grid-item,
  .skeleton-card-image,
  .skeleton-checkbox,
  .skeleton-initiative-order,
  .skeleton-initiative-hp {
    animation: none;
    background: var(--bg-secondary, #1a1a2e);
  }
}

/* ============================================================================
   Skeleton Line Variants
   ============================================================================ */

.skeleton-line {
  height: 0.875rem;
  margin-bottom: 0.625rem;
}

.skeleton-line:last-child {
  margin-bottom: 0;
}

.skeleton-line--title {
  height: 1.25rem;
  width: 60%;
  margin-bottom: 0.75rem;
}

.skeleton-line--name {
  height: 1.5rem;
  width: 70%;
}

.skeleton-line--subtitle {
  height: 0.75rem;
  width: 50%;
  margin-top: 0.5rem;
}

.skeleton-line--meta {
  height: 0.625rem;
  width: 40%;
}

/* ============================================================================
   Panel Skeleton
   ============================================================================ */

.skeleton-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
}

.skeleton-title {
  height: 1.25rem;
  width: 40%;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.skeleton-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color, #333);
}

.skeleton-button {
  height: 2rem;
  width: 5rem;
  border-radius: 4px;
}

.skeleton-button--small {
  width: 3.5rem;
}

/* ============================================================================
   Character Stats Skeleton
   ============================================================================ */

.skeleton-stats-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.skeleton-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.skeleton-name-block {
  flex: 1;
}

.skeleton-vitals {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.skeleton-stat-box {
  flex: 1;
  height: 3rem;
  border-radius: 6px;
}

.skeleton-abilities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.skeleton-ability-score {
  height: 3.5rem;
  border-radius: 6px;
}

/* ============================================================================
   List Skeleton
   ============================================================================ */

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a2e);
}

.skeleton-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.skeleton-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* ============================================================================
   Card Skeleton
   ============================================================================ */

.skeleton-card {
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary, #1a1a2e);
}

.skeleton-card-image {
  height: 8rem;
  border-radius: 0;
}

.skeleton-card-content {
  padding: 1rem;
}

/* ============================================================================
   Combat Tracker Skeleton
   ============================================================================ */

.skeleton-combat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.skeleton-badge {
  width: 4rem;
  height: 1.5rem;
  border-radius: 9999px;
}

.skeleton-initiative-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.skeleton-initiative-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.skeleton-initiative-order {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.skeleton-initiative-name {
  flex: 1;
  height: 1rem;
  background: linear-gradient(
    90deg,
    var(--bg-tertiary, #252540) 25%,
    var(--bg-secondary, #1a1a2e) 50%,
    var(--bg-tertiary, #252540) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.skeleton-initiative-hp {
  width: 3rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.skeleton-combat-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

/* ============================================================================
   Tooltip Skeleton
   ============================================================================ */

.skeleton-tooltip {
  padding: 0.75rem;
  min-width: 12rem;
}

.skeleton-tooltip-meta {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* ============================================================================
   Narrative Skeleton
   ============================================================================ */

.skeleton-narrative {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-message {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  background: var(--bg-secondary, #1a1a2e);
}

.skeleton-message--dm {
  margin-right: 2rem;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.skeleton-message--player {
  margin-left: 2rem;
  text-align: right;
}

.skeleton-message--player .skeleton-line {
  margin-left: auto;
}

/* ============================================================================
   Grid Skeleton
   ============================================================================ */

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(var(--skeleton-columns, 3), 1fr);
  gap: 0.75rem;
}

.skeleton-grid-item {
  aspect-ratio: 1;
  border-radius: 6px;
}

/* ============================================================================
   Quest Log Skeleton
   ============================================================================ */

.skeleton-quest-log {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-quest {
  padding: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.skeleton-quest--secondary {
  opacity: 0.6;
  border-left-color: var(--text-muted, #888);
}

.skeleton-quest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.skeleton-quest-objectives {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

.skeleton-objective {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skeleton-checkbox {
  width: 1rem;
  height: 1rem;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ============================================================================
   Loading State Utility
   ============================================================================ */

.is-loading {
  position: relative;
  pointer-events: none;
}

.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
}
/**
 * Unified Renderer — Shared, Tooltip & Menu
 */

/* ===========================================================================
   Shared
   =========================================================================== */

.unified-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-tooltip);
  background: transparent;
}

.unified-loading {
  position: fixed;
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--text-muted);
}

.unified-loading__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: unified-spin 0.8s linear infinite;
}

@keyframes unified-spin {
  to { transform: rotate(360deg); }
}

/* ===========================================================================
   Tooltip
   =========================================================================== */

.unified-tooltip {
  position: fixed;
  z-index: var(--z-tooltip, 500);
  max-width: 300px;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.3));
  font-size: var(--font-size-sm, 13px);
  line-height: 1.4;
  pointer-events: none;
  animation: unified-fade-in var(--timing-fast) var(--ease-out);
}

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

.unified-tooltip--below {
  animation-name: unified-fade-in-below;
}

@keyframes unified-fade-in-below {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.unified-tooltip__header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1, 4px);
}

.unified-tooltip__title {
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.unified-tooltip__subtitle {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #888);
  font-style: italic;
}

.unified-tooltip__body {
  color: var(--text-secondary, #abb2bf);
}

/* ===========================================================================
   Menu
   =========================================================================== */

.unified-menu {
  position: fixed;
  z-index: var(--z-tooltip, 500);
  min-width: 180px;
  max-width: 240px;
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-xl, 0 8px 32px rgba(0, 0, 0, 0.4));
  overflow: hidden;
  animation: unified-menu-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-menu-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* When menu flips above the click point */
.unified-menu--above {
  animation-name: unified-menu-in-above;
}

@keyframes unified-menu-in-above {
  from { opacity: 0; transform: scale(0.95) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.unified-menu__header {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  font-weight: 600;
  font-size: var(--font-size-sm, 13px);
  color: var(--text-primary, #e5e5e5);
  background: var(--surface-secondary, #282c34);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
}

.unified-menu__divider {
  height: 1px;
  margin: var(--space-1, 4px) 0;
  background: var(--border-color, #3a3f4b);
}

.unified-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: none;
  background: transparent;
  color: var(--text-primary, #e5e5e5);
  font-size: var(--font-size-sm, 13px);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--timing-instant) var(--ease-default);
}

.unified-menu__item:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
}

.unified-menu__item--danger {
  color: var(--color-error, #cf6068);
}

.unified-menu__item--danger:hover {
  background: var(--color-error-bg, rgba(207, 96, 104, 0.15));
}

.unified-menu__icon {
  display: flex;
  width: 16px;
  height: 16px;
  color: var(--text-muted, #888);
}

.unified-menu__item:hover .unified-menu__icon {
  color: inherit;
}
/**
 * Unified Renderer — Card, Selection Grid & Segments (Narrative)
 */

/* ===========================================================================
   Card
   =========================================================================== */

.unified-card {
  position: fixed;
  z-index: var(--z-tooltip, 500);
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: unified-card-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-card-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.unified-card--sm { width: 280px; max-height: 320px; }
.unified-card--md { width: 360px; max-height: 480px; }
.unified-card--lg { width: 480px; max-height: 600px; }

.unified-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-color);
}

.unified-card__header-content {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex: 1;
}

.unified-card__type-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--accent-primary-bg);
  border-radius: var(--radius-md);
  color: var(--accent-primary);
  flex-shrink: 0;
}

.unified-card__titles {
  flex: 1;
  min-width: 0;
}

.unified-card__title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.unified-card__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  font-style: italic;
}

.unified-card__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.unified-card__close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.unified-card__body {
  flex: 1;
  padding: var(--space-4);
  overflow-y: auto;
}

.unified-card__description {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  line-height: 1.5;
}

.unified-card__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.unified-card__stat {
  display: flex;
  flex-direction: column;
  padding: var(--space-2);
  background: var(--surface-secondary);
  border-radius: var(--radius-sm);
}

.unified-card__stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.unified-card__stat-value {
  font-weight: 600;
  color: var(--text-primary);
}

.unified-card__actions {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-color);
  background: var(--surface-secondary);
}

.unified-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--timing-instant) var(--ease-default), color var(--timing-instant) var(--ease-default), border-color var(--timing-instant) var(--ease-default);
}

.unified-card__action:hover {
  background: var(--surface-hover);
}

.unified-card__action--primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.unified-card__action--primary:hover {
  background: var(--accent-primary-hover);
}

.unified-card__action--danger {
  color: var(--color-error);
  border-color: var(--color-error);
}

.unified-card__action--danger:hover {
  background: var(--color-error-bg);
}

/* Type variants */
.unified-card--npc .unified-card__type-icon { background: var(--color-entity-npc-bg); color: var(--color-entity-npc); }
.unified-card--item .unified-card__type-icon { background: var(--color-entity-item-bg); color: var(--color-entity-item); }
.unified-card--spell .unified-card__type-icon { background: var(--color-entity-spell-bg); color: var(--color-entity-spell); }
.unified-card--location .unified-card__type-icon { background: var(--color-entity-location-bg); color: var(--color-entity-location); }
.unified-card--condition .unified-card__type-icon { background: var(--color-entity-condition-bg); color: var(--color-entity-condition); }

/* ===========================================================================
   Selection Grid
   =========================================================================== */

.unified-selection {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.unified-selection__prompt {
  padding: var(--space-2);
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-style: italic;
}

.unified-selection__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.unified-selection__filter {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.unified-selection__filter:hover {
  border-color: var(--accent-primary);
}

.unified-selection__filter--active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.unified-selection__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.unified-selection__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--surface-elevated);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
}

.unified-selection__card:hover {
  border-color: var(--accent-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.unified-selection__card--selected {
  border-color: var(--accent-primary);
  background: var(--accent-primary-bg);
}

.unified-selection__card--selected::after {
  content: '✓';
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  color: var(--accent-primary-contrast);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: bold;
}

.unified-selection__info {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--surface-secondary);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  cursor: pointer;
  z-index: var(--z-base);
}

.unified-selection__info:hover {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--accent-primary-contrast);
}

.unified-selection__name {
  font-weight: 600;
  color: var(--text-primary);
  margin-top: var(--space-2);
}

.unified-selection__desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: 1.4;
}

.unified-selection__badge {
  position: absolute;
  top: calc(-1 * var(--space-1));
  right: var(--space-3);
  padding: 2px var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

.unified-selection__badge--beginner { background: var(--color-success-bg); color: var(--color-success); }
.unified-selection__badge--recommended { background: var(--accent-primary-bg); color: var(--accent-primary); }
.unified-selection__badge--dm-suggested { background: var(--color-warning-bg); color: var(--color-warning); }

/* ===========================================================================
   Segments (Narrative)
   =========================================================================== */

.unified-segment {
  margin: var(--space-3) 0;
}

.unified-segment--dialogue {
  padding-left: var(--space-4);
  border-left: 2px solid color-mix(in srgb, var(--accent-primary, var(--color-accent-primary)) 50%, transparent);
}

.unified-segment__speaker {
  font-weight: 600;
  color: var(--accent-primary);
  margin-bottom: var(--space-1);
}

.unified-segment__content {
  color: var(--text-primary);
  line-height: var(--line-height-narrative, 1.75);
}

.unified-segment__content--dialogue {
  font-style: italic;
}

.unified-segment__content--narration {
  color: var(--text-secondary);
}

.unified-segment__content--action {
  color: var(--text-primary);
  font-weight: 500;
}

.unified-segment__content--perception {
  color: var(--color-info);
  padding: var(--space-2);
  background: var(--color-info-bg);
  border-radius: var(--radius-sm);
}

/* Entity links in content */
.unified-entity-link {
  color: var(--accent-primary);
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: pointer;
}

.unified-entity-link:hover {
  text-decoration-style: solid;
}
/**
 * Unified Renderer — Roll Prompt, Quick Actions, Inline Selection & Roll Menu
 */

/* ===========================================================================
   Roll Prompt
   =========================================================================== */

.unified-roll-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.unified-roll-prompt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.unified-roll-prompt__skill {
  font-weight: 600;
  color: var(--text-primary);
}

.unified-roll-prompt__dc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.unified-roll-prompt__reason {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-style: italic;
}

.unified-roll-prompt__actions {
  display: flex;
  gap: var(--space-2);
}

.unified-roll-prompt__btn {
  flex: 1;
  padding: var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--timing-instant) var(--ease-default), color var(--timing-instant) var(--ease-default), border-color var(--timing-instant) var(--ease-default);
}

.unified-roll-prompt__btn:hover {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

/* ===========================================================================
   Quick Actions
   =========================================================================== */

.unified-quick-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  padding: var(--space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.unified-quick-actions::-webkit-scrollbar {
  display: none;
}

@media (max-width: 767px) {
  .unified-quick-actions {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-1-5);
    padding: var(--space-1);
  }
  .unified-quick-action { flex-shrink: 0; min-width: 0; }
}

.unified-quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-height: 44px; /* WCAG 2.5.5 touch target — combat quick-action buttons (#5437) */
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.unified-quick-action:hover {
  background: var(--surface-hover);
  border-color: var(--accent-primary);
}

.unified-quick-action svg {
  width: 14px;
  height: 14px;
}

/* ===========================================================================
   Inline Selection (within narrative text)
   Wiki-link style: highlighted text, not buttons
   =========================================================================== */

.unified-inline-selection {
  display: inline;
}

.inline-selection-options {
  display: inline;
}

/* Wiki-link style: colored text with dotted underline */
.inline-selection-option {
  display: inline;
  padding: 0 2px;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: #90a959; /* Wiki-link green */
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--timing-fast), background var(--timing-fast);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

.inline-selection-option:hover {
  color: #b8d974;
  background: rgba(144, 169, 89, 0.15);
  text-decoration-style: solid;
}

.inline-selection-divider {
  color: var(--text-muted);
  padding: 0 2px;
  opacity: 0.5;
}

/* Selected state - bold and highlighted */
.inline-selection-option--selected {
  color: #b8d974;
  background: rgba(144, 169, 89, 0.2);
  font-weight: 600;
  text-decoration-style: solid;
}

.inline-selection-option--selected:hover {
  background: rgba(144, 169, 89, 0.25);
  cursor: pointer;
}

/* Dimmed state for unselected options after a selection is made */
.inline-selection-option--dimmed {
  opacity: 0.5;
  color: var(--text-muted);
}

.inline-selection-option--dimmed:hover {
  opacity: 1;
  color: #90a959;
}

/* "more..." link styling */
.inline-selection-more {
  font-style: italic;
  color: var(--text-muted);
  text-decoration-style: dashed;
}

.inline-selection-more:hover {
  color: #90a959;
  text-decoration-style: solid;
}

/* ===========================================================================
   Roll Menu (skill/ability/save rolls with advantage/disadvantage)
   =========================================================================== */

.unified-roll-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: rgba(0, 0, 0, 0.4);
}

.unified-roll-menu {
  position: fixed;
  z-index: calc(var(--z-boot) + 1);
  min-width: 220px;
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  font-family: var(--font-mono, "JetBrains Mono", "Fira Code", monospace);
  overflow: hidden;
  animation: unified-roll-menu-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-roll-menu-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.unified-roll-menu--above {
  animation-name: unified-roll-menu-in-above;
}

@keyframes unified-roll-menu-in-above {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.unified-roll-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-secondary, #abb2bf);
  background: var(--surface-secondary, #282c34);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
}

.unified-roll-menu__title {
  /* Inherits from header */
}

.unified-roll-menu__badge {
  font-size: var(--font-size-sm);
  padding: 2px 8px;
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: 4px;
  color: #61afef;
}

.unified-roll-menu__options {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.unified-roll-menu__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-secondary, #282c34);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: 6px;
  color: var(--text-secondary, #abb2bf);
  font-size: var(--font-size-base);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
  /* Mobile-friendly tap target */
  min-height: 44px;
}

.unified-roll-menu__btn:hover {
  background: rgba(97, 175, 239, 0.12);
  border-color: #61afef;
  transform: translateX(2px);
}

.unified-roll-menu__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 24px;
  padding: 0 4px;
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #4a5568);
  border-radius: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #61afef;
}

.unified-roll-menu__btn-label {
  flex: 1;
  text-align: left;
}

/* Advantage variant */
.unified-roll-menu__btn--advantage {
  border-color: rgba(152, 195, 121, 0.3);
  color: #98c379;
}

.unified-roll-menu__btn--advantage .unified-roll-menu__btn-icon {
  background: rgba(152, 195, 121, 0.1);
  border-color: rgba(152, 195, 121, 0.4);
  color: #98c379;
}

.unified-roll-menu__btn--advantage:hover {
  background: rgba(152, 195, 121, 0.15);
  border-color: rgba(152, 195, 121, 0.5);
}

/* Disadvantage variant */
.unified-roll-menu__btn--disadvantage {
  border-color: rgba(224, 108, 117, 0.3);
  color: #e06c75;
}

.unified-roll-menu__btn--disadvantage .unified-roll-menu__btn-icon {
  background: rgba(224, 108, 117, 0.1);
  border-color: rgba(224, 108, 117, 0.4);
  color: #e06c75;
}

.unified-roll-menu__btn--disadvantage:hover {
  background: rgba(224, 108, 117, 0.15);
  border-color: rgba(224, 108, 117, 0.5);
}

/* Sources section (shows what grants advantage/disadvantage) */
.unified-roll-menu__sources {
  padding: 8px 12px;
  border-top: 1px solid var(--border-color, #3a3f4b);
  font-size: var(--font-size-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.unified-roll-menu__source {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted, #6b7280);
}

.unified-roll-menu__source-icon {
  font-weight: bold;
  width: 12px;
}

.unified-roll-menu__source--advantage {
  color: #98c379;
}

.unified-roll-menu__source--disadvantage {
  color: #e06c75;
}
/**
 * Unified Renderer — Modal, VTT Battle Map & Mobile Touch Targets
 */

/* ===========================================================================
   Modal (Full-screen overlay for announcements, custom content)
   =========================================================================== */

.unified-modal__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: unified-modal-backdrop-in var(--timing-fast) var(--ease-out);
}

@keyframes unified-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.unified-modal {
  position: fixed;
  z-index: calc(var(--z-boot) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  padding: var(--space-4, 16px);
  animation: unified-modal-in var(--timing-normal) var(--ease-out);
}

@keyframes unified-modal-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.unified-modal__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px); /* Mobile Safari */
  background: var(--surface-elevated, #1e2127);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

/* Size variants */
.unified-modal--small .unified-modal__card { max-width: 400px; }
.unified-modal--default .unified-modal__card { max-width: 560px; }
.unified-modal--large .unified-modal__card { max-width: 720px; }
.unified-modal--fullscreen .unified-modal__card {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px); /* Mobile Safari */
}

.unified-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  background: var(--surface-secondary, #282c34);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
  flex-shrink: 0;
}

.unified-modal__title-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  flex: 1;
}

.unified-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--accent-primary-bg, rgba(251, 191, 36, 0.15));
  border-radius: var(--radius-md, 8px);
  color: var(--accent-primary, #fbbf24);
  font-size: var(--font-size-xl);
  flex-shrink: 0;
}

.unified-modal__title {
  margin: 0;
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.unified-modal__subtitle {
  margin: var(--space-1, 4px) 0 0;
  font-size: var(--font-size-sm, 13px);
  color: var(--text-muted, #888);
  font-style: italic;
}

.unified-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  font-size: var(--font-size-3xl);
  line-height: 1;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default);
  flex-shrink: 0;
}

.unified-modal__close:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #e5e5e5);
}

.unified-modal__body {
  flex: 1;
  padding: var(--space-4, 16px);
  overflow-y: auto;
  color: var(--text-secondary, #abb2bf);
  line-height: 1.6;
}

.unified-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 8px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface-secondary, #282c34);
  border-top: 1px solid var(--border-color, #3a3f4b);
  flex-shrink: 0;
}

.unified-modal__footer--hidden {
  display: none;
}

.unified-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  background: var(--surface-primary, #1e2127);
  color: var(--text-primary, #e5e5e5);
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
}

.unified-modal__btn:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--accent-primary, #fbbf24);
}

.unified-modal__btn--primary {
  background: var(--accent-primary, #fbbf24);
  border-color: var(--accent-primary, #fbbf24);
  color: var(--accent-primary-contrast, #000);
}

.unified-modal__btn--primary:hover {
  background: var(--accent-primary-hover, #f59e0b);
}

/* Modal action buttons (used by setButtons) */
.unified-modal__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: transparent;
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary, #abb2bf);
  font-size: var(--font-size-sm, 13px);
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), opacity var(--timing-fast) var(--ease-default);
}

.unified-modal__action:hover:not(:disabled) {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  border-color: var(--accent-primary, #fbbf24);
}

.unified-modal__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.unified-modal__action--primary {
  background: var(--accent-primary, #fbbf24);
  border-color: var(--accent-primary, #fbbf24);
  color: var(--accent-primary-contrast, #000);
}

.unified-modal__action--primary:hover:not(:disabled) {
  background: var(--accent-primary-hover, #f59e0b);
}

.unified-modal__action--danger {
  border-color: var(--color-danger, #e74c3c);
  color: var(--color-danger, #e74c3c);
}

.unified-modal__action--danger:hover:not(:disabled) {
  background: var(--color-danger, #e74c3c);
  color: var(--text-on-danger, #fff);
}

/* Loading state for action buttons */
.unified-modal__action--loading {
  position: relative;
  pointer-events: none;
}

.unified-modal__action--loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: unified-spin 0.8s linear infinite;
  margin-right: var(--space-2, 8px);
}

.unified-modal__action--loading .unified-modal__action-text {
  opacity: 0.7;
}

/* ===========================================================================
   VTT Battle Map (ASCII tactical maps)
   =========================================================================== */

.vtt-map {
  margin: var(--space-3, 12px) 0;
  padding: 0;
  background: var(--surface-secondary, #1a1a2e);
  border: 1px solid var(--border-color, #3a3f4b);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}

.vtt-map-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-elevated, #252536);
  border-bottom: 1px solid var(--border-color, #3a3f4b);
}

.vtt-map-icon {
  font-size: var(--font-size-xl);
}

.vtt-map-title {
  flex: 1;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  font-size: var(--font-size-sm, 13px);
}

.vtt-map-dimensions {
  padding: 2px 8px;
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: 4px;
  color: #61afef;
  font-size: var(--font-size-sm);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}

.vtt-map-tokens {
  padding: 2px 8px;
  background: rgba(152, 195, 121, 0.15);
  border: 1px solid rgba(152, 195, 121, 0.3);
  border-radius: 4px;
  color: #98c379;
  font-size: var(--font-size-sm);
}

.vtt-map-grid {
  margin: 0;
  padding: var(--space-3, 12px);
  font-family: var(--font-mono, "JetBrains Mono", "Fira Code", "Cascadia Code", monospace);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  color: var(--text-secondary, #abb2bf);
  background: var(--surface-primary, #0d1117);
  white-space: pre;
  overflow-x: auto;
  /* Ensure consistent character width for ASCII alignment */
  letter-spacing: 0;
}

/* ASCII map character highlighting */

/* Border/grid characters - subtle, low contrast */
.vtt-border {
  color: #4a4a5a;
}

/* Coordinate labels (row letters, column numbers) */
.vtt-coord {
  color: #6a7080;
  font-weight: 500;
}

/* Player tokens - bright cyan/teal */
.vtt-player {
  color: #56d4dd;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(86, 212, 221, 0.5);
}

/* Enemy tokens - red/orange */
.vtt-enemy {
  color: #e06c75;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(224, 108, 117, 0.4);
}

/* Empty floor cells */
.vtt-floor {
  color: #3a3f4b;
}

/* Wall characters */
.vtt-wall {
  color: #7a8090;
}

/* Legend section */
.vtt-map-legend {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--surface-elevated, #252536);
  border-top: 1px solid var(--border-color, #3a3f4b);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  line-height: 1.6;
}

.vtt-legend-header {
  color: var(--text-primary, #e5e5e5);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.vtt-player-name {
  color: #56d4dd;
}

.vtt-enemy-name {
  color: #e06c75;
}

/* ===========================================================================
   Mobile Touch Target Improvements
   Increase tap targets to WCAG 44px minimum on mobile devices
   =========================================================================== */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {
  /* Quick action buttons - increase touch target */
  .unified-quick-action {
    min-height: 44px;
    padding: var(--space-2-5) var(--space-3-5);
    font-size: var(--font-size-md);
  }

  .unified-quick-action svg {
    width: 18px;
    height: 18px;
  }

  /* Inline selection options - increase tap area with padding */
  .inline-selection-option {
    padding: var(--space-1) var(--space-2);
    margin: 0 var(--space-1);
    border-radius: var(--radius-sm);
  }

  /* Roll menu options - ensure touch friendly */
  .unified-roll-option {
    min-height: 44px;
    padding: var(--space-3);
  }

  /* Entity action menu items */
  .unified-entity-actions button,
  .unified-entity-action {
    min-height: 44px;
    padding: var(--space-3);
  }
}
/**
 * Unified Renderer — Import Hub
 * ==============================
 * Single source of truth for all dynamic rendering:
 * tooltips, menus, cards, selection grids, segments, interactive elements.
 *
 * Decomposed into focused files under unified_renderer/ for maintainability.




 */
/*
 * Reopen-panel button affordance (#3694)
 *
 * Rendered by app/javascript/lib/renderers/segment_renderer.ts when an
 * action segment's content matches a known panel placeholder
 * ("[Displayed character sheet]" etc.). Clicking re-routes through the
 * standard slash-command path so the panel reopens identically.
 *
 * Lives in its own file so app/assets/stylesheets/terminal/components/
 * _unified_renderer.css stays under the 1000 LOC cap.
 */

.unified-segment__content--reopen-panel {
  display: inline-block;
  background: transparent;
  border: 1px dashed var(--accent-primary, currentColor);
  color: var(--accent-primary, currentColor);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 4px);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-align: left;
}

.unified-segment__content--reopen-panel:hover,
.unified-segment__content--reopen-panel:focus-visible {
  background: var(--accent-primary-bg, rgba(255, 255, 255, 0.05));
  outline: none;
}
/**
 * Empty State Styles
 * ==================
 * Contextual empty state messages for panels with no content.
 * Provides helpful guidance rather than blank space.
 */

/* ============================================================================
   Base Empty State
   ============================================================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
  min-height: 12rem;
  animation: empty-state-fade-in 0.3s ease-out;
}

/* State-driven visibility (preferred over inline style mutations) */
.empty-state--hidden {
  display: none;
}

@keyframes empty-state-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .empty-state {
    animation: none;
  }
}

/* ============================================================================
   Icon
   ============================================================================ */

.empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--bg-tertiary, #252540);
  color: var(--text-muted, #888);
  opacity: 0.6;
}

.empty-state__icon svg {
  width: 2rem;
  height: 2rem;
}

/* ============================================================================
   Text Content
   ============================================================================ */

.empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  letter-spacing: -0.01em;
}

.empty-state__subtitle {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--text-muted, #888);
  max-width: 28ch;
  line-height: 1.5;
}

/* ============================================================================
   Hints List
   ============================================================================ */

.empty-state__hints {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  max-width: 24rem;
}

.empty-state__hint {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-secondary, #aaa);
  line-height: 1.4;
}

.empty-state__hint::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.625rem;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color, #8b5cf6);
  opacity: 0.5;
}

/* ============================================================================
   Action Button
   ============================================================================ */

.empty-state__action {
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--accent-color, #8b5cf6);
  background: transparent;
  color: var(--accent-color, #8b5cf6);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.empty-state__action:hover {
  background: var(--accent-color, #8b5cf6);
  color: var(--bg-primary, #0d0d1a);
}

.empty-state__action:focus-visible {
  outline: 2px solid var(--accent-color, #8b5cf6);
  outline-offset: 2px;
}

/* ============================================================================
   Welcome Variant
   ============================================================================ */

.empty-state--welcome {
  min-height: 16rem;
  padding: 2.5rem 2rem;
}

.empty-state--welcome .empty-state__title {
  font-size: 1.5rem;
  color: var(--accent-color, #8b5cf6);
}

.empty-state--welcome .empty-state__subtitle {
  max-width: 36ch;
  font-size: 1rem;
}

.empty-state__quick-start {
  width: 100%;
  max-width: 24rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  text-align: left;
}

.empty-state__quick-start h4 {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

/* ============================================================================
   Container Utility
   ============================================================================ */

.has-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================================
   Compact Variant (for smaller panels)
   ============================================================================ */

.empty-state--compact {
  padding: 1rem;
  min-height: 8rem;
}

.empty-state--compact .empty-state__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.75rem;
}

.empty-state--compact .empty-state__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.empty-state--compact .empty-state__title {
  font-size: 0.9375rem;
}

.empty-state--compact .empty-state__subtitle {
  font-size: 0.8125rem;
  margin-bottom: 0;
}

.empty-state--compact .empty-state__hints {
  display: none;
}

/* ============================================================================
   Inline Variant (for inline messages within panels)
   ============================================================================ */

.empty-state--inline {
  flex-direction: row;
  text-align: left;
  padding: 1rem;
  min-height: auto;
  gap: 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

.empty-state--inline .empty-state__icon {
  width: 2rem;
  height: 2rem;
  margin: 0;
  background: transparent;
}

.empty-state--inline .empty-state__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.empty-state--inline .empty-state__title {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.empty-state--inline .empty-state__subtitle {
  font-size: 0.8125rem;
  margin: 0;
}

.empty-state--inline .empty-state__content {
  flex: 1;
}

/* ============================================================================
   Mobile Touch Target for Action Button
   ============================================================================ */

/* Mobile: ensure action button meets 44px touch target */
@media (max-width: 1023px) {
  .empty-state__action {
    min-height: 44px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop: auto-width action button */
@media (min-width: 1024px) {
  .empty-state__action {
    width: auto;
  }
}
/**
 * Shortcuts Overlay Styles
 * ========================
 * Modal overlay for keyboard shortcuts reference.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.shortcuts-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-ceiling);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  transform: none;
}

.shortcuts-overlay--visible {
  opacity: 1;
}

.shortcuts-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Container
   ============================================================================ */

.shortcuts-modal {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.shortcuts-overlay--visible .shortcuts-modal {
  transform: scale(1) translateY(0);
}

.shortcuts-overlay--closing .shortcuts-modal {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shortcuts-overlay,
  .shortcuts-modal {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.shortcuts-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.shortcuts-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent-color, #8b5cf6);
}

.shortcuts-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.shortcuts-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.shortcuts-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.shortcuts-modal__close:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e5e5e5);
}

.shortcuts-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Content
   ============================================================================ */

.shortcuts-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ============================================================================
   Sections
   ============================================================================ */

.shortcuts-section__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  border-bottom: 1px solid var(--border-color, #333);
}

.shortcuts-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   Shortcut Items
   ============================================================================ */

.shortcuts-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.shortcuts-item__keys {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.shortcuts-item__plus {
  color: var(--text-muted, #888);
  font-size: 0.75rem;
  margin: 0 0.125rem;
}

.shortcuts-item__description {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

/* ============================================================================
   Keyboard Keys
   ============================================================================ */

.shortcuts-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.5rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ============================================================================
   Footer
   ============================================================================ */

.shortcuts-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.shortcuts-modal__hint {
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.shortcuts-modal__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .shortcuts-modal {
    width: 95%;
    max-height: 90vh;
  }

  .shortcuts-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .shortcuts-item__description {
    text-align: left;
    font-size: 0.8125rem;
  }
}
/**
 * F1 Contextual Help Overlay Styles
 * ==================================
 * Modal overlay for room-specific help content.
 * Triggered by F1 key anywhere in the app.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.f1-help-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-ceiling);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

.f1-help-overlay--visible {
  opacity: 1;
}

.f1-help-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Container
   ============================================================================ */

.f1-help-modal {
  width: 90%;
  max-width: 600px;
  max-height: 85vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.f1-help-overlay--visible .f1-help-modal {
  transform: scale(1) translateY(0);
}

.f1-help-overlay--closing .f1-help-modal {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .f1-help-overlay,
  .f1-help-modal {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.f1-help-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.f1-help-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--accent-color, #8b5cf6);
}

.f1-help-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.f1-help-modal__title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.f1-help-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.f1-help-modal__close:hover {
  background: var(--bg-tertiary, #252540);
  color: var(--text-primary, #e5e5e5);
}

.f1-help-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Content
   ============================================================================ */

.f1-help-modal__content {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Overview text at top */
.f1-help-modal__overview {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary, #aaa);
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  border-left: 3px solid var(--accent-color, #8b5cf6);
}

/* ============================================================================
   Sections
   ============================================================================ */

.f1-help-section__title {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  border-bottom: 1px solid var(--border-color, #333);
}

.f1-help-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================================================
   Help Items (action + description)
   ============================================================================ */

.f1-help-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
}

.f1-help-item__action {
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-color, #8b5cf6);
  flex-shrink: 0;
}

.f1-help-item__description {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-secondary, #aaa);
  text-align: right;
}

/* ============================================================================
   Tips Section
   ============================================================================ */

.f1-help-tips {
  background: var(--bg-secondary, #1a1a2e);
  border-radius: 6px;
  padding: 1rem;
}

.f1-help-tips .f1-help-section__title {
  color: var(--success-color, #4ade80);
}

.f1-help-tips ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.f1-help-tips li {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary, #aaa);
  margin-bottom: 0.25rem;
}

.f1-help-tips li:last-child {
  margin-bottom: 0;
}

/* ============================================================================
   Footer
   ============================================================================ */

.f1-help-modal__footer {
  display: flex;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
  font-size: 0.8125rem;
  color: var(--text-muted, #888);
}

.f1-help-modal__footer kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-primary, #e5e5e5);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .f1-help-modal {
    width: 95%;
    max-height: 90vh;
  }

  .f1-help-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .f1-help-item__description {
    text-align: left;
    font-size: 0.8125rem;
  }
}
/**
 * Clipboard Component Styles
 * ==========================
 * Visual feedback for copy-to-clipboard actions.
 */

/* ========================================
 * COPY BUTTON
 * Styled copy button with icon
 * ======================================== */

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: transparent;
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.copy-btn:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--terminal-text-muted, #888);
  color: var(--terminal-text-primary, #e0e0e0);
}

.copy-btn:active {
  transform: scale(0.95);
}

.copy-btn__icon {
  font-size: 0.875rem;
}

/* ========================================
 * FEEDBACK STATES
 * Visual feedback when copy succeeds/fails
 * ======================================== */

.clipboard-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
  animation: clipboard-pulse 0.3s ease-out;
}

.clipboard-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--color-error, #cf6068);
  color: var(--color-error, #cf6068);
  animation: clipboard-shake 0.3s ease-out;
}

@keyframes clipboard-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes clipboard-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

/* ========================================
 * INLINE COPY ICON
 * Small icon that appears on hover
 * ======================================== */

.copyable {
  position: relative;
  cursor: pointer;
}

.copyable::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.copyable:hover::after {
  opacity: 0.6;
}

.copyable:active::after {
  opacity: 1;
}

/* ========================================
 * COPY TOOLTIP
 * Shows "Copied!" on successful copy
 * ======================================== */

.copy-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--color-success, #22c55e);
  color: white;
  font-size: 0.6875rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: copy-tooltip-enter 0.2s ease-out forwards;
}

.copy-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-success, #22c55e);
}

@keyframes copy-tooltip-enter {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}

/* ========================================
 * COPY CONTEXT MENU ITEM
 * Styled for context menus
 * ======================================== */

.context-menu__item--copy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.context-menu__item--copy::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-clipboard) no-repeat center / contain;
  font-size: 0.875rem;
}

/* ========================================
 * STAT BLOCK COPY
 * For copying character stats, spell info, etc.
 * ======================================== */

.stat-block-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-muted, #888);
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.stat-block:hover .stat-block-copy {
  opacity: 1;
}

.stat-block-copy:hover {
  background: var(--terminal-bg, #0a0a0a);
  color: var(--terminal-text-primary, #e0e0e0);
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .clipboard-success,
  .clipboard-error {
    animation: none;
  }

  .copy-tooltip {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }
}
/**
 * Help Tooltip Styles
 * ===================
 * Styles for D&D glossary term tooltips.
 */

/* ========================================
 * TERM HIGHLIGHTING
 * ======================================== */

.help-term {
  position: relative;
  border-bottom: 1px dotted var(--color-primary, #4a90e2);
  color: inherit;
  cursor: help;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.help-term:hover,
.help-term:focus {
  border-bottom-style: solid;
  color: var(--color-primary, #4a90e2);
  outline: none;
}

.help-term:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Auto-linked terms (less prominent) */
.help-term--auto {
  border-bottom-color: var(--terminal-text-muted, #888);
}

.help-term--auto:hover,
.help-term--auto:focus {
  border-bottom-color: var(--color-primary, #4a90e2);
}

/* ========================================
 * TOOLTIP
 * ======================================== */

.help-tooltip {
  position: fixed;
  z-index: var(--z-sky);
  max-width: 320px;
  min-width: 200px;
  padding: 0.75rem;
  background: var(--terminal-bg-elevated, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  animation: help-tooltip-enter 0.15s ease-out;
  font-size: 0.875rem;
  line-height: 1.5;
}

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

/* Arrow pointer */
.help-tooltip::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--terminal-bg-elevated, #1a1a2e);
}

.help-tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom-color: var(--terminal-border, #333);
}

/* Tooltip above element */
.help-tooltip--above::after {
  top: auto;
  bottom: -6px;
  border-bottom-color: transparent;
  border-top-color: var(--terminal-bg-elevated, #1a1a2e);
}

.help-tooltip--above::before {
  top: auto;
  bottom: -8px;
  border-bottom-color: transparent;
  border-top-color: var(--terminal-border, #333);
}

/* ========================================
 * TOOLTIP CONTENT
 * ======================================== */

.help-tooltip__header {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.help-tooltip__term {
  font-weight: 600;
  color: var(--color-primary, #4a90e2);
  font-size: 1rem;
}

.help-tooltip__definition {
  margin: 0 0 0.5rem 0;
  color: var(--terminal-text-primary, #e0e0e0);
}

.help-tooltip__example {
  margin: 0 0 0.5rem 0;
  padding: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.8125rem;
}

.help-tooltip__example em {
  color: var(--terminal-text-muted, #888);
  font-style: normal;
}

/* ========================================
 * RELATED TERMS
 * ======================================== */

.help-tooltip__related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--terminal-border, #333);
}

.help-tooltip__related-label {
  width: 100%;
  font-size: 0.75rem;
  color: var(--terminal-text-muted, #888);
  margin-bottom: 0.25rem;
}

.help-tooltip__related-term {
  padding: 0.125rem 0.5rem;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 4px;
  color: var(--terminal-text-secondary, #999);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.help-tooltip__related-term:hover,
.help-tooltip__related-term:focus {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary, #4a90e2);
  outline: none;
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .help-tooltip {
    animation: none;
  }
}
/*
 * OOC Adventures Section
 * ======================
 * Styles for the adventure posting board in the OOC sidebar.
 * Players can post "Seeking Adventure" or "Offering Adventure" notices.
 */

/* ===========================================
 * Adventures Section in OOC Sidebar
 * =========================================== */

.ooc-adventures-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ooc-adventure-buttons {
  display: flex;
  gap: var(--space-2);
}

.ooc-adventure-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  font-size: var(--text-xs);
}

.ooc-adventure-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.ooc-adventure-btn:active {
  transform: scale(0.98);
}

.ooc-adventure-btn__icon {
  font-size: var(--text-lg);
}

.ooc-adventure-btn__label {
  color: var(--text-secondary);
}

.ooc-adventure-btn--seeking:hover {
  border-color: var(--color-info);
}

.ooc-adventure-btn--offering:hover {
  border-color: var(--color-warning);
}

/* ===========================================
 * Adventure Board (list of posts)
 * =========================================== */

.ooc-adventure-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 200px;
  overflow-y: auto;
}

.ooc-empty-board {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2);
  margin: 0;
}

/* ===========================================
 * Adventure Card
 * =========================================== */

.ooc-adventure-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}

.ooc-adventure-card--seeking {
  border-left: 3px solid var(--color-info);
}

.ooc-adventure-card--offering {
  border-left: 3px solid var(--color-warning);
}

.ooc-adventure-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ooc-adventure-card__type-icon {
  font-size: var(--text-sm);
}

.ooc-adventure-card__type-label {
  font-weight: 600;
  color: var(--text-primary);
}

.ooc-adventure-card__author {
  margin-left: auto;
  color: var(--text-muted);
  font-size: var(--text-2xs);
}

.ooc-adventure-card__body {
  color: var(--text-secondary);
  line-height: 1.4;
  word-break: break-word;
}

.ooc-adventure-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
}

.ooc-adventure-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-2xs);
  color: var(--text-secondary);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ooc-adventure-card__btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-default);
}

.ooc-adventure-card__btn--respond:hover {
  border-color: var(--color-success);
  color: var(--color-success);
}

.ooc-adventure-card__btn--remove {
  margin-left: auto;
  padding: var(--space-1);
}

.ooc-adventure-card__btn--remove:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

.ooc-adventure-card__btn-icon {
  font-size: var(--text-xs);
}

/* ===========================================
 * Adventure Post Modal
 * =========================================== */

.adventure-post-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: Min(400px, 90vw);
  max-height: 80vh;
  padding: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
}

.adventure-post-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.adventure-post-dialog__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.adventure-post-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.adventure-post-dialog__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.adventure-post-dialog__icon {
  font-size: var(--text-xl);
}

.adventure-post-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--text-xl);
  color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adventure-post-dialog__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* ===========================================
 * Adventure Post Form
 * =========================================== */

.adventure-post__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.adventure-post__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.adventure-post__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.adventure-post__textarea {
  width: 100%;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease;
}

.adventure-post__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.adventure-post__textarea::placeholder {
  color: var(--text-muted);
}

.adventure-post__char-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

.adventure-post__char-count--warning {
  color: var(--color-warning);
}

/* ===========================================
 * Adventure Post Footer
 * =========================================== */

.adventure-post-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

.adventure-post__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.adventure-post__btn--secondary {
  background: transparent;
  color: var(--text-secondary);
}

.adventure-post__btn--secondary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.adventure-post__btn--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.adventure-post__btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.adventure-post__btn--primary:active {
  transform: scale(0.98);
}
/**
 * Mobile Panel Styles
 * ===================
 * Animations and visual feedback for mobile panel navigation.
 * Used by mobile_panel_controller.js for swipe gestures.
 */

/* ========================================
 * Panel Transition Animations
 * ======================================== */

/* Exit animation - slide out left */
.mobile-panel--exit-left {
  animation: mobilePanelExitLeft 0.15s ease-out forwards;
}

/* Exit animation - slide out right */
.mobile-panel--exit-right {
  animation: mobilePanelExitRight 0.15s ease-out forwards;
}

/* Enter animation - slide in from left */
.mobile-panel--enter-left {
  animation: mobilePanelEnterLeft 0.25s ease-out forwards;
}

/* Enter animation - slide in from right */
.mobile-panel--enter-right {
  animation: mobilePanelEnterRight 0.25s ease-out forwards;
}

@keyframes mobilePanelExitLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30%);
  }
}

@keyframes mobilePanelExitRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(30%);
  }
}

@keyframes mobilePanelEnterLeft {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mobilePanelEnterRight {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
 * Edge Bounce Feedback
 * ======================================== */

.mobile-panel--bounce-left {
  animation: mobilePanelBounceLeft 0.3s ease-out;
}

.mobile-panel--bounce-right {
  animation: mobilePanelBounceRight 0.3s ease-out;
}

@keyframes mobilePanelBounceLeft {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(15px);
  }
  60% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes mobilePanelBounceRight {
  0% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-15px);
  }
  60% {
    transform: translateX(5px);
  }
  100% {
    transform: translateX(0);
  }
}

/* ========================================
 * Swipe Progress Indicator
 * ======================================== */

.mobile-swipe-indicator {
  --swipe-progress: 0;

  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-lg);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  opacity: calc(var(--swipe-progress) * 0.9);
  z-index: var(--z-notification);
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.1s ease-out;
}

.mobile-swipe-indicator--left {
  right: var(--space-4);
}

.mobile-swipe-indicator--right {
  left: var(--space-4);
}

.mobile-swipe-indicator--disabled {
  border-color: var(--color-text-muted);
  color: var(--color-text-muted);
  opacity: calc(var(--swipe-progress) * 0.3);
}

/* Icon arrows */
.mobile-swipe-indicator--left::before {
  content: '→';
  margin-right: var(--space-2);
}

.mobile-swipe-indicator--right::before {
  content: '←';
  margin-right: var(--space-2);
}

/* ========================================
 * Touch Feedback States
 * ======================================== */

/* Active touch state on buttons */
@media (hover: none) and (pointer: coarse) {
  .mobile-panel-switcher__btn:active {
    transform: scale(0.95);
    background: var(--color-bg-elevated);
  }

  .mobile-panel-switcher__btn.active:active {
    transform: scale(0.95);
  }
}

/* ========================================
 * Pull-to-Navigate Hint
 * ======================================== */

.mobile-nav-hint {
  position: fixed;
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.7);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-hint--visible {
  opacity: 1;
}

.mobile-nav-hint__icon {
  display: inline-block;
  margin: 0 var(--space-1);
}

/* ========================================
 * Panel Pagination Dots
 * ======================================== */

.mobile-panel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
}

.mobile-panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-default);
  transition: background 0.2s ease;
}

.mobile-panel-dot--active {
  width: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-primary);
}

/* ========================================
 * Safe Area Support (Notched Phones)
 * ======================================== */

@supports (padding: env(safe-area-inset-bottom)) {
  .mobile-panel-switcher {
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure modals don't get cut off */
  .mobile-mode .detail-modal,
  .mobile-mode .unified-modal {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ========================================
 * Landscape Orientation
 * ======================================== */

@media (orientation: landscape) and (max-height: 500px) {
  .mobile-panel-switcher {
    padding: 2px 8px;
  }

  .mobile-panel-switcher__btn {
    min-height: 36px;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
  }

  .mobile-panel-switcher__icon {
    display: none; /* Hide icons in cramped landscape mode */
  }
}

/* ========================================
 * Reduced Motion Support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .mobile-panel--exit-left,
  .mobile-panel--exit-right,
  .mobile-panel--enter-left,
  .mobile-panel--enter-right,
  .mobile-panel--bounce-left,
  .mobile-panel--bounce-right {
    animation: none;
  }

  .mobile-swipe-indicator {
    transition: none;
    opacity: 0.8;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .mobile-panel-switcher__btn {
    border-width: 2px;
  }

  .mobile-panel-switcher__btn.active {
    border-color: white;
    outline: 2px solid white;
    outline-offset: 2px;
  }

  .mobile-swipe-indicator {
    border-width: 2px;
  }
}
/**
 * Mobile Bottom-Sheet Panel Overlay (#5123)
 * ==========================================
 * Non-narrative panels open as bottom-sheet overlays covering ~70vh.
 * The narrative behind remains visible at the top (~30vh).
 * Slides UP from the bottom (not from the side) to match native mobile patterns.
 * Panel content is unchanged; only the container changes.
 *
 * Only active on mobile (≤768px). Desktop is unaffected.
 * Input bar remains fixed at the bottom and is always visible (#5119).
 *
 * Z-index order (bottom → top):
 *   narrative base (z-panel 100) < backdrop (z-overlay 200) < sheet (z-sheet 300)
 *   < input-bar (z-sheet 300 + 1 = 301 via _input.css bump) < FAB (z-sticky 400)
 *
 * Sheet geometry: height 70vh from bottom. Input bar (position:fixed, bottom:0)
 * occupies ~56px at the bottom of the viewport. The sheet sits ABOVE the input
 * bar in z-index order but its content area ends above the input bar in screen
 * space because the input bar is drawn over it.
 *
 * Z-index assignment:
 *   backdrop = --z-overlay (200): above panels, below sheet
 *   sheet    = --z-sheet   (300): above backdrop
 *   input    = --z-sheet   (300) at mobile — same layer BUT the input is declared
 *              AFTER the sheet in the cascade, so it paints on top. As a safety
 *              net the input.css rule is annotated to maintain this ordering.
 */

/* ========================================
 * Backdrop
 * Semi-transparent overlay behind the sheet, above the narrative
 * ======================================== */

.mobile-bottom-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: var(--z-overlay);  /* 200 — above panels (100), below sheet (300) */
  opacity: 0;
  transition: opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-sheet-backdrop.open {
  opacity: 1;
}

/* ========================================
 * Bottom-Sheet Overlay (~70vh, slides up from bottom)
 * The sheet covers ~70% of the screen; ~30% of narrative is visible above.
 * The fixed input bar sits visually BELOW the sheet (below 30vh from bottom).
 * ======================================== */

.mobile-bottom-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 70vh covers most of the screen while leaving narrative strip visible above.
     Use dvh (dynamic viewport height) on Safari to account for browser chrome. */
  height: 70vh;
  height: 70dvh;
  /* Sheet sits above backdrop (z-overlay 200). Input bar also at z-sheet (300)
     but paints on top via cascade order — see _input.css annotation. */
  z-index: var(--z-sheet);  /* 300 */
  /* Start off-screen below, translate up to reveal */
  transform: translateY(100%);
  transition: transform 0.25s ease;
  background: var(--color-bg-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  /* Rounded top corners */
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  flex-direction: column;
  /* Safe area: bottom padding for notched phones (home indicator) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-sheet.open {
  transform: translateY(0);
}

/* Swipe-down-to-close: JS sets --swipe-offset (positive = moving down toward closed) */
.mobile-bottom-sheet.swiping {
  transition: none;
  transform: translateY(var(--swipe-offset, 0px));
}

/* ========================================
 * Sheet Header
 * Drag handle + title + close button at the top of the bottom sheet.
 * Tapping the header row OR the back button dismisses the sheet.
 * ======================================== */

.mobile-bottom-sheet__back-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
  /* Visual height stays compact (36px) but tap target is 44px via padding */
  min-height: 44px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-sheet__back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.mobile-bottom-sheet__back-btn:active {
  background: var(--color-bg-tertiary);
  transform: scale(0.96);
}

.mobile-bottom-sheet__back-arrow {
  font-size: var(--font-size-lg);
  line-height: 1;
}

.mobile-bottom-sheet__panel-title {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
 * Drag Handle
 * Visible affordance above the header to indicate bottom-sheet dismissal.
 * Tapping it (44px touch target via padding) triggers closeBottomSheet().
 * ======================================== */

.mobile-bottom-sheet__handle {
  display: block;
  /* Center the pill */
  text-align: center;
  padding: var(--space-2) 0 var(--space-1);
  cursor: pointer;
  flex-shrink: 0;
  /* The ::after pseudo creates the visual pill */
}

.mobile-bottom-sheet__handle::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 4px;
  background: var(--color-text-disabled);
  border-radius: 2px;
  opacity: 0.5;
}

/* ========================================
 * Panel Content
 * Scrollable area for the panel content
 * ======================================== */

.mobile-bottom-sheet__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Ensure panels inside the overlay fill it properly */
.mobile-bottom-sheet__content .grid-panel,
.mobile-bottom-sheet__content .split-panel {
  display: flex;
  flex: 1;
  opacity: 1;
  transform: none;
  min-height: 100%;
}

/* Injected content from inline panel pop-out */
.mobile-bottom-sheet__injected {
  padding: var(--spacing-md);
  min-height: 100%;
}

/* Hide panel headers inside overlay (the back header is enough) */
.mobile-bottom-sheet__content .grid-panel__header,
.mobile-bottom-sheet__content .split-panel__header {
  display: none;
}

/* ========================================
 * Only display on mobile phones (≤768px)
 * Tablet/desktop use the full split-panel layout and do not need bottom sheets.
 * ======================================== */

@media (max-width: 768px) {
  .mobile-bottom-sheet {
    display: flex;
  }

  /* Backdrop: always present in DOM for transition continuity but MUST NOT
     block touch events when closed. Without pointer-events:none, the invisible
     backdrop (opacity:0, position:fixed, inset:0) intercepts ALL taps (#1268). */
  .mobile-bottom-sheet-backdrop {
    display: block;
    pointer-events: none;
  }

  .mobile-bottom-sheet-backdrop.open {
    pointer-events: auto;
  }
}

@media (min-width: 769px) {
  .mobile-bottom-sheet,
  .mobile-bottom-sheet-backdrop {
    display: none !important;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-sheet {
    transition: none;
  }

  .mobile-bottom-sheet-backdrop {
    transition: none;
  }
}
/**
 * Hamburger Menu - Mobile Escape Hatches
 * =======================================
 * Slide-out navigation menu for mobile users providing quick access
 * to Settings, Help, Profile, Tech Support, and Return to Lobby.
 *
 * Hidden on desktop (>=768px). Slides in from the right edge.
 */

/* ========================================
 * Hamburger Trigger Button
 * ======================================== */

.hamburger-menu__trigger {
  display: none;
  position: fixed;
  top: var(--space-2);
  right: var(--space-2);
  right: calc(var(--space-2) + env(safe-area-inset-right, 0px));
  z-index: calc(var(--z-modal) + 10);
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.hamburger-menu__trigger:hover,
.hamburger-menu__trigger:active {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

.hamburger-menu__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.hamburger-menu__trigger[aria-expanded="true"] {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Backdrop Overlay
 * ======================================== */

.hamburger-menu__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  /* #2089: Explicit fallback ensures full-screen dark backdrop even if
     --overlay-heavy token is missing or unresolved. */
  background: var(--overlay-heavy, rgba(0, 0, 0, 0.6));
  z-index: calc(var(--z-modal) + 11);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal, 0.2s) ease;
  -webkit-tap-highlight-color: transparent;
  /* Backdrop blur adds depth separation between menu and content */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.hamburger-menu__backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* ========================================
 * Slide-out Panel
 * ======================================== */

.hamburger-menu__panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  z-index: calc(var(--z-modal) + 12);
  background: var(--color-bg-primary);
  border-left: 1px solid var(--color-border-default);
  transform: translateX(100%);
  transition: transform var(--duration-normal) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: env(safe-area-inset-right, 0px);
  flex-direction: column;
}

.hamburger-menu__panel--open {
  transform: translateX(0);
}

/* ========================================
 * Panel Header
 * ======================================== */

.hamburger-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-4);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--color-border-subtle);
}

.hamburger-menu__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.hamburger-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: color var(--transition-fast),
              background var(--transition-fast);
}

.hamburger-menu__close:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover);
}

.hamburger-menu__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========================================
 * Menu Items
 * ======================================== */

.hamburger-menu__items {
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
}

.hamburger-menu__item {
  margin: 0;
  padding: 0;
}

.hamburger-menu__item-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast),
              color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.hamburger-menu__item-btn:hover,
.hamburger-menu__item-btn:active {
  background: var(--color-bg-hover);
}

.hamburger-menu__item-btn:focus-visible {
  outline: none;
  box-shadow: inset var(--focus-ring);
}

.hamburger-menu__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.hamburger-menu__item-icon svg {
  width: 18px;
  height: 18px;
}

.hamburger-menu__item-label {
  flex: 1;
  min-width: 0;
}

/* Separator between groups */
.hamburger-menu__separator {
  height: 1px;
  background: var(--color-border-subtle);
  margin: var(--space-2) var(--space-4);
}

/* Danger/exit items (Return to Lobby) */
.hamburger-menu__item-btn--danger {
  color: var(--color-accent-warning);
}

.hamburger-menu__item-btn--danger .hamburger-menu__item-icon {
  color: var(--color-accent-warning);
}

/* Warning items (Restart Character Creation) */
.hamburger-menu__item-btn--warning {
  color: var(--color-accent-gold, #f0a500);
}

.hamburger-menu__item-btn--warning .hamburger-menu__item-icon {
  color: var(--color-accent-gold, #f0a500);
}

/* Room-conditional items: hidden by default, JS reveals when in matching room */
[data-room-visible] {
  display: none;
}

[data-room-visible].hamburger-menu__item--visible {
  display: list-item;
}

/* ========================================
 * Mobile-only Visibility
 * ======================================== */

@media (max-width: 767px) {
  .hamburger-menu__trigger {
    display: flex;
  }

  .hamburger-menu__backdrop {
    display: block;
  }

  .hamburger-menu__panel {
    display: flex;
  }
}

/* Desktop: ensure everything stays hidden */
@media (min-width: 768px) {
  .hamburger-menu__trigger,
  .hamburger-menu__backdrop,
  .hamburger-menu__panel {
    display: none;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hamburger-menu__panel {
    transition: none;
  }

  .hamburger-menu__backdrop {
    transition: none;
  }

  .hamburger-menu__trigger {
    transition: none;
  }

  .hamburger-menu__item-btn {
    transition: none;
  }
}
/* ========================================
 * Entity Action Menu
 * ========================================
 * Contextual action popup for clickable entities in narrative.
 * Shows when clicking wiki-links (NPCs, locations, items, etc.)
 */

.entity-action-menu {
  position: fixed;
  z-index: var(--z-sky);
  min-width: 180px;
  max-width: 280px;
  background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 6px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 215, 0, 0.1);
  overflow: hidden;
  animation: entityMenuFadeIn 0.15s ease-out;
}

@keyframes entityMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header with entity name */
.entity-action-menu__header {
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
  color: #ffd700;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-base);
  font-weight: 600;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Divider between action groups */
.entity-action-menu__divider {
  height: 1px;
  margin: 4px 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Action button */
.entity-action-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: #e0e0e0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-base);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.entity-action-menu__item:hover {
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
}

.entity-action-menu__item:active {
  background: rgba(255, 215, 0, 0.2);
  transform: scale(0.98);
}

/* Icon in action item */
.entity-action-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  font-size: var(--font-size-md);
}

/* Type-specific styling for attack action */
.entity-action-menu__item[data-action="attack"] {
  color: #f87171;
}

.entity-action-menu__item[data-action="attack"]:hover {
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

/* Type-specific styling for skill checks */
.entity-action-menu__item[data-action="skill_check"] {
  color: #fcd34d;
  background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
}

.entity-action-menu__item[data-action="skill_check"]:hover {
  background: rgba(255, 215, 0, 0.15);
  color: #ffd700;
}

/* View details action (secondary) */
.entity-action-menu__item[data-action="inspect"] {
  color: #9ca3af;
  font-size: var(--font-size-sm);
}

.entity-action-menu__item[data-action="inspect"]:hover {
  color: #d1d5db;
  background: rgba(255, 255, 255, 0.05);
}

/* Keyboard shortcut hint (right-aligned) */
.entity-action-menu__shortcut {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  padding: 1px 4px;
  border: 1px solid color-mix(in srgb, var(--color-text-disabled) 30%, transparent);
  border-radius: 3px;
  line-height: 1.4;
}

/* Focus state for keyboard navigation */
.entity-action-menu__item:focus-visible {
  background: rgba(255, 215, 0, 0.1);
  color: #ffd700;
  outline: 1px solid rgba(255, 215, 0, 0.4);
  outline-offset: -1px;
}

/* Submenu indicator arrow */
.entity-action-menu__item--has-submenu::after {
  content: '\u25B8';
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
}

.entity-action-menu__item--has-submenu:hover::after {
  color: var(--color-accent-warning);
}

/* Disabled action */
.entity-action-menu__item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
 * Drag & Drop Visual Feedback
 * ======================================== */

/* Drop zone highlight when dragging over valid targets */
.dnd-drop-zone {
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.dnd-drop-zone--active {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
  border-color: var(--color-accent-primary);
}

.dnd-drop-zone--valid {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-accent-secondary) 60%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--color-accent-secondary) 15%, transparent);
}

.dnd-drop-zone--invalid {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
}

/* Ghost element for dragged items */
.dnd-drag-ghost {
  opacity: 0.85;
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: var(--z-ceiling);
}

/* Source element while being dragged */
.dnd-dragging-source {
  opacity: 0.3;
}

/* Mobile adjustments - WCAG 44px touch targets */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .entity-action-menu {
    min-width: 220px;
    max-width: calc(100vw - 32px);
  }

  .entity-action-menu__header {
    padding: 14px 16px;
  }

  .entity-action-menu__item {
    min-height: 44px;
    padding: 12px 16px;
    font-size: var(--font-size-md);
  }

  .entity-action-menu__icon {
    width: 24px;
    font-size: var(--font-size-lg);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .entity-action-menu {
    animation: none;
  }
}
/*
 * Name Selection Component
 * ========================
 * Inline name selection during character creation.
 * Features: suggestion cards, custom input, refresh button.
 */

.name-selection-inline {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin: var(--space-md) 0;
  max-width: 600px;
}

.name-selection__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.name-selection__title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
}

.name-selection__suggest-btn {
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: var(--space-xs) var(--space-sm);
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.name-selection__suggest-btn:hover:not(:disabled) {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
}

.name-selection__suggest-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.name-selection__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Responsive: 2 columns on smaller screens */
@media (max-width: 500px) {
  .name-selection__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.name-selection__card {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.name-selection__card:hover:not(:disabled) {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  transform: translateY(-1px);
}

.name-selection__card--selected {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-inverse);
}

.name-selection__card--selected:hover:not(:disabled) {
  background: var(--color-accent-primary);
  transform: translateY(-1px);
}

.name-selection__card:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.name-selection__input-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.name-selection__input {
  flex: 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.name-selection__input::placeholder {
  color: var(--color-text-muted);
}

.name-selection__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.name-selection__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.name-selection__confirm-btn {
  background: var(--color-accent-secondary);
  border: none;
  border-radius: 4px;
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.name-selection__confirm-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.name-selection__confirm-btn:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Confirmed state - subtle visual feedback */
.name-selection--confirmed {
  opacity: 0.7;
  pointer-events: none;
}

.name-selection--confirmed .name-selection__confirm-btn {
  background: var(--color-accent-secondary);
  color: var(--color-text-inverse);
}

/*
 * Name Custom Input Row
 * =====================
 * Appears below masonry name cards in the new unified selection flow.
 * Provides custom name input and "suggest new" functionality.
 */

.name-custom-input-row {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: var(--space-md);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 800px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.name-custom-input-row__label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.name-custom-input-row__input-group {
  flex: 1;
  min-width: 250px;
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.name-custom-input-row__input {
  flex: 1;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.name-custom-input-row__input::placeholder {
  color: var(--color-text-muted);
}

.name-custom-input-row__input:focus {
  outline: none;
  border-color: var(--color-accent-primary);
}

.name-custom-input-row__input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.name-custom-input-row__confirm-btn {
  background: var(--color-accent-secondary);
  border: none;
  border-radius: 4px;
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}

.name-custom-input-row__confirm-btn:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.name-custom-input-row__confirm-btn:disabled {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

/* Confirmed state */
.name-custom-input-row--confirmed {
  opacity: 0.7;
  pointer-events: none;
}
/* Novel Discovery Notification Styles
 * Used for emergent achievement notifications (James Bond quip system)
 */

.novel-discovery {
  --discovery-color: var(--color-text-muted);
  --discovery-border: var(--color-border);
  --discovery-bg: var(--color-surface-elevated);

  background: var(--discovery-bg);
  border: 1px solid var(--discovery-border);
  border-left: 3px solid var(--discovery-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin: var(--spacing-sm) 0;
  animation: discovery-appear 0.5s ease-out;
}

@keyframes discovery-appear {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Rarity variants */
.novel-discovery--mythic {
  --discovery-color: #ff4081;
  --discovery-border: rgba(255, 64, 129, 0.5);
  --discovery-bg: rgba(255, 64, 129, 0.08);
  animation: discovery-appear 0.5s ease-out, mythic-shimmer 3s ease-in-out infinite;
}

.novel-discovery--legendary {
  --discovery-color: #ffd700;
  --discovery-border: rgba(255, 215, 0, 0.5);
  --discovery-bg: rgba(255, 215, 0, 0.08);
}

.novel-discovery--epic {
  --discovery-color: #9c27b0;
  --discovery-border: rgba(156, 39, 176, 0.5);
  --discovery-bg: rgba(156, 39, 176, 0.08);
}

.novel-discovery--rare {
  --discovery-color: #2196f3;
  --discovery-border: rgba(33, 150, 243, 0.5);
  --discovery-bg: rgba(33, 150, 243, 0.08);
}

.novel-discovery--common {
  --discovery-color: #4caf50;
  --discovery-border: rgba(76, 175, 80, 0.3);
  --discovery-bg: rgba(76, 175, 80, 0.05);
}

.novel-discovery--trivial {
  --discovery-color: var(--color-text-muted);
  --discovery-border: var(--color-border);
  --discovery-bg: var(--color-surface);
}

@keyframes mythic-shimmer {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 64, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 64, 129, 0.5);
  }
}

.novel-discovery__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.novel-discovery__icon {
  color: var(--discovery-color);
  font-size: var(--font-size-md);
}

.novel-discovery__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.novel-discovery__first-badge {
  background: var(--discovery-color);
  color: var(--color-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: auto;
}

.novel-discovery__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--discovery-color);
  margin-bottom: var(--spacing-xs);
}

.novel-discovery__description {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.novel-discovery__quip {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  padding: var(--spacing-sm);
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-sm);
}

.novel-discovery__character {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
}

/* Pack reveal styles (for next-login card animation) */
.novel-discovery-pack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
}

.novel-discovery-pack__header {
  text-align: center;
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
}

.novel-discovery-pack__count {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.novel-discovery-pack__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md);
}
/* ==========================================================================
 * Equipment Comparison Tooltip
 * Shows stat deltas when comparing equipment items
 * ========================================================================== */

.equipment-comparison {
  position: fixed;
  z-index: var(--z-sky);
  min-width: 240px;
  max-width: 320px;
  background: var(--color-bg-elevated, #2a2a4a);
  border: 1px solid var(--color-border-default, #3a3a5a);
  border-radius: var(--radius-lg, 8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  padding: var(--space-3, 12px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-fast, 0.15s) ease-out, transform var(--transition-fast, 0.15s) ease-out;
  pointer-events: auto;
}

.equipment-comparison--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header */
.equipment-comparison__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
}

.equipment-comparison__header--new {
  justify-content: space-between;
}

.equipment-comparison__item-name {
  font-weight: var(--font-weight-semibold, 600);
  color: var(--accent-primary, #6366f1);
  font-size: var(--font-size-base, 14px);
}

.equipment-comparison__vs {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

.equipment-comparison__equipped-name {
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary, #a0a0c0);
  font-size: var(--font-size-base, 14px);
}

.equipment-comparison__new-label {
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
}

/* Stats Grid */
.equipment-comparison__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.equipment-comparison__stat {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-3, 12px);
  font-size: var(--font-size-sm, 12px);
}

.equipment-comparison__stat-label {
  color: var(--color-text-muted, #888);
}

.equipment-comparison__stat-value {
  color: var(--color-text-primary, #e0e0e0);
  font-weight: var(--font-weight-medium, 500);
  text-align: right;
  min-width: 60px;
}

/* Delta Indicator */
.equipment-comparison__delta {
  min-width: 50px;
  text-align: right;
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.equipment-comparison__delta--positive {
  color: var(--accent-success, #4ade80);
}

.equipment-comparison__delta--positive::before {
  content: "↑ ";
}

.equipment-comparison__delta--negative {
  color: var(--accent-danger, #ef4444);
}

.equipment-comparison__delta--negative::before {
  content: "↓ ";
}

/* Verdict */
.equipment-comparison__verdict {
  margin-top: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  text-align: center;
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-md, 6px);
}

.equipment-comparison__verdict--better {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.equipment-comparison__verdict--worse {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.equipment-comparison__verdict--neutral {
  background: rgba(99, 102, 241, 0.15);
  color: var(--accent-primary, #6366f1);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

/* ==========================================================================
 * Equipment Comparison Panel (in-panel mode)
 * Grid panel variant for side-by-side comparison in inventory/loot flows
 * ========================================================================== */

.equipment-comparison-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.equipment-comparison-panel__header {
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
}

.equipment-comparison-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin: 0;
  font-size: var(--font-size-base, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e0e0e0);
}

.equipment-comparison-panel__title .svg-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-primary, #6366f1);
}

.equipment-comparison-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3, 12px);
}

.equipment-comparison-panel__columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}

.equipment-comparison-panel__column {
  min-width: 0;
}

.equipment-comparison-panel__divider {
  display: flex;
  align-items: center;
  padding: 0 var(--space-1, 4px);
}

.equipment-comparison-panel__vs {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

.equipment-comparison-panel__stats {
  margin-bottom: var(--space-3, 12px);
}

.equipment-comparison-panel__actions {
  display: flex;
  gap: var(--space-2, 8px);
  padding-top: var(--space-3, 12px);
  border-top: 1px solid var(--color-border-default, #3a3a5a);
}

/* Panel modal closing animation */
.equipment-comparison-modal--closing {
  opacity: 0;
  transition: opacity var(--transition-fast, 0.15s) ease-out;
}

/* Item column styling (shared between tooltip and panel) */
.equipment-comparison__item-column {
  padding: var(--space-2, 8px);
  border-radius: var(--radius-md, 6px);
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.03));
}

.equipment-comparison__item-column--equipped {
  border-left: 2px solid var(--accent-primary, #6366f1);
}

.equipment-comparison__item-header {
  margin-bottom: var(--space-2, 8px);
}

.equipment-comparison__equipped-badge {
  display: inline-block;
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  margin-top: var(--space-1, 4px);
}

.equipment-comparison__item-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.equipment-comparison__meta-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm, 12px);
}

.equipment-comparison__meta-label {
  color: var(--color-text-muted, #888);
}

.equipment-comparison__meta-value {
  color: var(--color-text-secondary, #a0a0c0);
}

.equipment-comparison__empty {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
}

/* Properties tags */
.equipment-comparison__properties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-top: var(--space-2, 8px);
}

.equipment-comparison__property {
  font-size: var(--font-size-xs, 10px);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.05));
  color: var(--color-text-secondary, #a0a0c0);
}

.equipment-comparison__property--magic {
  color: var(--accent-info, #60a5fa);
  background: rgba(96, 165, 250, 0.1);
}

.equipment-comparison__property--cursed {
  color: var(--accent-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.equipment-comparison__property--attuned {
  color: var(--accent-primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
}

.equipment-comparison__property--attunement {
  color: var(--accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
}

.equipment-comparison__property--charges {
  color: var(--accent-success, #4ade80);
  background: rgba(74, 222, 128, 0.1);
}

/* Stat grid for panel mode */
.equipment-comparison__stat-header {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-2, 8px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--color-border-default, #3a3a5a);
  font-size: var(--font-size-xs, 10px);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-muted, #888);
}

.equipment-comparison__stat-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
  font-size: var(--font-size-sm, 12px);
  align-items: center;
}

.equipment-comparison__stat-row:nth-child(even) {
  background: var(--color-bg-subtle, rgba(255, 255, 255, 0.02));
  border-radius: var(--radius-sm, 4px);
  padding-left: var(--space-1, 4px);
  padding-right: var(--space-1, 4px);
}

.equipment-comparison__no-stats {
  text-align: center;
  padding: var(--space-4, 16px);
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 12px);
}

/* Rarity color coding */
.equipment-comparison__rarity--common { color: var(--color-text-secondary, #a0a0c0); }
.equipment-comparison__rarity--uncommon { color: var(--accent-success, #4ade80); }
.equipment-comparison__rarity--rare { color: var(--accent-info, #60a5fa); }
.equipment-comparison__rarity--very_rare { color: var(--accent-primary, #6366f1); }
.equipment-comparison__rarity--legendary { color: var(--accent-warning, #f59e0b); }
.equipment-comparison__rarity--artifact { color: var(--accent-danger, #ef4444); }

/* Mobile adjustments */
@media (max-width: 640px) {
  .equipment-comparison {
    max-width: calc(100vw - 32px);
    min-width: 200px;
  }

  .equipment-comparison-panel__columns {
    grid-template-columns: 1fr;
  }

  .equipment-comparison-panel__divider {
    justify-content: center;
    padding: var(--space-1, 4px) 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .equipment-comparison {
    transition: opacity 0.1s ease;
    transform: none;
  }
}
/* Equipment Sets Component */
/* Quick-swap equipment loadouts for characters */
/* Class prefix: equipment-set__ (hyphen, not underscore) to match Stimulus controller */

.equipment-set {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.equipment-set__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.equipment-set__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.equipment-set__title svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

/* List Container */
.equipment-set__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: var(--spacing-sm);
  min-height: 40px;
}

/* Loading State (rendered by JS) */
.equipment-set__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.equipment-set__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: equipment-set-spin 0.8s linear infinite;
}

@keyframes equipment-set-spin {
  to { transform: rotate(360deg); }
}

/* Empty State (rendered by JS) */
.equipment-set__empty {
  text-align: center;
  padding: var(--spacing-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.equipment-set__empty p {
  margin: 0;
}

/* Individual Set Item (rendered by JS) */
.equipment-set__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equipment-set__item:hover {
  background: var(--color-surface-elevated);
  border-color: var(--color-primary-muted, var(--color-border));
}

.equipment-set__item--active {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 10%, var(--color-input-bg));
}

/* Activate Button */
.equipment-set__activate-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
  min-width: 0;
}

.equipment-set__activate-btn:hover:not(:disabled) {
  color: var(--color-primary);
}

.equipment-set__activate-btn:disabled {
  cursor: default;
}

.equipment-set__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.equipment-set__icon svg {
  width: 14px;
  height: 14px;
}

.equipment-set__item--active .equipment-set__icon {
  color: var(--color-success);
}

.equipment-set__name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.equipment-set__count {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Delete Button */
.equipment-set__delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.equipment-set__item:hover .equipment-set__delete-btn {
  opacity: 1;
}

.equipment-set__delete-btn:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: var(--color-on-error, #fff);
}

.equipment-set__delete-btn svg {
  width: 12px;
  height: 12px;
}

/* Create New Set */
.equipment-set__create {
  display: flex;
  gap: var(--spacing-xs);
}

.equipment-set__name-input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-input-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  min-width: 0;
}

.equipment-set__name-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.equipment-set__name-input::placeholder {
  color: var(--color-text-muted);
}

.equipment-set__create-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-success);
  color: var(--color-on-success, #fff);
  border: none;
  border-radius: var(--border-radius-sm);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.equipment-set__create-btn:hover {
  filter: brightness(1.1);
}

.equipment-set__create-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.equipment-set__create-btn svg {
  width: 12px;
  height: 12px;
}

/* Responsive */
@media (max-width: 400px) {
  .equipment-set__create {
    flex-direction: column;
  }

  .equipment-set__create-btn {
    justify-content: center;
  }
}
/**
 * Rich Tooltip — Base Styles
 * ============================
 * Trigger element, tooltip base, header, and content sections.
 */

/**
 * Rich Tooltip Styles
 * ===================
 * Unified tooltip system for displaying rich contextual information.
 * Supports: terms, abilities, skills, items, spells, conditions, features.
 */

/* ========================================
 * TRIGGER ELEMENT
 * ======================================== */

.rich-tooltip-trigger {
  position: relative;
  border-bottom: 1px dotted var(--color-accent-primary, #5a9fd8);
  color: inherit;
  cursor: help;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.rich-tooltip-trigger:hover,
.rich-tooltip-trigger:focus {
  border-bottom-style: solid;
  color: var(--color-accent-primary, #5a9fd8);
  outline: none;
}

.rich-tooltip-trigger:focus-visible {
  outline: 2px solid var(--focus-ring-color, #ffd700);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Touch devices: tap highlight */
@media (hover: none) {
  .rich-tooltip-trigger {
    border-bottom-style: solid;
    border-bottom-width: 2px;
  }
}

/* ========================================
 * TOOLTIP BASE
 * ======================================== */

.rich-tooltip {
  position: fixed;
  z-index: var(--z-sky-above);
  min-width: 240px;
  max-width: 360px;
  padding: var(--space-3, 12px);
  background: var(--terminal-bg-elevated, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--elevation-floating);
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.5;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  pointer-events: auto;
}

.rich-tooltip--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Position modifiers */
.rich-tooltip--above {
  transform: translateY(-4px);
}

.rich-tooltip--above.rich-tooltip--visible {
  transform: translateY(0);
}

.rich-tooltip--left {
  transform: translateX(-4px);
}

.rich-tooltip--left.rich-tooltip--visible {
  transform: translateX(0);
}

.rich-tooltip--right {
  transform: translateX(4px);
}

.rich-tooltip--right.rich-tooltip--visible {
  transform: translateX(0);
}

/* ========================================
 * TOOLTIP HEADER
 * ======================================== */

.rich-tooltip__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding-bottom: var(--space-2, 8px);
  border-bottom: 1px solid var(--terminal-border, #333);
}

.rich-tooltip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-accent-primary-alpha, rgba(90, 159, 216, 0.15));
  border: 1px solid var(--color-accent-primary, #5a9fd8);
  border-radius: var(--radius-md, 6px);
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-accent-primary, #5a9fd8);
}

.rich-tooltip__title {
  flex: 1;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-accent-primary, #5a9fd8);
  font-size: var(--font-size-base, 1rem);
}

.rich-tooltip__subtitle {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--terminal-text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========================================
 * TOOLTIP CONTENT
 * ======================================== */

.rich-tooltip__description {
  margin: 0 0 var(--space-3, 12px) 0;
  color: var(--terminal-text-primary, #e0e0e0);
}

/* Stats grid */
.rich-tooltip__stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__stat {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2, 8px);
}

.rich-tooltip__stat-label {
  color: var(--terminal-text-muted, #888);
  font-size: var(--font-size-xs, 0.75rem);
  flex-shrink: 0;
}

.rich-tooltip__stat-value {
  color: var(--terminal-text-primary, #e0e0e0);
  font-weight: var(--font-weight-medium, 500);
  text-align: right;
  font-size: var(--font-size-sm, 0.875rem);
}

.rich-tooltip__stat-value--positive {
  color: var(--accent-success, #4ade80);
}

.rich-tooltip__stat-value--negative {
  color: var(--accent-danger, #ef4444);
}

/* Effects list */
.rich-tooltip__effects {
  margin: 0 0 var(--space-3, 12px) 0;
  padding: 0;
  list-style: none;
}

.rich-tooltip__effect {
  position: relative;
  padding-left: var(--space-3, 12px);
  margin-bottom: var(--space-1, 4px);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--terminal-text-secondary, #999);
}

.rich-tooltip__effect::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terminal-text-muted, #888);
}

/* Effect types */
.rich-tooltip__effect--positive::before {
  background: var(--accent-success, #4ade80);
}

.rich-tooltip__effect--negative::before {
  background: var(--accent-danger, #ef4444);
}

.rich-tooltip__effect--neutral::before {
  background: var(--accent-warning, #facc15);
}

.rich-tooltip__effect--combat::before {
  background: var(--accent-danger, #ef4444);
}

.rich-tooltip__effect--defense::before {
  background: var(--accent-info, #38bdf8);
}

.rich-tooltip__effect--magic::before {
  background: var(--accent-magic, #a855f7);
}

.rich-tooltip__effect--utility::before,
.rich-tooltip__effect--exploration::before,
.rich-tooltip__effect--social::before {
  background: var(--accent-success, #4ade80);
}

.rich-tooltip__effect--movement::before {
  background: var(--accent-warning, #facc15);
}

.rich-tooltip__effect--note::before {
  background: var(--terminal-text-muted, #888);
}

.rich-tooltip__effect--property::before {
  background: var(--color-accent-primary, #5a9fd8);
}

.rich-tooltip__effect--attunement::before {
  background: var(--accent-magic, #a855f7);
}

.rich-tooltip__effect--concentration::before {
  background: var(--accent-warning, #facc15);
}

.rich-tooltip__effect--ritual::before {
  background: var(--accent-info, #38bdf8);
}

.rich-tooltip__effect--knowledge::before,
.rich-tooltip__effect--downtime::before {
  background: var(--terminal-text-muted, #888);
}

.rich-tooltip__effect--healing::before {
  background: var(--accent-success, #4ade80);
}

.rich-tooltip__effect--investigation::before {
  background: var(--accent-info, #38bdf8);
}

/* Example section */
.rich-tooltip__example {
  padding: var(--space-2, 8px);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm, 4px);
  color: var(--terminal-text-secondary, #999);
  font-size: var(--font-size-xs, 0.75rem);
  font-style: italic;
  margin-bottom: var(--space-3, 12px);
}

.rich-tooltip__example-label {
  color: var(--terminal-text-muted, #888);
  font-style: normal;
  font-weight: var(--font-weight-medium, 500);
}

/* Related items */
.rich-tooltip__related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 4px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid var(--terminal-border, #333);
}

.rich-tooltip__related-label {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--terminal-text-muted, #888);
  margin-right: var(--space-1, 4px);
}

.rich-tooltip__related-item {
  padding: 2px 6px;
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  border-radius: var(--radius-full, 9999px);
  color: var(--terminal-text-secondary, #999);
  font-size: var(--font-size-xs, 0.75rem);
}
/**
 * Rich Tooltip — Badges & Comparison
 * =====================================
 * Property badges, upcast section, DM-only section, and comparison.
 */

/* ========================================
 * PROPERTY BADGES
 * ======================================== */

.rich-tooltip__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-3, 12px);
}

.rich-tooltip__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);
  background: var(--terminal-bg, #0a0a0a);
  border: 1px solid var(--terminal-border, #333);
  color: var(--terminal-text-secondary, #999);
}

/* Badge color variants for weapon properties */
.rich-tooltip__badge--finesse {
  background: rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.4);
  color: var(--accent-success, #4ade80);
}

.rich-tooltip__badge--versatile {
  background: rgba(90, 159, 216, 0.15);
  border-color: rgba(90, 159, 216, 0.4);
  color: var(--color-accent-primary, #5a9fd8);
}

.rich-tooltip__badge--heavy {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--accent-danger, #ef4444);
}

.rich-tooltip__badge--light {
  background: rgba(250, 204, 21, 0.15);
  border-color: rgba(250, 204, 21, 0.4);
  color: var(--accent-warning, #facc15);
}

.rich-tooltip__badge--twohanded {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--accent-magic, #a855f7);
}

.rich-tooltip__badge--reach {
  background: rgba(56, 189, 248, 0.15);
  border-color: rgba(56, 189, 248, 0.4);
  color: var(--accent-info, #38bdf8);
}

.rich-tooltip__badge--thrown {
  background: rgba(251, 146, 60, 0.15);
  border-color: rgba(251, 146, 60, 0.4);
  color: #fb923c;
}

.rich-tooltip__badge--loading {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
}

.rich-tooltip__badge--ammunition {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.4);
  color: #94a3b8;
}

.rich-tooltip__badge--special {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: var(--accent-magic, #a855f7);
}

.rich-tooltip__badge--silvered,
.rich-tooltip__badge--adamantine {
  background: rgba(226, 232, 240, 0.15);
  border-color: rgba(226, 232, 240, 0.4);
  color: #e2e8f0;
}

/* ========================================
 * UPCAST / AT HIGHER LEVELS SECTION
 * ======================================== */

.rich-tooltip__upcast {
  margin-bottom: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__upcast-label {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--accent-magic, #a855f7);
  margin-bottom: var(--space-1, 4px);
}

.rich-tooltip__upcast-text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--terminal-text-secondary, #999);
  line-height: 1.4;
}

/* ========================================
 * DM-ONLY SECTION (Future)
 * ======================================== */

.rich-tooltip__dm-section {
  margin-top: var(--space-3, 12px);
  padding: var(--space-2, 8px);
  background: rgba(239, 68, 68, 0.1);
  border: 1px dashed rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__dm-label {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--accent-danger, #ef4444);
  margin-bottom: var(--space-1, 4px);
}

.rich-tooltip__dm-text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--terminal-text-secondary, #999);
  line-height: 1.4;
}

/* ========================================
 * COMPARISON SECTION
 * ======================================== */

.rich-tooltip__comparison {
  margin-top: var(--space-3, 12px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--terminal-border, #333);
}

.rich-tooltip__comparison-header {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--terminal-text-muted, #888);
  text-align: center;
  margin-bottom: var(--space-2, 8px);
}

.rich-tooltip__comparison-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.rich-tooltip__comparison-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-1, 4px) 0;
}

.rich-tooltip__comparison-label {
  color: var(--terminal-text-muted, #888);
  font-size: var(--font-size-xs, 0.75rem);
}

.rich-tooltip__delta {
  font-weight: var(--font-weight-semibold, 600);
  font-variant-numeric: tabular-nums;
}

.rich-tooltip__delta--positive {
  color: var(--accent-success, #4ade80);
}

.rich-tooltip__delta--positive::before {
  content: "\2191 "; /* Up arrow */
}

.rich-tooltip__delta--negative {
  color: var(--accent-danger, #ef4444);
}

.rich-tooltip__delta--negative::before {
  content: "\2193 "; /* Down arrow */
}

/* Verdict */
.rich-tooltip__verdict {
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  text-align: center;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-md, 6px);
}

.rich-tooltip__verdict--better {
  background: rgba(74, 222, 128, 0.15);
  color: var(--accent-success, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.rich-tooltip__verdict--worse {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-danger, #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.rich-tooltip__verdict--neutral {
  background: rgba(90, 159, 216, 0.15);
  color: var(--color-accent-primary, #5a9fd8);
  border: 1px solid rgba(90, 159, 216, 0.3);
/**
 * Rich Tooltip — Type-Specific & Theme
 * =====================================
 * Type-specific styles, mobile, reduced motion, and theme variants.
 */


/* ========================================
 * TYPE-SPECIFIC STYLES
 * ======================================== */

/* Ability scores */
.rich-tooltip--ability .rich-tooltip__header {
  border-bottom-color: var(--color-accent-primary, #5a9fd8);
}

/* Skills */
.rich-tooltip--skill .rich-tooltip__stats {
  background: rgba(90, 159, 216, 0.1);
}

/* Conditions */
.rich-tooltip--condition .rich-tooltip__header {
  border-bottom-color: var(--accent-danger, #ef4444);
}

.rich-tooltip--condition .rich-tooltip__title {
  color: var(--accent-danger, #ef4444);
}

/* Spells */
.rich-tooltip--spell .rich-tooltip__header {
  border-bottom-color: var(--accent-magic, #a855f7);
}

.rich-tooltip--spell .rich-tooltip__title {
  color: var(--accent-magic, #a855f7);
}

/* Items */
.rich-tooltip--item .rich-tooltip__header {
  border-bottom-color: var(--accent-success, #4ade80);
}

/* Features */
.rich-tooltip--feature .rich-tooltip__header {
  border-bottom-color: var(--accent-warning, #facc15);
}

.rich-tooltip--feature .rich-tooltip__title {
  color: var(--accent-warning, #facc15);
}

/* ========================================
 * MOBILE & TOUCH
 * ======================================== */

@media (max-width: 640px) {
  .rich-tooltip {
    max-width: calc(100vw - 32px);
    min-width: 200px;
    font-size: var(--font-size-base, 1rem);
  }

  .rich-tooltip__stats {
    gap: var(--space-1, 4px);
  }

  .rich-tooltip__stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .rich-tooltip__stat-value {
    text-align: left;
  }
}

/* Touch devices - larger tap targets */
@media (hover: none) {
  .rich-tooltip__related-item {
    padding: 4px 10px;
    font-size: var(--font-size-sm, 0.875rem);
  }
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rich-tooltip {
    transition: opacity 0.1s ease;
    transform: none;
  }

  .rich-tooltip--visible {
    transform: none;
  }
}

/* ========================================
 * DARK/LIGHT THEME VARIANTS
 * ======================================== */

[data-theme="light"] .rich-tooltip {
  background: var(--terminal-bg-elevated, #ffffff);
  border-color: var(--terminal-border, #ddd);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .rich-tooltip__stats {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .rich-tooltip__example {
  background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .rich-tooltip__related-item {
  background: var(--terminal-bg, #f8f8f8);
}

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .rich-tooltip {
    transition: opacity 0.05s ease;
    transform: none;
  }

  .rich-tooltip--visible {
    transform: none;
  }

  .rich-tooltip--above,
  .rich-tooltip--left,
  .rich-tooltip--right {
    transform: none;
  }

  .rich-tooltip--above.rich-tooltip--visible,
  .rich-tooltip--left.rich-tooltip--visible,
  .rich-tooltip--right.rich-tooltip--visible {
    transform: none;
  }
}
/**
 * Rich Tooltip Styles — Import Hub
 * ===================================
 * Rich tooltips with property badges and theme variants.
 *
 * Decomposed into focused files under rich_tooltip/ for maintainability.



 */
/**
 * Ability Hexagon Component
 * ==========================
 * Hexagonal radar chart visualization for D&D 5e ability scores.
 * Provides an alternative view to the traditional grid layout.
 */

/* ========================================
 * View Container
 * ======================================== */

/* ========================================
 * Container
 * ======================================== */

.ability-hexagon {
  width: 100%;
  max-width: 320px; /* Increased from 260px — gives the hex display more room to breathe */
  margin: 0 auto;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

.ability-hexagon__svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ========================================
 * Grid Lines & Axes
 * ======================================== */

.ability-hexagon__grid-line {
  transition: opacity 0.2s ease;
}

.ability-hexagon__grid-line:hover {
  opacity: 0.5;
}

.ability-hexagon__axis {
  pointer-events: none;
}

/* ========================================
 * Character Data Area
 * ======================================== */

.ability-hexagon__character-area {
  transition: fill-opacity 0.2s ease, stroke-width 0.2s ease;
}

.ability-hexagon:hover .ability-hexagon__character-area {
  fill-opacity: 0.3;
  stroke-width: 3;
}

/* ========================================
 * Vertices (Ability Score Points)
 * ======================================== */

.ability-hexagon__vertex {
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

.ability-hexagon__vertex:hover {
  r: 8;
  fill: var(--color-accent-warning);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--color-accent-warning));
}

.ability-hexagon__vertex:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  r: 8;
}

.ability-hexagon__vertex:active {
  r: 7;
  fill: var(--color-accent-primary);
}

/* ========================================
 * Labels
 * ======================================== */

.ability-hexagon__label-group {
  pointer-events: none;
  user-select: none;
}

/* Typographic hierarchy: small dim uppercase abbr, large bold bright score, smaller accent mod (#4132) */
.ability-hexagon__label-abbr {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  fill: var(--color-text-muted);
  opacity: 0.85;
}

.ability-hexagon__label-score {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  fill: var(--color-text-primary);
}

.ability-hexagon__label-mod {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--font-weight-semibold);
  fill: var(--color-accent-secondary);
  letter-spacing: 0.02em;
}

/* ========================================
 * Responsive Sizing
 * ======================================== */

@media (max-width: 768px) {
  .ability-hexagon {
    /* Keep max-width constrained on mobile - don't expand to 100% */
    max-width: 280px;
    padding: var(--space-1);
  }
}

@media (max-width: 480px) {
  .ability-hexagon {
    max-width: 240px;
  }

  .ability-hexagon__label-abbr {
    font-size: 8px;
  }

  .ability-hexagon__label-score {
    font-size: 10px;
  }

  .ability-hexagon__label-mod {
    font-size: 8px;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ability-hexagon__character-area,
  .ability-hexagon__vertex {
    transition: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .ability-hexagon {
    border: 2px solid var(--color-accent-primary);
  }

  .ability-hexagon__grid-line {
    stroke-width: 2;
    opacity: 0.5;
  }

  .ability-hexagon__character-area {
    fill-opacity: 0.4;
    stroke-width: 3;
  }

  .ability-hexagon__vertex {
    stroke-width: 3;
  }
}

/* ========================================
 * Dark Mode Enhancements
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .ability-hexagon__character-area {
    fill-opacity: 0.25;
  }

  .ability-hexagon__vertex {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .ability-hexagon {
    break-inside: avoid;
    border: 1px solid #000;
    background: #fff;
  }

  .ability-hexagon__character-area {
    fill: #ccc;
    fill-opacity: 0.3;
    stroke: #000;
    stroke-width: 2;
  }

  .ability-hexagon__grid-line {
    stroke: #666;
  }

  .ability-hexagon__vertex {
    fill: #000;
    stroke: #fff;
  }

  .ability-hexagon__label-abbr,
  .ability-hexagon__label-score,
  .ability-hexagon__label-mod {
    fill: #000;
  }
}
/**
 * Active Quest Widget — Base and Objectives
 * ============================================
 * Widget layout, header, progress, objectives list, and milestone badges.
 */

/**
 * Active Quest Widget
 * ===================
 * Right sidebar widget showing active quest objectives with collapsible details.
 * Uses Phase 1 design tokens from: terminal/_tokens.css
 *
 * Features:
 * - Compact by default, expandable for details
 * - Max 3 objectives with progress indicators
 * - Mark objectives complete button
 * - Clear visual hierarchy (quest → objectives → progress)
 * - Mobile responsive
 * - WCAG AA compliant
 *
 * Target Metrics:
 * - Quest objective awareness: +60%
 * - Quest completion rate: +25%
 * - Navigation to quest log: -40%
 */

/* ========================================
 * Base Layout
 * ======================================== */

.active-quest-widget {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-padding);
  background: var(--color-bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
}

/* ========================================
 * Header
 * ======================================== */

.active-quest-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.active-quest-widget__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.active-quest-widget__icon {
  font-size: var(--font-size-base);
  color: var(--color-entity-quest);
}

.active-quest-widget__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-size: var(--font-size-xs);
}

.active-quest-widget__action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.active-quest-widget__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ========================================
 * Quest Title Section
 * ======================================== */

.active-quest__quest-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-entity-quest);
  margin: 0;
  line-height: var(--line-height-tight);
}

/* ========================================
 * Progress Bar
 * ======================================== */

.active-quest__progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.active-quest__progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.active-quest__progress-text {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.active-quest__progress-bar-container {
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.active-quest__progress-bar {
  height: 100%;
  background: var(--color-entity-quest);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
  min-width: 2px;
}

/* ========================================
 * Objectives List
 * ======================================== */

.active-quest__objectives {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.active-quest__objective {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
}

.active-quest__objective-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 4px;
  border: 2px solid var(--color-border-default);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
  color: transparent;
}

.active-quest__objective-check:hover:not(:disabled) {
  border-color: var(--color-entity-quest);
  background: var(--color-entity-quest-bg);
}

.active-quest__objective-check:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.active-quest__objective-check:disabled {
  cursor: not-allowed;
  opacity: 1;
}

.active-quest__objective--completed .active-quest__objective-check {
  background: var(--color-entity-quest);
  border-color: var(--color-entity-quest);
  color: var(--color-bg-primary);
}

.active-quest__objective-text {
  flex: 1;
  word-wrap: break-word;
}

.active-quest__objective--completed .active-quest__objective-text {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.active-quest__objective-progress {
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Animation for newly completed objectives */
.active-quest__objective--just-completed {
  animation: objective-complete 0.4s ease-out;
}

@keyframes objective-complete {
  0% { background: transparent; }
  50% { background: var(--color-entity-quest-bg); }
  100% { background: transparent; }
}

/* ========================================
 * Collapsible Details
 * ======================================== */

.active-quest__details-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.active-quest__details-toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.active-quest__details-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.active-quest__expand-icon {
  transition: transform var(--transition-fast);
  font-size: var(--font-size-xs);
}

.active-quest__details--expanded .active-quest__expand-icon {
  transform: rotate(180deg);
}

.active-quest__details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--transition-normal),
              opacity var(--transition-normal);
}

.active-quest__details--expanded {
  max-height: 500px;
  opacity: 1;
  margin-top: var(--space-2);
}

.active-quest__details-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
}

/**
 * Active Quest Widget — Detail Sections and Actions
 * ===================================================
 * Detail sections, lore snippets, difficulty indicators, and action buttons.
 */

/* ========================================
 * Detail Sections
 * ======================================== */

.active-quest__detail-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.active-quest__detail-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.active-quest__detail-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

/* ========================================
 * Rewards
 * ======================================== */

.active-quest__rewards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.active-quest__reward {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.active-quest__reward--gold {
  color: var(--color-gold);
}

.active-quest__reward--gold::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, var(--color-gold) 0%, #b8860b 100%);
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.active-quest__reward--xp {
  color: var(--color-accent-primary);
}

.active-quest__reward--xp::before {
  content: '★';
  font-size: 0.9em;
}

.active-quest__reward--item {
  color: var(--color-accent-warning);
}

.active-quest__reward--item::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

/* ========================================
 * Footer Actions
 * ======================================== */

.active-quest__footer {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}

.active-quest__view-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.active-quest__view-all:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.active-quest__view-all:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/**
 * Active Quest Widget — Empty State and Responsive
 * ==================================================
 * Empty state, loading state, and responsive breakpoints.
 */

/* ========================================
 * Empty State
 * ======================================== */

.active-quest__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.active-quest__empty-icon {
  font-size: var(--font-size-3xl);
  color: var(--color-text-muted);
  opacity: 0.5;
}

.active-quest__empty-message {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.active-quest__empty-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}

/* ========================================
 * Loading Skeleton
 * ======================================== */

.active-quest__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--panel-padding);
}

.active-quest__skeleton-line {
  height: 12px;
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary) 0%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-tertiary) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: skeleton-shimmer 1.5s infinite;
}

.active-quest__skeleton-line--title {
  height: 16px;
  width: 70%;
}

.active-quest__skeleton-line--short {
  width: 80%;
}

.active-quest__skeleton-line--medium {
  width: 90%;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .active-quest-widget {
    padding: var(--space-3);
  }

  .active-quest__objective {
    font-size: var(--font-size-sm);
  }

  .active-quest__details-content {
    padding: var(--space-2);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .active-quest__progress-bar {
    transition: none;
  }

  .active-quest__expand-icon {
    transition: none;
  }

  .active-quest__details {
    transition: none;
  }

  .active-quest__objective--just-completed {
    animation: none;
  }

  .active-quest__skeleton-line {
    animation: none;
  }
}

/* ========================================
 * High Contrast Mode Support
 * ======================================== */

@media (prefers-contrast: high) {
  .active-quest__objective-check {
    border-width: 3px;
  }

  .active-quest__progress-bar-container {
    border: 1px solid currentColor;
  }

  .active-quest__details-toggle {
    border-width: 2px;
  }
}
/**
 * Active Quest Widget — Import Hub
 * ===================================
 * Inline quest tracker with objectives, progress, details, and empty states.
 *
 * Decomposed into focused files under active_quest_widget/ for maintainability.



 */
/*
 * Status Zones (#3882, extended #4267)
 * ------------------------------------
 * Group widget categories inside the status-bar centre column with subtle
 * vertical separators so the row reads as session | character | party |
 * system instead of an undifferentiated flat list. Empty zones collapse via
 * :empty so adjacent visible zones get exactly one divider, never two.
 *
 * #4267 (panel audit 6.2): same idiom applied to the right-hand toolbar
 * via .status-toolbar__zone — grouping social / views / config so a logged-in
 * player sees grouped buttons, not 7+ icons in a uniform row.
 *
 * Also hosts polish-pass follow-ups (#3882) that don't logically belong in
 * _status_bar.css: reduced-motion guards for the toolbar's decorative pulse.
 */

/* Centre-column zones (widgets + badges) */
.status-zone {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.status-zone:empty {
  display: none;
}

.status-zone + .status-zone:not(:empty) {
  padding-left: var(--space-2);
  border-left: 1px solid var(--color-border-subtle);
}

/* Right-column toolbar zones (#4267, finding 6.2).
 * Same separator pattern as .status-zone, but tighter padding to keep the
 * toolbar compact. The first zone has no leading divider; each subsequent
 * non-empty zone gets a 1px left border. */
.status-toolbar__zone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}

.status-toolbar__zone:empty {
  display: none;
}

.status-toolbar__zone + .status-toolbar__zone:not(:empty),
.status-toolbar__zone + details.status-toolbar__more:not(:empty),
.spectator-indicator + .status-toolbar__zone:not(:empty) {
  padding-left: var(--space-2);
  margin-left: var(--space-1);
  border-left: 1px solid var(--color-border-subtle);
}

/* On narrow viewports the divider can sum with the toolbar's outer padding
 * to push past the 480px right edge. Hide dividers when actions zone is
 * already shrinking to avoid horizontal overflow. Coheres with the
 * status-bar__zone--actions { overflow: hidden } rule in _status_bar.css. */
@media (max-width: 480px) {
  .status-toolbar__zone + .status-toolbar__zone,
  .status-toolbar__zone + details.status-toolbar__more,
  .spectator-indicator + .status-toolbar__zone {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}

/* Reduced-motion guard for the panels first-visit hint dot pulse
 * (decorative; no semantic loss when suppressed). */
@media (prefers-reduced-motion: reduce) {
  .panels-icon-btn--new::after {
    animation: none !important;
  }
}
/*
 * Status Toolbar — More Menu (#4267, panel audit 6.3)
 * ---------------------------------------------------
 * Overflow menu for advanced/experimental status-bar toolbar buttons
 * (3D hologram, XR terminal, focus mode). These were prominent in the
 * top-level toolbar but new players didn't know what they did; collapsed
 * here so the primary toolbar reads social | views | config.
 *
 * Built on native <details>/<summary> for keyboard accessibility:
 *   - Tab focuses the summary
 *   - Enter / Space toggles the details
 *   - Tab moves through child menu items
 *   - Tab past the last item leaves the menu (no focus trap)
 * Plus aria sync + close-on-Escape via toolbar-more Stimulus controller.
 */

.status-toolbar__more {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The summary inherits help-icon-btn sizing/colors so it sits visually in
 * the same row as the other toolbar icons. Strip the default disclosure
 * triangle the browser injects on <summary>. */
.status-toolbar__more-summary {
  list-style: none;
  cursor: pointer;
}

.status-toolbar__more-summary::-webkit-details-marker {
  display: none;
}

.status-toolbar__more-summary::marker {
  content: '';
}

/* Open-state visual: invert colors slightly to mirror the other toolbar
 * toggles' aria-pressed state. */
.status-toolbar__more[open] > .status-toolbar__more-summary {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Drop-down menu surface */
.status-toolbar__more-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: var(--space-1);
  background: var(--color-bg-elevated, var(--color-bg-secondary));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Items: full-width buttons/links, icon-and-label pair so the user actually
 * knows what each toggle does before tapping it. Overrides the original
 * .hologram-toggle-btn / .xr-mode-btn / .focus-mode-toggle 32x32 icon-only
 * styling from _status_bar.css when the element is inside the More menu. */
.status-toolbar__more-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-width: 0;
  height: auto;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.status-toolbar__more-item:hover,
.status-toolbar__more-item:focus-visible {
  background: var(--color-bg-hover);
  color: var(--color-accent-primary);
}

.status-toolbar__more-item:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.status-toolbar__more-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.status-toolbar__more-item-icon .svg-icon {
  width: 16px;
  height: 16px;
}

.status-toolbar__more-item-label {
  flex: 1;
  min-width: 0;
}

/* Active/pressed state for menuitemcheckbox items (hologram, focus mode). */
.status-toolbar__more-item[aria-checked="true"],
.status-toolbar__more-item[aria-pressed="true"] {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  color: var(--color-accent-primary);
}

/* When the More-menu wraps a toggle button, the original 32x32 icon-only
 * styling bleeds through; null it out so the row stretches full width. */
.status-toolbar__more-menu .hologram-toggle-btn,
.status-toolbar__more-menu .xr-mode-btn,
.status-toolbar__more-menu .focus-mode-toggle {
  width: 100%;
  height: auto;
  background: transparent;
  border: 1px solid transparent;
}

/* Mobile: overflow menu opens full-width, anchored to the right edge. */
@media (max-width: 480px) {
  .status-toolbar__more-menu {
    right: 0;
    min-width: 180px;
  }
}
/*
 * Status Widget — Unified Visual Idiom (#4267, panel audit 6.5)
 * -------------------------------------------------------------
 * The four status-zone widgets — difficulty dropdown, spell-slot chip,
 * party badge, turn-indicator badge — already shared the same border-radius
 * and inner padding, but each had its own subtle height/box variation, and
 * a player scanning the row couldn't tell at a glance which were clickable
 * (button) vs read-only (badge).
 *
 * This file lays a baseline shape that all four widgets honor (minimum
 * height, identical inner padding, consistent gap between icon + text) and
 * a visible affordance distinction:
 *
 *   - Clickable widgets (rendered as <button>) get cursor: pointer + a
 *     hover lift via translateY(-1px). Already true for difficulty &
 *     spell-slot; this only ratifies the existing pattern.
 *   - Read-only badges (rendered as <div role="status">) keep cursor: help
 *     and don't translate on hover — the elevation cue is reserved for
 *     interactive widgets.
 *
 * NOTE — per the issue's CONSTRAINTS this is a visual-consistency pass
 * only. We do not change interactivity (no badge becomes a button, no
 * button becomes a div). We add a shared shape baseline; widget-specific
 * stylesheets keep their colors and animations.
 */

/* Shared shape baseline — applied to all four status-zone widgets so the
 * row reads as four similar chips, not four ad-hoc shapes. Selectors use
 * the existing widget classes so we don't have to add a new wrapper class
 * everywhere; specificity matches the per-widget rule set. */
.status-zone .difficulty-dropdown-widget__trigger,
.status-zone .spell-slot-widget,
.status-zone .party-badge,
.status-zone .turn-indicator-badge {
  min-height: 28px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  line-height: 1.2;
}

/* Clickable widgets: cursor + hover lift. The widgets are already <button>
 * elements; this just normalizes the affordance signal so a player can
 * tell at a glance "I can click this." */
.status-zone .difficulty-dropdown-widget__trigger:hover,
.status-zone .spell-slot-widget__compact:hover {
  transform: translateY(-1px);
}

/* Read-only badges: explicit help cursor (already on .party-badge /
 * .turn-indicator-badge in their own files) — repeating here so the
 * pairing with the clickable lift above is legible in one place. */
.status-zone .party-badge,
.status-zone .turn-indicator-badge {
  cursor: help;
}

/* Reduced-motion: drop the hover lift for users who opted out of motion. */
@media (prefers-reduced-motion: reduce) {
  .status-zone .difficulty-dropdown-widget__trigger:hover,
  .status-zone .spell-slot-widget__compact:hover {
    transform: none;
  }
}
/**
 * Command Palette Styles
 * ======================
 * VS Code-style command palette (Cmd+K / Ctrl+K) for quick command access.
 */

/* ============================================================================
   Overlay Backdrop
   ============================================================================ */

.command-palette-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-sky);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.15s ease-out;
  transform: none;
}

.command-palette-overlay--visible {
  opacity: 1;
}

.command-palette-overlay--closing {
  opacity: 0;
}

/* ============================================================================
   Palette Container
   ============================================================================ */

.command-palette {
  width: 90%;
  max-width: 560px;
  max-height: 60vh;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.15s ease-out;
}

.command-palette-overlay--visible .command-palette {
  transform: scale(1) translateY(0);
}

.command-palette-overlay--closing .command-palette {
  transform: scale(0.96) translateY(-10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .command-palette-overlay,
  .command-palette {
    transition: none;
  }
}

/* ============================================================================
   Header / Search
   ============================================================================ */

.command-palette__header {
  padding: 0.75rem;
  border-bottom: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.command-palette__search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary, #0d0d1a);
  border: 1px solid var(--border-color, #444);
  border-radius: 6px;
}

.command-palette__search-wrapper:focus-within {
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.command-palette__search-wrapper svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-muted, #888);
  flex-shrink: 0;
}

.command-palette__search-icon {
  font-size: 1rem;
  color: var(--text-muted, #888);
}

.command-palette__search {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text-primary, #e5e5e5);
  outline: none;
}

.command-palette__search::placeholder {
  color: var(--text-muted, #888);
}

.command-palette__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.6875rem;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Command List
   ============================================================================ */

.command-palette__list {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.command-palette__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted, #888);
  font-size: 0.875rem;
}

/* ============================================================================
   Command Item
   ============================================================================ */

.command-palette__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

.command-palette__item:hover {
  background: var(--bg-tertiary, #252540);
}

.command-palette__item--selected {
  background: var(--accent-color, #8b5cf6);
}

.command-palette__item--selected:hover {
  background: var(--accent-color, #8b5cf6);
}

.command-palette__item--selected .command-palette__item-name,
.command-palette__item--selected .command-palette__item-description,
.command-palette__item--selected .command-palette__item-category {
  color: white;
}

.command-palette__item--selected .command-palette__item-icon {
  color: rgba(255, 255, 255, 0.9);
}

.command-palette__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--accent-color, #8b5cf6);
}

.command-palette__item-icon svg {
  width: 1rem;
  height: 1rem;
}

.command-palette__item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.command-palette__item-name {
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
}

.command-palette__item-description {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.command-palette__item-category {
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border-radius: 3px;
}

/* ============================================================================
   Footer
   ============================================================================ */

.command-palette__footer {
  display: flex;
  justify-content: center;
  padding: 0.625rem 0.75rem;
  border-top: 1px solid var(--border-color, #333);
  background: var(--bg-secondary, #1a1a2e);
}

.command-palette__footer-hint {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.command-palette__footer-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  margin: 0 0.25rem;
  font-family: var(--font-mono, 'Menlo', monospace);
  font-size: 0.625rem;
  color: var(--text-muted, #888);
  background: var(--bg-tertiary, #252540);
  border: 1px solid var(--border-color, #333);
  border-radius: 3px;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .command-palette-overlay {
    padding-top: 5vh;
  }

  .command-palette {
    width: 95%;
    max-height: 70vh;
  }

  .command-palette__item-description {
    display: none;
  }

  .command-palette__item-content {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
}

/* ============================================================================
   Fuzzy Match Highlights
   ============================================================================ */

.command-palette__highlight {
  background: rgba(139, 92, 246, 0.3);
  color: var(--accent-color, #a78bfa);
  border-radius: 2px;
  padding: 0 1px;
}

.command-palette__item--selected .command-palette__highlight {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* ============================================================================
   Scrollbar
   ============================================================================ */

.command-palette__list::-webkit-scrollbar {
  width: 6px;
}

.command-palette__list::-webkit-scrollbar-track {
  background: transparent;
}

.command-palette__list::-webkit-scrollbar-thumb {
  background: var(--border-color, #333);
  border-radius: 3px;
}

.command-palette__list::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted, #555);
}
/*
 * D&D 5e Damage Type Badges
 * ==========================
 * Visual distinction for all 13 damage types with PHB-accurate colors.
 *
 * Usage:
 *   <span class="damage-badge damage-badge--fire">Fire</span>
 *   <span class="damage-badge damage-badge--cold">Cold</span>
 *
 * Data attribute variant:
 *   <span class="damage-badge" data-damage-type="fire">Fire</span>
 */

.damage-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

/* Fire Damage */
.damage-badge--fire,
.damage-badge[data-damage-type="fire"] {
  background: color-mix(in srgb, var(--dmg-fire) 15%, transparent);
  color: var(--dmg-fire);
  border: 1px solid var(--dmg-fire);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-fire) 20%, transparent);
}

.damage-badge--fire:hover,
.damage-badge[data-damage-type="fire"]:hover {
  background: color-mix(in srgb, var(--dmg-fire) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-fire) 40%, transparent);
}

/* Cold Damage */
.damage-badge--cold,
.damage-badge[data-damage-type="cold"] {
  background: color-mix(in srgb, var(--dmg-cold) 15%, transparent);
  color: var(--dmg-cold);
  border: 1px solid var(--dmg-cold);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-cold) 20%, transparent);
}

.damage-badge--cold:hover,
.damage-badge[data-damage-type="cold"]:hover {
  background: color-mix(in srgb, var(--dmg-cold) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-cold) 40%, transparent);
}

/* Lightning Damage */
.damage-badge--lightning,
.damage-badge[data-damage-type="lightning"] {
  background: color-mix(in srgb, var(--dmg-lightning) 15%, transparent);
  color: var(--dmg-lightning);
  border: 1px solid var(--dmg-lightning);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-lightning) 20%, transparent);
}

.damage-badge--lightning:hover,
.damage-badge[data-damage-type="lightning"]:hover {
  background: color-mix(in srgb, var(--dmg-lightning) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-lightning) 40%, transparent);
}

/* Acid Damage */
.damage-badge--acid,
.damage-badge[data-damage-type="acid"] {
  background: color-mix(in srgb, var(--dmg-acid) 15%, transparent);
  color: var(--dmg-acid);
  border: 1px solid var(--dmg-acid);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-acid) 20%, transparent);
}

.damage-badge--acid:hover,
.damage-badge[data-damage-type="acid"]:hover {
  background: color-mix(in srgb, var(--dmg-acid) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-acid) 40%, transparent);
}

/* Poison Damage */
.damage-badge--poison,
.damage-badge[data-damage-type="poison"] {
  background: color-mix(in srgb, var(--dmg-poison) 15%, transparent);
  color: var(--dmg-poison);
  border: 1px solid var(--dmg-poison);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-poison) 20%, transparent);
}

.damage-badge--poison:hover,
.damage-badge[data-damage-type="poison"]:hover {
  background: color-mix(in srgb, var(--dmg-poison) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-poison) 40%, transparent);
}

/* Necrotic Damage */
.damage-badge--necrotic,
.damage-badge[data-damage-type="necrotic"] {
  background: color-mix(in srgb, var(--dmg-necrotic) 15%, transparent);
  color: var(--dmg-necrotic);
  border: 1px solid var(--dmg-necrotic);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-necrotic) 20%, transparent);
}

.damage-badge--necrotic:hover,
.damage-badge[data-damage-type="necrotic"]:hover {
  background: color-mix(in srgb, var(--dmg-necrotic) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-necrotic) 40%, transparent);
}

/* Radiant Damage */
.damage-badge--radiant,
.damage-badge[data-damage-type="radiant"] {
  background: color-mix(in srgb, var(--dmg-radiant) 15%, transparent);
  color: var(--dmg-radiant);
  border: 1px solid var(--dmg-radiant);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-radiant) 20%, transparent);
}

.damage-badge--radiant:hover,
.damage-badge[data-damage-type="radiant"]:hover {
  background: color-mix(in srgb, var(--dmg-radiant) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-radiant) 40%, transparent);
}

/* Force Damage */
.damage-badge--force,
.damage-badge[data-damage-type="force"] {
  background: color-mix(in srgb, var(--dmg-force) 15%, transparent);
  color: var(--dmg-force);
  border: 1px solid var(--dmg-force);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-force) 20%, transparent);
}

.damage-badge--force:hover,
.damage-badge[data-damage-type="force"]:hover {
  background: color-mix(in srgb, var(--dmg-force) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-force) 40%, transparent);
}

/* Psychic Damage */
.damage-badge--psychic,
.damage-badge[data-damage-type="psychic"] {
  background: color-mix(in srgb, var(--dmg-psychic) 15%, transparent);
  color: var(--dmg-psychic);
  border: 1px solid var(--dmg-psychic);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-psychic) 20%, transparent);
}

.damage-badge--psychic:hover,
.damage-badge[data-damage-type="psychic"]:hover {
  background: color-mix(in srgb, var(--dmg-psychic) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-psychic) 40%, transparent);
}

/* Thunder Damage */
.damage-badge--thunder,
.damage-badge[data-damage-type="thunder"] {
  background: color-mix(in srgb, var(--dmg-thunder) 15%, transparent);
  color: var(--dmg-thunder);
  border: 1px solid var(--dmg-thunder);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-thunder) 20%, transparent);
}

.damage-badge--thunder:hover,
.damage-badge[data-damage-type="thunder"]:hover {
  background: color-mix(in srgb, var(--dmg-thunder) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-thunder) 40%, transparent);
}

/* Bludgeoning Damage */
.damage-badge--bludgeoning,
.damage-badge[data-damage-type="bludgeoning"] {
  background: color-mix(in srgb, var(--dmg-bludgeoning) 15%, transparent);
  color: var(--dmg-bludgeoning);
  border: 1px solid var(--dmg-bludgeoning);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-bludgeoning) 20%, transparent);
}

.damage-badge--bludgeoning:hover,
.damage-badge[data-damage-type="bludgeoning"]:hover {
  background: color-mix(in srgb, var(--dmg-bludgeoning) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-bludgeoning) 40%, transparent);
}

/* Piercing Damage */
.damage-badge--piercing,
.damage-badge[data-damage-type="piercing"] {
  background: color-mix(in srgb, var(--dmg-piercing) 15%, transparent);
  color: var(--dmg-piercing);
  border: 1px solid var(--dmg-piercing);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-piercing) 20%, transparent);
}

.damage-badge--piercing:hover,
.damage-badge[data-damage-type="piercing"]:hover {
  background: color-mix(in srgb, var(--dmg-piercing) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-piercing) 40%, transparent);
}

/* Slashing Damage */
.damage-badge--slashing,
.damage-badge[data-damage-type="slashing"] {
  background: color-mix(in srgb, var(--dmg-slashing) 15%, transparent);
  color: var(--dmg-slashing);
  border: 1px solid var(--dmg-slashing);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dmg-slashing) 20%, transparent);
}

.damage-badge--slashing:hover,
.damage-badge[data-damage-type="slashing"]:hover {
  background: color-mix(in srgb, var(--dmg-slashing) 25%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--dmg-slashing) 40%, transparent);
}

/* Size Variants */
.damage-badge--sm {
  padding: var(--space-0-5) var(--space-1-5);
  font-size: 9px;
}

.damage-badge--lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Accessibility: Focus states */
.damage-badge:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
/*
 * D&D Decorative Borders (Rick Rubin Pass)
 * =========================================
 * Simplified from ornamental corner brackets to clean gradient borders.
 * Fantasy feel preserved through color, not chrome.
 *
 * Variants:
 *   .dnd-border--gold      Gold/amber (character sheets, achievements)
 *   .dnd-border--stone     Gray stone (dungeon/combat panels)
 *   .dnd-border--parchment Warm tan (narrative, lore, quests)
 *   .dnd-border--magic     Purple/blue (spell panels)
 *   .dnd-border--wooden    Brown (inventory, merchant)
 *   .dnd-border--filigree  Top/bottom gradient lines
 */

/* ========================================
 * Gold Border — character sheets, achievements
 * ======================================== */

.dnd-border--gold {
  border: 1px solid color-mix(in srgb, var(--color-gold, #e8c44a) 40%, transparent);
}

/* ========================================
 * Stone Border — combat, dungeon panels
 * ======================================== */

.dnd-border--stone {
  border: 1px solid color-mix(in srgb, #787878 30%, transparent);
}

/* ========================================
 * Parchment Border — narrative, lore, quests
 * ======================================== */

.dnd-border--parchment {
  border: 1px solid color-mix(in srgb, var(--color-accent-warning, #d4b06e) 25%, transparent);
}

/* ========================================
 * Magic Border — spellbook, spell panels
 * ======================================== */

.dnd-border--magic {
  border: 1px solid color-mix(in srgb, var(--color-accent-purple) 35%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-purple) 10%, transparent);
}

/* ========================================
 * Wooden Border — inventory, merchant panels
 * ======================================== */

.dnd-border--wooden {
  border: 1px solid color-mix(in srgb, var(--color-accent-orange, #c08a58) 30%, transparent);
}

/* ========================================
 * Filigree Border — top/bottom ornamental
 * ======================================== */

.dnd-border--filigree {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ========================================
 * Divider Ornaments
 * ======================================== */

.dnd-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-default) 20%,
    var(--color-border-default) 80%,
    transparent
  );
  margin: var(--space-5) 0;
}

/* Simple gradient divider */
.dnd-divider--simple {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border-default),
    transparent
  );
  margin: var(--space-4) 0;
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .dnd-border--magic {
    box-shadow: none;
    border-color: color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
  }
}
/**
 * Filter Chips Component
 * ======================
 * Reusable filter chip buttons for inventory and other list panels.
 * Provides category filtering with keyboard navigation support.
 */

/* ========================================
 * Controls Container
 * ======================================== */

.inventory-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-bg-secondary);
}

/* ========================================
 * Filter Chips
 * ======================================== */

.filter-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.filter-chip {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.filter-chip:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-primary);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

.filter-chip:active {
  transform: translateY(0);
}

.filter-chip.active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.filter-chip:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  z-index: var(--z-raised);
}

/* Keyboard navigation hint */
.filter-chip::before {
  content: '';
  margin-right: 0.25rem;
}

/* ========================================
 * Sort Dropdown
 * ======================================== */

.inventory-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.inventory-sort-select {
  padding: var(--space-2) var(--space-3);
  padding-right: var(--space-5); /* Extra space for arrow */
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}

.inventory-sort-select:hover {
  border-color: var(--color-accent-primary);
  background-color: var(--color-bg-tertiary);
}

.inventory-sort-select:focus {
  outline: none;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.2);
}

.inventory-sort-select option {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--space-2);
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .inventory-controls {
    padding: var(--space-2);
    gap: var(--space-2);
  }

  .filter-chips {
    gap: var(--space-1-5);
  }

  .filter-chip {
    padding: var(--space-1-5) var(--space-2-5);
    font-size: var(--font-size-xs);
  }

  .inventory-sort {
    width: 100%;
    margin-left: 0;
  }

  .inventory-sort-select {
    flex: 1;
    font-size: var(--font-size-xs);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .filter-chip {
    transition: none;
  }

  .filter-chip:hover {
    transform: none;
  }

  .filter-chip:active {
    transform: none;
  }
}

/* ========================================
 * Dark Mode Adjustments
 * ======================================== */

@media (prefers-color-scheme: dark) {
  .inventory-sort-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ccc' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  }
}

/* ========================================
 * Animation for filter changes
 * ======================================== */

@keyframes filter-chip-activate {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.filter-chip.active {
  animation: filter-chip-activate 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip.active {
    animation: none;
  }
}

/* ========================================
 * Search Highlighting
 * ======================================== */

.search-highlight {
  background: color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
  color: var(--color-accent-warning);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent-warning) 40%, transparent);
}
/**
 * HP Bar Dramatic Enhancement
 * ============================
 * Phase 4 P2-13: Dramatic HP bar with state-based gradients, sheen effects, and critical pulse
 *
 * HP States:
 * - Healthy (>60%): Calm green gradient
 * - Wounded (25-60%): Warning orange gradient
 * - Critical (≤25%): URGENT red gradient with pulse animation
 *
 * Success Criteria:
 * - HP awareness +60%
 * - Combat tension +1.5 points
 * - Critical HP feels urgent
 */

/* ========================================
 * HP Bar Container (used in multiple contexts)
 * ======================================== */

.cs-hp-bar {
  width: 100%;
  height: 8px;
  /* Damage-reveal track: red → amber gradient exposed as the fill shrinks.
     Full HP covers this with solid green; depleting HP reveals the danger zone. */
  background: linear-gradient(90deg, #7f1d1d, #b45309);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: var(--space-2);
  position: relative;
}

/* Alternate styling for tabbed character sheet */
.cs-hp-bar:not(.cs-hp-bar__fill) {
  height: 12px;
  background: linear-gradient(90deg, #7f1d1d, #b45309);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ========================================
 * HP Bar Fill - Base Styles
 * ======================================== */

.cs-hp-bar__fill,
.cs-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: var(--radius-pill);
  position: relative;
  transform-origin: left;
  transition: transform var(--transition-normal, 0.3s ease),
              background-color var(--transition-normal, 0.3s ease),
              opacity var(--transition-normal, 0.3s ease);

  /* Solid fill — color changes per state class. Gradient lives on the track. */
  background: #2ECC71;
}

/* ========================================
 * Sheen Effect on Leading Edge
 * ======================================== */

.cs-hp-bar__fill::after,
.cs-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

/* ========================================
 * HP State Classes - Healthy (>60%)
 * ======================================== */

.cs-hp-bar__fill--healthy,
.cs-hp-fill--healthy {
  background: #2ECC71;
}

/* ========================================
 * HP State Classes - Wounded (25-60%)
 * ======================================== */

.cs-hp-bar__fill--wounded,
.cs-hp-fill--wounded {
  background: #F39C12;
}

/* ========================================
 * HP State Classes - Critical (≤25%)
 * URGENT with pulse animation
 * ======================================== */

.cs-hp-bar__fill--critical,
.cs-hp-fill--critical {
  background: #E74C3C;
  animation: criticalPulse 0.8s ease-in-out infinite;
}

@keyframes criticalPulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.7;
    filter: brightness(1.4);
  }
}

/* ========================================
 * Legacy Class Support (for backward compatibility)
 * ======================================== */

.cs-hp-bar__fill--low {
  /* Alias for critical state */
  background: #E74C3C;
  animation: criticalPulse 0.8s ease-in-out infinite;
}

.cs-hp-bar__fill--medium {
  /* Alias for wounded state */
  background: #F39C12;
}

/* ========================================
 * Combat Quickview HP Bar Variants
 * ======================================== */

.cs-quickview-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transform-origin: left;
  transition: transform 0.5s ease;
  position: relative;
}

.cs-hp-healthy {
  background: linear-gradient(90deg, #2ECC71, #27AE60);
}

.cs-hp-injured {
  background: linear-gradient(90deg, #F39C12, #E67E22);
}

.cs-hp-critical {
  background: linear-gradient(90deg, #E74C3C, #C0392B);
  animation: criticalPulse 0.8s ease-in-out infinite;
}

/* Add sheen to quickview bars as well */
.cs-quickview-hp-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6));
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
  border-radius: 0 3px 3px 0;
}

/* ========================================
 * Reduced Motion Support
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .cs-hp-bar__fill--critical,
  .cs-hp-fill--critical,
  .cs-hp-bar__fill--low,
  .cs-hp-critical {
    animation: none;
  }

  .cs-hp-bar__fill,
  .cs-hp-fill,
  .cs-quickview-hp-fill {
    transition: transform 0.1s linear;
  }
}

/* ========================================
 * High Contrast Mode Support
 * ======================================== */

@media (prefers-contrast: high) {
  .cs-hp-bar__fill::after,
  .cs-hp-fill::after,
  .cs-quickview-hp-fill::after {
    /* Reduce sheen intensity in high contrast mode */
    opacity: 0.5;
  }
}

/* ========================================
 * HP Flash Effects (damage/healing feedback)
 * Phase 4 P2-13: Smooth transitions and visual feedback
 * ======================================== */

.hp-bar--flash-damage,
.cs-hp-bar__fill--flash-damage,
.cs-hp-fill--flash-damage {
  animation: hpFlashDamage 0.4s ease-out;
}

.hp-bar--flash-heal,
.cs-hp-bar__fill--flash-heal,
.cs-hp-fill--flash-heal {
  animation: hpFlashHeal 0.4s ease-out;
}

@keyframes hpFlashDamage {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  25% {
    filter: brightness(1.8);
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    filter: brightness(0.6);
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

@keyframes hpFlashHeal {
  0% {
    filter: brightness(1);
    box-shadow: none;
  }
  25% {
    filter: brightness(1.5);
    box-shadow: 0 0 12px rgba(46, 204, 113, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.5);
  }
  50% {
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
  }
  100% {
    filter: brightness(1);
    box-shadow: none;
  }
}

/* ========================================
 * HP Flyout Numbers (floating damage/heal)
 * ======================================== */

.hp-flyout {
  position: absolute;
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0);
  z-index: var(--z-panel);
  white-space: nowrap;
}

.hp-flyout--damage {
  color: #E74C3C;
}

.hp-flyout--heal {
  color: #2ECC71;
}

.hp-flyout--animating {
  animation: hpFlyoutUp 1.5s ease-out forwards;
}

@keyframes hpFlyoutUp {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1.2);
  }
  30% {
    transform: translate(-50%, -20px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -40px) scale(0.8);
  }
}

/* Large flyout variant for dramatic damage/healing */
.hp-flyout--large {
  font-size: 1.5rem;
}

.hp-flyout--large.hp-flyout--animating {
  animation: hpFlyoutUpLarge 2s ease-out forwards;
}

@keyframes hpFlyoutUpLarge {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.3);
  }
  25% {
    transform: translate(-50%, -30px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.7);
  }
}

/* ========================================
 * HP Bar Container Enhancements
 * Ensures container can position flyouts
 * ======================================== */

.hp-bar-container,
.cs-hp-bar,
.cs-hp-wrapper {
  position: relative;
}

/* ========================================
 * Combat Tracker HP Bar Enhancements
 * ======================================== */

.combat-tracker .hp-bar {
  transition: transform 0.5s ease-out,
              background-color 0.3s ease;
}

/* ========================================
 * Reduced Motion Support for Flash/Flyout
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hp-bar--flash-damage,
  .hp-bar--flash-heal,
  .cs-hp-bar__fill--flash-damage,
  .cs-hp-bar__fill--flash-heal,
  .cs-hp-fill--flash-damage,
  .cs-hp-fill--flash-heal {
    animation: none;
  }

  .hp-flyout--animating {
    animation: hpFlyoutFade 1s ease-out forwards;
  }

  @keyframes hpFlyoutFade {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}
/*
 * Illuminated Drop Caps
 * =====================
 * Medieval manuscript-style drop caps for narrative text.
 * Applies ::first-letter styling to marked paragraphs.
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Drop Cap Base
 * ======================================== */

/* Apply to narrative paragraphs for illuminated first letter */
.dnd-drop-cap::first-letter {
  float: left;
  font-size: 3.2em;
  line-height: 0.8;
  padding: 0.05em 0.1em 0 0;
  margin-top: 0.05em;
  color: var(--color-accent-warning);
  font-weight: 700;
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-warning) 30%, transparent);
}

/* ========================================
 * Color Variants
 * ======================================== */

/* Arcane/magical text */
.dnd-drop-cap--arcane::first-letter {
  color: var(--color-accent-purple);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-purple) 40%, transparent);
}

/* Nature/druidic text */
.dnd-drop-cap--nature::first-letter {
  color: var(--color-accent-secondary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--color-accent-secondary) 30%, transparent);
}

/* Divine/celestial text */
.dnd-drop-cap--divine::first-letter {
  color: var(--color-accent-primary);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}

/* Infernal/dark text */
.dnd-drop-cap--infernal::first-letter {
  color: var(--color-accent-error);
  text-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-error) 40%, transparent);
}

/* ========================================
 * Size Variants
 * ======================================== */

.dnd-drop-cap--small::first-letter {
  font-size: 2.2em;
}

.dnd-drop-cap--large::first-letter {
  font-size: 4em;
  line-height: 0.75;
}

/* ========================================
 * Auto-apply to narrative scene descriptions
 * ======================================== */

/* First paragraph of a scene gets a drop cap automatically */
.narrative-scene > p:first-child::first-letter,
.narrative-entry.scene-start > p:first-child::first-letter {
  float: left;
  font-size: 2.8em;
  line-height: 0.85;
  padding: 0.05em 0.08em 0 0;
  margin-top: 0.05em;
  color: var(--color-accent-warning);
  font-weight: 700;
  text-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-warning) 20%, transparent);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .dnd-drop-cap::first-letter,
  .dnd-drop-cap--arcane::first-letter,
  .dnd-drop-cap--nature::first-letter,
  .dnd-drop-cap--divine::first-letter,
  .dnd-drop-cap--infernal::first-letter,
  .narrative-scene > p:first-child::first-letter,
  .narrative-entry.scene-start > p:first-child::first-letter {
    text-shadow: none;
  }
}
/**
 * Inline Configurator Styles
 *
 * Provides a compact inline selector UI for narrative hook actions
 * that require configuration (spell selection, weapon selection, etc.)
 */

.inline-configurator {
  position: fixed;
  z-index: var(--z-dropdown, 1000);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.inline-configurator--open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.inline-configurator__panel {
  background: var(--surface-elevated, #1a1a2e);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 4px);
  box-shadow: var(--shadow-elevated, 0 8px 24px rgba(0, 0, 0, 0.4));
  min-width: 240px;
  max-width: 320px;
  overflow: hidden;
}

.inline-configurator__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  background: var(--surface-secondary, #252542);
  border-bottom: 1px solid var(--border-color, #333);
}

.inline-configurator__title {
  font-size: var(--font-size-sm, 13px);
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.inline-configurator__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
  margin-left: var(--space-xs, 8px);
}

.inline-configurator__close:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  color: var(--text-primary, #e0e0e0);
}

.inline-configurator__close svg {
  width: 14px;
  height: 14px;
}

.inline-configurator__options {
  padding: var(--space-xs, 8px);
  max-height: 280px;
  overflow-y: auto;
}

.inline-configurator__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-xs, 8px) var(--space-sm, 12px);
  border: none;
  background: transparent;
  color: var(--text-primary, #e0e0e0);
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  transition: background 0.15s ease;
  text-align: left;
  gap: var(--space-xs, 8px);
}

.inline-configurator__option:hover {
  background: var(--surface-hover, rgba(255, 255, 255, 0.1));
}

.inline-configurator__option:active {
  background: var(--surface-active, rgba(255, 255, 255, 0.15));
}

.inline-configurator__option + .inline-configurator__option {
  margin-top: 2px;
}

.inline-configurator__option-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--surface-secondary, #252542);
  border-radius: var(--radius-sm, 4px);
  color: var(--accent-color, #6366f1);
  flex-shrink: 0;
}

.inline-configurator__option-icon svg {
  width: 16px;
  height: 16px;
}

.inline-configurator__option-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.inline-configurator__option-label {
  font-size: var(--font-size-sm, 13px);
  font-weight: 500;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inline-configurator__option-sublabel {
  font-size: var(--font-size-xs, 11px);
  color: var(--text-muted, #888);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Spell-specific styling */
.inline-configurator__option--cantrip .inline-configurator__option-icon {
  background: var(--surface-success-subtle, rgba(16, 185, 129, 0.15));
  color: var(--text-success, #10b981);
}

.inline-configurator__option--level-1 .inline-configurator__option-icon,
.inline-configurator__option--level-2 .inline-configurator__option-icon {
  background: var(--surface-info-subtle, rgba(59, 130, 246, 0.15));
  color: var(--text-info, #3b82f6);
}

.inline-configurator__option--level-3 .inline-configurator__option-icon,
.inline-configurator__option--level-4 .inline-configurator__option-icon {
  background: var(--surface-warning-subtle, rgba(245, 158, 11, 0.15));
  color: var(--text-warning, #f59e0b);
}

.inline-configurator__option--level-5 .inline-configurator__option-icon,
.inline-configurator__option--level-6 .inline-configurator__option-icon,
.inline-configurator__option--level-7 .inline-configurator__option-icon,
.inline-configurator__option--level-8 .inline-configurator__option-icon,
.inline-configurator__option--level-9 .inline-configurator__option-icon {
  background: var(--surface-accent-subtle, rgba(139, 92, 246, 0.15));
  color: var(--accent-color, #8b5cf6);
}

/* Custom option styling */
.inline-configurator__option--custom {
  border-top: 1px solid var(--border-color-subtle, rgba(255, 255, 255, 0.1));
  margin-top: var(--space-xs, 8px);
  padding-top: var(--space-sm, 12px);
}

.inline-configurator__option--custom .inline-configurator__option-icon {
  background: var(--surface-muted, rgba(255, 255, 255, 0.05));
  color: var(--text-muted, #888);
}

/* Loading state */
.inline-configurator__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg, 24px);
  color: var(--text-muted, #888);
}

.inline-configurator__loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--accent-color, #6366f1);
  border-radius: 50%;
  animation: inline-configurator-spin 0.8s linear infinite;
  margin-right: var(--space-xs, 8px);
}

@keyframes inline-configurator-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Empty state */
.inline-configurator__empty {
  padding: var(--space-md, 16px);
  text-align: center;
  color: var(--text-muted, #888);
  font-size: var(--font-size-sm, 13px);
}

/* Scrollbar styling */
.inline-configurator__options::-webkit-scrollbar {
  width: 6px;
}

.inline-configurator__options::-webkit-scrollbar-track {
  background: transparent;
}

.inline-configurator__options::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.2));
  border-radius: 3px;
}

.inline-configurator__options::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.3));
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .inline-configurator__panel {
    min-width: 200px;
    max-width: calc(100vw - 32px);
  }

  .inline-configurator__options {
    max-height: 220px;
  }
}
/**
 * Keyboard Shortcuts Modal Styles
 * ================================
 * Phase 2: P1-5 - Comprehensive Keyboard Shortcuts System
 *
 * Modal overlay for keyboard shortcuts reference with search functionality.
 * Follows Phase 1 design system for typography and spacing.
 */

/* ============================================================================
   Modal Backdrop
   ============================================================================ */

.keyboard-shortcuts-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  z-index: var(--z-sky); /* Higher than shortcuts-overlay (ceiling) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: opacity 0.2s ease-out;
  transform: none;
}

.keyboard-shortcuts-modal--visible {
  opacity: 1;
}

.keyboard-shortcuts-modal--closing {
  opacity: 0;
}

/* ============================================================================
   Modal Content Container
   ============================================================================ */

.keyboard-shortcuts-modal__content {
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-lg, 8px);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.5)),
              0 0 40px rgba(97, 175, 239, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95) translateY(10px);
  transition: transform 0.2s ease-out;
}

.keyboard-shortcuts-modal--visible .keyboard-shortcuts-modal__content {
  transform: scale(1) translateY(0);
}

.keyboard-shortcuts-modal--closing .keyboard-shortcuts-modal__content {
  transform: scale(0.95) translateY(10px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .keyboard-shortcuts-modal,
  .keyboard-shortcuts-modal__content {
    transition: none;
  }
}

/* ============================================================================
   Header
   ============================================================================ */

.keyboard-shortcuts-modal__header {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-accent-primary, #61afef);
}

.keyboard-shortcuts-modal__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.keyboard-shortcuts-modal__title {
  flex: 1;
  margin: 0;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #e5e5e5);
  font-family: var(--font-family-heading, 'Cinzel', serif);
}

.keyboard-shortcuts-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #888);
  border-radius: var(--radius-md, 6px);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.keyboard-shortcuts-modal__close:hover {
  background: var(--color-bg-tertiary, #252540);
  color: var(--color-text-primary, #e5e5e5);
}

.keyboard-shortcuts-modal__close:focus {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

.keyboard-shortcuts-modal__close svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ============================================================================
   Search
   ============================================================================ */

.keyboard-shortcuts-modal__search {
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--color-bg-secondary, #1a1a2e);
  border-bottom: 1px solid var(--color-border-default, #333);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__search-input {
  width: 100%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-size: var(--font-size-base, 0.9375rem);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-primary, #0d0d1a);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.keyboard-shortcuts-modal__search-input:focus {
  outline: none;
  border-color: var(--color-accent-primary, #61afef);
  box-shadow: 0 0 0 3px rgba(97, 175, 239, 0.1);
}

.keyboard-shortcuts-modal__search-input::placeholder {
  color: var(--color-text-muted, #888);
}

/* ============================================================================
   Body / Content
   ============================================================================ */

.keyboard-shortcuts-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 1.5rem);
}

/* Custom scrollbar for modal body */
.keyboard-shortcuts-modal__body::-webkit-scrollbar {
  width: 8px;
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #1a1a2e);
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-thumb {
  background: var(--color-border-default, #333);
  border-radius: 4px;
}

.keyboard-shortcuts-modal__body::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888);
}

/* ============================================================================
   Sections
   ============================================================================ */

.keyboard-shortcuts-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.keyboard-shortcuts-section__title {
  margin: 0;
  padding-bottom: var(--space-2, 0.5rem);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent-primary, #61afef);
  border-bottom: 1px solid var(--color-border-default, #333);
  font-family: var(--font-family-heading, 'Cinzel', serif);
}

.keyboard-shortcuts-section__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* ============================================================================
   Shortcut Items
   ============================================================================ */

.keyboard-shortcut-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid transparent;
  border-radius: var(--radius-md, 6px);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.keyboard-shortcut-item:hover {
  background: var(--color-bg-tertiary, #252540);
  border-color: var(--color-border-hover, #444);
}

.keyboard-shortcut-item__keys {
  display: flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  flex-shrink: 0;
}

.keyboard-shortcut-item__plus {
  color: var(--color-text-muted, #888);
  font-size: var(--font-size-sm, 0.875rem);
  margin: 0 var(--space-1, 0.25rem);
}

.keyboard-shortcut-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  text-align: right;
  min-width: 0;
}

.keyboard-shortcut-item__description {
  font-size: var(--font-size-base, 0.9375rem);
  color: var(--color-text-primary, #e5e5e5);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

.keyboard-shortcut-item__context {
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-muted, #888);
  font-style: italic;
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

/* ============================================================================
   Keyboard Keys
   ============================================================================ */

.keyboard-shortcut-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--space-2, 0.5rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-tertiary, #252540);
  border: 1px solid var(--color-border-default, #333);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm, 4px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Pressed state effect on hover */
.keyboard-shortcut-item:hover .keyboard-shortcut-key {
  border-bottom-width: 1px;
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   Footer
   ============================================================================ */

.keyboard-shortcuts-modal__footer {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-top: 1px solid var(--color-border-default, #333);
  background: var(--color-bg-secondary, #1a1a2e);
  flex-shrink: 0;
}

.keyboard-shortcuts-modal__hint {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  font-family: var(--font-family-base, 'Roboto Mono', monospace);
}

.keyboard-shortcuts-modal__hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 var(--space-2, 0.5rem);
  margin: 0 var(--space-1, 0.25rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  font-size: var(--font-size-xs, 0.8125rem);
  color: var(--color-text-primary, #e5e5e5);
  background: var(--color-bg-tertiary, #252540);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 640px) {
  .keyboard-shortcuts-modal__content {
    width: 95%;
    max-height: 95vh;
  }

  .keyboard-shortcut-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
  }

  .keyboard-shortcut-item__info {
    text-align: left;
  }

  .keyboard-shortcut-key {
    min-width: 1.75rem;
    height: 1.75rem;
    font-size: var(--font-size-xs, 0.8125rem);
  }
}

/* ============================================================================
   Visual Hints on Buttons
   ============================================================================ */

.keyboard-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  margin-left: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  font-size: var(--font-size-xs, 0.8125rem);
  font-family: var(--font-family-mono, 'Menlo', monospace);
  color: var(--color-text-muted, #888);
  background: rgba(97, 175, 239, 0.1);
  border: 1px solid var(--color-border-default, #333);
  border-radius: var(--radius-sm, 4px);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Show hint on parent hover */
button:hover .keyboard-hint,
.input-line:hover .keyboard-hint {
  opacity: 1;
}

.keyboard-hint__key {
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e5e5e5);
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */

/* Focus visible for keyboard navigation */
.keyboard-shortcuts-modal *:focus-visible {
  outline: 2px solid var(--color-accent-primary, #61afef);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .keyboard-shortcuts-modal {
    border: 2px solid currentColor;
  }

  .keyboard-shortcut-key {
    border: 2px solid currentColor;
  }
}

/* .sr-only defined in base/accessibility.css — duplicate removed (Phase 1 Task 2) */
/**
 * Lobby Menu - Inline navigation choices
 *
 * Renders lobby navigation options inline in the narrative,
 * replacing the old carousel/quick actions pattern with
 * a cleaner, more integrated menu experience.
 */

/* Container */
.lobby-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
  padding: var(--space-4, 16px);
  animation: lobbyMenuFadeIn var(--timing-normal) var(--ease-out);
}

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

/* Header */
.lobby-menu__header {
  text-align: center;
  margin-bottom: var(--space-2, 8px);
}

.lobby-menu__greeting {
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1, 4px);
}

.lobby-menu__subtitle {
  font-size: var(--font-size-sm, 14px);
  color: var(--color-text-secondary);
}

/* Section */
.lobby-menu__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

.lobby-menu__section-title {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Actions Grid */
.lobby-menu__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3, 12px);
}

.lobby-menu__action {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default), transform var(--timing-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.lobby-menu__action:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  transform: translateX(2px);
}

.lobby-menu__action:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.lobby-menu__action--primary {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

.lobby-menu__action--primary:hover {
  filter: brightness(1.1);
  transform: translateX(2px);
}

.lobby-menu__action--primary .lobby-menu__action-icon {
  background: rgba(0, 0, 0, 0.2);
  color: currentColor;
}

.lobby-menu__action--primary .lobby-menu__action-desc {
  color: rgba(255, 255, 255, 0.8);
}

/* Action Icon */
.lobby-menu__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  flex-shrink: 0;
  color: var(--color-accent-primary);
}

.lobby-menu__action-icon svg {
  width: 18px;
  height: 18px;
}

/* Action Content */
.lobby-menu__action-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lobby-menu__action-label {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.lobby-menu__action--primary .lobby-menu__action-label {
  color: inherit;
}

.lobby-menu__action-desc {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Characters List */
.lobby-menu__characters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
}

.lobby-menu__character {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-3, 12px);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--timing-fast) var(--ease-default), color var(--timing-fast) var(--ease-default), border-color var(--timing-fast) var(--ease-default);
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}

.lobby-menu__character:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
}

.lobby-menu__character:focus {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Character Avatar */
.lobby-menu__character-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--color-text-muted);
}

.lobby-menu__character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lobby-menu__character-avatar svg {
  width: 20px;
  height: 20px;
}

/* Character Info */
.lobby-menu__character-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lobby-menu__character-name {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.lobby-menu__character-details {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
}

/* Character Arrow */
.lobby-menu__character-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: transform var(--timing-fast) var(--ease-default);
}

.lobby-menu__character-arrow svg {
  width: 16px;
  height: 16px;
}

.lobby-menu__character:hover .lobby-menu__character-arrow {
  transform: translateX(4px);
  color: var(--color-accent-primary);
}

/* Preset Section - Quick Play Heroes */
.lobby-menu__section--presets {
  background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%);
  border: 1px solid var(--color-accent-primary);
  border-radius: 8px;
  padding: var(--space-4, 16px);
  position: relative;
  overflow: hidden;
}

.lobby-menu__section--presets::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary, var(--color-accent-primary)));
}

.lobby-menu__section--presets .lobby-menu__section-title {
  color: var(--color-accent-primary);
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-bold, 700);
}

.lobby-menu__section-subtitle {
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  margin-top: var(--space-1, 4px);
}

/* Preset Swipe Stack */
.lobby-menu__swipe-stack {
  position: relative;
  width: 100%;
  min-height: 200px;
  margin-top: var(--space-3, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

/* Override character-swipe-card sizing within lobby context */
.lobby-menu__swipe-stack .character-swipe-card {
  position: absolute;
  width: 280px;
  max-width: 90%;
  padding: var(--space-4, 16px);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-subtle);
  border-radius: 8px;
  cursor: grab;
  will-change: transform;
}

.lobby-menu__swipe-stack .character-swipe-card:active {
  cursor: grabbing;
}

/* Swipe hint arrows below the stack */
.lobby-menu__swipe-hint {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-4, 16px) 0;
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  opacity: 0.7;
}

.lobby-menu__swipe-hint-skip {
  color: var(--color-danger, #e06c75);
}

.lobby-menu__swipe-hint-play {
  color: var(--color-success, #98c379);
}

/* Responsive swipe stack */
@media (max-width: 480px) {
  .lobby-menu__swipe-stack {
    min-height: 180px;
  }

  .lobby-menu__swipe-stack .character-swipe-card {
    width: 240px;
  }
}

/* Empty State */
.lobby-menu__empty {
  text-align: center;
  padding: var(--space-6, 24px);
  color: var(--color-text-muted);
}

.lobby-menu__empty-icon {
  font-size: 32px;
  margin-bottom: var(--space-2, 8px);
  opacity: 0.5;
}

.lobby-menu__empty-text {
  font-size: var(--font-size-sm, 14px);
}

/* Responsive */
@media (max-width: 480px) {
  .lobby-menu__actions {
    grid-template-columns: 1fr;
  }

  .lobby-menu__action {
    padding: var(--space-3, 12px);
  }

  .lobby-menu__action-icon {
    width: 32px;
    height: 32px;
  }

  .lobby-menu__action-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Animation delays for staggered entry */
.lobby-menu__action:nth-child(1) { animation-delay: 0.05s; }
.lobby-menu__action:nth-child(2) { animation-delay: 0.1s; }
.lobby-menu__action:nth-child(3) { animation-delay: 0.15s; }
.lobby-menu__action:nth-child(4) { animation-delay: 0.2s; }

.lobby-menu__character:nth-child(1) { animation-delay: 0.1s; }
.lobby-menu__character:nth-child(2) { animation-delay: 0.15s; }
.lobby-menu__character:nth-child(3) { animation-delay: 0.2s; }
.lobby-menu__character:nth-child(4) { animation-delay: 0.25s; }
.lobby-menu__character:nth-child(5) { animation-delay: 0.3s; }
.lobby-menu__character:nth-child(6) { animation-delay: 0.35s; }

.lobby-menu__action,
.lobby-menu__character {
  animation: lobbyItemSlideIn var(--timing-normal) var(--ease-out) backwards;
}

@keyframes lobbyItemSlideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
 * Parchment Textures
 * ==================
 * Aged paper and parchment background effects for narrative content.
 * Uses CSS gradients for performance (no image assets needed).
 * Uses design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Parchment
 * ======================================== */

/* Subtle aged paper effect for text panels */
.dnd-parchment {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-warning) 3%, var(--color-bg-secondary)),
      var(--color-bg-secondary) 40%,
      color-mix(in srgb, var(--color-accent-warning) 2%, var(--color-bg-secondary)) 60%,
      var(--color-bg-secondary)
    );
  position: relative;
}

/* Subtle edge darkening for depth */
.dnd-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 30px color-mix(in srgb, #000 8%, transparent),
    inset 0 0 10px color-mix(in srgb, #000 4%, transparent);
  border-radius: inherit;
}

/* ========================================
 * Texture Variants
 * ======================================== */

/* Old parchment - more yellow/aged look */
.dnd-parchment--aged {
  background:
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--color-accent-warning) 6%, var(--color-bg-secondary)),
      color-mix(in srgb, var(--color-accent-warning) 3%, var(--color-bg-secondary)) 30%,
      var(--color-bg-secondary) 50%,
      color-mix(in srgb, var(--color-accent-warning) 4%, var(--color-bg-secondary)) 70%,
      color-mix(in srgb, var(--color-accent-orange) 3%, var(--color-bg-secondary))
    );
}

/* Dark parchment - for DM notes, quest logs */
.dnd-parchment--dark {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-accent-purple) 3%, var(--color-bg-primary)),
      var(--color-bg-primary) 50%,
      color-mix(in srgb, var(--color-accent-purple) 2%, var(--color-bg-primary))
    );
}

/* Magical scroll - for spell descriptions */
.dnd-parchment--magical {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-accent-purple) 4%, var(--color-bg-secondary)),
      var(--color-bg-secondary) 15%,
      var(--color-bg-secondary) 85%,
      color-mix(in srgb, var(--color-accent-purple) 4%, var(--color-bg-secondary))
    );
}

/* ========================================
 * Sepia Overlay
 * ======================================== */

/* Sepia tone filter for narrative readout areas */
.dnd-sepia {
  filter: sepia(5%) saturate(95%);
}

.dnd-sepia--strong {
  filter: sepia(12%) saturate(90%);
}

/* ========================================
 * Torn Edge Effect
 * ======================================== */

/* Torn bottom edge for quest notes */
.dnd-torn-edge {
  position: relative;
  padding-bottom: var(--space-4);
}

.dnd-torn-edge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-bg-primary) 3%,
    transparent 5%,
    var(--color-bg-primary) 8%,
    transparent 12%,
    var(--color-bg-primary) 15%,
    transparent 18%,
    var(--color-bg-primary) 22%,
    transparent 25%,
    var(--color-bg-primary) 30%,
    transparent 33%,
    var(--color-bg-primary) 38%,
    transparent 42%,
    var(--color-bg-primary) 45%,
    transparent 50%,
    var(--color-bg-primary) 53%,
    transparent 58%,
    var(--color-bg-primary) 62%,
    transparent 65%,
    var(--color-bg-primary) 70%,
    transparent 73%,
    var(--color-bg-primary) 78%,
    transparent 82%,
    var(--color-bg-primary) 85%,
    transparent 90%,
    var(--color-bg-primary) 93%,
    transparent 97%,
    var(--color-bg-primary) 100%
  );
}

/* ========================================
 * Reduced Motion / Accessibility
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .dnd-sepia,
  .dnd-sepia--strong {
    filter: none;
  }
}
/**
 * Custom Focus Indicators for Accessibility
 * ==========================================
 * Task #285: Standardized focus indicator utilities for WCAG 2.1 AAA compliance.
 *
 * Design Philosophy:
 * - Dual-ring pattern: solid outline + glow shadow for maximum visibility
 * - Consistent use of design tokens
 * - Utility classes for easy application across components
 * - Context-aware variants (gold for terminal default, semantic colors for states)
 *
 * Usage:
 * - Apply .focus-ring to elements for standard gold focus (terminal theme)
 * - Apply .focus-ring-gold for terminal-themed gold focus (alias for .focus-ring)
 * - Apply .focus-ring-inset for inset focus (buttons, cards)
 * - Use .focus-scale for interactive cards that should scale on focus
 */

/* ========================================
 * FOCUS DESIGN TOKENS
 * Extended from _tokens.css
 * ======================================== */

:root {
  /* Focus ring colors — primary is gold to match terminal theme */
  --focus-color-primary: var(--focus-ring-color, #ffd700);
  --focus-color-gold: var(--focus-ring-color, #ffd700);
  --focus-color-success: var(--color-accent-secondary, #98c379);
  --focus-color-danger: var(--color-accent-error, #e06c75);
  --focus-color-purple: var(--color-accent-purple, #c678dd);

  /* Focus ring glow alphas */
  --focus-glow-alpha: 0.25;
  --focus-glow-alpha-strong: 0.35;

  /* Focus ring sizes */
  --focus-ring-width: 3px;
  --focus-ring-width-lg: 4px;
  --focus-ring-glow-spread: 5px;
  --focus-ring-glow-spread-lg: 7px;

  /* Focus ring offsets */
  --focus-offset-default: 2px;
  --focus-offset-inset: -2px;
  --focus-offset-tight: 1px;

  /* Composite focus ring values */
  --focus-ring-primary: 0 0 0 var(--focus-ring-width) var(--focus-color-primary),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(255, 215, 0, var(--focus-glow-alpha));
  --focus-ring-gold-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-gold),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(255, 215, 0, var(--focus-glow-alpha));
  --focus-ring-success-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-success),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(152, 195, 121, var(--focus-glow-alpha));
  --focus-ring-danger-composite: 0 0 0 var(--focus-ring-width)
      var(--focus-color-danger),
    0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-glow-spread))
      rgba(224, 108, 117, var(--focus-glow-alpha));
}

/* ========================================
 * BASE FOCUS UTILITIES
 * Apply these classes for consistent focus styling
 * ======================================== */

/**
 * Standard gold focus ring (terminal theme)
 * Use for: forms, links, general interactive elements
 */
.focus-ring:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-primary);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Gold focus ring - Terminal theme
 * Use for: terminal UI, game elements, cards, panels
 */
.focus-ring-gold:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Success focus ring - Green
 * Use for: confirm buttons, success actions
 */
.focus-ring-success:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-success);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(152, 195, 121, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Danger focus ring - Red
 * Use for: delete buttons, destructive actions
 */
.focus-ring-danger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-danger);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(224, 108, 117, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Purple focus ring - Magic/DM theme
 * Use for: DM controls, magic-related UI
 */
.focus-ring-purple:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-purple);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(198, 120, 221, var(--focus-glow-alpha));
  position: relative;
  z-index: var(--z-sticky);
}

/* ========================================
 * FOCUS RING SIZE VARIANTS
 * ======================================== */

/**
 * Large focus ring - More prominent
 * Use for: important CTAs, modal focuses
 */
.focus-ring-lg:focus-visible {
  outline-width: var(--focus-ring-width-lg);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread-lg)
    rgba(255, 215, 0, var(--focus-glow-alpha-strong));
}

/**
 * Small focus ring - Subtle
 * Use for: inline elements, chips, badges
 */
.focus-ring-sm:focus-visible {
  outline-width: 2px;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

/* ========================================
 * FOCUS RING POSITION VARIANTS
 * ======================================== */

/**
 * Inset focus ring
 * Use for: buttons, cards with borders
 */
.focus-ring-inset:focus-visible {
  outline-offset: var(--focus-offset-inset);
}

/**
 * Tight focus ring - Closer to element
 * Use for: form inputs, compact elements
 */
.focus-ring-tight:focus-visible {
  outline-offset: var(--focus-offset-tight);
}

/**
 * No offset - Directly on element border
 * Use for: chips, badges, small buttons
 */
.focus-ring-flush:focus-visible {
  outline-offset: 0;
}

/* ========================================
 * FOCUS BEHAVIOR MODIFIERS
 * ======================================== */

/**
 * Focus with scale transform
 * Use for: selection cards, clickable items
 */
.focus-scale:focus-visible {
  transform: translateY(-2px) scale(1.02);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/**
 * Focus with left border indicator
 * Use for: menu items, list items
 */
.focus-left-indicator:focus-visible {
  outline: none;
  background: var(--color-bg-hover, rgba(255, 215, 0, 0.1));
  box-shadow: inset 3px 0 0 var(--focus-color-gold),
    0 0 0 3px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Focus with background highlight
 * Use for: list items, selectable rows
 */
.focus-highlight:focus-visible {
  background: rgba(255, 215, 0, 0.08);
}

/**
 * Dashed focus ring - for containers/panels
 * Use for: tab panels, content regions
 */
.focus-ring-dashed:focus-visible {
  outline-style: dashed;
}

/* ========================================
 * FOCUS-WITHIN UTILITIES
 * For containers that should highlight when child is focused
 * ======================================== */

/**
 * Container focus glow - gold
 * Use for: panels, cards with interactive children
 */
.focus-within-glow:focus-within {
  box-shadow: 0 0 0 3px var(--focus-color-gold),
    0 0 0 6px rgba(255, 215, 0, 0.2);
  position: relative;
  z-index: var(--z-sticky);
}

/**
 * Container focus border - subtle
 * Use for: form groups, sections
 */
.focus-within-border:focus-within {
  border-color: var(--focus-color-gold);
}

/* ========================================
 * SEMANTIC FOCUS STATES
 * Context-aware focus styling
 * ======================================== */

/**
 * Error state focus
 * Use for: invalid form fields
 */
.focus-error:focus-visible,
[aria-invalid="true"]:focus-visible {
  outline-color: var(--focus-color-danger);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(224, 108, 117, var(--focus-glow-alpha));
}

/**
 * Selected state focus
 * Use for: selected items that receive focus
 */
.focus-selected:focus-visible,
[aria-selected="true"]:focus-visible {
  outline-color: var(--focus-color-gold);
  background: rgba(255, 215, 0, 0.08);
}

/**
 * Current/active state focus
 * Use for: current page, active tab
 */
.focus-current:focus-visible,
[aria-current]:focus-visible {
  outline-width: var(--focus-ring-width-lg);
  outline-color: var(--focus-color-gold);
}

/* ========================================
 * SPECIFIC ELEMENT FOCUS PATTERNS
 * Consistent focus for common elements
 * ======================================== */

/**
 * Button focus pattern
 */
.btn-focus:focus-visible,
.focus-button:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
      rgba(255, 215, 0, var(--focus-glow-alpha)),
    0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Card focus pattern - with subtle lift
 */
.card-focus:focus-visible,
.focus-card:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.3),
    0 0 0 var(--focus-ring-glow-spread) rgba(255, 215, 0, 0.2);
  transform: translateX(4px);
  z-index: var(--z-sticky);
}

/**
 * Input focus pattern
 */
.input-focus:focus-visible,
.focus-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-tight);
  border-color: var(--focus-color-gold);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread) rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Tab focus pattern
 */
.tab-focus:focus-visible,
.focus-tab:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-inset);
  background: rgba(255, 215, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Menu item focus pattern
 */
.menu-focus:focus-visible,
.focus-menu-item:focus-visible {
  outline: none;
  background: var(--color-bg-hover);
  box-shadow: inset 3px 0 0 var(--focus-color-gold),
    0 0 0 3px rgba(255, 215, 0, 0.2);
  z-index: var(--z-sticky);
}

/**
 * Chip/badge focus pattern
 */
.chip-focus:focus-visible,
.focus-chip:focus-visible {
  outline: 2px solid var(--focus-color-gold);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25);
  z-index: var(--z-sticky);
}

/* ========================================
 * ROVING TABINDEX SUPPORT
 * Focus for items managed with roving tabindex
 * ======================================== */

[data-focus-group] [tabindex="-1"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-color-gold);
  outline-offset: var(--focus-offset-default);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread)
    rgba(255, 215, 0, var(--focus-glow-alpha));
  z-index: var(--z-sticky);
}

/* ========================================
 * ACCESSIBILITY MODE OVERRIDES
 * ======================================== */

/* High Contrast Mode */
@media (prefers-contrast: more) {
  :root {
    --focus-ring-width: 4px;
    --focus-glow-alpha: 0.4;
    --focus-ring-glow-spread: 6px;
  }

  .focus-ring:focus-visible,
  .focus-ring-gold:focus-visible,
  .focus-ring-success:focus-visible,
  .focus-ring-danger:focus-visible,
  .focus-ring-purple:focus-visible {
    outline-width: 4px;
    outline-offset: 3px;
  }
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
  .focus-ring:focus-visible,
  .focus-ring-gold:focus-visible,
  .focus-ring-success:focus-visible,
  .focus-ring-danger:focus-visible,
  .focus-ring-purple:focus-visible {
    outline: 4px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }

  .focus-left-indicator:focus-visible {
    outline: 4px solid Highlight;
    box-shadow: none;
    background: Canvas;
  }

  .focus-card:focus-visible,
  .card-focus:focus-visible {
    border-color: Highlight;
    transform: none;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .focus-scale:focus-visible {
    transform: none;
    transition: none;
  }

  .focus-card:focus-visible,
  .card-focus:focus-visible {
    transform: none;
  }
}

/* Touch Devices - Reduced glow intensity */
@media (hover: none) and (pointer: coarse) {
  :root {
    --focus-glow-alpha: 0.15;
    --focus-ring-glow-spread: 3px;
  }
}

/* Dark Mode Adjustments (already dark by default, but ensure vibrancy) */
@media (prefers-color-scheme: dark) {
  :root {
    --focus-ring-color: #ffed4e; /* Slightly brighter gold for dark backgrounds */
    --focus-color-primary: #ffed4e;
    --focus-color-gold: #ffed4e;
  }
}

/* ========================================
 * UTILITY HELPERS
 * ======================================== */

/**
 * Remove default focus styling (use with caution)
 * Only use when providing custom focus indicators
 */
.focus-none:focus-visible {
  outline: none;
  box-shadow: none;
}

/**
 * Ensure focus visible above overlays
 */
.focus-overlay:focus-visible {
  z-index: var(--z-floating-above);
}

/**
 * Focus ring for light backgrounds
 * Use for: modals, light-themed sections
 */
.focus-ring-light:focus-visible {
  outline-color: var(--color-bg-primary, #1a1a1a);
  box-shadow: 0 0 0 var(--focus-ring-glow-spread) rgba(26, 26, 26, 0.3);
}
/**
 * XP Animation Styles
 * ==================
 * Animated XP gain notifications, progress bars, and level-up celebrations.
 */

/* Container for floating XP numbers */
.xp-animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-ceiling);
  overflow: hidden;
}

/* Floating +XP number */
.xp-floater {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  transform: translate(-50%, 0);
  opacity: 0;
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xp-color, #ffd700);
  text-shadow:
    0 0 8px var(--xp-glow, rgba(255, 215, 0, 0.6)),
    0 2px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

.xp-floater--animating {
  animation: xp-float-up 2.5s ease-out forwards;
}

.xp-floater--levelup {
  font-size: 1.5rem;
  color: var(--xp-levelup-color, #ff6b6b);
}

.xp-floater__icon {
  font-size: 1.4em;
}

.xp-floater__amount {
  letter-spacing: 0.05em;
}

.xp-floater__levelup {
  display: block;
  font-size: 0.7em;
  color: var(--xp-levelup-color, #ff6b6b);
  animation: xp-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes xp-float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.5);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -20px) scale(1.1);
  }
  30% {
    transform: translate(-50%, -40px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(0.8);
  }
}

@keyframes xp-pulse {
  from {
    transform: scale(1);
    text-shadow:
      0 0 8px var(--xp-glow, rgba(255, 107, 107, 0.6)),
      0 0 16px var(--xp-glow, rgba(255, 107, 107, 0.4));
  }
  to {
    transform: scale(1.05);
    text-shadow:
      0 0 12px var(--xp-glow, rgba(255, 107, 107, 0.8)),
      0 0 24px var(--xp-glow, rgba(255, 107, 107, 0.6));
  }
}

/* XP Progress Bar */
.xp-progress {
  height: 6px;
  background: var(--surface-2, #2a2a2a);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.xp-progress__fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--xp-bar-start, #8b5cf6) 0%,
    var(--xp-bar-end, #ffd700) 100%
  );
  border-radius: 3px;
  transition: width 0.3s ease-out;
  position: relative;
}

.xp-progress__fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  animation: xp-shimmer 2s infinite linear;
  opacity: 0;
}

.xp-progress--flash .xp-progress__fill::after {
  opacity: 1;
}

@keyframes xp-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* XP Counter animation */
.xp-counter--animating {
  animation: xp-counter-pulse 0.15s ease-in-out infinite alternate;
  color: var(--xp-color, #ffd700);
}

@keyframes xp-counter-pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

/* Level Up Celebration Overlay */
.xp-levelup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: var(--z-sky);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.xp-levelup-overlay--visible {
  opacity: 1;
}

.xp-levelup-overlay--fading {
  opacity: 0;
}

.xp-levelup-content {
  text-align: center;
  transform: scale(0.5);
  opacity: 0;
  animation: xp-levelup-entrance 0.5s ease-out forwards;
}

.xp-levelup-overlay--visible .xp-levelup-content {
  animation-play-state: running;
}

@keyframes xp-levelup-entrance {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.xp-levelup-icon {
  font-size: 4rem;
  animation: xp-levelup-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes xp-levelup-bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}

.xp-levelup-text {
  font-family: var(--font-heading, var(--font-mono, monospace));
  font-size: 3rem;
  font-weight: bold;
  color: var(--xp-levelup-color, #ffd700);
  text-shadow:
    0 0 20px var(--xp-levelup-glow, rgba(255, 215, 0, 0.8)),
    0 0 40px var(--xp-levelup-glow, rgba(255, 215, 0, 0.5)),
    0 4px 8px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.1em;
  animation: xp-levelup-glow 0.5s ease-in-out infinite alternate;
}

@keyframes xp-levelup-glow {
  from {
    text-shadow:
      0 0 20px var(--xp-levelup-glow, rgba(255, 215, 0, 0.8)),
      0 0 40px var(--xp-levelup-glow, rgba(255, 215, 0, 0.5)),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
  to {
    text-shadow:
      0 0 30px var(--xp-levelup-glow, rgba(255, 215, 0, 1)),
      0 0 60px var(--xp-levelup-glow, rgba(255, 215, 0, 0.7)),
      0 4px 8px rgba(0, 0, 0, 0.5);
  }
}

.xp-levelup-level {
  font-family: var(--font-mono, monospace);
  font-size: 2rem;
  color: var(--text-1, #e0e0e0);
  margin-top: var(--space-sm, 8px);
}

.xp-levelup-name {
  font-family: var(--font-mono, monospace);
  font-size: 1.2rem;
  color: var(--text-2, #a0a0a0);
  margin-top: var(--space-xs, 4px);
}

/* Inline XP display in character status */
.xp-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: var(--text-2, #a0a0a0);
}

.xp-display__label {
  color: var(--text-3, #666);
}

.xp-display__value {
  color: var(--xp-color, #ffd700);
  font-weight: 500;
}

.xp-display__next {
  color: var(--text-3, #666);
  font-size: 0.8em;
}

/* Compact XP bar for status area */
.xp-bar-compact {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  font-size: 0.75rem;
}

.xp-bar-compact__bar {
  flex: 1;
  height: 4px;
  background: var(--surface-2, #2a2a2a);
  border-radius: 2px;
  overflow: hidden;
  min-width: 60px;
}

.xp-bar-compact__fill {
  height: 100%;
  background: var(--xp-color, #ffd700);
  border-radius: 2px;
  transition: width 0.5s ease-out;
}

.xp-bar-compact__text {
  color: var(--text-3, #666);
  white-space: nowrap;
}

/* Tool result XP display */
.tool-result-item.xp-gain {
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.1) 0%,
    rgba(139, 92, 246, 0.1) 100%
  );
  border-left: 3px solid var(--xp-color, #ffd700);
  padding: var(--space-sm, 8px) var(--space-md, 12px);
  border-radius: 4px;
}

.tool-result-item.xp-gain .xp-gain__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  margin-bottom: var(--space-xs, 4px);
}

.tool-result-item.xp-gain .xp-gain__icon {
  font-size: 1.5em;
}

.tool-result-item.xp-gain .xp-gain__amount {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--xp-color, #ffd700);
}

.tool-result-item.xp-gain .xp-gain__reason {
  color: var(--text-2, #a0a0a0);
  font-size: 0.9rem;
}

.tool-result-item.xp-gain--levelup {
  border-left-color: var(--xp-levelup-color, #ff6b6b);
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.15) 0%,
    rgba(255, 215, 0, 0.15) 100%
  );
}

.tool-result-item.xp-gain--levelup .xp-gain__levelup {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 4px);
  margin-top: var(--space-xs, 4px);
  padding-top: var(--space-xs, 4px);
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--xp-levelup-color, #ff6b6b);
  font-weight: bold;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .xp-floater--animating {
    animation: xp-float-up-reduced 2s ease-out forwards;
  }

  @keyframes xp-float-up-reduced {
    0% {
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  .xp-levelup-content {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }

  .xp-levelup-icon,
  .xp-levelup-text,
  .xp-floater__levelup,
  .xp-counter--animating {
    animation: none;
  }

  .xp-progress__fill::after {
    animation: none;
  }
}
/**
 * Level Up Celebration — Overlay and Particles
 * ===============================================
 * Celebration overlay, banner, and particle animations (star, circle, diamond, spark).
 */

/**
 * Level-Up Celebration Effect
 * ===========================
 * Celebratory visual effects when a character levels up.
 * Features particles, glow effects, and non-intrusive animations.
 *
 * Accessibility: All animations respect prefers-reduced-motion
 */

/* ========================================
 * CELEBRATION CONTAINER
 * ======================================== */

.level-up-celebration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-sky);
  overflow: hidden;
}

.level-up-celebration--active {
  animation: celebration-backdrop 3s ease-out forwards;
}

@keyframes celebration-backdrop {
  0% {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.15), transparent 60%);
  }
  50% {
    background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.25), transparent 70%);
  }
  100% {
    background: transparent;
  }
}

/* ========================================
 * BANNER ANNOUNCEMENT
 * ======================================== */

.level-up-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  text-align: center;
  opacity: 0;
  animation: banner-entrance 2.5s ease-out forwards;
}

@keyframes banner-entrance {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(-10deg);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15) rotate(3deg);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.05) rotate(-2deg);
  }
  35% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9) translateY(-30px);
  }
}

.level-up-banner__icon {
  font-size: 4rem;
  display: block;
  animation: icon-bounce 0.4s ease-in-out infinite alternate;
  margin-bottom: var(--space-sm, 8px);
}

@keyframes icon-bounce {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-8px) scale(1.05);
  }
}

.level-up-banner__title {
  font-family: var(--font-heading, var(--font-mono, monospace));
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--color-gold, #ffd700);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.9),
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 215, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.6);
  animation: title-glow 0.4s ease-in-out infinite alternate;
}

@keyframes title-glow {
  from {
    text-shadow:
      0 0 20px rgba(255, 215, 0, 0.9),
      0 0 40px rgba(255, 215, 0, 0.6),
      0 0 60px rgba(255, 215, 0, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
  to {
    text-shadow:
      0 0 30px rgba(255, 215, 0, 1),
      0 0 50px rgba(255, 215, 0, 0.8),
      0 0 80px rgba(255, 215, 0, 0.5),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
}

.level-up-banner__level {
  font-family: var(--font-mono, monospace);
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--text-1, #fff);
  margin-top: var(--space-xs, 4px);
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

.level-up-banner__name {
  font-family: var(--font-mono, monospace);
  font-size: 1.3rem;
  color: var(--text-2, #ccc);
  margin-top: var(--space-xs, 4px);
  opacity: 0.9;
}

/* ========================================
 * PARTICLE SYSTEM
 * ======================================== */

.level-up-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.level-up-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  transform-origin: center;
}

/* Star shape particles */
.level-up-particle--star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  background: var(--color-gold, #ffd700);
  width: 16px;
  height: 16px;
}

/* Circle particles */
.level-up-particle--circle {
  border-radius: 50%;
  background: var(--accent-secondary, #22c55e);
  width: 10px;
  height: 10px;
}

/* Diamond particles */
.level-up-particle--diamond {
  width: 10px;
  height: 10px;
  background: var(--accent-purple, #8b5cf6);
  transform: rotate(45deg);
}

/* Spark particles (small and bright) */
.level-up-particle--spark {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.8);
}

/* Particle animation - burst outward */
.level-up-particle--animating {
  animation: particle-burst 2s ease-out forwards;
}

@keyframes particle-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate(var(--particle-x, 0), var(--particle-y, 0)) scale(1.5) rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: translate(
      calc(var(--particle-x, 0) * 2.5),
      calc(var(--particle-y, 0) * 2.5 + 100px)
    ) scale(0.5) rotate(360deg);
  }
}

/* Color variations for particles */
.level-up-particle--gold { background: #ffd700; }
.level-up-particle--amber { background: #f59e0b; }
.level-up-particle--green { background: #22c55e; }
.level-up-particle--purple { background: #8b5cf6; }
.level-up-particle--cyan { background: #06b6d4; }
.level-up-particle--white { background: #ffffff; }

/**
 * Level Up Celebration — Rings and Confetti
 * ============================================
 * Glow rings, falling confetti, level badge, stat preview, and timeline.
 */

/* ========================================
 * GLOW RING EFFECT
 * ======================================== */

.level-up-glow-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--color-gold, #ffd700);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  box-shadow:
    0 0 20px rgba(255, 215, 0, 0.8),
    0 0 40px rgba(255, 215, 0, 0.4),
    inset 0 0 20px rgba(255, 215, 0, 0.3);
}

.level-up-glow-ring--animating {
  animation: ring-expand 1.5s ease-out forwards;
}

@keyframes ring-expand {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0);
    border-width: 6px;
  }
  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(2);
    border-width: 3px;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4);
    border-width: 1px;
  }
}

/* Multiple rings with stagger */
.level-up-glow-ring:nth-child(2) {
  animation-delay: 0.15s;
}

.level-up-glow-ring:nth-child(3) {
  animation-delay: 0.3s;
}

/* ========================================
 * CONFETTI EFFECT (falling from top)
 * ======================================== */

.level-up-confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.level-up-confetti {
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0;
}

.level-up-confetti--square {
  border-radius: 2px;
}

.level-up-confetti--circle {
  border-radius: 50%;
}

.level-up-confetti--ribbon {
  width: 8px;
  height: 20px;
  border-radius: 1px;
}

.level-up-confetti--animating {
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(-20px) rotate(0deg) scale(1);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 50px)) rotate(720deg) scale(0.6);
  }
}

/* Staggered delays for natural falling effect */
.level-up-confetti:nth-child(odd) {
  animation-duration: 2.8s;
}

.level-up-confetti:nth-child(3n) {
  animation-duration: 3.2s;
}

.level-up-confetti:nth-child(5n) {
  animation-timing-function: ease-in-out;
}

/* ========================================
 * SCREEN FLASH
 * ======================================== */

.level-up-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 215, 0, 0.5),
    transparent 60%
  );
  opacity: 0;
  animation: flash-burst 0.5s ease-out forwards;
}

@keyframes flash-burst {
  0% {
    opacity: 1;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/**
 * Level Up Celebration — Subtle Mode and Accessibility
 * ======================================================
 * Subtle mode, share panel, and reduced motion / accessibility fallbacks.
 */

/* ========================================
 * SUBTLE MODE (for non-intrusive display)
 * ======================================== */

.level-up-celebration--subtle .level-up-banner {
  top: 20%;
  transform: translate(-50%, 0) scale(0);
}

.level-up-celebration--subtle .level-up-banner__title {
  font-size: 2rem;
}

.level-up-celebration--subtle .level-up-banner__level {
  font-size: 1.5rem;
}

.level-up-celebration--subtle .level-up-banner__icon {
  font-size: 2.5rem;
}

.level-up-celebration--subtle .level-up-glow-ring {
  max-width: 200px;
  max-height: 200px;
}

.level-up-celebration--subtle .level-up-particles {
  top: 25%;
}

/* ========================================
 * NOTIFICATION BAR (inline alternative)
 * ======================================== */

.level-up-notification {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.95) 0%,
    rgba(255, 165, 0, 0.95) 100%
  );
  color: #1a1a1a;
  padding: var(--space-sm, 8px) var(--space-lg, 24px);
  border-radius: var(--radius-lg, 12px);
  font-family: var(--font-mono, monospace);
  font-weight: bold;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  box-shadow:
    0 4px 20px rgba(255, 215, 0, 0.5),
    0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: var(--z-sky-above);
  opacity: 0;
}

.level-up-notification--visible {
  animation: notification-slide 3s ease-out forwards;
}

@keyframes notification-slide {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-100px);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
}

.level-up-notification__icon {
  font-size: 1.4em;
  animation: notification-icon-pulse 0.3s ease-in-out infinite alternate;
}

@keyframes notification-icon-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

.level-up-notification__text {
  letter-spacing: 0.05em;
}

/* ========================================
 * ACCESSIBILITY: Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .level-up-celebration--active,
  .level-up-banner,
  .level-up-banner__icon,
  .level-up-banner__title,
  .level-up-particle--animating,
  .level-up-glow-ring--animating,
  .level-up-confetti--animating,
  .level-up-flash,
  .level-up-notification--visible,
  .level-up-notification__icon {
    animation: none;
  }

  /* Show content statically without animation */
  .level-up-banner {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .level-up-notification--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Add a subtle border/indicator instead of animations */
  .level-up-celebration--active {
    background: rgba(255, 215, 0, 0.1);
  }

  /* Fade out after delay for reduced motion users */
  .level-up-celebration {
    transition: opacity 0.5s ease-out 2s;
  }

  .level-up-celebration--fading {
    opacity: 0;
  }
}

/* ========================================
 * HIGH CONTRAST MODE
 * ======================================== */

@media (prefers-contrast: high) {
  .level-up-banner__title {
    color: #fff;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    -webkit-text-stroke: 1px #000;
  }

  .level-up-notification {
    background: #ffd700;
    border: 2px solid #000;
  }
}
/**
 * Level Up Celebration — Import Hub
 * ====================================
 * Full-screen level up celebration with particles, rings, confetti, and subtle mode.
 *
 * Decomposed into focused files under level_up_celebration/ for maintainability.



 */
/**
 * Death Save Overlay — Base Display
 * ====================================
 * Overlay container, character info header, D20 roll display,
 * death save tracker boxes, result message.
 */

/**
 * Death Save Dramatic Overlay
 * ===========================
 * Full-screen dramatic death save experience with D20 roll animation,
 * progressive tension, and special effects for critical results.
 *
 * D&D 5e Death Saves:
 * - 10+ = success, <10 = failure
 * - Nat 20 = regain 1 HP, wake up
 * - Nat 1 = 2 failures
 * - 3 successes = stable
 * - 3 failures = death
 */

/* ============================================
 * OVERLAY CONTAINER
 * ============================================ */

.death-save-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(20, 0, 0, 0.95) 100%
  );
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.death-save-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Vignette effect - danger closing in */
.death-save-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(139, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  animation: vignette-pulse 2s ease-in-out infinite;
}

@keyframes vignette-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ============================================
 * CHARACTER INFO HEADER
 * ============================================ */

.death-save-overlay__header {
  position: absolute;
  top: 2rem;
  text-align: center;
  animation: header-fade-in 0.5s ease-out 0.2s both;
}

@keyframes header-fade-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.death-save-overlay__character-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-danger-light, #ff6b6b);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  margin: 0 0 0.5rem 0;
}

.death-save-overlay__status {
  font-size: 1rem;
  color: var(--terminal-text-muted, #888);
  font-style: italic;
  letter-spacing: 0.1em;
}

/* ============================================
 * D20 ROLL DISPLAY
 * ============================================ */

.death-save-d20 {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 2rem;
}

.death-save-d20__face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 900;
  font-family: var(--font-mono, monospace);
  color: white;
  background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  border-radius: 50%;
  border: 4px solid var(--terminal-border, #444);
  box-shadow:
    0 0 40px rgba(255, 0, 0, 0.3),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* Rolling animation */
.death-save-d20--rolling .death-save-d20__face {
  animation: d20-spin 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes d20-spin {
  0% {
    transform: rotateX(0deg) rotateY(0deg) scale(0.8);
    opacity: 0;
  }
  20% {
    opacity: 1;
    transform: rotateX(360deg) rotateY(180deg) scale(1.1);
  }
  40% {
    transform: rotateX(720deg) rotateY(360deg) scale(1);
  }
  60% {
    transform: rotateX(1080deg) rotateY(540deg) scale(1.05);
  }
  80% {
    transform: rotateX(1440deg) rotateY(720deg) scale(1);
  }
  100% {
    transform: rotateX(1800deg) rotateY(900deg) scale(1);
  }
}

/* Result reveal animation */
.death-save-d20--revealed .death-save-d20__face {
  animation: d20-reveal 0.4s ease-out;
}

@keyframes d20-reveal {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

/* Result-specific styling */
.death-save-d20--success .death-save-d20__face {
  border-color: var(--color-success, #22c55e);
  box-shadow:
    0 0 60px rgba(34, 197, 94, 0.5),
    inset 0 0 30px rgba(34, 197, 94, 0.2);
  color: var(--color-success, #22c55e);
}

.death-save-d20--failure .death-save-d20__face {
  border-color: var(--color-danger, #ef4444);
  box-shadow:
    0 0 60px rgba(239, 68, 68, 0.5),
    inset 0 0 30px rgba(239, 68, 68, 0.2);
  color: var(--color-danger, #ef4444);
}

.death-save-d20--nat20 .death-save-d20__face {
  border-color: var(--color-gold, #ffd700);
  background: linear-gradient(135deg, #4a3f00, #2a2500);
  box-shadow:
    0 0 80px rgba(255, 215, 0, 0.6),
    inset 0 0 30px rgba(255, 215, 0, 0.3);
  color: var(--color-gold, #ffd700);
  animation: nat20-glow 0.5s ease-out, nat20-pulse 1s ease-in-out infinite 0.5s;
}

@keyframes nat20-glow {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.2);
    filter: brightness(2);
  }
  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes nat20-pulse {
  0%, 100% {
    box-shadow:
      0 0 80px rgba(255, 215, 0, 0.6),
      inset 0 0 30px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow:
      0 0 120px rgba(255, 215, 0, 0.8),
      inset 0 0 50px rgba(255, 215, 0, 0.5);
  }
}

.death-save-d20--nat1 .death-save-d20__face {
  border-color: var(--color-danger, #ef4444);
  background: linear-gradient(135deg, #4a0000, #2a0000);
  box-shadow:
    0 0 100px rgba(239, 68, 68, 0.7),
    inset 0 0 40px rgba(239, 68, 68, 0.4);
  color: var(--color-danger, #ef4444);
  animation: nat1-shake 0.5s ease-out;
}

@keyframes nat1-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* ============================================
 * DEATH SAVE TRACKER BOXES
 * ============================================ */

.death-save-overlay__tracker {
  display: flex;
  gap: 3rem;
  margin-bottom: 2rem;
  animation: tracker-fade-in 0.5s ease-out 0.3s both;
}

@keyframes tracker-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.death-save-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.death-save-track__label {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--terminal-text-muted, #888);
}

.death-save-track--successes .death-save-track__label {
  color: var(--color-success, #22c55e);
}

.death-save-track--failures .death-save-track__label {
  color: var(--color-danger, #ef4444);
}

.death-save-track__boxes {
  display: flex;
  gap: 0.5rem;
}

.death-save-box {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 2px solid var(--terminal-border, #444);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

/* Success boxes */
.death-save-track--successes .death-save-box--filled {
  background: var(--color-success, #22c55e);
  border-color: var(--color-success-light, #4ade80);
  color: white;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
  animation: box-fill-success 0.4s ease-out;
}

@keyframes box-fill-success {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.death-save-track--successes .death-save-box--filled::after {
  content: '\2713'; /* Checkmark */
  font-weight: bold;
}

/* Failure boxes */
.death-save-track--failures .death-save-box--filled {
  background: var(--color-danger, #ef4444);
  border-color: var(--color-danger-light, #f87171);
  color: white;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  animation: box-fill-failure 0.4s ease-out;
}

@keyframes box-fill-failure {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.3) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.death-save-track--failures .death-save-box--filled::after {
  content: '\2717'; /* X mark */
  font-weight: bold;
}

/* New box animation - just filled this roll */
.death-save-box--new {
  animation: box-new-pulse 0.6s ease-out;
}

@keyframes box-new-pulse {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.4);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.1);
  }
}

/* ============================================
 * RESULT MESSAGE
 * ============================================ */

.death-save-overlay__result {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 1rem;
  text-align: center;
  animation: result-appear 0.4s ease-out 0.5s both;
}

@keyframes result-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.death-save-overlay__result--success {
  color: var(--color-success, #22c55e);
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.death-save-overlay__result--failure {
  color: var(--color-danger, #ef4444);
  text-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.death-save-overlay__result--nat20 {
  color: var(--color-gold, #ffd700);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
  animation: result-appear 0.4s ease-out 0.5s both, nat20-text-pulse 1s ease-in-out infinite 0.9s;
}

@keyframes nat20-text-pulse {
  0%, 100% {
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 50px rgba(255, 215, 0, 1);
    transform: scale(1.05);
  }
}

.death-save-overlay__result--nat1 {
  color: var(--color-danger, #ef4444);
  text-shadow: 0 0 30px rgba(239, 68, 68, 0.7);
}

.death-save-overlay__result--stabilized {
  color: var(--color-success, #22c55e);
  text-shadow: 0 0 40px rgba(34, 197, 94, 0.6);
}

.death-save-overlay__result--death {
  color: var(--color-danger, #ef4444);
  text-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
  animation: result-appear 0.4s ease-out 0.5s both, death-pulse 1.5s ease-in-out infinite 0.9s;
}

@keyframes death-pulse {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 40px rgba(239, 68, 68, 0.8);
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 60px rgba(239, 68, 68, 1);
  }
}

/* Sub-message for additional info */
.death-save-overlay__submessage {
  font-size: 1rem;
  color: var(--terminal-text-secondary, #aaa);
  text-align: center;
  animation: result-appear 0.4s ease-out 0.7s both;
}

.death-save-overlay__submessage--hp {
  color: var(--color-success, #22c55e);
}

/**
 * Death Save Overlay — Continue Button
 * =======================================
 * Continue button and special outcome overlays.
 */

 * CONTINUE BUTTON
 * ============================================ */

.death-save-overlay__continue {
  margin-top: 2rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--terminal-text-primary, #e0e0e0);
  background: transparent;
  border: 2px solid var(--terminal-border, #555);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  animation: button-appear 0.4s ease-out 0.8s both;
}

@keyframes button-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.death-save-overlay__continue:hover {
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-color: var(--color-primary, #4a90e2);
  color: var(--color-primary-light, #6ba4e8);
}

.death-save-overlay__continue:focus-visible {
  outline: 2px solid var(--color-gold, #ffd700);
  outline-offset: 2px;
}

/* ============================================
 * SPECIAL OUTCOME OVERLAYS
 * ============================================ */

/* Stabilized - peaceful glow */
.death-save-overlay--stabilized {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 20, 0, 0.85) 0%,
    rgba(0, 40, 0, 0.95) 100%
  );
}

.death-save-overlay--stabilized::before {
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(34, 197, 94, 0.2) 100%
  );
  animation: stabilized-pulse 3s ease-in-out infinite;
}

@keyframes stabilized-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

/* Natural 20 - golden triumph */
.death-save-overlay--nat20 {
  background: radial-gradient(
    ellipse at center,
    rgba(30, 25, 0, 0.85) 0%,
    rgba(20, 15, 0, 0.95) 100%
  );
}

.death-save-overlay--nat20::before {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 215, 0, 0.15) 0%,
    transparent 60%
  );
  animation: none;
}

/* Particle burst for nat 20 */
.death-save-overlay--nat20::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(255, 215, 0, 0.3) 0%,
    transparent 70%
  );
  animation: nat20-burst 1s ease-out;
  pointer-events: none;
}

@keyframes nat20-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}

/* Death - darkening doom */
.death-save-overlay--death {
  background: radial-gradient(
    ellipse at center,
    rgba(20, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.98) 100%
  );
}

.death-save-overlay--death::before {
  background: radial-gradient(
    ellipse at center,
    transparent 20%,
    rgba(139, 0, 0, 0.6) 100%
  );
  animation: death-vignette 2s ease-in-out infinite;
}

@keyframes death-vignette {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}
/**
 * Death Save Overlay — Tension & Accessibility
 * ==============================================
 * Progressive tension states, advantage/disadvantage indicators,
 * accessibility and responsive adjustments.
 */

/* ============================================
 * PROGRESSIVE TENSION STATES
 * More failures = more intense visuals
 * ============================================ */

/* 1 failure - mild warning */
.death-save-overlay[data-failures="1"] {
  --danger-intensity: 0.3;
}

/* 2 failures - high danger */
.death-save-overlay[data-failures="2"] {
  --danger-intensity: 0.6;
}

.death-save-overlay[data-failures="2"]::before {
  animation: vignette-pulse 1.5s ease-in-out infinite;
}

/* Screen shake on critical failure */
.death-save-overlay--screen-shake {
  animation: screen-shake 0.5s ease-out;
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, -4px); }
  20% { transform: translate(8px, 4px); }
  30% { transform: translate(-6px, 2px); }
  40% { transform: translate(6px, -2px); }
  50% { transform: translate(-4px, 4px); }
  60% { transform: translate(4px, -4px); }
  70% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, 1px); }
}

/* ============================================
 * ADVANTAGE/DISADVANTAGE INDICATORS
 * ============================================ */

.death-save-overlay__modifier {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  animation: modifier-appear 0.4s ease-out;
}

@keyframes modifier-appear {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.death-save-overlay__modifier--advantage {
  left: 2rem;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid var(--color-success, #22c55e);
  color: var(--color-success, #22c55e);
}

.death-save-overlay__modifier--disadvantage {
  right: 2rem;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
}

/* Multiple rolls display for advantage/disadvantage */
.death-save-overlay__rolls {
  font-size: 0.875rem;
  color: var(--terminal-text-muted, #888);
  margin-top: 0.5rem;
  text-align: center;
}

.death-save-overlay__rolls span {
  font-family: var(--font-mono, monospace);
  padding: 0.25rem 0.5rem;
  background: var(--terminal-bg-elevated, #1a1a1a);
  border-radius: 3px;
  margin: 0 0.25rem;
}

.death-save-overlay__rolls span.used {
  color: var(--terminal-text-primary, #e0e0e0);
  border: 1px solid var(--terminal-border, #444);
}

.death-save-overlay__rolls span.discarded {
  color: var(--terminal-text-muted, #888);
  text-decoration: line-through;
  opacity: 0.6;
}

/* ============================================
 * ACCESSIBILITY & REDUCED MOTION
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  .death-save-overlay,
  .death-save-overlay::before,
  .death-save-d20__face,
  .death-save-d20--rolling .death-save-d20__face,
  .death-save-d20--revealed .death-save-d20__face,
  .death-save-d20--nat20 .death-save-d20__face,
  .death-save-d20--nat1 .death-save-d20__face,
  .death-save-box--filled,
  .death-save-box--new,
  .death-save-overlay__result,
  .death-save-overlay__result--nat20,
  .death-save-overlay__result--death,
  .death-save-overlay--screen-shake,
  .death-save-overlay__continue,
  .death-save-overlay__modifier,
  .death-save-overlay--nat20::after {
    animation: none;
    transition: opacity 0.3s ease;
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .death-save-overlay {
    background: Canvas;
    border: 3px solid CanvasText;
  }

  .death-save-d20__face {
    border: 3px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }

  .death-save-box {
    border: 2px solid CanvasText;
  }

  .death-save-box--filled {
    background: Highlight;
    color: HighlightText;
  }
}

/* ============================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================ */

@media (max-width: 480px) {
  .death-save-d20 {
    width: 120px;
    height: 120px;
  }

  .death-save-d20__face {
    font-size: 3rem;
  }

  .death-save-overlay__tracker {
    gap: 1.5rem;
  }

  .death-save-box {
    width: 28px;
    height: 28px;
    font-size: 1rem;
  }

  .death-save-overlay__result {
    font-size: 1.25rem;
  }

  .death-save-overlay__character-name {
    font-size: 1.25rem;
  }

  .death-save-overlay__modifier {
    position: static;
    transform: none;
    margin-bottom: 1rem;
  }
}
/**
 * Death Save Dramatic Overlay — Import Hub
 * ==========================================
 * Death save overlay with tension states and accessibility.
 *
 * Decomposed into focused files under death_save_overlay/ for maintainability.



 */
/* ==========================================================================
 * Combat Round Log Panel Component
 * Chronological combat event log grouped by round
 * ========================================================================== */

.combat-round-log-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-mono);
}

/* Header */
.combat-round-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-round-log-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.combat-round-log-title-icon {
  font-size: 1.2em;
}

.combat-round-log-controls {
  display: flex;
  gap: var(--space-2);
}

.combat-round-log-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.combat-round-log-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: rgba(255, 255, 255, 0.05);
}

.combat-round-log-btn svg {
  width: 14px;
  height: 14px;
}

/* Filter panel */
.combat-round-log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid var(--color-border-subtle);
}

.combat-round-log-filter {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.combat-round-log-filter input[type="checkbox"] {
  accent-color: var(--color-accent);
}

.filter-icon {
  font-size: var(--font-size-sm);
}

.filter-icon--damage { color: #ef4444; }
.filter-icon--healing { color: #22c55e; }
.filter-icon--condition { color: #f59e0b; }
.filter-icon--turn { color: #3b82f6; }
.filter-icon--death { color: #8b5cf6; }

/* Status indicator */
.combat-round-log-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-indicator--inactive {
  background: var(--color-text-muted);
}

.status-indicator--active {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: pulse-green 2s ease-in-out infinite;
}

.status-indicator--ended {
  background: #6b7280;
}

@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.status-text {
  color: var(--color-text-secondary);
}

/* List container */
.combat-round-log-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Empty state */
.combat-round-log-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.combat-round-log-empty-icon {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.combat-round-log-empty-text {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.combat-round-log-empty-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Round containers */
.combat-log-round {
  margin-bottom: var(--space-4);
}

.combat-log-round-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.round-number {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.round-divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--color-accent), transparent);
}

.combat-log-round-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Event entries */
.combat-log-event {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.combat-log-event:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Event type colors */
.combat-log-event--damage {
  border-left-color: #ef4444;
}

.combat-log-event--healing {
  border-left-color: #22c55e;
}

.combat-log-event--condition {
  border-left-color: #f59e0b;
}

.combat-log-event--turn {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.combat-log-event--death {
  border-left-color: #8b5cf6;
}

.combat-log-event--combat-start,
.combat-log-event--combat-end {
  border-left-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb, 255, 215, 0), 0.1);
}

.combat-log-event--critical {
  background: rgba(239, 68, 68, 0.15);
  border-left-width: 4px;
}

/* Event time */
.event-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 60px;
}

/* Event icon */
.event-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-icon svg {
  width: 14px;
  height: 14px;
}

.combat-log-event--damage .event-icon { color: #ef4444; }
.combat-log-event--healing .event-icon { color: #22c55e; }
.combat-log-event--condition .event-icon { color: #f59e0b; }
.combat-log-event--turn .event-icon { color: #3b82f6; }
.combat-log-event--death .event-icon { color: #8b5cf6; }
.combat-log-event--combat-start .event-icon,
.combat-log-event--combat-end .event-icon { color: var(--color-accent); }

/* Event description */
.event-description {
  flex: 1;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Event value */
.event-value {
  font-weight: var(--font-weight-bold);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.event-value--damage {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.event-value--healing {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

/* New entry animation */
.combat-log-event--new {
  animation: eventSlideIn 0.3s ease-out;
  background: rgba(255, 215, 0, 0.15);
}

@keyframes eventSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
    background: rgba(255, 215, 0, 0.3);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    background: rgba(255, 215, 0, 0.15);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combat-log-event--new {
    animation: none;
  }

  .status-indicator--active {
    animation: none;
  }
}

/* Responsive */
@media (max-width: 480px) {
  .combat-log-event {
    flex-wrap: wrap;
  }

  .event-time {
    width: 100%;
    margin-bottom: var(--space-1);
  }

  .event-value {
    margin-left: auto;
  }
}
/**
 * Inline narrative image segment (#3789)
 * --------------------------------------
 * Styles for `<figure class="narrative-image narrative-image--{size} narrative-image--{align}">`
 * emitted by lib/renderers/image_segment_renderer.ts.
 *
 * Sizes:  thumb (96px tall), card (240px tall, default), hero (full width)
 * Aligns: left, center (default), right
 *
 * Lightbox modal lives in `.narrative-image-lightbox` overlay appended to <body>.
 */

.narrative-image {
  display: block;
  margin: 0.75rem auto;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--terminal-bg-elev, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--terminal-border, rgba(120, 200, 220, 0.18));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.narrative-image__img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: filter 150ms ease, transform 150ms ease;
}

.narrative-image__img:hover {
  filter: brightness(1.08);
}

.narrative-image__img:focus-visible {
  outline: 2px solid var(--terminal-accent, #6cf);
  outline-offset: 2px;
}

.narrative-image__caption {
  padding: 0.4rem 0.6rem;
  font-size: 0.85em;
  color: var(--terminal-fg-muted, #9bb);
  font-style: italic;
  text-align: center;
  border-top: 1px solid var(--terminal-border, rgba(120, 200, 220, 0.12));
  background: rgba(0, 0, 0, 0.25);
}

/* Size variants */
.narrative-image--thumb {
  max-width: 180px;
}
.narrative-image--thumb .narrative-image__img {
  max-height: 96px;
  object-fit: cover;
}

.narrative-image--card {
  max-width: 420px;
}
.narrative-image--card .narrative-image__img {
  max-height: 320px;
  object-fit: cover;
}

.narrative-image--hero {
  max-width: 100%;
}
.narrative-image--hero .narrative-image__img {
  max-height: 540px;
  object-fit: cover;
}

/* Alignment variants */
.narrative-image--left {
  margin-left: 0;
  margin-right: auto;
}
.narrative-image--center {
  margin-left: auto;
  margin-right: auto;
}
.narrative-image--right {
  margin-left: auto;
  margin-right: 0;
}

/* =====================================================================
 * Lightbox modal
 * =====================================================================
 */

.narrative-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  padding: 2rem;
  cursor: zoom-out;
  animation: narrative-image-lightbox-fade-in 150ms ease;
}

.narrative-image-lightbox__img {
  max-width: 96vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.7);
  cursor: default;
}

.narrative-image-lightbox__caption {
  margin-top: 0.75rem;
  max-width: 90vw;
  color: var(--terminal-fg, #cde);
  font-size: 0.9em;
  text-align: center;
  font-style: italic;
}

.narrative-image-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.narrative-image-lightbox__close:hover,
.narrative-image-lightbox__close:focus-visible {
  background: rgba(0, 0, 0, 0.85);
  outline: 2px solid var(--terminal-accent, #6cf);
}

body.narrative-image-lightbox-open {
  overflow: hidden;
}

@keyframes narrative-image-lightbox-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .narrative-image-lightbox {
    animation: none;
  }
  .narrative-image__img {
    transition: none;
  }
}
/* ==========================================================================
 * Dice History Panel Component
 * Shows chronological roll history with breakdown and context
 * Part of the Interactive Narrative system
 * ========================================================================== */

.dice-history-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: var(--font-mono);
}

/* Header */
.dice-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.dice-history-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.dice-history-title-icon {
  font-size: 1.2em;
}

.dice-history-clear-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dice-history-clear-btn:hover {
  color: var(--color-text-secondary);
  border-color: var(--color-border-default);
  background: rgba(255, 255, 255, 0.05);
}

/* List container */
.dice-history-list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

/* Empty state */
.dice-history-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
}

.dice-history-empty-icon {
  font-size: 2rem;
  opacity: 0.4;
  margin-bottom: var(--space-2);
}

.dice-history-empty-text {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
}

.dice-history-empty-hint {
  margin: 0;
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* Roll entry */
.dice-history-entry {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-border-subtle);
  transition: background 0.2s ease, color 0.2s ease;
}

.dice-history-entry:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* Success/failure border colors */
.dice-history-entry[data-success="true"] {
  border-left-color: #22c55e;
}

.dice-history-entry[data-success="false"] {
  border-left-color: #ef4444;
}

/* Entry header */
.dice-history-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}

.dice-history-entry-type {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.dice-history-entry-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Breakdown */
.dice-history-entry-breakdown {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.dice-history-entry-expression {
  color: var(--color-text-muted);
  margin-right: var(--space-1);
}

.dice-history-entry-arrow {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.dice-history-entry-dice {
  background: rgba(255, 255, 255, 0.1);
  padding: 1px var(--space-1);
  border-radius: var(--radius-sm);
}

.dice-history-entry-modifier {
  color: var(--color-text-muted);
}

.dice-history-entry-equals {
  color: var(--color-text-muted);
  margin: 0 var(--space-1);
}

.dice-history-entry-total {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
}

.dice-history-entry[data-success="true"] .dice-history-entry-total {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.dice-history-entry[data-success="false"] .dice-history-entry-total {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.dice-history-entry-outcome {
  margin-left: var(--space-1);
  font-weight: bold;
}

.dice-history-entry[data-success="true"] .dice-history-entry-outcome {
  color: #22c55e;
}

.dice-history-entry[data-success="false"] .dice-history-entry-outcome {
  color: #ef4444;
}

/* Reason/context */
.dice-history-entry-reason {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

/* New entry animation */
.dice-history-entry--new {
  animation: rollEntrySlideIn 0.3s ease-out;
  background: rgba(255, 215, 0, 0.15);
}

@keyframes rollEntrySlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    background: rgba(255, 215, 0, 0.3);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255, 215, 0, 0.15);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .dice-history-entry--new {
    animation: none;
  }
}
/**
 * Bloodied Indicator Styles
 * =========================
 * Visual indicator for enemies at 50% HP or below.
 * D&D 5e convention to help players gauge enemy health.
 */

/* ========================================
 * Combatant Health State Classes
 * ======================================== */

.combatant--healthy {
  /* Default state, no special styling */
}

.combatant--injured {
  --combatant-accent: var(--color-warning, #F59E0B);
}

.combatant--bloodied {
  --combatant-accent: var(--color-danger, #EF4444);
  position: relative;
}

.combatant--critical {
  --combatant-accent: var(--color-accent-error, #DC2626);
  position: relative;
}

.combatant--downed {
  --combatant-accent: var(--color-muted, #6B7280);
  opacity: 0.6;
}

/* ========================================
 * Bloodied Visual Effects
 * ======================================== */

/* Red pulsing glow for bloodied enemies */
.combatant--bloodied::before,
.combatant--critical::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;
  background: transparent;
  border: 2px solid var(--combatant-accent);
  animation: bloodied-pulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: var(--z-raised);
}

@keyframes bloodied-pulse {
  0%, 100% {
    opacity: 0.4;
    box-shadow: 0 0 5px var(--combatant-accent);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--combatant-accent);
  }
}

/* Critical state - faster pulse */
.combatant--critical::before {
  animation: critical-pulse 1s ease-in-out infinite;
}

@keyframes critical-pulse {
  0%, 100% {
    opacity: 0.5;
    box-shadow: 0 0 8px var(--combatant-accent);
    border-color: var(--combatant-accent);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px var(--combatant-accent), 0 0 30px rgba(220, 38, 38, 0.3);
    border-color: #FF6B6B;
  }
}

/* ========================================
 * Bloodied Label/Badge
 * ======================================== */

.bloodied-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 2px 6px;
  font-size: var(--font-size-2xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-danger, #EF4444);
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: var(--z-sticky);
  animation: bloodied-badge-appear 0.3s ease-out;
}

@keyframes bloodied-badge-appear {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(-5px);
  }
  60% {
    transform: scale(1.1) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.bloodied-indicator--critical {
  background: linear-gradient(135deg, #DC2626, #B91C1C);
  animation: critical-badge-flash 0.8s ease-in-out infinite;
}

@keyframes critical-badge-flash {
  0%, 100% {
    background: linear-gradient(135deg, #DC2626, #B91C1C);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    background: linear-gradient(135deg, #FF6B6B, #EF4444);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
  }
}

/* ========================================
 * Combat Tracker Integration
 * ======================================== */

/* Bloodied row highlight in combat tracker */
.combat-tracker__row.combatant--bloodied,
.initiative-tracker__entry.combatant--bloodied {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.1) 0%, transparent 100%);
}

.combat-tracker__row.combatant--critical,
.initiative-tracker__entry.combatant--critical {
  background: linear-gradient(90deg, rgba(220, 38, 38, 0.15) 0%, transparent 100%);
}

/* HP bar color changes */
.combatant--bloodied .hp-bar,
.combatant--bloodied .cs-hp-fill {
  background: linear-gradient(90deg, #EF4444, #DC2626);
}

.combatant--critical .hp-bar,
.combatant--critical .cs-hp-fill {
  background: linear-gradient(90deg, #DC2626, #991B1B);
  animation: hp-bar-critical-flash 0.8s ease-in-out infinite;
}

@keyframes hp-bar-critical-flash {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}

/* ========================================
 * Inline Combatant Card Styling
 * ======================================== */

.combatant-card.combatant--bloodied {
  border-left: 3px solid var(--color-danger, #EF4444);
}

.combatant-card.combatant--critical {
  border-left: 3px solid var(--color-accent-error, #DC2626);
  box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.2);
}

/* Health status text */
.combatant-card__health-status {
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  margin-left: var(--space-2, 8px);
}

.combatant-card__health-status--bloodied {
  color: var(--color-danger, #EF4444);
}

.combatant-card__health-status--critical {
  color: var(--color-accent-error, #DC2626);
  animation: critical-text-flash 1s ease-in-out infinite;
}

@keyframes critical-text-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .combatant--bloodied::before,
  .combatant--critical::before,
  .bloodied-indicator,
  .bloodied-indicator--critical,
  .combatant--critical .hp-bar,
  .combatant--critical .cs-hp-fill,
  .combatant-card__health-status--critical {
    animation: none;
  }

  /* Static visual indicators instead of animation */
  .combatant--bloodied::before {
    opacity: 0.6;
    box-shadow: 0 0 10px var(--combatant-accent);
  }

  .combatant--critical::before {
    opacity: 0.8;
    box-shadow: 0 0 15px var(--combatant-accent);
  }

  .bloodied-indicator {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .combatant--bloodied::before,
  .combatant--critical::before {
    border-width: 3px;
  }

  .bloodied-indicator {
    font-size: var(--font-size-xs, 11px);
    padding: 3px 8px;
  }
}
/**
 * Concentration Indicator Styles
 * ==============================
 * Visual indicator for active concentration spells.
 * D&D 5e concentration tracking with break button.
 */

/* ========================================
 * Main Indicator Container
 * ======================================== */

.concentration-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-violet-300, #C4B5FD);
  box-shadow:
    0 0 10px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: concentration-appear 0.3s ease-out;
  position: relative;
  overflow: hidden;
}

@keyframes concentration-appear {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(-5px);
  }
  60% {
    transform: scale(1.02) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Subtle magic shimmer effect */
.concentration-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: concentration-shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes concentration-shimmer {
  0%, 100% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(50%);
  }
}

/* ========================================
 * Icon with Pulse Animation
 * ======================================== */

.concentration-indicator__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.concentration-indicator__pulse {
  width: 100%;
  height: 100%;
  color: var(--color-violet-400, #A78BFA);
  animation: concentration-pulse 2s ease-in-out infinite;
}

@keyframes concentration-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px var(--color-violet-400, #A78BFA));
  }
}

/* ========================================
 * Label Content
 * ======================================== */

.concentration-indicator__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}

.concentration-indicator__spell {
  font-weight: 600;
  color: var(--color-violet-200, #DDD6FE);
  white-space: nowrap;
}

.concentration-indicator__duration {
  font-size: var(--font-size-2xs, 10px);
  color: var(--color-violet-400, #A78BFA);
  opacity: 0.8;
}

/* ========================================
 * Break Concentration Button
 * ======================================== */

.concentration-indicator__break {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: var(--space-1, 4px);
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-red-400, #F87171);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.concentration-indicator__break:hover {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.6);
  color: var(--color-red-300, #FCA5A5);
  transform: scale(1.1);
}

.concentration-indicator__break:focus-visible {
  outline: 2px solid var(--color-red-400, #F87171);
  outline-offset: 2px;
}

.concentration-indicator__break:active {
  transform: scale(0.95);
}

.concentration-indicator__break svg {
  width: 12px;
  height: 12px;
}

/* ========================================
 * Toast Customizations
 * ======================================== */

.toast--concentration {
  --toast-accent: var(--color-violet-500, #8B5CF6);
  border-left-color: var(--color-violet-500, #8B5CF6);
}

.toast--concentration-broken {
  --toast-accent: var(--color-amber-500, #F59E0B);
  border-left-color: var(--color-amber-500, #F59E0B);
}

.toast--concentration-check {
  --toast-accent: var(--color-red-500, #EF4444);
  border-left-color: var(--color-red-500, #EF4444);
  animation: toast-urgent-pulse 0.5s ease-in-out 2;
}

@keyframes toast-urgent-pulse {
  0%, 100% {
    box-shadow: var(--toast-shadow, 0 4px 6px rgba(0, 0, 0, 0.3));
  }
  50% {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(239, 68, 68, 0.4);
  }
}

/* ========================================
 * Character Sheet Integration
 * ======================================== */

.character-sheet__header .concentration-indicator {
  margin-left: auto;
}

/* Status bar integration */
.status-bar__right .concentration-indicator {
  margin-right: var(--space-2, 8px);
}

/* Combat tracker integration */
.combat-tracker__header .concentration-indicator {
  font-size: var(--font-size-xs, 11px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
}

.combat-tracker__header .concentration-indicator__icon {
  width: 16px;
  height: 16px;
}

.combat-tracker__header .concentration-indicator__break {
  width: 14px;
  height: 14px;
}

.combat-tracker__header .concentration-indicator__break svg {
  width: 10px;
  height: 10px;
}

/* ========================================
 * Compact/Mobile Variant
 * ======================================== */

.concentration-indicator--compact {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 11px);
}

.concentration-indicator--compact .concentration-indicator__icon {
  width: 16px;
  height: 16px;
}

.concentration-indicator--compact .concentration-indicator__duration {
  display: none;
}

@media (max-width: 640px) {
  .concentration-indicator {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--font-size-xs, 11px);
  }

  .concentration-indicator .concentration-indicator__icon {
    width: 16px;
    height: 16px;
  }

  .concentration-indicator .concentration-indicator__duration {
    display: none;
  }
}

/* ========================================
 * Concentration Warning State
 * (when save is required)
 * ======================================== */

.concentration-indicator--warning {
  border-color: rgba(239, 68, 68, 0.6);
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.2) 0%,
    rgba(139, 92, 246, 0.15) 100%
  );
  animation: concentration-warning-pulse 0.5s ease-in-out infinite;
}

@keyframes concentration-warning-pulse {
  0%, 100% {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
  }
  50% {
    border-color: rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .concentration-indicator,
  .concentration-indicator__pulse,
  .concentration-indicator--warning,
  .toast--concentration-check {
    animation: none;
  }

  .concentration-indicator::before {
    animation: none;
    display: none;
  }

  .concentration-indicator__pulse {
    opacity: 1;
    filter: drop-shadow(0 0 4px var(--color-violet-400, #A78BFA));
  }

  .concentration-indicator--warning {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .concentration-indicator {
    border-width: 2px;
    background: rgba(139, 92, 246, 0.25);
  }

  .concentration-indicator__spell {
    font-weight: 700;
  }

  .concentration-indicator__break {
    border-width: 2px;
  }
}

/* ========================================
 * Dark/Light Theme Adjustments
 * ======================================== */

[data-theme="light"] .concentration-indicator {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  color: var(--color-violet-700, #6D28D9);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="light"] .concentration-indicator__spell {
  color: var(--color-violet-800, #5B21B6);
}

[data-theme="light"] .concentration-indicator__duration {
  color: var(--color-violet-600, #7C3AED);
}

[data-theme="light"] .concentration-indicator__pulse {
  color: var(--color-violet-600, #7C3AED);
}

/* ========================================
 * Status Bar Widget Version
 * Compact persistent indicator in status bar
 * ======================================== */

.status-widget--concentration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.15) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--font-size-sm, 13px);
  color: var(--color-violet-300, #C4B5FD);
  animation: concentration-widget-appear 0.3s ease-out;
}

@keyframes concentration-widget-appear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.concentration-widget__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.concentration-widget__pulse {
  color: var(--color-violet-400, #A78BFA);
  animation: concentration-pulse 2s ease-in-out infinite;
}

.concentration-widget__spell {
  font-weight: 600;
  color: var(--color-violet-200, #DDD6FE);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover state for widget */
.status-widget--concentration:hover {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.25) 0%,
    rgba(168, 85, 247, 0.15) 100%
  );
  border-color: rgba(139, 92, 246, 0.6);
}

/* Mobile: more compact */
@media (max-width: 640px) {
  .status-widget--concentration {
    padding: 3px 8px;
    font-size: var(--font-size-xs, 11px);
    gap: 4px;
  }

  .concentration-widget__pulse {
    width: 12px;
    height: 12px;
  }

  .concentration-widget__spell {
    max-width: 100px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .status-widget--concentration {
    animation: none;
  }

  .concentration-widget__pulse {
    animation: none;
  }
}

/* Light theme */
[data-theme="light"] .status-widget--concentration {
  background: linear-gradient(135deg,
    rgba(139, 92, 246, 0.1) 0%,
    rgba(168, 85, 247, 0.05) 100%
  );
  color: var(--color-violet-700, #6D28D9);
  border-color: rgba(139, 92, 246, 0.5);
}

[data-theme="light"] .concentration-widget__spell {
  color: var(--color-violet-800, #5B21B6);
}

[data-theme="light"] .concentration-widget__pulse {
  color: var(--color-violet-600, #7C3AED);
}
/**
 * Spell Slot Widget
 * =================
 * Task #307: Compact spell slot visual tracker for status bar.
 *
 * Design:
 * - Horizontal layout showing all spell levels with pips
 * - Purple gem aesthetic matching spellbook
 * - Compact size suitable for status bar
 * - Real-time updates via WebSocket events
 */

/* Widget Container */
.spell-slot-widget {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 28px;
}

.spell-slot-widget:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-purple);
}

.spell-slot-widget:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 2px;
}

/* Widget Label */
.spell-slot-widget__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Compact trigger row (icon + summary text). Used in the status-bar markup;
 * the popover-grid view lives below. Rendered as a <button> for keyboard
 * accessibility but visually integrates into the spell-slot chip. */
.spell-slot-widget__compact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.spell-slot-widget__compact:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* B6: hover + active feedback on the inner button (the chip wrapper has its own
 * hover; the inner element previously had no interactive states of its own). */
.spell-slot-widget__compact:hover {
  color: var(--color-accent-purple);
}

.spell-slot-widget__compact:active {
  transform: scale(0.97);
}

.spell-slot-widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-purple);
}

.spell-slot-widget__icon .svg-icon {
  width: 14px;
  height: 14px;
}

/* Slots Container - All Levels */
.spell-slot-widget__slots {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Individual Slot Level Group */
.spell-slot-widget__level {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Level Number Label */
.spell-slot-widget__level-num {
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  min-width: 10px;
  text-align: center;
}

/* Pips Container */
.spell-slot-widget__pips {
  display: flex;
  gap: 2px;
}

/* Individual Pip */
.spell-slot-widget__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

/* Filled Pip - Available Slot */
.spell-slot-widget__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 4px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Expended Pip - Used Slot */
.spell-slot-widget__pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
}

/* Summary Text (alternative compact view) */
.spell-slot-widget__summary {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.spell-slot-widget__summary-total {
  color: var(--color-accent-purple);
  font-weight: var(--font-weight-bold);
}

/* ========================================
 * Expanded Popover View
 * ======================================== */

.spell-slot-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-dropdown);
  min-width: 200px;
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

.spell-slot-widget--expanded .spell-slot-popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.spell-slot-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}

.spell-slot-popover__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-slot-popover__subtitle {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Full Slot Grid in Popover */
.spell-slot-popover__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.spell-slot-popover__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

.spell-slot-popover__level {
  min-width: 50px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
}

.spell-slot-popover__pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-popover__pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.spell-slot-popover__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(198, 120, 221, 1),
    rgba(139, 69, 173, 0.8)
  );
  box-shadow:
    0 0 6px rgba(198, 120, 221, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
  animation: gemSparkle 3s ease-in-out infinite;
}

.spell-slot-popover__pip--expended {
  background: rgba(139, 69, 173, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.spell-slot-popover__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  min-width: 30px;
  text-align: right;
}

/* Empty State */
.spell-slot-widget--empty {
  opacity: 0.6;
  cursor: default;
}

.spell-slot-widget--empty:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
}

/* ========================================
 * Slot Usage Animation
 * ======================================== */

.spell-slot-widget__pip--using {
  animation: pipUsed 0.5s ease-out;
}

@keyframes pipUsed {
  0% {
    transform: scale(1);
    box-shadow: 0 0 4px rgba(198, 120, 221, 0.6);
  }
  50% {
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(198, 120, 221, 0.9);
  }
  100% {
    transform: scale(1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
  }
}

/* Slot Restoration Animation */
.spell-slot-widget__pip--restoring {
  animation: pipRestored 0.5s ease-out;
}

@keyframes pipRestored {
  0% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 12px rgba(198, 120, 221, 0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* ========================================
 * Warlock Pact Magic Variant
 * ======================================== */

.spell-slot-widget--pact-magic .spell-slot-widget__label {
  color: var(--color-accent-cyan);
}

.spell-slot-widget--pact-magic .spell-slot-widget__pip--filled {
  background: radial-gradient(
    circle at 30% 30%,
    rgba(86, 182, 194, 1),
    rgba(34, 139, 150, 0.8)
  );
  box-shadow:
    0 0 4px rgba(86, 182, 194, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

/* The compact trigger always shows icon + summary (e.g. "Slots" or "3/5").
 * The expanded `__slots` pip strip is hidden on narrow screens — users open
 * the popover instead. */
.spell-slot-widget__summary {
  display: inline;
}

@media (max-width: 768px) {
  .spell-slot-widget__slots {
    display: none;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .spell-slot-widget,
  .spell-slot-widget__pip,
  .spell-slot-popover,
  .spell-slot-popover__pip {
    transition: none;
  }

  .spell-slot-popover__pip--filled,
  .spell-slot-widget__pip--using,
  .spell-slot-widget__pip--restoring {
    animation: none;
  }
}

/* ========================================
 * Gem Sparkle Animation (shared with spellbook)
 * ======================================== */

/**
 * Scroll to Latest Button
 * =======================
 * Floating button that appears when user scrolls up in narrative.
 * Allows quick return to most recent messages.
 * Designed to be unobtrusive - small, translucent, and out of the way.
 */

/* ========================================
 * Main Button Styles
 * ======================================== */

.scroll-to-latest {
  position: absolute;
  bottom: calc(var(--space-4, 16px) + 60px); /* Above input area */
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: var(--z-overlay, 50);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 4px 12px;

  background: var(--color-surface-elevated, #1F2937);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-full, 9999px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  color: var(--color-text-secondary, #9CA3AF);
  font-size: var(--font-size-2xs, 11px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.scroll-to-latest.visible {
  opacity: 0.7;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.scroll-to-latest:hover {
  opacity: 1;
  color: var(--color-text-primary, #F9FAFB);
  border-color: var(--color-border-subtle, rgba(255, 255, 255, 0.15));
}

.scroll-to-latest:focus-visible {
  outline: 2px solid var(--color-primary, #3B82F6);
  outline-offset: 2px;
  opacity: 1;
}

.scroll-to-latest:active {
  transform: translateX(-50%) translateY(1px);
  opacity: 1;
}

/* ========================================
 * Icon Styles
 * ======================================== */

.scroll-to-latest__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.scroll-to-latest:hover .scroll-to-latest__icon {
  opacity: 1;
}

.scroll-to-latest__icon svg {
  width: 100%;
  height: 100%;
}

/* ========================================
 * Text Label
 * ======================================== */

.scroll-to-latest__text {
  line-height: 1;
}

/* ========================================
 * Badge Variant (with unread count)
 * ======================================== */

.scroll-to-latest__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--space-1, 4px);
  margin-left: 2px;

  background: var(--color-primary, #3B82F6);
  border-radius: var(--radius-full, 9999px);

  font-size: var(--font-size-2xs, 10px);
  font-weight: 700;
  color: white;
}

.scroll-to-latest:hover .scroll-to-latest__badge {
  background: white;
  color: var(--color-primary, #3B82F6);
}

/* ========================================
 * Compact Mobile Variant
 * ======================================== */

@media (max-width: 480px) {
  .scroll-to-latest {
    padding: 4px 10px;
    bottom: calc(var(--space-3, 12px) + 50px);
  }

  .scroll-to-latest__text {
    display: none;
  }

  .scroll-to-latest__icon {
    width: 14px;
    height: 14px;
  }
}

/* ========================================
 * Accessibility - Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .scroll-to-latest {
    transition: none;
  }

  .scroll-to-latest.visible {
    transform: translateX(-50%);
  }

  .scroll-to-latest:active {
    transform: translateX(-50%);
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .scroll-to-latest {
    border-width: 2px;
    font-weight: 600;
  }

  .scroll-to-latest.visible {
    opacity: 1;
  }
}

/* ========================================
 * Light Theme
 * ======================================== */

[data-theme="light"] .scroll-to-latest {
  background: var(--color-surface, #FFFFFF);
  border-color: var(--color-border, rgba(0, 0, 0, 0.08));
  color: var(--color-text-secondary, #6B7280);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .scroll-to-latest:hover {
  color: var(--color-text-primary, #111827);
  border-color: var(--color-border, rgba(0, 0, 0, 0.15));
}
/**
 * Play Mode — Main Container, Badges, Timer, Actions & Dropdown Menus
 */

/* ============================================
 * Play Mode Indicator Styles
 * ============================================
 * Compact display for multiplayer play mode with
 * scene type badges, turn timer, and preset indicators.
 */

/* Main Container */
.play-mode-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

/* Play Mode Badge */
.play-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.play-mode-badge.realtime {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.play-mode-badge.turn_based {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.play-mode-badge.async {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.play-mode-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
}

.play-mode-label {
  font-weight: var(--font-weight-medium);
}

.play-mode-turn,
.play-mode-queue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
}

/* Async queue ready count styling */
.play-mode-queue {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Turn-based current turn styling */
.play-mode-turn {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Scene Type Badge */
.scene-type-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.scene-type-badge.combat {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.scene-type-badge.exploration {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.scene-type-badge.social {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.scene-type-badge.puzzle {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.scene-type-badge.cutscene {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
  border: 1px solid rgba(236, 72, 153, 0.3);
}

.scene-type-badge.rest {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.scene-type-badge.travel {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Turn Timer */
.turn-timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.turn-timer.hidden {
  display: none;
}

.timer-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
}

.timer-display {
  min-width: 3ch;
  text-align: center;
}

.timer-display.timer-warning {
  color: #eab308;
  animation: pulse-warning 1s ease-in-out infinite;
}

.timer-display.timer-critical {
  color: #ef4444;
  animation: pulse-critical 0.5s ease-in-out infinite;
}

.timer-display.timer-expired {
  color: #ef4444;
  opacity: 0.6;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes pulse-critical {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Preset Badge */
.preset-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.preset-badge.casual_async {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6;
}

.preset-badge.intense_combat {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.preset-badge.relaxed_exploration {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.preset-badge.balanced {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

/* Your Turn Indicator */
.your-turn-indicator {
  padding: var(--space-2) var(--space-3);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
  animation: your-turn-pulse 1.5s ease-in-out infinite;
}

.your-turn-indicator.hidden {
  display: none;
}

@keyframes your-turn-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.7);
    transform: scale(1.02);
  }
}

/* Waiting For Indicator */
.waiting-for-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: rgba(234, 179, 8, 0.15);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius-md);
  color: #eab308;
  font-size: var(--font-size-sm);
  animation: waiting-pulse 2s ease-in-out infinite;
}

.waiting-for-indicator.hidden {
  display: none;
}

.waiting-for-indicator .waiting-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  animation: waiting-spin 3s linear infinite;
}

.waiting-for-indicator .waiting-text {
  font-weight: var(--font-weight-medium);
}

.waiting-for-indicator .waiting-text strong {
  color: #fbbf24;
  font-weight: var(--font-weight-bold);
}

@keyframes waiting-pulse {
  0%, 100% {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.4);
  }
  50% {
    background: rgba(234, 179, 8, 0.25);
    border-color: rgba(234, 179, 8, 0.6);
  }
}

@keyframes waiting-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Play Mode Actions */
.play-mode-actions {
  display: flex;
  gap: var(--space-1);
  margin-left: auto;
}

/* Dropdown Menus */
.play-mode-menu,
.preset-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-panel);
  min-width: 200px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.play-mode-menu.hidden,
.preset-menu.hidden {
  display: none;
}

.menu-header {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-2);
}

.play-mode-option,
.preset-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.play-mode-option:hover,
.preset-option:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.play-mode-option.active,
.preset-option.active {
  background: rgba(97, 175, 239, 0.1);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.mode-desc,
.preset-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
/**
 * Play Mode — Turn Status Bar, Pending Actions, Member Badges & Party Panel
 */


/* Turn Status Bar (in party panel) */
.turn-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
  font-size: var(--font-size-sm);
}

/* In-flight / Pending Actions List */
.pending-actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.pending-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.pending-action-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.pending-action-item .action-character {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.pending-action-item .action-type {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.pending-action-item .action-status {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.pending-action-item .action-status.pending {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.pending-action-item .action-status.processing {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.pending-action-item .action-status.completed {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.pending-actions-empty {
  text-align: center;
  padding: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
}

.turn-number {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.turn-status-waiting {
  color: var(--color-text-muted);
}

.turn-status-allready {
  color: #22c55e;
}

.turn-status-processing {
  color: #3b82f6;
}

.submission-progress {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.progress-segment {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
}

.progress-segment.filled {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.turn-timer-display {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.turn-timer-display.timer-low {
  color: #ef4444;
}

/* Member Action Badge */
.member-action-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.member-action-badge.badge-waiting {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.member-action-badge.badge-ready {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.member-action-badge.badge-acting {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.member-action-badge.badge-done {
  background: rgba(107, 114, 128, 0.15);
  color: #6b7280;
}

/* Their Turn Highlight */
.party-member-card.their-turn {
  border-left: 3px solid var(--color-accent-primary);
  background: rgba(97, 175, 239, 0.05);
}

/* Read-only Sheet (party member view) */
.ro-sheet {
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.ro-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.ro-sheet__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ro-sheet__race {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ro-sheet__class {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.ro-sheet__bg {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__conditions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ro-sheet__condition {
  padding: 2px 6px;
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.ro-sheet__stats-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ro-sheet__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  flex: 1;
}

.ro-sheet__stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
}

.ro-sheet__stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__abilities {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ro-sheet__ability {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-2);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
}

.ro-sheet__ability-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.ro-sheet__ability-mod {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.ro-sheet__ability-score {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__section {
  margin-bottom: var(--space-4);
}

.ro-sheet__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.ro-sheet__skills-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.ro-sheet__skill {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ro-sheet__skill.proficient {
  color: var(--color-text-primary);
}

.ro-sheet__skill-prof {
  color: var(--color-accent-primary);
}

.ro-sheet__skill-bonus {
  font-weight: var(--font-weight-semibold);
  min-width: 2.5ch;
}

.ro-sheet__equipment {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.ro-sheet__equip-item {
  padding: 2px 6px;
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.ro-sheet__none {
  color: var(--color-text-muted);
  font-style: italic;
}

.ro-sheet__feature {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.ro-sheet__feature:last-child {
  border-bottom: none;
}

.ro-sheet__feature-name {
  color: var(--color-text-primary);
}

.ro-sheet__feature-level {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.ro-sheet__spell-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.ro-sheet__spell-group {
  margin-bottom: var(--space-1);
}

.ro-sheet__spell-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* Loading state */
.sheet-loading {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}

/**
 * Play Mode — Party Indicator, Turn Status Banner & Input Blocking Overlay
 */

/* ============================================
 * Play Mode Indicator within Party Status Panel
 * ============================================ */

/* Full play mode indicator in party panel context */
.panel-party-status .play-mode-indicator {
  position: relative;
  flex-wrap: wrap;
  margin: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

/* Simple play mode indicator (JS-populated fallback) */
.play-mode-indicator-simple {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
}

.play-mode-indicator-simple:empty {
  display: none;
}

.play-mode-indicator-simple .mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.play-mode-indicator-simple .mode-badge.realtime {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.play-mode-indicator-simple .mode-badge.turn_based {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.play-mode-indicator-simple .mode-badge.async {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

/* ============================================
 * Turn Status Banner
 * ============================================
 * Prominent banner above input showing whose turn it is
 */

.turn-status-banner {
  margin: 0 var(--space-3);
  margin-bottom: var(--space-2);
}

.turn-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.turn-banner.hidden {
  display: none;
}

/* Your Turn - Green, attention-grabbing */
.turn-banner--your-turn {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.25) 100%);
  border: 2px solid #22c55e;
  color: #22c55e;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
  animation: your-turn-glow 2s ease-in-out infinite;
}

.turn-banner--your-turn .turn-banner__icon {
  font-size: 1.5em;
  animation: sword-swing 1s ease-in-out infinite;
}

.turn-banner--your-turn .turn-banner__text {
  font-size: var(--font-size-lg);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

@keyframes your-turn-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.5);
  }
}

@keyframes sword-swing {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* Flash animation when turn starts */
.turn-banner--flash {
  animation: turn-flash 0.5s ease-out 3;
}

@keyframes turn-flash {
  0%, 100% {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25) 0%, rgba(22, 163, 74, 0.25) 100%);
  }
  50% {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5) 0%, rgba(22, 163, 74, 0.5) 100%);
    transform: scale(1.02);
  }
}

/* Waiting for another player - Amber */
.turn-banner--waiting {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(202, 138, 4, 0.15) 100%);
  border: 2px solid rgba(234, 179, 8, 0.5);
  color: #eab308;
}

.turn-banner--waiting .turn-banner__icon {
  animation: waiting-rotate 3s linear infinite;
}

.turn-banner--waiting .turn-banner__text strong {
  color: #fbbf24;
  font-weight: var(--font-weight-bold);
}

@keyframes waiting-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Urgency states for long turns */
.turn-banner--urgent {
  border-color: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.3) 100%);
}

.turn-banner--critical {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
  animation: critical-pulse 0.5s ease-in-out infinite;
}

@keyframes critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.turn-banner__elapsed {
  margin-left: auto;
  font-size: var(--font-size-sm);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  min-width: 4ch;
  text-align: center;
}

/* ============================================
 * Input Blocking Overlay
 * ============================================
 * Shown when it's not the player's turn
 */

/* position:relative for the input-blocked overlay containing block.
   On mobile (<768px), .input-area uses position:sticky instead
   (see mobile_enhancements.css), which also establishes a
   containing block for the absolute overlay. */
@media (min-width: 769px) {
  .input-area {
    position: relative;
  }
}

.input-blocked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
  z-index: var(--z-sticky);
  cursor: not-allowed;
}

.input-blocked-overlay.hidden {
  display: none;
}

.input-blocked-overlay__text {
  padding: var(--space-2) var(--space-4);
  background: rgba(234, 179, 8, 0.2);
  border: 1px solid rgba(234, 179, 8, 0.4);
  border-radius: var(--radius-md);
  color: #eab308;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  animation: overlay-pulse 2s ease-in-out infinite;
}

@keyframes overlay-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

/* Responsive adjustments for play mode indicator */
@media (max-width: 768px) {
  .play-mode-indicator {
    flex-direction: column;
    align-items: flex-start;
  }

  .play-mode-actions {
    margin-left: 0;
    margin-top: var(--space-2);
    width: 100%;
  }

  .play-mode-menu,
  .preset-menu {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
    overflow-y: auto;
  }
}
/**
 * Play Mode — Import Hub
 * =======================
 * Compact display for multiplayer play mode with scene type badges,
 * turn timer, preset indicators, and input blocking overlays.
 *
 * Decomposed into focused files under play_mode/ for maintainability.



 */
/*
 * Spectator-mode overlay (#3776 Phase 2 of #3764).
 * ================================================
 *
 * Reuses the .input-blocked-overlay shell from _play_mode.css but tints
 * to the spectator accent (purple) instead of the wait-your-turn yellow,
 * and adds a compact eye icon. The DM-controlled tooltip on hover
 * explains why the input is read-only ("the DM has to pull you in").
 *
 * Rendered by app/views/terminal/panels/narrative/_input_area.html.erb
 * when session.current_room == 'spectator_view' OR session cannot
 * participate (true spectators + late-joiner-spectators).
 *
 * Server-side enforcement lives in
 * app/channels/concerns/terminal_dm/guards.rb#require_participant!
 * — this file is purely visual.
 */

.input-blocked-overlay--spectator .input-blocked-overlay__text {
  background: rgba(167, 139, 250, 0.2);
  border-color: rgba(167, 139, 250, 0.4);
  color: #a78bfa;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  animation: none; /* Static — spectators are not waiting on a turn */
}

.input-blocked-overlay__icon {
  display: inline-flex;
  align-items: center;
  width: 1em;
  height: 1em;
}

/* BEM `--hidden` state class — canonical mechanism per #4268 finding 7.1.
   Mirrors the `.hidden` rule in _play_mode.css (kept there for back-compat
   with turn_status_controller.js, which toggles generic `.hidden`). New
   callers should toggle `.input-blocked-overlay--hidden`. */
.input-blocked-overlay--hidden {
  display: none;
}
/* ========================================
 * UI Pointer - Contextual Hints System
 * Used by AI DM to guide players to UI elements
 * ======================================== */

.ui-pointer {
  position: fixed;
  /* Floating UI layer (1000) — above panels and popovers but below modal overlays.
   * Tutorial pointers shouldn't obscure boot sequence or command palette (--z-sky=10000).
   * Part of the #2169 z-token consolidation followed through in tutorial revival (#2278). */
  z-index: var(--z-floating);
  max-width: 280px;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
  pointer-events: auto;
}

.ui-pointer--visible {
  opacity: 1;
  transform: translateY(0);
}

.ui-pointer--hiding {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* ========================================
 * Tooltip Style (default)
 * ======================================== */

.ui-pointer--tooltip {
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(229, 192, 123, 0.12) 100%
  );
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ui-pointer--tooltip .ui-pointer__arrow {
  position: absolute;
  width: 0;
  height: 0;
}

/* Arrow positions */
.ui-pointer--tooltip[data-position="bottom"] .ui-pointer__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="top"] .ui-pointer__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="left"] .ui-pointer__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid rgba(255, 215, 0, 0.3);
}

.ui-pointer--tooltip[data-position="right"] .ui-pointer__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid rgba(255, 215, 0, 0.3);
}

/* ========================================
 * Arrow Style (prominent pointing)
 * ======================================== */

.ui-pointer--arrow {
  padding: var(--space-2) var(--space-3);
  background: var(--color-gold);
  color: var(--color-bg-dark);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.ui-pointer--arrow .ui-pointer__text {
  color: var(--color-bg-dark);
  font-weight: 600;
}

.ui-pointer--arrow .ui-pointer__button {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
  color: var(--color-bg-dark);
}

.ui-pointer--arrow .ui-pointer__arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.ui-pointer--arrow[data-position="bottom"] .ui-pointer__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid var(--color-gold);
}

.ui-pointer--arrow[data-position="top"] .ui-pointer__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--color-gold);
}

/* ========================================
 * Spotlight Style (dims surroundings)
 * ======================================== */

.ui-pointer--spotlight {
  padding: var(--space-3);
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid var(--color-gold);
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
}

.ui-pointer--spotlight::before {
  content: '';
  position: fixed;
  top: var(--spotlight-top, 0);
  left: var(--spotlight-left, 0);
  width: var(--spotlight-width, 100px);
  height: var(--spotlight-height, 50px);
  border-radius: 8px;
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, 0.7),
    0 0 20px 5px rgba(255, 215, 0, 0.3);
  pointer-events: none;
}

.ui-pointer-spotlight-target {
  position: relative;
  /* One layer above the pointer so the highlighted target stays visible. */
  z-index: var(--z-floating-above);
}

/* ========================================
 * Pulse Style (gentle attention)
 * ======================================== */

.ui-pointer--pulse {
  padding: var(--space-3);
  background: linear-gradient(
    135deg,
    rgba(100, 200, 255, 0.15) 0%,
    rgba(150, 220, 255, 0.1) 100%
  );
  border: 1px solid rgba(100, 200, 255, 0.4);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
}

.ui-pointer-pulse-target {
  animation: ui-pointer-pulse-target 2s ease-in-out infinite;
}

@keyframes ui-pointer-pulse-target {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(100, 200, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(100, 200, 255, 0);
  }
}

/* ========================================
 * Content Elements
 * ======================================== */

.ui-pointer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-pointer__text {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  line-height: 1.5;
}

.ui-pointer__button {
  align-self: flex-end;
  padding: var(--space-1-5) var(--space-3);
  background: rgba(255, 215, 0, 0.2);
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 4px;
  color: var(--color-gold);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.ui-pointer__button:hover {
  background: rgba(255, 215, 0, 0.3);
  border-color: var(--color-gold);
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.ui-pointer__button:active {
  transform: scale(0.98);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ui-pointer {
    transition: opacity 0.1s ease-out;
    transform: none;
  }

  .ui-pointer--visible {
    transform: none;
  }

  .ui-pointer-pulse-target {
    animation: none;
    box-shadow: 0 0 0 3px rgba(100, 200, 255, 0.5);
  }
}

/* ========================================
 * Mobile Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .ui-pointer {
    max-width: calc(100vw - 32px);
  }

  .ui-pointer__text {
    font-size: var(--font-size-xs);
  }
}
/**
 * Context-Aware Theming
 * ======================
 * Phase 4 P2-14: Dynamic theme shifts based on game context
 *
 * Usage:
 *   <div data-context="combat">...</div>
 *   <div data-context="rest">...</div>
 *   <div data-context="dungeon">...</div>
 *   <div data-context="social">...</div>
 */

/* ========================================
 * COMBAT CONTEXT
 * Red/orange aggressive theme
 * ======================================== */

[data-context="combat"] {
  --context-accent: var(--color-accent-error);
  --context-glow: 0 0 12px rgba(224, 108, 117, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-error) 40%, var(--color-border-default));
  --context-bg-tint: rgba(224, 108, 117, 0.03);
}

[data-context="combat"] .panel,
[data-context="combat"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 60px var(--context-bg-tint);
}

[data-context="combat"] .panel-header {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent-error) 8%, transparent),
    transparent
  );
}

/* Combat pulse animation for emphasis */
[data-context="combat"] .combat-indicator {
  animation: combatPulse 2s ease-in-out infinite;
}

@keyframes combatPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; filter: brightness(1.2); }
}

/* ========================================
 * REST/TAVERN CONTEXT
 * Warm golden theme
 * ======================================== */

[data-context="rest"],
[data-context="tavern"] {
  --context-accent: var(--color-gold);
  --context-glow: 0 0 12px rgba(255, 215, 0, 0.3);
  --context-border: color-mix(in srgb, var(--color-gold) 30%, var(--color-border-default));
  --context-bg-tint: rgba(255, 215, 0, 0.02);
}

[data-context="rest"] .panel,
[data-context="tavern"] .panel,
[data-context="rest"] .narrative-panel,
[data-context="tavern"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 80px var(--context-bg-tint);
}

/* Cozy flicker effect for tavern */
[data-context="tavern"] .narrative-entry--dm::before {
  animation: tavernFlicker 4s ease-in-out infinite;
}

@keyframes tavernFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
  75% { opacity: 0.95; }
}

/* ========================================
 * DUNGEON/EXPLORATION CONTEXT
 * Cool blue/cyan mysterious theme
 * ======================================== */

[data-context="dungeon"],
[data-context="exploration"] {
  --context-accent: var(--color-accent-cyan);
  --context-glow: 0 0 12px rgba(86, 182, 194, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-cyan) 30%, var(--color-border-default));
  --context-bg-tint: rgba(86, 182, 194, 0.02);
}

[data-context="dungeon"] .panel,
[data-context="exploration"] .panel,
[data-context="dungeon"] .narrative-panel,
[data-context="exploration"] .narrative-panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 80px var(--context-bg-tint);
}

/* Subtle mystery effect */
[data-context="dungeon"] .narrative-entry--dm {
  text-shadow: 0 0 20px rgba(86, 182, 194, 0.1);
}

/* ========================================
 * SOCIAL/DIALOGUE CONTEXT
 * Purple/warm social theme
 * ======================================== */

[data-context="social"],
[data-context="dialogue"] {
  --context-accent: var(--color-accent-purple);
  --context-glow: 0 0 12px rgba(198, 120, 221, 0.4);
  --context-border: color-mix(in srgb, var(--color-accent-purple) 25%, var(--color-border-default));
  --context-bg-tint: rgba(198, 120, 221, 0.02);
}

[data-context="social"] .panel,
[data-context="dialogue"] .panel {
  border-color: var(--context-border);
}

/* ========================================
 * DANGER/BOSS CONTEXT
 * Deep red ominous theme
 * ======================================== */

[data-context="danger"],
[data-context="boss"] {
  --context-accent: #8B0000;
  --context-glow: 0 0 20px rgba(139, 0, 0, 0.5);
  --context-border: color-mix(in srgb, #8B0000 50%, var(--color-border-default));
  --context-bg-tint: rgba(139, 0, 0, 0.04);
}

[data-context="danger"] .panel,
[data-context="boss"] .panel {
  border-color: var(--context-border);
  box-shadow: inset 0 0 100px var(--context-bg-tint);
}

/* Ominous pulsing for boss encounters */
[data-context="boss"] .narrative-panel {
  animation: bossOmen 3s ease-in-out infinite;
}

@keyframes bossOmen {
  0%, 100% {
    box-shadow: inset 0 0 100px rgba(139, 0, 0, 0.04);
  }
  50% {
    box-shadow: inset 0 0 120px rgba(139, 0, 0, 0.08);
  }
}

/* ========================================
 * REDUCED MOTION SUPPORT
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  [data-context] .combat-indicator,
  [data-context="tavern"] .narrative-entry--dm::before,
  [data-context="boss"] .narrative-panel {
    animation: none;
  }
}
/* ============================================================================
 * ENCOUNTER DIFFICULTY INDICATOR
 * ============================================================================
 * Visual indicator showing the difficulty level of combat encounters
 * Based on D&D 5e encounter building rules (DMG p.82)
 *
 * Task #312: Encounter Difficulty Indicator
 * --------------------------------------------------------------------------*/

/* Difficulty badge in combat panel header */
.difficulty-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--font-size-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.difficulty-indicator__icon {
  font-size: 14px;
  line-height: 1;
}

.difficulty-indicator__label {
  line-height: 1;
}

/* Difficulty levels with color coding */
.difficulty-indicator--trivial {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-text-secondary, #9CA3AF);
  border: 1px solid rgba(107, 114, 128, 0.3);
}

.difficulty-indicator--easy {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success, #22C55E);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.difficulty-indicator--medium {
  background: rgba(234, 179, 8, 0.15);
  color: var(--color-warning, #EAB308);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.difficulty-indicator--hard {
  background: rgba(249, 115, 22, 0.15);
  color: var(--color-orange, #F97316);
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.difficulty-indicator--deadly {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger, #EF4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: deadly-pulse 2s ease-in-out infinite;
}

/* Pulsing animation for deadly encounters */
@keyframes deadly-pulse {
  0%, 100% {
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
  }
}

/* Tooltip for additional context */
.difficulty-indicator[title] {
  cursor: help;
}

/* Combat header integration */
.combat__header {
  position: relative;
}

.combat__difficulty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .difficulty-indicator {
    padding: 3px 8px;
    font-size: var(--font-size-xs, 10px);
    gap: 4px;
  }

  .difficulty-indicator__icon {
    font-size: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .difficulty-indicator--deadly {
    animation: none;
  }

  .difficulty-indicator {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .difficulty-indicator {
    border-width: 2px;
  }

  .difficulty-indicator--trivial {
    background: rgba(107, 114, 128, 0.25);
  }

  .difficulty-indicator--easy {
    background: rgba(34, 197, 94, 0.25);
  }

  .difficulty-indicator--medium {
    background: rgba(234, 179, 8, 0.25);
  }

  .difficulty-indicator--hard {
    background: rgba(249, 115, 22, 0.25);
  }

  .difficulty-indicator--deadly {
    background: rgba(239, 68, 68, 0.25);
  }
}
/**
 * Difficulty Dropdown Widget
 * ==========================
 * Status-bar control for selecting solo-play difficulty (Story / Balanced /
 * Challenging / Hardcore). Renders a chip-style trigger that matches the
 * surrounding `.feedback-icon-btn` / `.panels-icon-btn` aesthetic, plus a
 * popover menu that slides down beneath the trigger.
 *
 * Markup contract (see `terminal/organisms/status_bar/_widgets_and_badges`):
 *   .difficulty-dropdown-widget
 *     .difficulty-dropdown-widget__trigger[data-difficulty="..."]
 *       .difficulty-dropdown-widget__icon
 *       .difficulty-dropdown-widget__name
 *     .difficulty-dropdown[role="menu"]
 *       .difficulty-option[data-difficulty="..."]
 *         .difficulty-name
 *         .difficulty-desc
 *
 * Controller: `app/javascript/controllers/difficulty_dropdown_controller.js`
 * (toggles `.open` on the menu element).
 */

.difficulty-dropdown-widget {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger button — matches status-bar chip aesthetic but wider for label.
 * Q13: drop var() fallbacks (`, 4px` / `, 8px`) — spacing tokens are unconditionally defined.
 * Q17: bump font-size to sm so the active difficulty reads as primary status. */
.difficulty-dropdown-widget__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.difficulty-dropdown-widget__trigger:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Q15: Active-press state — small scale-down for tactile feedback. */
.difficulty-dropdown-widget__trigger:active {
  transform: scale(0.97);
}

.difficulty-dropdown-widget__trigger:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.difficulty-dropdown-widget__trigger[aria-expanded="true"] {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.difficulty-dropdown-widget__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.difficulty-dropdown-widget__icon .svg-icon {
  width: 14px;
  height: 14px;
}

.difficulty-dropdown-widget__name {
  white-space: nowrap;
}

/* Tier-specific tint on the trigger (uses active difficulty data-attribute).
 * Q9: rgb values match project accent tokens (primary / secondary / orange / error)
 * instead of the Tailwind palette these started as. */
.difficulty-dropdown-widget__trigger[data-difficulty="story"] {
  border-color: rgba(90, 159, 216, 0.4);
}

.difficulty-dropdown-widget__trigger[data-difficulty="balanced"] {
  border-color: rgba(138, 181, 110, 0.4);
}

.difficulty-dropdown-widget__trigger[data-difficulty="challenging"] {
  border-color: rgba(192, 138, 88, 0.4);
}

.difficulty-dropdown-widget__trigger[data-difficulty="hardcore"] {
  border-color: rgba(207, 96, 104, 0.5);
}

/* Popover menu — slides down beneath the trigger.
 * Q11: shadow uses elevation token for system consistency.
 * Q12: literal px values replaced with spacing tokens.
 * Q13: var() fallbacks dropped — tokens are unconditionally defined. */
.difficulty-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1-5));
  right: 0;
  z-index: var(--z-dropdown, 120);
  min-width: 240px;
  padding: var(--space-1);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-floating, 0 8px 20px rgba(0, 0, 0, 0.4));
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--space-2) * -1));
  pointer-events: none;
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    visibility var(--transition-fast);
}

.difficulty-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Dropdown menu items.
 * Q12/Q13: spacing tokens, no var() fallbacks. */
.difficulty-option {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-align: left;
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast);
}

.difficulty-option:hover {
  background: var(--color-bg-hover);
}

/* B5: Restore an explicit, visible focus ring instead of hover-substitution.
 * outline-offset: -2px keeps the ring inside the option's rounded edge. */
.difficulty-option:focus-visible {
  background: var(--color-bg-hover);
  outline: 2px solid var(--color-accent-primary);
  outline-offset: -2px;
}

.difficulty-option.active {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
}

.difficulty-name {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
}

.difficulty-desc {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: 1.35;
}

.difficulty-option.active .difficulty-name {
  color: var(--color-accent-primary);
}

/* Q10: Removed no-op `border-left-color` rules on options — the option
 * border was 1px solid transparent so this property never painted.
 * The trigger keeps its tier-tinted full border above as the canonical
 * tier signal; options use background + active state instead. */

/* Mobile/narrow viewport — collapse trigger to icon-only at very narrow widths.
 * Q13: drop var() fallback. */
@media (max-width: 480px) {
  .difficulty-dropdown-widget__trigger {
    padding: 0 var(--space-1);
  }

  .difficulty-dropdown-widget__name {
    display: none;
  }

  .difficulty-dropdown {
    min-width: 220px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .difficulty-dropdown,
  .difficulty-dropdown-widget__trigger,
  .difficulty-option {
    transition: none;
  }
}
/**
 * Ghost Toggle
 * ============
 * Status-bar control for cycling panel transparency
 * (off -> ethereal -> wisp -> shade -> phantom -> off).
 *
 * The Stimulus controller sets `data-ghost-level` on the `.terminal-container`
 * element, so the level overrides below cover both floating panels
 * (`.floating-panel`) and docked grid panels (`.grid-panel`).
 *
 * Extracted from `terminal/organisms/_status_bar.css` (#3870) to keep the
 * status-bar organism within the file-size cap.
 */

.ghost-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  /* #4391: raised from --color-text-secondary (~2.8:1) to --color-text-primary
     (~9.2:1 on bg-tertiary) for WCAG AA icon contrast. */
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

.ghost-toggle-btn:active {
  transform: scale(0.95);
}

.ghost-toggle-btn .svg-icon {
  width: 16px;
  height: 16px;
}

.ghost-toggle-btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.ghost-toggle-btn--active {
  background: rgba(90, 159, 216, 0.1);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.ghost-toggle-btn:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Q16: Per-level visual differentiation so the active ghost tier reads at a glance.
 * Mirrors Stimulus controller's data-terminal--ghost-toggle-level-value attribute. */
.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="ethereal"] {
  background: var(--color-accent-subtle);
  opacity: 0.7;
}

.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="wisp"] {
  background: var(--color-accent-subtle);
  opacity: 0.85;
}

.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="shade"] {
  background: var(--color-accent-subtle);
  opacity: 1;
}

.ghost-toggle-btn[data-terminal--ghost-toggle-level-value="phantom"] {
  background: var(--color-accent-bg);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

/* Ghost Level Overrides on Grid Container
 * Applies to both floating panels and docked grid panels. */
[data-ghost-level="ethereal"] .floating-panel,
[data-ghost-level="ethereal"] .grid-panel {
  opacity: var(--ghost-opacity-ethereal);
  transition: opacity var(--ghost-transition);
}

[data-ghost-level="wisp"] .floating-panel,
[data-ghost-level="wisp"] .grid-panel {
  opacity: var(--ghost-opacity-wisp);
  transition: opacity var(--ghost-transition);
}

[data-ghost-level="shade"] .floating-panel,
[data-ghost-level="shade"] .grid-panel {
  opacity: var(--ghost-opacity-shade);
  transition: opacity var(--ghost-transition);
}

[data-ghost-level="phantom"] .floating-panel,
[data-ghost-level="phantom"] .grid-panel {
  opacity: var(--ghost-opacity-phantom);
  transition: opacity var(--ghost-transition);
}

/* Ghost panels become solid on hover/focus-within so users can read them. */
[data-ghost-level] .floating-panel:hover,
[data-ghost-level] .floating-panel:focus-within,
[data-ghost-level] .grid-panel:hover,
[data-ghost-level] .grid-panel:focus-within {
  opacity: 1;
  transition: opacity var(--ghost-transition);
}

/* B7: Reduced-motion — disable ghost transitions for users who request it. */
@media (prefers-reduced-motion: reduce) {
  [data-ghost-level] .floating-panel,
  [data-ghost-level] .grid-panel,
  .ghost-toggle-btn { transition: none !important; }
}
/**
 * Focus Mode Toggle (Mobile Only)
 * ===============================
 * Status-bar control that toggles a distraction-free reading mode by
 * adding `.terminal-container--focus-mode` to the terminal root, which in
 * turn hides most status-bar children. The toggle itself only renders at
 * mobile/tablet widths.
 *
 * Extracted from `terminal/organisms/_status_bar.css` to keep the
 * status-bar organism within the file-size cap. The focus-mode active
 * container styles (`.terminal-container--focus-mode`) remain in
 * _status_bar.css since they describe the status-bar layout in that mode.
 */

.focus-mode-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.focus-mode-toggle:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.focus-mode-toggle:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* Sighted on-state mirrors the aria-pressed attribute set by the controller. */
.focus-mode-toggle[aria-pressed="true"] {
  background: var(--color-accent-bg, var(--color-accent-subtle));
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.focus-mode-toggle--active {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: var(--color-bg-primary);
}

/* Show focus mode toggle on mobile/tablet */
@media (max-width: 768px) {
  .focus-mode-toggle {
    display: flex;
  }
}
/**
 * Shell Selector Component
 * ========================
 * Dropdown for switching between UI shells (DOS, MUD, OS/2, etc.)
 */

.shell-selector {
  position: relative;
  display: inline-flex;
}

/* Trigger Button */
.shell-selector__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.shell-selector__trigger:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  border-color: var(--color-accent-purple);
}

.shell-selector__trigger[aria-expanded="true"] {
  background: var(--color-bg-tertiary);
  border-color: var(--color-accent-purple);
}

.shell-selector__icon {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--color-accent-purple);
}

.shell-selector__name {
  font-weight: 500;
}

.shell-selector__chevron {
  transition: transform 0.15s ease;
  opacity: 0.6;
}

.shell-selector__trigger[aria-expanded="true"] .shell-selector__chevron {
  transform: rotate(180deg);
}

/* Dropdown Menu - opens downward by default (for top status bar) */
.shell-selector__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 16px var(--overlay-medium);
  z-index: var(--z-floating);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.shell-selector__dropdown[data-visible="true"],
.dropdown--open .shell-selector__dropdown,
.shell-selector__dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* When status bar is at bottom (DOS shells), dropdown opens upward */
[data-shell="dos386"] .shell-selector__dropdown,
[data-shell="dos-gui"] .shell-selector__dropdown,
[data-shell="mud"] .shell-selector__dropdown {
  top: auto;
  bottom: calc(100% + 4px);
  transform: translateY(8px);
  box-shadow: 0 -4px 16px var(--overlay-medium);
}

[data-shell="dos386"] .shell-selector__dropdown.open,
[data-shell="dos-gui"] .shell-selector__dropdown.open,
[data-shell="mud"] .shell-selector__dropdown.open {
  transform: translateY(0);
}

/* Header */
.shell-selector__header {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-default);
}

.shell-selector__header-text {
  font-size: var(--font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

/* Options */
.shell-selector__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.shell-selector__option:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.shell-selector__option.active {
  background: var(--color-entity-spell-bg);
  color: var(--color-accent-purple);
}

.shell-selector__option-icon {
  width: 1.5rem;
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--color-accent-purple);
  text-align: center;
}

.shell-selector__option-name {
  font-weight: 500;
  flex-shrink: 0;
}

.shell-selector__option-desc {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Footer */
.shell-selector__footer {
  padding: var(--space-1-5) var(--space-3);
  border-top: 1px solid var(--color-border-default);
}

.shell-selector__footer-text {
  font-size: var(--font-size-2xs);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Shell-specific styling for the selector itself */
[data-shell="dos386"] .shell-selector__trigger {
  font-family: var(--font-mono);
}

[data-shell="dos386"] .shell-selector__icon {
  color: var(--shell-fg, #00ff00);
}

[data-shell="os2"] .shell-selector__trigger {
  border-width: 2px;
  border-style: solid;
  border-color: var(--bevel-light, var(--color-text-primary)) var(--bevel-dark, var(--color-bg-elevated)) var(--bevel-dark, var(--color-bg-elevated)) var(--bevel-light, var(--color-text-primary));
  border-radius: 0;
}

[data-shell="wow"] .shell-selector__trigger {
  background: var(--color-bg-tertiary);
  border-color: var(--shell-border-gold, var(--color-gold));
}
/*
 * CRT Effects (legacy location)
 * ==============================
 * Moved to terminal/effects/_crt.css (Task #966).
 * This file is kept for Sprockets require compatibility.
 * All CRT styles now live in effects/_crt.css and are
 * imported via terminal/terminal.css @import.
 *
 * This file intentionally left empty to avoid duplication.
 */
/**
 * Context Bubble
 * ==============
 * Floating bubble showing AI context gathering progress.
 * Appears above the chat input during context collection.
 *
 * States:
 * - Planning: Shows analyzing message
 * - Querying: Shows list of queries with status indicators
 * - Complete: Collapses to summary with token count
 *
 * Uses Phase 1 design tokens from: terminal/_tokens.css
 */

/* ========================================
 * Base Container
 * ======================================== */

.context-bubble {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  max-width: 100%;
  overflow: hidden;
}

.context-bubble--visible {
  display: flex;
}

/* Phases for theming */
.context-bubble[data-phase="planning"] {
  border-color: var(--color-accent-primary);
}

.context-bubble[data-phase="querying"] {
  border-color: var(--color-accent-warning);
}

.context-bubble[data-phase="complete"] {
  border-color: var(--color-accent-success);
}

/* ========================================
 * Header / Summary
 * ======================================== */

.context-bubble__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.context-bubble__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.context-bubble__icon {
  font-size: var(--font-size-base);
  flex-shrink: 0;
}

.context-bubble[data-phase="planning"] .context-bubble__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-search) no-repeat center / contain;
}

.context-bubble[data-phase="querying"] .context-bubble__icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--icon-books) no-repeat center / contain;
}

.context-bubble[data-phase="complete"] .context-bubble__icon::before {
  content: '✓';
}

.context-bubble__status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-bubble__token-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ========================================
 * Expand/Collapse Toggle
 * ======================================== */

.context-bubble__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.context-bubble__toggle:hover {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border-default);
  color: var(--color-text-primary);
}

.context-bubble__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.context-bubble__toggle-icon {
  transition: transform var(--transition-fast);
  font-size: var(--font-size-xs);
}

.context-bubble--collapsed .context-bubble__toggle-icon {
  transform: rotate(180deg);
}

/* ========================================
 * Task List
 * ======================================== */

.context-bubble__task-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border-subtle);
  max-height: 200px;
  overflow-y: auto;
}

.context-bubble--collapsed .context-bubble__task-list {
  display: none;
}

.context-bubble__task {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.context-bubble__task--pending {
  color: var(--color-text-muted);
}

.context-bubble__task--running {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

.context-bubble__task--complete {
  color: var(--color-text-secondary);
}

.context-bubble__task--failed {
  color: var(--color-accent-error);
}

.context-bubble__task-icon {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

.context-bubble__task--running .context-bubble__task-icon {
  animation: pulse 1s ease-in-out infinite;
}

.context-bubble__task-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-bubble__task-tokens {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-accent-success);
  flex-shrink: 0;
}

.context-bubble__task-error {
  font-size: var(--font-size-xs);
  color: var(--color-accent-error);
  flex-shrink: 0;
}

/* ========================================
 * Animations
 * ======================================== */

/* Entry animation */
.context-bubble--visible {
  animation: bubble-enter 0.2s ease-out;
}

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

/* ========================================
 * Placement Variants
 * ======================================== */

/* Above chat input (default) */
.context-bubble--above-input {
  position: relative;
}

/* Inside narrative panel (as bubble) */
.context-bubble--inline {
  margin: var(--space-2) 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* In a tray above input */
.context-bubble--tray {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: none;
  margin-bottom: 0;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .context-bubble {
    padding: var(--space-2);
  }

  .context-bubble__summary {
    font-size: var(--font-size-xs);
  }

  .context-bubble__task-list {
    max-height: 150px;
  }

  .context-bubble__task {
    font-size: var(--font-size-xs);
    padding: var(--space-1);
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .context-bubble {
    transition: none;
  }

  .context-bubble--visible {
    animation: none;
  }

  .context-bubble__toggle-icon {
    transition: none;
  }

  .context-bubble__task--running .context-bubble__task-icon {
    animation: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .context-bubble {
    border-width: 2px;
  }

  .context-bubble__task--running {
    border: 1px solid currentColor;
  }
}
/*
 * Icon Picker Component
 * =====================
 * A searchable grid component for selecting SVG icons.
 * Designed with the terminal aesthetic in mind.
 */

/* ========================================
 * WRAPPER & BASE
 * ======================================== */

.icon-picker-wrapper {
  width: 100%;
}

.icon-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  max-height: 400px;
  overflow: hidden;
}

.icon-picker--compact {
  max-height: 280px;
}

.icon-picker--compact .icon-picker__grid {
  max-height: 180px;
}

.icon-picker--compact .icon-picker__icon {
  padding: var(--space-1, 4px);
}

.icon-picker--compact .icon-picker__icon-name {
  display: none;
}

/* ========================================
 * SEARCH INPUT
 * ======================================== */

.icon-picker__search {
  position: relative;
  flex-shrink: 0;
}

.icon-picker__search-input {
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  padding-left: var(--space-8, 32px);
  background: var(--color-bg-tertiary, #3d3d3d);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-md, 4px);
  color: var(--color-text-primary, #e0e0e0);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  transition: border-color var(--transition-fast, 100ms ease);
}

.icon-picker__search-input:focus {
  outline: none;
  border-color: var(--color-border-focus, #61afef);
}

.icon-picker__search-input::placeholder {
  color: var(--color-text-muted, #888888);
}

.icon-picker__search-icon {
  position: absolute;
  left: var(--space-2, 8px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted, #888888);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ========================================
 * CATEGORY FILTER
 * ======================================== */

.icon-picker__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  flex-shrink: 0;
  padding: var(--space-1, 4px) 0;
  border-bottom: 1px solid var(--color-border-subtle, #333333);
}

.icon-picker__category-btn {
  padding: var(--space-1, 4px) var(--space-2, 8px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text-muted, #888888);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  font-weight: var(--font-weight-medium, 500);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease), transform var(--transition-fast, 100ms ease);
  white-space: nowrap;
}

.icon-picker__category-btn:hover {
  color: var(--color-text-primary, #e0e0e0);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.05));
}

.icon-picker__category-btn--active {
  color: var(--color-accent-primary, #61afef);
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.1));
}

.icon-picker__category-btn--active:hover {
  color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.15));
}

/* ========================================
 * ICON GRID
 * ======================================== */

.icon-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  overflow-y: auto;
  max-height: 260px;
  flex: 1;
  background: var(--color-bg-secondary, #2d2d2d);
  border-radius: var(--radius-md, 4px);
}

/* Scrollbar styling */
.icon-picker__grid::-webkit-scrollbar {
  width: 6px;
}

.icon-picker__grid::-webkit-scrollbar-track {
  background: var(--color-bg-tertiary, #3d3d3d);
  border-radius: 3px;
}

.icon-picker__grid::-webkit-scrollbar-thumb {
  background: var(--color-border-subtle, #555555);
  border-radius: 3px;
}

.icon-picker__grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted, #888888);
}

/* ========================================
 * ICON BUTTONS
 * ======================================== */

.icon-picker__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1, 4px);
  padding: var(--space-2, 8px);
  background: var(--color-bg-elevated, #404040);
  border: 1px solid var(--color-border-subtle, #333333);
  border-radius: var(--radius-md, 4px);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease), transform var(--transition-fast, 100ms ease);
  min-height: 60px;
}

.icon-picker__icon:hover {
  border-color: var(--color-border-focus, #61afef);
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.08));
  transform: translateY(-1px);
}

.icon-picker__icon:active {
  transform: translateY(0);
}

.icon-picker__icon--selected {
  border-color: var(--color-accent-primary, #61afef);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.15));
  box-shadow: 0 0 0 1px var(--color-accent-primary, #61afef);
}

.icon-picker__icon--selected:hover {
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.2));
}

.icon-picker__icon--selected .icon-picker__icon-svg {
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary, #e0e0e0);
  transition: color var(--transition-fast, 100ms ease);
}

.icon-picker__icon-svg svg {
  width: 20px;
  height: 20px;
}

.icon-picker__icon:hover .icon-picker__icon-svg {
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__icon-name {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 10px);
  color: var(--color-text-muted, #888888);
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-picker__icon:hover .icon-picker__icon-name {
  color: var(--color-text-secondary, #bbbbbb);
}

.icon-picker__icon--selected .icon-picker__icon-name {
  color: var(--color-accent-primary, #61afef);
}

/* ========================================
 * EMPTY STATE
 * ======================================== */

.icon-picker__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px);
  grid-column: 1 / -1;
  color: var(--color-text-muted, #888888);
}

.icon-picker__empty-icon {
  opacity: 0.5;
}

.icon-picker__empty-icon svg {
  width: 24px;
  height: 24px;
}

.icon-picker__empty-text {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  font-style: italic;
}

/* ========================================
 * SELECTED PREVIEW
 * ======================================== */

.icon-picker__preview {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-accent-bg, rgba(97, 175, 239, 0.1));
  border: 1px solid var(--color-accent-primary, #61afef);
  border-radius: var(--radius-md, 4px);
  flex-shrink: 0;
}

.icon-picker__preview--empty {
  background: var(--color-bg-tertiary, #3d3d3d);
  border-color: var(--color-border-subtle, #333333);
}

.icon-picker__preview-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-primary, #61afef);
}

.icon-picker__preview-icon svg {
  width: 24px;
  height: 24px;
}

.icon-picker__preview-name {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary, #e0e0e0);
}

.icon-picker__preview-hint {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 12px);
  color: var(--color-text-muted, #888888);
  font-style: italic;
}

.icon-picker__preview-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1, 4px);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 2px);
  color: var(--color-text-muted, #888888);
  cursor: pointer;
  transition: background var(--transition-fast, 100ms ease), color var(--transition-fast, 100ms ease), border-color var(--transition-fast, 100ms ease);
}

.icon-picker__preview-clear:hover {
  color: var(--color-accent-error, #e06c75);
  background: rgba(224, 108, 117, 0.1);
}

.icon-picker__preview-clear svg {
  width: 14px;
  height: 14px;
}

/* ========================================
 * MODAL INTEGRATION
 * ======================================== */

.icon-picker-modal {
  padding: var(--space-4, 16px);
  background: var(--color-bg-elevated, #404040);
  border-radius: var(--radius-lg, 8px);
  max-width: 480px;
  width: 100%;
}

.icon-picker-modal .icon-picker__grid {
  max-height: 300px;
}

/* ========================================
 * INLINE INTEGRATION (for tab settings)
 * ======================================== */

.icon-picker--inline {
  padding: 0;
}

.icon-picker--inline .icon-picker__grid {
  max-height: 200px;
  padding: var(--space-1, 4px);
}

.icon-picker--inline .icon-picker__icon {
  min-height: 48px;
  padding: var(--space-1, 4px);
}

.icon-picker--inline .icon-picker__icon-svg svg {
  width: 18px;
  height: 18px;
}

.icon-picker--inline .icon-picker__categories {
  padding: 0;
  border-bottom: none;
  margin-bottom: var(--space-1, 4px);
}

/* ========================================
 * RESPONSIVE
 * ======================================== */

@media (max-width: 480px) {
  .icon-picker__grid {
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--space-1, 4px);
  }

  .icon-picker__icon {
    min-height: 48px;
    padding: var(--space-1, 4px);
  }

  .icon-picker__icon-name {
    display: none;
  }

  .icon-picker__categories {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .icon-picker__category-btn {
    flex-shrink: 0;
  }
}
/* Hologram Viewport — 3D scene background for the terminal
 *
 * EFFECT-DOMAIN-RESPECT (#4220):
 * The hologram is a BACKGROUND layer, not an overlay. It sits behind the grid
 * layout / panels so that:
 *   - In 2D mode, panels remain fully readable above an opaque hologram background.
 *   - In XR/AR mode (body[data-xr-passthrough="true"]), the viewport background
 *     becomes transparent so the real world shows through, while panels stay
 *     readable on top.
 *
 * Previously the viewport used z-index: var(--z-scroll-btn) (50) and an opaque
 * background, which OVER-painted the panels in the main zone (visually
 * collapsing them to a single bg color). Affecting panels was the wrong
 * domain — the effect should only touch the background layer.
 */

.hologram-viewport {
  position: absolute;
  inset: 0;
  /* Behind grid layout content (which flows in normal stacking, z-index: auto).
   * .zone--main uses isolation: isolate (below) to scope this negative index. */
  z-index: var(--z-behind);
  background: var(--color-bg-primary, #0a0a0f);
  display: none;
  overflow: hidden;
}

.hologram-viewport--active {
  display: block;
}

/* AR/XR passthrough: drop the background so the real world shows through.
 * Panels remain at full opacity (they live in the grid layout above). */
body[data-xr-passthrough="true"] .hologram-viewport {
  background: transparent;
}

/* Three.js canvas fills the viewport */
.hologram-viewport canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Active state for toggle button */
.hologram-toggle-btn[aria-pressed="true"] {
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border-color: var(--color-accent-primary);
}

/* Ensure main zone hosts the absolute background and scopes its stacking
 * context so the hologram's z-index: -1 does not escape behind the zone. */
.zone--main {
  position: relative;
  isolation: isolate;
}
/**
 * Contextual Action Chips
 * =======================
 * Proactive action suggestions that appear near the terminal input.
 * These chips suggest contextually relevant actions based on game state.
 */

/* Container for the chips row */
.contextual-chips-container {
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}

.contextual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
}

/* Section label - subtle hint */
.contextual-chips__label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: var(--space-1);
  opacity: 0.7;
}

/* Empty state - hidden */
.contextual-chips-container[hidden] {
  display: none;
}

/* Hide in lobby - quick actions replace contextual chips */
.lobby-split-container .contextual-chips-container {
  display: none;
}

/* ==========================================================================
   Individual Chip
   ========================================================================== */

.contextual-chip {
  /* Color theming via custom properties (set inline by JS) */
  --chip-color: var(--color-accent-primary);
  --chip-color-rgb: 99, 102, 241;

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  /* Touch target: 44px minimum height (8px + 8px padding + ~13px font + line height) */
  padding: var(--space-2) var(--space-3);
  min-height: 36px; /* Combined with padding gets us to ~44px touchable area */
  border: 1px solid rgba(var(--chip-color-rgb), 0.3);
  border-radius: var(--radius-full);
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.12) 0%,
    rgba(var(--chip-color-rgb), 0.04) 100%
  );
  color: var(--chip-color);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
  user-select: none;

  /* Entrance animation */
  animation: chipEnter 0.2s ease-out;
}

.contextual-chip:hover {
  background: linear-gradient(
    180deg,
    rgba(var(--chip-color-rgb), 0.2) 0%,
    rgba(var(--chip-color-rgb), 0.12) 100%
  );
  border-color: rgba(var(--chip-color-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--chip-color-rgb), 0.25);
  transform: translateY(-1px);
}

.contextual-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--chip-color);
}

.contextual-chip:active,
.contextual-chip--executing {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
}

/* Chip icon */
.contextual-chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.contextual-chip__icon svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Chip label */
.contextual-chip__label {
  line-height: 1.2;
}

/* ==========================================================================
   Category Variants
   ========================================================================== */

/* Combat - Red/Orange for urgency */
.contextual-chip--combat {
  --chip-color: #ef4444;
  --chip-color-rgb: 239, 68, 68;
}

/* Exploration - Green for discovery */
.contextual-chip--exploration {
  --chip-color: #22c55e;
  --chip-color-rgb: 34, 197, 94;
}

/* Social - Blue for interaction */
.contextual-chip--social {
  --chip-color: #3b82f6;
  --chip-color-rgb: 59, 130, 246;
}

/* Shopping - Amber for commerce */
.contextual-chip--shopping {
  --chip-color: #f59e0b;
  --chip-color-rgb: 245, 158, 11;
}

/* Rest - Purple for recovery */
.contextual-chip--rest {
  --chip-color: #8b5cf6;
  --chip-color-rgb: 139, 92, 246;
}

/* Survival - Pink for urgency/health */
.contextual-chip--survival {
  --chip-color: #ec4899;
  --chip-color-rgb: 236, 72, 153;
}

/* Navigation - Indigo for movement */
.contextual-chip--navigation {
  --chip-color: #6366f1;
  --chip-color-rgb: 99, 102, 241;
}

/* Creation - Teal for building */
.contextual-chip--creation {
  --chip-color: #14b8a6;
  --chip-color-rgb: 20, 184, 166;
}

/* Mental - Purple for psychological */
.contextual-chip--mental {
  --chip-color: #a855f7;
  --chip-color-rgb: 168, 85, 247;
}

/* Hotbar - Subtle gray for utility actions */
.contextual-chip--hotbar {
  --chip-color: #6b7280;
  --chip-color-rgb: 107, 114, 128;

  /* Slightly more subtle appearance */
  border-style: dashed;
  opacity: 0.9;
}

.contextual-chip--hotbar:hover {
  opacity: 1;
  border-style: solid;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .contextual-chips {
    gap: var(--space-1);
  }

  /* Keep min-height for touch targets - only reduce padding slightly */
  .contextual-chip {
    padding: var(--space-1-5) var(--space-2);
    min-height: 36px; /* Maintain 44px touch target */
    font-size: 0.75rem;
  }

  .contextual-chips__label {
    font-size: 0.625rem;
  }

  .contextual-chip__icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .contextual-chip__icon svg {
    width: 0.75rem;
    height: 0.75rem;
  }
}

/* ==========================================================================
   Mobile Quick Action Pills
   Horizontal scrollable strip above input — replaces flex-wrap layout on mobile.
   Swipeable when >4 actions. Collapses to icon-only when keyboard is open.
   ========================================================================== */

@media (max-width: 768px) {
  /* Container: flush with input, no vertical margin waste */
  .contextual-chips-container {
    padding: 0 var(--space-2);
    margin-bottom: var(--space-1);
  }

  /* Strip layout: single row, horizontal scroll, no wrapping */
  .contextual-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    padding: var(--space-1) 0;
    gap: var(--space-2);
  }

  .contextual-chips::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  /* Hide the "Try" label on mobile — pills are self-explanatory */
  .contextual-chips__label {
    display: none;
  }

  /* Pills: chat-style suggested replies */
  .contextual-chip {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    scroll-snap-align: start;
  }

  /* Enable scroll snapping for precise swipe stops */
  .contextual-chips {
    scroll-snap-type: x proximity;
    scroll-padding-left: var(--space-2);
  }

  /* Fade hint on right edge when scrollable (overflow indicator) */
  .contextual-chips-container {
    position: relative;
  }

  .contextual-chips-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--color-bg-primary, #1a1a2e));
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-fast);
    z-index: var(--z-raised);
  }

  /* Hide fade when scrolled to end */
  .contextual-chips-container.scrolled-end::after {
    opacity: 0;
  }

  /* Keyboard open: collapse to icon-only pills */
  .mobile-keyboard-open .contextual-chips-container {
    margin-bottom: 0;
  }

  .mobile-keyboard-open .contextual-chips {
    gap: var(--space-1);
    padding: 2px 0;
  }

  .mobile-keyboard-open .contextual-chip {
    padding: var(--space-1) var(--space-2);
    min-height: 32px;
  }

  .mobile-keyboard-open .contextual-chip__label {
    display: none;
  }

  .mobile-keyboard-open .contextual-chip__icon {
    width: 1rem;
    height: 1rem;
  }

  /* When icon-only, chips without icons show first letter as fallback */
  .mobile-keyboard-open .contextual-chip:not(:has(.contextual-chip__icon)) {
    max-width: 40px;
    overflow: hidden;
    text-overflow: clip;
  }

  .mobile-keyboard-open .contextual-chip:not(:has(.contextual-chip__icon)) .contextual-chip__label {
    display: block;
    max-width: 1ch;
    overflow: hidden;
  }
}

/* ==========================================================================
   Animation
   ========================================================================== */

/* Entrance animation for chips */
@keyframes chipEnter {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggered entrance for multiple chips (offset by 1 for label) */
.contextual-chip:nth-of-type(1) { animation-delay: 0ms; }
.contextual-chip:nth-of-type(2) { animation-delay: 30ms; }
.contextual-chip:nth-of-type(3) { animation-delay: 60ms; }
.contextual-chip:nth-of-type(4) { animation-delay: 90ms; }
.contextual-chip:nth-of-type(5) { animation-delay: 120ms; }
.contextual-chip:nth-of-type(6) { animation-delay: 150ms; }
.contextual-chip:nth-of-type(7) { animation-delay: 180ms; }
.contextual-chip:nth-of-type(8) { animation-delay: 210ms; }
.contextual-chip:nth-of-type(9) { animation-delay: 240ms; }
.contextual-chip:nth-of-type(10) { animation-delay: 270ms; }

@keyframes chipPulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(var(--chip-color-rgb), 0.2);
  }
  50% {
    box-shadow: 0 0 12px rgba(var(--chip-color-rgb), 0.4);
  }
}

/* Priority chips get a subtle pulse */
.contextual-chip--priority {
  animation: chipPulse 2s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .contextual-chip {
    transition: none;
    animation: none;
  }

  .contextual-chip--priority {
    animation: none;
  }
}
/**
 * Achievement Celebration Modal
 * ===============================
 * Animated celebration modal that appears when achievements are unlocked.
 * Features confetti, sparkles, and dramatic reveal animations.
 */

/* ========================================
 * Modal Variant
 * ======================================== */

.unified-modal--achievement-celebration {
  animation: achievementReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes achievementReveal {
  from {
    opacity: 0;
    transform: translateY(-30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.unified-modal--achievement-celebration .unified-modal__card {
  background: linear-gradient(
    135deg,
    var(--color-bg-primary) 0%,
    color-mix(in srgb, var(--color-bg-primary) 95%, gold 5%) 100%
  );
  border: 2px solid color-mix(in srgb, var(--color-accent-primary) 70%, gold 30%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, gold 20%, transparent);
}

.unified-modal--achievement-celebration .unified-modal__header {
  text-align: center;
  border-bottom: 2px solid color-mix(in srgb, gold 40%, var(--color-border-default) 60%);
}

.unified-modal--achievement-celebration .unified-modal__title {
  color: color-mix(in srgb, var(--color-accent-primary) 70%, gold 30%);
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.unified-modal--achievement-celebration .unified-modal__subtitle {
  color: var(--color-text-secondary);
  font-size: 1rem;
  margin-top: var(--space-2);
  font-style: italic;
}

/* ========================================
 * Content Layout
 * ======================================== */

.achievement-celebration__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.achievement-celebration__icon-large {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: var(--space-4);
  animation: iconPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(255, 215, 0, 0.4));
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.achievement-celebration__sparkles {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
  opacity: 0.8;
}

.achievement-celebration__sparkles {
  animation: sparkleFloat 3s ease-in-out infinite;
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-4px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

.achievement-celebration__message {
  font-size: 1.25rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text-primary) 90%, gold 10%);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* ========================================
 * View All CTA
 * ======================================== */

.achievement-celebration__view-all {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 1px solid color-mix(in srgb, gold 50%, var(--color-border-default) 50%);
  border-radius: var(--radius-md, 4px);
  color: color-mix(in srgb, var(--color-text-secondary) 80%, gold 20%);
  font-size: 0.85rem;
  font-family: inherit;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.achievement-celebration__view-all:hover {
  border-color: color-mix(in srgb, gold 70%, var(--color-border-default) 30%);
  color: color-mix(in srgb, var(--color-text-primary) 80%, gold 20%);
}

/* ========================================
 * Confetti Animation
 * ======================================== */

.achievement-celebration__confetti {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-raised);
}

.achievement-celebration__confetto {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: confettiFall 3s ease-out forwards;
  opacity: 1;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 50px)) rotate(720deg);
    opacity: 0;
  }
}

/* ========================================
 * Backdrop Enhancement
 * ======================================== */

.unified-modal--achievement-celebration + .unified-modal__backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 768px) {
  .achievement-celebration__icon-large {
    font-size: 4rem;
  }

  .achievement-celebration__message {
    font-size: 1rem;
  }

  .unified-modal--achievement-celebration .unified-modal__title {
    font-size: 1.5rem;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .unified-modal--achievement-celebration,
  .achievement-celebration__icon-large,
  .achievement-celebration__sparkles,
  .achievement-celebration__confetto {
    animation: none;
  }

  .achievement-celebration__confetti {
    display: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .unified-modal--achievement-celebration .unified-modal__card {
    border-width: 3px;
    border-color: var(--color-accent-primary);
  }

  .achievement-celebration__icon-large {
    filter: none;
  }
}
/* ==========================================================================
 * Combat Target Picker
 * Popover for selecting combat targets from initiative order.
 * Single mode (attack): click to select. Multi mode (spell): checkboxes.
 * Follows _roll_menu.css patterns for positioning and styling.
 * ========================================================================== */

/* Backdrop - click-outside-to-close */
.combat-target-picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Popover container */
.combat-target-picker {
  position: fixed;
  min-width: 260px;
  max-width: 360px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  animation: combatTargetPickerFadeIn 0.12s ease-out;
  overflow: hidden;
}

@keyframes combatTargetPickerFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Header */
.combat-target-picker__header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-tertiary);
  flex-shrink: 0;
}

/* Custom target input */
.combat-target-picker__custom {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-target-picker__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color var(--transition-fast);
}

.combat-target-picker__input:focus {
  border-color: var(--color-border-focus);
}

.combat-target-picker__input::placeholder {
  color: var(--color-text-muted);
}

/* Target list */
.combat-target-picker__list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Empty state */
.combat-target-picker__empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Individual target item */
.combat-target-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background var(--transition-fast);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.combat-target-picker__item:hover,
.combat-target-picker__item--focused {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.combat-target-picker__item:active {
  background: rgba(97, 175, 239, 0.15);
}

.combat-target-picker__item--selected {
  background: rgba(97, 175, 239, 0.12);
  color: var(--color-text-primary);
}

.combat-target-picker__item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

/* Checkbox (multi mode) */
.combat-target-picker__checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent-primary);
  pointer-events: none;
}

/* Portrait */
.combat-target-picker__portrait {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: var(--radius-full);
  background: var(--color-bg-tertiary);
  overflow: hidden;
}

.combat-target-picker__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Name */
.combat-target-picker__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-medium);
}

/* HP indicator */
.combat-target-picker__hp {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 14px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.combat-target-picker__hp-bar {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.hp--healthy .combat-target-picker__hp-bar {
  background: var(--color-accent-secondary, #98c379);
}

.hp--wounded .combat-target-picker__hp-bar {
  background: var(--color-accent-warning, #e5c07b);
}

.hp--critical .combat-target-picker__hp-bar {
  background: var(--color-accent-error, #e06c75);
}

.combat-target-picker__hp-text {
  position: relative;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Type indicator */
.combat-target-picker__type {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Footer with confirm button (multi mode) */
.combat-target-picker__footer {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

.combat-target-picker__confirm {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent-primary);
  color: var(--color-bg-primary);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.combat-target-picker__confirm:hover:not(:disabled) {
  opacity: 0.9;
}

.combat-target-picker__confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .combat-target-picker {
    min-width: unset;
    max-width: unset;
    left: 8px;
    right: 8px;
    width: auto;
  }

  .combat-target-picker__item {
    min-height: 48px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .combat-target-picker {
    animation: none;
  }
}
/* ========================================
 * Expandable Text
 * Inline expandable text with typewriter reveals
 * ======================================== */

.expandable-text {
  display: inline;
  cursor: pointer;
}

.expandable-text--expanded {
  cursor: default;
}

.expandable-text__summary {
  display: inline;
}

.expandable-text__indicator {
  display: inline;
  color: var(--color-gold, #d4af37);
  font-weight: bold;
  opacity: 0.8;
  animation: indicatorPulse 1.5s ease-in-out infinite;
}

.expandable-text--expanded .expandable-text__indicator,
.expandable-text--expanding .expandable-text__indicator {
  display: none;
}

.expandable-text__expansion {
  color: var(--color-text, #e0e0e0);
}

/* Click/hover hint styling */
.expandable-text:not(.expandable-text--expanded):hover .expandable-text__indicator {
  opacity: 1;
  color: var(--color-gold-bright, #ffd700);
}

.expandable-text:not(.expandable-text--expanded):focus {
  outline: 2px solid var(--color-gold, #d4af37);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Subtle underline hint for clickable text */
.expandable-text:not(.expandable-text--expanded) .expandable-text__summary {
  border-bottom: 1px dashed var(--color-text-secondary, #808080);
}

.expandable-text--expanded .expandable-text__summary {
  border-bottom: none;
}

/* Indicator pulse animation */
@keyframes indicatorPulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .expandable-text__indicator {
    animation: none;
    opacity: 0.8;
  }
}
/* Handout Viewer - Lightbox overlay for DM-revealed handouts */

.handout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: var(--z-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.handout-overlay--visible {
  opacity: 1;
}

.handout-modal {
  background: var(--terminal-bg, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 8px;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
}

.handout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.handout-title {
  margin: 0;
  font-size: 1.1rem;
  color: var(--terminal-text, #e0e0e0);
  font-family: inherit;
}

.handout-close-btn {
  background: none;
  border: none;
  color: var(--terminal-text-muted, #888);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.handout-close-btn:hover {
  color: var(--terminal-text, #e0e0e0);
}

.handout-description {
  padding: 8px 16px;
  margin: 0;
  color: var(--terminal-text-muted, #888);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--terminal-border, #333);
}

.handout-body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.handout-content-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}

.handout-content-pdf {
  width: 80vw;
  height: 80vh;
  border: none;
  border-radius: 4px;
}

.handout-content-unsupported {
  color: var(--terminal-text-muted, #888);
  font-style: italic;
}
/* Handout Panel Organism — DM-pushed images (#3857)
 *
 * Renders dm_handout envelopes (lib/contracts/messages/dm_handout.rb) in a
 * popout overlay panel. Distinct from _handout_viewer (legacy revealed
 * handouts: PDFs/images) which handles `terminal:handout-revealed`.
 *
 * Driven by app/javascript/controllers/terminal/handout_panel_controller.js
 * which subscribes to `terminal:dm-handout` and renders into <body>.
 */

.handout-panel {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: var(--z-sky, 9000);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  cursor: pointer;
  padding: 24px;
}

.handout-panel--visible {
  opacity: 1;
}

.handout-panel__modal {
  background: var(--terminal-bg, #1a1a2e);
  border: 1px solid var(--terminal-border, #333);
  border-radius: 8px;
  max-width: min(720px, 90vw);
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

.handout-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--terminal-border, #333);
  background: var(--terminal-bg-elevated, #20203a);
}

.handout-panel__header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.handout-panel__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-color, #8b5cf6);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.handout-panel__dm-name {
  color: var(--terminal-text-muted, #aaa);
  font-size: 0.8rem;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.handout-panel__close {
  background: none;
  border: none;
  color: var(--terminal-text-muted, #888);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 0 6px;
  line-height: 1;
  flex-shrink: 0;
}

.handout-panel__close:hover,
.handout-panel__close:focus {
  color: var(--terminal-text, #e0e0e0);
  outline: none;
}

.handout-panel__body {
  padding: 16px;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.handout-panel__image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
}

.handout-panel__caption {
  margin: 0;
  color: var(--terminal-text, #e0e0e0);
  font-size: 0.92rem;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
}

/* Mobile / narrow viewports — phone breakpoint (#3857). Panel goes full-bleed
 * with smaller padding so the image can use the available width. */
@media (max-width: 768px) {
  .handout-panel {
    padding: 8px;
    align-items: flex-start;
  }

  .handout-panel__modal {
    max-width: 100%;
    max-height: calc(100vh - 16px);
    width: 100%;
    border-radius: 6px;
  }

  .handout-panel__body {
    padding: 12px;
  }

  .handout-panel__image {
    max-height: 60vh;
  }

  .handout-panel__header {
    padding: 8px 12px;
  }

  .handout-panel__dm-name {
    font-size: 0.72rem;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .handout-panel {
    transition: none;
  }
}
/**
 * Info Indicator Component
 * ========================
 * Subtle info icon showing that an element has a tooltip/more information.
 * Helps users discover interactive elements.
 *
 * Usage:
 *   <span class="has-info" data-controller="rich-tooltip" ...>
 *     AC <span class="info-indicator">i</span>
 *   </span>
 */

/* ========================================
 * Container for elements with info
 * ======================================== */

.has-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* ========================================
 * Info Indicator Icon
 * ======================================== */

.info-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px; /* Prevent flexbox / clip-path containers from collapsing the badge (#4132) */
  font-size: 10px;
  font-style: normal;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border-radius: 50%;
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-subtle);
  /* Slightly higher resting opacity so the badge always reads as a chip, not stray text (#4132) */
  opacity: 0.75;
  transition: opacity var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast),
              border-color var(--transition-fast);
  flex-shrink: 0;
  /* Defensive: ensure no host-page text-decoration leaks into the badge */
  text-decoration: none;
}

/* ========================================
 * Hover/Focus States
 * ======================================== */

.has-info:hover .info-indicator,
.has-info:focus .info-indicator,
.has-info:focus-within .info-indicator {
  opacity: 1;
  color: var(--color-accent-primary);
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-elevated));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-subtle));
}

/* ========================================
 * Active Tooltip State
 * ======================================== */

.has-info[aria-expanded="true"] .info-indicator {
  opacity: 1;
  color: var(--color-bg-primary);
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

/* ========================================
 * Size Variants
 * ======================================== */

/* Small - for compact layouts */
.info-indicator--sm {
  width: 12px;
  height: 12px;
  min-width: 12px; /* Prevent collapse in dense stat rows (#4132) */
  font-size: 9px;
}

/* Large - for headers and primary stats */
.info-indicator--lg {
  width: 18px;
  height: 18px;
  font-size: 12px;
}

/* ========================================
 * Icon Variants
 * ======================================== */

/* Question mark variant */
.info-indicator--question::after {
  content: "?";
}

/* Help variant (book icon) */
.info-indicator--help::after {
  content: "?";
}

/* Default is "i" for information */
.info-indicator:not(.info-indicator--question):not(.info-indicator--help)::after {
  content: "i";
}

/* Clear any existing text content */
.info-indicator {
  text-indent: -9999px;
  overflow: hidden;
}

.info-indicator::after {
  text-indent: 0;
  display: block;
}

/* ========================================
 * Touch Device Adjustments
 * ======================================== */

@media (hover: none) {
  .info-indicator {
    width: 20px;
    height: 20px;
    font-size: 12px;
    opacity: 0.8;
  }

  .info-indicator--sm {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .info-indicator--lg {
    width: 24px;
    height: 24px;
    font-size: 14px;
  }
}

/* ========================================
 * Inline with labels (stat labels, etc)
 * ======================================== */

.cs-stat__label .info-indicator,
.cs-section__title .info-indicator,
.cs-ability__label .info-indicator {
  margin-left: var(--space-1);
  vertical-align: middle;
}

/* ========================================
 * Stat Chip Integration
 * ======================================== */

.stat-chip .info-indicator {
  margin-left: var(--space-1);
}

/* ========================================
 * Condition Badge Integration
 * ======================================== */

.cs-condition .info-indicator {
  margin-left: 2px;
  width: 12px;
  height: 12px;
  font-size: 8px;
}

.cs-condition:hover .info-indicator {
  color: var(--color-accent-warning);
  border-color: var(--color-accent-warning);
}

/* ========================================
 * Gear Item Integration
 * ======================================== */

.cs-item__name .info-indicator {
  margin-left: var(--space-1);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .info-indicator {
    transition: none;
  }
}
/* ========================================
 * Loading Filler
 * Shows contextual tips while AI generates response.
 * Tips cycle one at a time (chyron/ticker) — no stacking.
 * Attached to the .dm-responding-bar, below the main status row.
 * ======================================== */

/* Container sits inside the DM responding bar as a second row */
.loading-filler {
  width: 100%;
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-2, 8px);
  border-top: 1px solid rgba(168, 85, 247, 0.2);
}

/* Single visible slot — only one tip shows at a time */
.loading-filler__ticker {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #a0a0a0);
  min-height: 1.4em; /* Reserve space to prevent layout shift on swap */
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

.loading-filler__ticker--visible {
  opacity: 1;
  transform: translateY(0);
}

.loading-filler__icon {
  flex-shrink: 0;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1;
  opacity: 0.8;
}

.loading-filler__content {
  flex: 1;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Accessibility: Respect reduced motion — show tip without transition */
@media (prefers-reduced-motion: reduce) {
  .loading-filler__ticker {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .loading-filler__ticker--visible {
    opacity: 1;
    transform: none;
  }
}

/* Dark theme adjustments */
[data-theme="dark"] .loading-filler__ticker {
  color: rgba(200, 180, 255, 0.7);
}

/* Light theme adjustments */
[data-theme="light"] .loading-filler__ticker {
  color: var(--color-text-secondary, #666);
}
/**
 * Proficiency Chip Component
 * ==========================
 * Replaces tiny 8px proficiency dots with tappable chips showing
 * proficiency status + modifier for improved usability.
 *
 * States:
 * - Not proficient: Hollow dot, muted, no modifier shown
 * - Proficient: Filled dot, accent color, +modifier
 * - Expert: Double filled dots, gold glow, +modifier
 *
 * Usage:
 *   <button class="proficiency-chip proficiency-chip--proficient">
 *     <span class="proficiency-chip__dots">●</span>
 *     <span class="proficiency-chip__modifier">+5</span>
 *   </button>
 */

/* ========================================
 * Base Chip
 * ======================================== */

.proficiency-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 44px;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  user-select: none;
}

.proficiency-chip:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-strong);
}

.proficiency-chip:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
}

.proficiency-chip:active {
  transform: scale(0.96);
}

/* ========================================
 * Proficiency Dots
 * ======================================== */

.proficiency-chip__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12px; /* Prevent the empty span from collapsing before ::before content paints (#4132) */
  font-size: var(--font-size-base); /* Bumped from --sm so the hollow/filled state reads at a glance */
  line-height: 1;
  letter-spacing: -1px;
}

.proficiency-chip__modifier {
  font-weight: var(--font-weight-semibold);
}

/* ========================================
 * Not Proficient (default)
 * ======================================== */

/* Default state shows hollow dot and muted modifier */
.proficiency-chip .proficiency-chip__dots::before {
  content: "○";
}

.proficiency-chip .proficiency-chip__modifier {
  color: var(--color-text-muted);
}

/* ========================================
 * Proficient State
 * ======================================== */

.proficiency-chip--proficient {
  background: color-mix(in srgb, var(--color-accent-primary) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-border-default));
  color: var(--color-accent-primary);
}

.proficiency-chip--proficient:hover {
  background: color-mix(in srgb, var(--color-accent-primary) 25%, var(--color-bg-tertiary));
  border-color: var(--color-accent-primary);
}

.proficiency-chip--proficient .proficiency-chip__dots::before {
  content: "●";
}

.proficiency-chip--proficient .proficiency-chip__modifier {
  color: var(--color-accent-primary);
}

/* ========================================
 * Expert State (double proficiency)
 * ======================================== */

.proficiency-chip--expert {
  background: color-mix(in srgb, var(--color-gold) 15%, var(--color-bg-tertiary));
  border-color: color-mix(in srgb, var(--color-gold) 50%, var(--color-border-default));
  color: var(--color-gold);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-gold) 30%, transparent);
}

.proficiency-chip--expert:hover {
  background: color-mix(in srgb, var(--color-gold) 25%, var(--color-bg-tertiary));
  border-color: var(--color-gold);
  box-shadow: 0 0 12px color-mix(in srgb, var(--color-gold) 50%, transparent);
}

.proficiency-chip--expert .proficiency-chip__dots::before {
  content: "●●";
  letter-spacing: -2px;
}

.proficiency-chip--expert .proficiency-chip__modifier {
  color: var(--color-gold);
  font-weight: var(--font-weight-bold);
}

/* ========================================
 * Compact Variant (for dense lists)
 * ======================================== */

.proficiency-chip--compact {
  min-width: 36px;
  min-height: 28px;
  padding: 2px var(--space-1);
  font-size: var(--font-size-xs);
}

.proficiency-chip--compact .proficiency-chip__dots {
  font-size: var(--font-size-xs);
}

/* ========================================
 * Touch Device Adjustments
 * ======================================== */

@media (hover: none) {
  .proficiency-chip {
    min-width: 48px;
    min-height: 44px;
    padding: var(--space-2);
  }

  .proficiency-chip--compact {
    min-width: 44px;
    min-height: 40px;
  }
}

/* ========================================
 * Context-specific adjustments
 * ======================================== */

/* Inside save rows - slightly compact */
.cs-save .proficiency-chip {
  min-width: 50px;
}

/* Inside skill rows */
.cs-skill .proficiency-chip {
  min-width: 50px;
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .proficiency-chip {
    transition: none;
  }

  .proficiency-chip:active {
    transform: none;
  }
}
/* ==========================================================================
 * Roll Overlay Component
 * Positioned overlay for click-to-roll interactions (perception checks, etc.)
 * Part of the Interactive Narrative system
 * ========================================================================== */

/* Backdrop (click-outside-to-close) */
.roll-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-overlay);
  background: rgba(0, 0, 0, 0.4);
}

/* Main Overlay */
.roll-overlay {
  position: fixed;
  width: 280px;
  background: linear-gradient(135deg,
    rgba(30, 30, 40, 0.98) 0%,
    rgba(20, 20, 30, 0.99) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  border-radius: var(--radius-lg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(255, 215, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  z-index: var(--z-combat-top);
  font-family: var(--font-mono);
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

.roll-overlay--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.roll-overlay--hiding {
  opacity: 0;
  transform: translateY(-5px) scale(0.98);
}

/* Header */
.roll-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 215, 0, 0.1);
  border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.roll-overlay__icon {
  font-size: var(--font-size-3xl);
  line-height: 1;
}

.roll-overlay__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.roll-overlay__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.roll-overlay__dc {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Dice Display */
.roll-overlay__dice-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  min-height: 60px;
}

.roll-overlay__dice {
  font-size: var(--font-size-4xl);
  animation: diceIdle 2s ease-in-out infinite;
}

@keyframes diceIdle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.roll-overlay__expression {
  font-size: var(--font-size-xl);
  font-weight: bold;
  color: var(--color-text-primary);
}

/* Rolling Animation */
.roll-overlay__dice-display--rolling .roll-overlay__dice {
  animation: diceRolling 0.15s linear infinite;
}

.roll-overlay__dice-display--rolling .roll-overlay__expression {
  animation: expressionFlash 0.1s linear infinite;
}

@keyframes diceRolling {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.1); }
  50% { transform: rotate(180deg) scale(1); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes expressionFlash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Roll Result Display */
.roll-overlay__result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  animation: resultReveal 0.3s ease-out;
}

@keyframes resultReveal {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.roll-overlay__result-dice {
  font-weight: bold;
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.roll-overlay__result-modifier {
  color: var(--color-text-secondary);
}

.roll-overlay__result-equals {
  color: var(--color-text-muted);
}

.roll-overlay__result-total {
  font-weight: bold;
  font-size: var(--font-size-2xl);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.roll-overlay__result-icon {
  font-size: var(--font-size-lg);
  margin-left: var(--space-1);
}

.roll-overlay__result--success .roll-overlay__result-total {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
}

.roll-overlay__result--success .roll-overlay__result-icon {
  color: #22c55e;
}

.roll-overlay__result--failure .roll-overlay__result-total {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

.roll-overlay__result--failure .roll-overlay__result-icon {
  color: #ef4444;
}

/* Actions */
.roll-overlay__actions {
  padding: 0 var(--space-4) var(--space-3);
}

.roll-overlay__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.roll-overlay__btn--roll {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.15) 100%);
  border: 2px solid rgba(255, 215, 0, 0.5);
  color: #ffd700;
  animation: rollBtnGlow 2s ease-in-out infinite;
}

@keyframes rollBtnGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.2);
  }
}

.roll-overlay__btn--roll:hover {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 215, 0, 0.25) 100%);
  border-color: rgba(255, 215, 0, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(255, 215, 0, 0.35);
}

.roll-overlay__btn--roll:active {
  transform: translateY(0);
}

.roll-overlay__btn-icon {
  font-size: var(--font-size-lg);
}

/* Hint */
.roll-overlay__hint {
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* Skill-specific theming */
.roll-overlay[data-skill="perception"] {
  --skill-color: #3b82f6;
}

.roll-overlay[data-skill="insight"] {
  --skill-color: #8b5cf6;
}

.roll-overlay[data-skill="investigation"] {
  --skill-color: #10b981;
}

.roll-overlay[data-skill="perception"] .roll-overlay__header,
.roll-overlay[data-skill="insight"] .roll-overlay__header,
.roll-overlay[data-skill="investigation"] .roll-overlay__header {
  background: linear-gradient(135deg, rgba(var(--skill-color), 0.15) 0%, transparent 100%);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .roll-overlay {
    width: calc(100vw - 40px);
    max-width: 300px;
  }

  .roll-overlay__btn {
    min-height: 48px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .roll-overlay {
    transition: opacity 0.1s ease;
    transform: none;
  }

  .roll-overlay--visible,
  .roll-overlay--hiding {
    transform: none;
  }

  .roll-overlay__dice {
    animation: none;
  }

  .roll-overlay__btn--roll {
    animation: none;
  }

  .roll-overlay__dice-display--rolling .roll-overlay__dice,
  .roll-overlay__dice-display--rolling .roll-overlay__expression {
    animation: none;
  }
}
/**
 * Scene Divider Component
 * ========================
 * Visual chapter breaks between dramatic scenes in the narrative.
 * D&D-themed ornamental divider with fading gradient lines,
 * a central diamond badge, and a crossed-swords icon.
 *
 * Structure:
 *   .scene-divider
 *     .scene-divider__line--left   (fading ornamental line)
 *     .scene-divider__content      (central badge)
 *       .scene-divider__icon
 *       .scene-divider__text
 *         .scene-divider__location (optional)
 *         .scene-divider__activity
 *     .scene-divider__line--right  (fading ornamental line)
 *     .scene-divider__description  (optional transition prose)
 */

/* ========================================
 * Container
 * ======================================== */

.scene-divider {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  margin: var(--space-6) 0;
  position: relative;
  animation: sceneDividerReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sceneDividerReveal {
  from {
    opacity: 0;
    transform: scaleX(0.85);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ========================================
 * Ornamental Lines
 * Gradient fades from center badge outward to transparent edges,
 * creating the look of parchment ink trailing off the page.
 * ======================================== */

.scene-divider__line {
  flex: 1;
  position: relative;
  height: 0;
  min-width: 40px;

  /* Double-line effect: a thin top rule and a thin bottom rule */
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  overflow: visible;
}

/* The main ornamental line */
.scene-divider__line::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--color-accent-primary, #c8a96e);
  opacity: 0.7;
}

/* The decorative dot-dash inner rule */
.scene-divider__line::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--color-accent-primary, #c8a96e);
  opacity: 0.3;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-accent-primary, #c8a96e) 0px,
    var(--color-accent-primary, #c8a96e) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Left line: fades from transparent on the left to full color at center */
.scene-divider__line--left::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.2) 20%,
    var(--color-accent-primary, #c8a96e) 100%
  );
}

.scene-divider__line--left::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200, 169, 110, 0.15) 25%,
    rgba(200, 169, 110, 0.3) 100%
  );
  background-image: none;
}

/* Right line: fades from full color at center to transparent on the right */
.scene-divider__line--right::before {
  background: linear-gradient(
    90deg,
    var(--color-accent-primary, #c8a96e) 0%,
    rgba(200, 169, 110, 0.2) 80%,
    transparent 100%
  );
}

.scene-divider__line--right::after {
  background: linear-gradient(
    90deg,
    rgba(200, 169, 110, 0.3) 0%,
    rgba(200, 169, 110, 0.15) 75%,
    transparent 100%
  );
  background-image: none;
}

/* ========================================
 * Diamond Badge
 * The central ornament. Uses a rotated square (clip-path diamond)
 * so the border corners create the classic D&D chapter break look.
 * ======================================== */

.scene-divider__content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  position: relative;

  /* Diamond border via clip-path on a pseudo-element */
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #c8a96e);
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(200, 169, 110, 0.15),
    0 2px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(200, 169, 110, 0.08);
  white-space: nowrap;
  flex-shrink: 0;

  /* Corner diamonds — CSS-only using box-shadow on a tiny rotated pseudo */
}

/* Corner accent diamonds on the badge */
.scene-divider__content::before,
.scene-divider__content::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-accent-primary, #c8a96e);
  transform: rotate(45deg);
  top: 50%;
  margin-top: -3px;
}

.scene-divider__content::before {
  left: -4px;
}

.scene-divider__content::after {
  right: -4px;
}

/* ========================================
 * Icon — Crossed Swords / Chapter Mark
 * ======================================== */

.scene-divider__icon {
  font-size: 1rem;
  line-height: 1;
  color: var(--color-accent-primary, #c8a96e);
  opacity: 0.9;
  filter: drop-shadow(0 1px 3px rgba(200, 169, 110, 0.5));
  flex-shrink: 0;
}

/* ========================================
 * Text Content
 * ======================================== */

.scene-divider__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.scene-divider__location {
  font-family: var(--font-heading, 'Cinzel', serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-primary, #c8a96e);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.scene-divider__activity {
  font-family: var(--font-mono, monospace);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, #888);
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* ========================================
 * Optional Description (transition prose)
 * Appears below the full divider line on its own row
 * ======================================== */

.scene-divider__description {
  flex-basis: 100%;
  margin: var(--space-2) var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-body, sans-serif);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--color-text-secondary, #aaa);
  border-left: 2px solid var(--color-accent-primary, #c8a96e);
  opacity: 0.85;
  line-height: 1.5;
}

/* ========================================
 * Responsive
 * ======================================== */

@media (max-width: 640px) {
  .scene-divider {
    padding: var(--space-4) var(--space-2);
    gap: var(--space-2);
  }

  /* Hide gradient lines on small screens — the badge stands alone */
  .scene-divider__line {
    display: none;
  }

  .scene-divider__content {
    padding: var(--space-2) var(--space-3);
  }

  .scene-divider__location {
    font-size: 0.75rem;
  }

  .scene-divider__activity {
    font-size: 0.625rem;
  }

  .scene-divider__description {
    margin: var(--space-2) 0 0;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .scene-divider {
    animation: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .scene-divider__content {
    border-width: 2px;
  }

  .scene-divider__line::before {
    opacity: 1;
    height: 2px;
  }

  .scene-divider__line::after {
    opacity: 0.7;
  }

  .scene-divider__icon {
    opacity: 1;
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .scene-divider {
    break-inside: avoid;
    page-break-inside: avoid;
    padding: var(--space-3) 0;
    animation: none;
  }

  .scene-divider__line::before {
    background: #000;
    opacity: 0.5;
  }

  .scene-divider__line::after {
    display: none;
  }

  .scene-divider__content {
    border: 1px solid #000;
    background: #fff;
    box-shadow: none;
  }

  .scene-divider__content::before,
  .scene-divider__content::after {
    background: #fff;
    border-color: #000;
  }

  .scene-divider__icon {
    color: #000;
  }

  .scene-divider__location {
    color: #000;
  }

  .scene-divider__activity {
    color: #444;
  }

  .scene-divider__description {
    color: #444;
    border-left-color: #000;
  }
}
/**
 * Screenplay Format — Core Styles
 * =================================
 * Container, scene header, margin notes, action lines, NPC dialogue.
 */

/**
 * Screenplay Format Component
 * ===========================
 * Cinematic screenplay-style formatting for narrative content.
 * Transforms in-game content (NPC speech, DM narration, scenes) into
 * professional screenplay layout while preserving terminal style for
 * system messages.
 *
 * Layout Reference:
 * ┌─────────────────────────────────────────────────────────────┐
 * │ INT. THE RUSTY ANCHOR - EVENING           [Perception +2]  │  ← Slug line + margin notes
 * ├─────────────────────────────────────────────────────────────┤
 * │     The tavern is thick with pipe smoke...                  │  ← Action/description
 * │                                                             │
 * │                      BARTENDER                              │  ← Character name (centered)
 * │              (wiping a glass, suspicious)                   │  ← Parenthetical
 * │          They're here. I knew they'd come.                  │  ← Dialogue (centered)
 * ├─────────────────────────────────────────────────────────────┤
 * │ ⚙ System: Roll Perception DC 14                            │  ← System message (terminal style)
 * └─────────────────────────────────────────────────────────────┘
 */

/* ========================================
 * Screenplay Mode Container
 * ======================================== */

.screenplay-mode {
  --screenplay-max-width: 65ch;
  --screenplay-action-indent: 1.5rem;
  --screenplay-dialogue-width: 65%;
  --screenplay-character-spacing: 0.1em;
  --screenplay-slug-height: 2px;
}

/* ========================================
 * Scene Header (Slug Line)
 * Professional screenplay slug line format
 * ======================================== */

.screenplay-mode .scene-divider,
.screenplay-scene-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-3) 0;
  margin: var(--space-4) 0 var(--space-3);
  border-bottom: var(--screenplay-slug-height) solid var(--color-border-subtle, rgba(255, 255, 255, 0.15));
  animation: none;
  gap: var(--space-4);
  position: relative;
}

/* Remove the default scene divider decorations in screenplay mode ONLY when a
   `data-slug` attribute is present — i.e. when the divider was authored as a
   slug-line scene header. JS-created dividers from SceneDividerController
   carry no `data-slug` and therefore retain their default decorative content
   (icon + location + activity), which screenplay-mode would otherwise hide.
   Without this scoping the location label was invisible in `game` room
   (#4808 — game is in narrative_controller.js SCREENPLAY_ROOMS, so every
   in-game scene transition rendered a blank divider). */
.screenplay-mode .scene-divider[data-slug] .scene-divider__line,
.screenplay-mode .scene-divider[data-slug] .scene-divider__content {
  display: none;
}

/* Show slug line content instead — only when data-slug is present, otherwise
   the ::before pseudo would render an empty string and add stray padding. */
.screenplay-mode .scene-divider[data-slug]::before {
  content: attr(data-slug);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.screenplay-slug {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.screenplay-slug__prefix {
  color: var(--color-accent-primary);
  margin-right: var(--space-1);
}

.screenplay-slug__location {
  color: var(--color-text-primary);
}

.screenplay-slug__time {
  color: var(--color-text-tertiary);
  margin-left: var(--space-2);
}

/* ========================================
 * Margin Notes (Float Right)
 * Contextual info: perception bonuses, time, NPCs
 * ======================================== */

.screenplay-margin-notes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-align: right;
  flex-shrink: 0;
}

.screenplay-margin-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--color-bg-tertiary, rgba(255, 255, 255, 0.05));
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.screenplay-margin-note--perception {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.screenplay-margin-note--time {
  color: var(--color-accent-warning, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
}

.screenplay-margin-note--combat {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.screenplay-margin-note--npcs {
  color: var(--retro-purple, #7B68EE);
  background: rgba(123, 104, 238, 0.1);
}

/* ========================================
 * Action Lines (DM Narration)
 * Indented prose describing the scene
 * ======================================== */

.screenplay-mode .narrative-entry.dm,
.screenplay-mode .dm-narration,
.screenplay-action {
  background: transparent;
  border: none;
  border-left: none;
  padding: var(--space-2) var(--screenplay-action-indent);
  padding-right: var(--screenplay-action-indent);
  max-width: var(--screenplay-max-width);
  margin: var(--space-2) auto;
  line-height: 1.7;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  text-align: left;
}

.screenplay-mode .narrative-entry.dm:hover,
.screenplay-mode .dm-narration:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Remove border-left styling from DM entries in screenplay mode */
.screenplay-mode .narrative-entry.dm {
  border-left: none;
  background: transparent;
}

/* Action line paragraphs */
.screenplay-action p,
.screenplay-mode .dm-narration p {
  margin: 0 0 var(--space-3);
  text-indent: 0;
}

.screenplay-action p:last-child,
.screenplay-mode .dm-narration p:last-child {
  margin-bottom: 0;
}

/* ========================================
 * NPC Dialogue (Screenplay Format)
 * Centered character name, parenthetical, dialogue
 * ======================================== */

.screenplay-mode .npc-dialogue,
.screenplay-dialogue {
  background: transparent;
  border: none;
  border-left: none;
  padding: var(--space-3) 0;
  text-align: center;
  position: relative;
}

/* Remove the glow effect in screenplay mode */
.screenplay-mode .npc-dialogue::before {
  display: none;
}

/* Character Name (centered, uppercase) */
.screenplay-mode .npc-header,
.screenplay-character-name {
  display: block;
  text-align: center;
  margin-bottom: var(--space-1);
}

.screenplay-mode .npc-avatar {
  display: none;
}

.screenplay-mode .npc-name,
.screenplay-character-name__text {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--screenplay-character-spacing);
  color: var(--npc-color, var(--color-text-secondary));
  margin-bottom: 0;
}

/* Hide mood badge in screenplay mode - mood shown via parenthetical */
.screenplay-mode .npc-mood {
  display: none;
}

/* Parenthetical (emotion/action cue) */
.screenplay-mode .npc-dialogue[data-emotion],
.screenplay-parenthetical {
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.screenplay-mode .npc-dialogue[data-emotion]::after {
  content: '(' attr(data-emotion) ')';
  display: block;
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.screenplay-parenthetical::before {
  content: '(';
}

.screenplay-parenthetical::after {
  content: ')';
}

/* Dialogue Block (centered, narrower) */
.screenplay-mode .npc-speech-bubble,
.screenplay-dialogue-content {
  max-width: var(--screenplay-dialogue-width);
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  padding: 0;
}

.screenplay-mode .npc-speech-bubble--spoken {
  padding-left: 0;
}

.screenplay-mode .npc-speech-bubble--spoken::before {
  display: none;
}

.screenplay-mode .npc-speech-bubble p {
  margin: 0;
  text-align: center;
}

/* Inner segments in dialogue */
.screenplay-mode .npc-beat {
  font-style: italic;
  color: var(--color-text-muted);
  display: block;
  margin: var(--space-1) 0;
}

.screenplay-mode .npc-line {
  display: block;
  margin: var(--space-1) 0;
}

.screenplay-mode .npc-aside {
  font-style: italic;
  font-size: 0.9em;
  opacity: 0.85;
  display: block;
  margin: var(--space-1) 0;
}
/**
 * Screenplay Format — Transitions & Input
 * =========================================
 * Transition lines, system messages, player input, perception content,
 * and responsive adjustments.
 */

/* ========================================
 * Transition Lines
 * Scene transitions like CUT TO:, FADE OUT:
 * ======================================== */

.screenplay-transition {
  text-align: right;
  padding: var(--space-4) var(--screenplay-action-indent);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.screenplay-transition::after {
  content: ':';
}

/* ========================================
 * System Messages (Terminal Style Preserved)
 * Rolls, mechanics, meta information
 * ======================================== */

.screenplay-mode .narrative-entry.system,
.screenplay-system {
  background: var(--color-bg-tertiary, rgba(0, 0, 0, 0.3));
  border-left: 3px solid var(--color-accent-info, #3b82f6);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: left;
  max-width: none;
}

.screenplay-mode .narrative-entry.system::before {
  content: none;
}

.screenplay-system__icon {
  margin-right: var(--space-2);
  opacity: 0.7;
}

/* Roll results in screenplay mode */
.screenplay-mode .roll-result,
.screenplay-mode .pending-roll {
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0;
}

/* ========================================
 * Player Input (Terminal Style)
 * ======================================== */

.screenplay-mode .narrative-entry.player {
  background: transparent;
  border-left: 2px solid var(--color-accent-secondary);
  padding-left: calc(var(--space-3) + 1.2em);
  max-width: none;
  margin: var(--space-2) 0;
  text-align: left;
}

.screenplay-mode .narrative-entry.player::before {
  content: '>';
  position: absolute;
  left: var(--space-3);
  color: var(--color-accent-secondary);
  font-weight: bold;
  opacity: 0.5;
}

/* ========================================
 * Perception Content (Hybrid Style)
 * Revealed perception uses screenplay action style
 * ======================================== */

.screenplay-mode .perception-revealed {
  padding: var(--space-2) var(--screenplay-action-indent);
  max-width: var(--screenplay-max-width);
  margin: var(--space-2) auto;
  border-left: 3px solid var(--skill-color, #3b82f6);
  background: var(--skill-color-faded, rgba(59, 130, 246, 0.08));
}

/* Hidden perception keeps terminal style */
.screenplay-mode .perception-hidden {
  font-family: var(--font-mono);
  max-width: none;
}

/* ========================================
 * Responsive Adjustments
 * ======================================== */

@media (max-width: 768px) {
  .screenplay-mode {
    --screenplay-action-indent: var(--space-3);
    --screenplay-dialogue-width: 85%;
    --screenplay-max-width: 100%;
  }

  .screenplay-scene-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .screenplay-margin-notes {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .screenplay-mode .npc-name,
  .screenplay-character-name__text {
    font-size: var(--font-size-xs);
  }

  .screenplay-mode .npc-speech-bubble,
  .screenplay-dialogue-content {
    max-width: 95%;
  }
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .screenplay-scene-header,
  .screenplay-mode .scene-divider {
    animation: none;
    transition: none;
  }
}

/* ========================================
 * High Contrast Mode
 * ======================================== */

@media (prefers-contrast: high) {
  .screenplay-scene-header {
    border-bottom-width: 3px;
    border-bottom-color: var(--color-text-primary);
  }

  .screenplay-mode .npc-name,
  .screenplay-character-name__text {
    font-weight: 700;
  }

  .screenplay-margin-note {
    border: 1px solid currentColor;
  }
}

/* ========================================
 * Print Styles
 * ======================================== */

@media print {
  .screenplay-mode {
    --screenplay-action-indent: 1.5in;
    --screenplay-dialogue-width: 3.5in;
  }

  .screenplay-scene-header {
    page-break-after: avoid;
    border-bottom-color: #000;
  }

  .screenplay-mode .npc-dialogue,
  .screenplay-dialogue {
    page-break-inside: avoid;
  }

  .screenplay-margin-notes {
    display: none;
  }

  .screenplay-mode .narrative-entry.system,
  .screenplay-system {
    background: #f5f5f5;
    border-left-color: #666;
  }
}
/**
 * Screenplay Format — Print & Lobby
 * ===================================
 * Reduced motion, high contrast, print styles, and lobby scene.
 */

/* ========================================
 * Lobby Scene (Welcome Experience)
 * Cassette futurism — terminal boot sequence
 * ======================================== */

.lobby-scene {
  padding: var(--space-4);
  max-width: 50ch;
  animation: lobbySceneFadeIn 0.6s ease-out;
}

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

/* Boot sequence lines */
.lobby-scene__boot {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
}

.lobby-scene__boot-line {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  animation: bootLineReveal 0.3s ease-out backwards;
}

.lobby-scene__boot-line:nth-child(1) {
  animation-delay: 0.1s;
}

.lobby-scene__boot-line:nth-child(2) {
  animation-delay: 0.4s;
}

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

/* Greeting block */
.lobby-scene__greeting {
  animation: greetingReveal 0.4s ease-out 0.7s backwards;
}

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

.lobby-scene__status {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-accent-primary, #fbbf24);
  margin: 0 0 var(--space-3) 0;
}

.lobby-scene__welcome {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.lobby-scene__character-name {
  color: var(--color-accent-primary, #fbbf24);
  font-weight: 600;
}

.lobby-scene__prompt {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Action Cards (Create/Load options) */
.lobby-scene__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
  margin: var(--space-6) auto var(--space-4);
  animation: actionsReveal 0.5s ease-out 0.5s backwards;
}

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

/* Reset button styles when using semantic <button> for a11y */
button.lobby-scene__action,
.lobby-scene__action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}

.lobby-scene__action:hover {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.1) 0%,
    rgba(251, 191, 36, 0.05) 100%
  );
  border-color: rgba(251, 191, 36, 0.3);
  transform: translateX(4px);
}

.lobby-scene__action:active {
  transform: translateY(1px);
  opacity: 0.9;
}

.lobby-scene__action-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(251, 191, 36, 0.1);
  border-radius: var(--radius-sm, 6px);
  color: var(--color-accent-primary, #fbbf24);
  flex-shrink: 0;
}

.lobby-scene__action-icon svg {
  width: 18px;
  height: 18px;
}

.lobby-scene__action-text {
  flex: 1;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
}

.lobby-scene__action-cmd {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  padding: var(--space-1) var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 640px) {
  .lobby-scene {
    padding: var(--space-3);
  }

  .lobby-scene__actions {
    max-width: 100%;
  }

  .lobby-scene__action {
    padding: var(--space-2-5) var(--space-3);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .lobby-scene,
  .lobby-scene__boot-line,
  .lobby-scene__greeting,
  .lobby-scene__actions {
    animation: none;
  }

  .lobby-scene__action:hover {
    transform: none;
  }
}
/**
 * Screenplay Format Component — Import Hub
 * ==========================================
 * Screenplay-style narrative display with print and lobby support.
 *
 * Decomposed into focused files under screenplay_format/ for maintainability.



 */
/* ========================================
 * Spell Slot Picker Modal
 * ========================================
 * Modal dialog for selecting spell slot level
 * when casting AoE spells from VTT
 */

.spell-slot-picker {
  padding: 0;
  border: 1px solid var(--color-accent-primary, #3498db);
  border-radius: var(--radius-lg, 8px);
  background: var(--color-bg-primary, #1a1a2e);
  color: var(--color-text, #fff);
  max-width: 320px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

.spell-slot-picker::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.spell-slot-picker__content {
  padding: var(--space-4, 16px);
}

.spell-slot-picker__title {
  margin: 0 0 var(--space-1, 4px) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-accent-primary, #3498db);
}

.spell-slot-picker__subtitle {
  margin: 0 0 var(--space-3, 12px) 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #a0a0a0);
}

.spell-slot-picker__slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-4, 16px);
}

.spell-slot-picker__slot-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--color-bg-secondary, #2a2a40);
  border: 1px solid var(--color-border, #3a3a50);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text, #fff);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.spell-slot-picker__slot-btn:hover {
  background: var(--color-bg-hover, #3a3a50);
  border-color: var(--color-accent-primary, #3498db);
}

.spell-slot-picker__slot-btn:focus {
  outline: 2px solid var(--color-accent-primary, #3498db);
  outline-offset: 2px;
}

.spell-slot-picker__level {
  flex: 0 0 80px;
  font-weight: 500;
  color: var(--color-text, #fff);
}

.spell-slot-picker__pips {
  display: flex;
  gap: 4px;
  flex: 1;
}

.spell-slot-picker__pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-bg-tertiary, #4a4a60);
  border: 1px solid var(--color-border, #5a5a70);
}

.spell-slot-picker__pip--filled {
  background: var(--color-spell-slot, #9b59b6);
  border-color: var(--color-spell-slot, #9b59b6);
  box-shadow: 0 0 4px var(--color-spell-slot, #9b59b6);
}

.spell-slot-picker__count {
  flex: 0 0 40px;
  text-align: right;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #a0a0a0);
}

.spell-slot-picker__actions {
  display: flex;
  justify-content: flex-end;
}

.spell-slot-picker__cancel {
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: transparent;
  border: 1px solid var(--color-border, #3a3a50);
  border-radius: var(--radius-md, 6px);
  color: var(--color-text-secondary, #a0a0a0);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.spell-slot-picker__cancel:hover {
  background: var(--color-bg-secondary, #2a2a40);
  color: var(--color-text, #fff);
}

/* ========================================
 * Reduced Motion
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  .spell-slot-picker__slot-btn,
  .spell-slot-picker__cancel {
    transition: none;
  }
}
/* ========================================
 * Typewriter Effect
 * Character-by-character dramatic text reveals
 * ======================================== */

.typewriter--active {
  /* Ensure visibility during typing */
  min-height: 1em;
}

/* Blinking cursor */
.typewriter__cursor {
  display: inline;
  color: var(--color-gold, #d4af37);
  font-weight: bold;
  animation: cursorBlink 0.8s step-end infinite;
  margin-left: 1px;
}

@keyframes cursorBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Completed state - subtle fade in for final appearance */
.typewriter--complete {
  animation: typewriterComplete 0.3s ease-out;
}

@keyframes typewriterComplete {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 1;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .typewriter__cursor {
    animation: none;
    opacity: 1;
  }

  .typewriter--complete {
    animation: none;
  }
}
/* ===========================================
 * Optimistic Room Transition
 * ===========================================
 * Immediate visual feedback when a room navigation
 * click is fired, before the WebSocket round-trip
 * confirms. Resolves automatically when the real
 * room_changed broadcast arrives.
 */

/* --- Body-level cursor & click prevention --- */
body.room-transitioning .grid-layout-wrapper {
  cursor: progress;
  pointer-events: none;
}

/* --- Portal overlay (fixed fullscreen) --- */
.optimistic-portal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Expanding ring --- */
.optimistic-portal__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: portalExpand 0.4s ease-out forwards;
  box-shadow:
    0 0 30px 8px rgba(138, 43, 226, 0.4),
    0 0 60px 16px rgba(138, 43, 226, 0.2),
    inset 0 0 20px 4px rgba(186, 85, 255, 0.3);
  border: 2px solid rgba(186, 85, 255, 0.6);
  background: transparent;
}

@keyframes portalExpand {
  0% {
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    width: 120vmax;
    height: 120vmax;
    opacity: 0;
  }
}

/* --- Vignette darkening from edges --- */
.optimistic-portal__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 30%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.6) 100%
  );
  opacity: 0;
  animation: vignetteIn 0.25s ease-out forwards;
}

@keyframes vignetteIn {
  to {
    opacity: 1;
  }
}

/* --- Room name label --- */
.optimistic-portal__label {
  position: relative;
  z-index: var(--z-raised);
  color: var(--color-gold, #d4a843);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: capitalize;
  text-shadow: 0 0 12px rgba(212, 168, 67, 0.5);
  opacity: 0;
  transform: scale(0.95);
  animation: labelAppear 0.25s ease-out forwards;
}

/* Shimmer effect during loading */
.optimistic-portal__label::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 100%
  );
  animation: labelShimmer 1.5s ease-in-out 0.4s infinite;
}

@keyframes labelAppear {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes labelShimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* --- "Taking longer" message --- */
.optimistic-portal__slow-message {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-text-muted, #888);
  font-size: 0.875rem;
  opacity: 0;
  animation: slowMessageAppear 0.3s ease-out forwards;
}

@keyframes slowMessageAppear {
  to { opacity: 0.8; }
}

/* --- Panel pre-fade --- */
.grid-panel.optimistic-fading {
  opacity: 0.3;
  transform: scale(0.97);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.grid-panel.optimistic-restoring {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}

/* ===========================================
 * Phase 3: Progressive Narrative Reveal
 * ===========================================
 * Applied to narrative entries arriving during or
 * shortly after a room transition. Content is revealed
 * top-to-bottom with a scan-line mask, creating the
 * impression that the room description is materializing.
 *
 * Phases timeline:
 *   Phase 1 (0-400ms): Portal expand + vignette
 *   Phase 2 (400-800ms): Room name label + shimmer
 *   Phase 3 (800ms+): Narrative content scan-line reveal
 */

/* --- Narrative reveal (scan-line mask) --- */
.narrative-reveal {
  animation: narrativeReveal 1.2s ease-out forwards;
}

@keyframes narrativeReveal {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0.4;
  }
  10% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
  }
}

/* Scan-line accent — a subtle horizontal highlight that
   sweeps down the content in sync with the clip reveal */
.narrative-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(212, 168, 67, 0.6) 30%,
    rgba(186, 85, 255, 0.4) 70%,
    transparent 100%
  );
  animation: scanLineDown 1.2s ease-out forwards;
  pointer-events: none;
  z-index: var(--z-raised);
}

@keyframes scanLineDown {
  0% {
    top: 0;
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* Stagger delay for successive entries — each subsequent
   narrative entry in a room reveal starts slightly later,
   creating a cascading materialization effect */
.narrative-reveal:nth-child(1) { animation-delay: 0ms; }
.narrative-reveal:nth-child(2) { animation-delay: 150ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(3) { animation-delay: 300ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(4) { animation-delay: 450ms; clip-path: inset(0 0 100% 0); }
.narrative-reveal:nth-child(5) { animation-delay: 600ms; clip-path: inset(0 0 100% 0); }

/* Ensure the entry is positioned for the ::before scan-line */
.narrative-reveal {
  position: relative;
}

/* ===========================================
 * Scene Transitions (within same room)
 * ===========================================
 * Lighter visual treatment than room transitions.
 * Uses slide instead of portal for semantic distinction.
 */

.optimistic-scene {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel-chrome);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: sceneOverlayIn 0.2s ease-out forwards;
}

@keyframes sceneOverlayIn {
  to { opacity: 1; }
}

.optimistic-scene__label {
  color: var(--color-text, #e8e8e8);
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  padding: 0.75rem 1.5rem;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--color-border, #444);
  border-radius: 4px;
  opacity: 0;
  transform: translateY(10px);
  animation: sceneLabelSlide 0.25s ease-out 0.1s forwards;
}

@keyframes sceneLabelSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scene icon (activity-specific) */
.optimistic-scene__icon {
  margin-right: 0.5rem;
  opacity: 0.8;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .optimistic-portal__ring {
    animation: none;
    display: none;
  }

  .optimistic-portal__vignette {
    animation: none;
    opacity: 0.4;
  }

  .optimistic-portal__label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .optimistic-portal__label::after {
    animation: none;
    display: none;
  }

  .optimistic-portal__slow-message {
    animation: none;
    opacity: 0.8;
  }

  .grid-panel.optimistic-fading {
    transition: none;
    opacity: 0.3;
    transform: none;
  }

  .grid-panel.optimistic-restoring {
    transition: none;
  }

  .optimistic-scene {
    animation: none;
    opacity: 1;
  }

  .optimistic-scene__label {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Phase 3: Narrative reveal — simple fade instead of scan-line */
  .narrative-reveal {
    animation: narrativeRevealReduced 0.3s ease-out forwards;
  }

  .narrative-reveal::before {
    animation: none;
    display: none;
  }
}

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

/* ===========================================
 * Mobile Optimizations (#718)
 * ===========================================
 * Faster animations on mobile where screen real estate is limited
 * and users expect snappier interactions. Uses CSS custom properties
 * set by transition_timing.js syncCssTimingProperties().
 */

@media (max-width: 1023px) {
  /* Faster portal ring expansion on mobile */
  .optimistic-portal__ring {
    animation-duration: 0.25s;
  }

  /* Faster vignette on mobile */
  .optimistic-portal__vignette {
    animation-duration: 0.15s;
  }

  /* Faster label appearance on mobile */
  .optimistic-portal__label {
    animation-duration: 0.15s;
    font-size: 1.2rem;
  }

  /* Skip shimmer on mobile — saves GPU cycles */
  .optimistic-portal__label::after {
    display: none;
  }

  /* Faster panel fading on mobile */
  .grid-panel.optimistic-fading {
    transition-duration: 0.2s;
  }

  .grid-panel.optimistic-restoring {
    transition-duration: 0.2s;
  }

  /* Faster scene overlay on mobile */
  .optimistic-scene {
    animation-duration: 0.12s;
  }

  .optimistic-scene__label {
    animation-duration: 0.15s;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }

  /* Shorter narrative reveal on mobile */
  .narrative-reveal {
    animation-duration: 0.6s;
  }

  /* Reduce stagger delays on mobile */
  .narrative-reveal:nth-child(2) { animation-delay: 80ms; }
  .narrative-reveal:nth-child(3) { animation-delay: 160ms; }
  .narrative-reveal:nth-child(4) { animation-delay: 240ms; }
  .narrative-reveal:nth-child(5) { animation-delay: 320ms; }

  /* Simpler scan-line on mobile */
  .narrative-reveal::before {
    animation-duration: 0.6s;
  }
}
/*
 * Cyberpunk / Retro-Futuristic Terminal Effects
 * ==============================================
 * Layered CRT-inspired visual effects for the terminal:
 *   1. Animated scan-line overlay (CSS-only, very subtle)
 *   2. Swing-down entrance for narrative segments
 *   3. Glow effects on interactive elements
 *   4. Boot sequence enhancement (green phosphor)
 *   5. Room transition flicker
 *
 * All effects are purely cosmetic and respect prefers-reduced-motion.
 * Uses existing design tokens from _tokens.css.
 *
 * Activation: Always on (subtle enough to be ambient).
 * The CRT effects system (effects/_crt.css) is a separate opt-in toggle;
 * this file provides a lighter always-on cyberpunk texture layer.
 */

/* ========================================
 * CUSTOM PROPERTIES
 * Tuning knobs for cyberpunk effects
 * ======================================== */
:root {
  --cyber-scanline-opacity: 0.025;
  --cyber-scanline-speed: 60s;
  --cyber-glow-color: color-mix(in srgb, var(--color-accent-cyan, #4da8b5) 25%, transparent);
  --cyber-glow-color-strong: color-mix(in srgb, var(--color-accent-cyan, #4da8b5) 40%, transparent);
  --cyber-glow-color-input: color-mix(in srgb, var(--color-accent-primary, #5a9fd8) 25%, transparent);
  --cyber-swing-duration: 400ms;
  --cyber-flicker-duration: 200ms;
}

/* ========================================
 * 1. SCAN-LINE OVERLAY
 * Subtle repeating horizontal lines that
 * drift slowly down the screen. Gives the
 * terminal a CRT phosphor texture without
 * being distracting.
 * ======================================== */
.terminal-container::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background:
    /* Static scan-line texture */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(0, 0, 0, var(--cyber-scanline-opacity)) 3px,
      rgba(0, 0, 0, var(--cyber-scanline-opacity)) 4px
    );
  animation: cyberScanlineDrift var(--cyber-scanline-speed) linear infinite;
  will-change: background-position;
}

/* Animated moving scan-line: a single brighter band
   that sweeps top-to-bottom over the full viewport */
.terminal-container::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-fx);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 45%,
    rgba(0, 0, 0, 0.03) 48%,
    rgba(255, 255, 255, 0.015) 50%,
    rgba(0, 0, 0, 0.03) 52%,
    transparent 55%,
    transparent 100%
  );
  background-size: 100% 200%;
  animation: cyberScanlineSweep var(--cyber-scanline-speed) linear infinite;
  will-change: background-position;
}

@keyframes cyberScanlineDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 4px; }
}

@keyframes cyberScanlineSweep {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

/* ========================================
 * 2. SWING-DOWN ENTRANCE
 * Narrative segments "swing in" from above
 * with a subtle perspective rotation, as if
 * dropping from a monitor bezel.
 * ======================================== */
@keyframes swingDown {
  from {
    transform: perspective(800px) rotateX(-15deg) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: perspective(800px) rotateX(0) translateY(0);
    opacity: 1;
  }
}

/* Apply swing-down to new narrative segments.
   The .narrative-segment base in _retro_narrative.css sets
   opacity:0 + segmentReveal; we override that animation
   with the more dramatic swingDown for the cyberpunk feel.
   Uses the same stagger delays already defined there. */
.narrative-segment {
  animation-name: swingDown;
  animation-duration: var(--cyber-swing-duration);
  animation-timing-function: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  animation-fill-mode: forwards;
  transform-origin: top center;
}

/* ========================================
 * 3. GLOW EFFECTS
 * Subtle cyan/blue glow on interactive
 * elements for that neon-terminal feel.
 * ======================================== */

/* Input field focus glow */
.input-field:focus {
  box-shadow: 0 0 8px var(--cyber-glow-color-input);
}

/* Input line border glow on focus */
.input-line:focus-within {
  box-shadow: 0 0 6px var(--cyber-glow-color-input);
}

/* Active channel tab indicator glow */
.channel-tab--active {
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent-color, var(--color-accent-primary)) 20%, transparent);
}

/* Toast notification glow border */
.toast--visible {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 8px color-mix(in srgb, var(--toast-border-color, var(--color-accent-primary)) 20%, transparent);
}

/* Celebration toast already has a strong glow; intensify slightly */
.toast--celebration.toast--visible {
  box-shadow:
    0 4px 24px rgba(251, 191, 36, 0.3),
    0 0 40px rgba(251, 191, 36, 0.15),
    0 0 12px color-mix(in srgb, var(--color-accent-warning) 25%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Prompt character glow (the > or $ before input) */
.input-area:focus-within .input-prompt {
  text-shadow: 0 0 4px var(--cyber-glow-color-input);
}

/* ========================================
 * 5. ROOM TRANSITION FLICKER
 * Brief opacity dip when switching rooms,
 * simulating a CRT display mode-change.
 * Applied via JS adding .cyber-room-transition
 * to .terminal-container.
 * ======================================== */
@keyframes cyberRoomFlicker {
  0%   { opacity: 1; }
  20%  { opacity: 0.97; }
  40%  { opacity: 1; }
  60%  { opacity: 0.98; }
  80%  { opacity: 1; }
  100% { opacity: 1; }
}

.terminal-container.cyber-room-transition {
  animation: cyberRoomFlicker var(--cyber-flicker-duration) ease-out;
}

/* ========================================
 * 6. HOLOGRAPHIC SHIMMER
 * Subtle gradient sweep across cards on hover.
 * Applies to detail-cards, creation-cards, and
 * any element with .cyber-shimmer class.
 * ======================================== */
@keyframes cyberShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.cyber-shimmer,
.detail-card:hover,
.creation-card:hover {
  background-image: linear-gradient(
    110deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.03) 45%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 55%,
    transparent 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: cyberShimmer 2s ease-in-out;
}

/* ========================================
 * 7. DATA-STREAM TRANSITION
 * Vertical reveal effect for state changes.
 * Content appears to materialize line-by-line
 * like data rendering on a terminal.
 * ======================================== */
@keyframes cyberDataStream {
  from {
    clip-path: inset(0 0 100% 0);
    opacity: 0.6;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.cyber-data-stream {
  animation: cyberDataStream 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ========================================
 * 8. SCAN-LINE REVEAL
 * Content reveals with a horizontal scan-line
 * moving down. For room transitions and major
 * UI state changes.
 * ======================================== */
@keyframes cyberScanReveal {
  0% {
    mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 0%);
  }
  100% {
    mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 100%, transparent 100%);
  }
}

.cyber-scan-reveal {
  animation: cyberScanReveal 0.6s ease-out forwards;
}

/* ========================================
 * 9. FADE-GLOW ENTRANCE
 * Elements fade in with a brief glow pulse.
 * Lighter alternative to swing-down for less
 * dramatic content like panel headers.
 * ======================================== */
@keyframes cyberFadeGlow {
  0% {
    opacity: 0;
    text-shadow: 0 0 8px var(--cyber-glow-color);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 4px var(--cyber-glow-color);
  }
  100% {
    opacity: 1;
    text-shadow: none;
  }
}

.cyber-fade-glow {
  animation: cyberFadeGlow 0.5s ease-out forwards;
}

/* ========================================
 * 10. CRT EFFECTS DECONFLICT
 * When the full CRT system is toggled on
 * (effects/_crt.css), hide the cyberpunk
 * scan-line overlay to avoid double-stacking.
 * Glow and swing effects remain active.
 * ======================================== */
html[data-crt-effects="on"] .terminal-container::after,
html[data-crt-effects="on"] .terminal-container::before,
body.crt-enabled .terminal-container::after,
body.crt-enabled .terminal-container::before {
  display: none;
}

/* ========================================
 * 7. PREFERS-REDUCED-MOTION
 * Disable scan-lines and swing animation.
 * Keep subtle static glow effects only.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  /* Remove scan-line overlays entirely */
  .terminal-container::after,
  .terminal-container::before {
    animation: none;
    background: none;
    display: none;
  }

  /* Revert swing-down to simple instant appear */
  .narrative-segment {
    animation-name: none;
    opacity: 1;
    transform: none;
  }

  /* Remove room transition flicker */
  .terminal-container.cyber-room-transition {
    animation: none;
  }

  /* Disable shimmer, data-stream, scan-reveal */
  .cyber-shimmer,
  .detail-card:hover,
  .creation-card:hover {
    animation: none;
    background-image: none;
  }

  .cyber-data-stream,
  .cyber-scan-reveal,
  .cyber-fade-glow {
    animation: none;
    opacity: 1;
  }

  /* Glow effects remain (static, no animation) */
}
/*
 * Plan Preview Card - [plan] mode action preview
 * ===============================================
 * Displayed when a player sends a [plan] message.
 * Shows mechanical consequences and AI flavor before committing.
 * Quick action buttons (Do it / Nevermind) control commit/dismiss.
 */

/* ========================================
 * CARD CONTAINER
 * ======================================== */

.plan-preview-card {
  margin: var(--space-3, 0.75rem) 0;
  background: var(--color-bg-secondary, #2a2a3e);
  border: 1px solid var(--color-accent-warning, #e5c07b);
  border-left: 3px solid var(--color-accent-warning, #e5c07b);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  animation: plan-preview-enter 0.2s ease-out;
}

/* ========================================
 * HEADER
 * ======================================== */

.plan-preview-header {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: rgba(229, 192, 123, 0.1);
  border-bottom: 1px solid var(--color-border-subtle, #333);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-bold, 700);
  color: var(--color-accent-warning, #e5c07b);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
 * MECHANICAL SUMMARY
 * ======================================== */

.plan-preview-mechanical {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #e0e0e0);
  line-height: var(--line-height-relaxed, 1.65);
  border-bottom: 1px solid var(--color-border-subtle, #333);
}

/* ========================================
 * AI FLAVOR TEXT
 * ======================================== */

.plan-preview-flavor {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #aaa);
  line-height: var(--line-height-relaxed, 1.65);
  font-style: italic;
}

/* ========================================
 * NARRATIVE PREVIEW
 * ======================================== */

.plan-preview-narrative {
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #888);
  line-height: var(--line-height-relaxed, 1.65);
  border-top: 1px solid var(--color-border-subtle, #333);
}

/* ========================================
 * ANIMATIONS
 * ======================================== */

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

/* ========================================
 * REDUCED MOTION
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
  .plan-preview-card {
    animation: none;
  }
}
/**
 * Player Action Log Panel (#4231 USER-PACING / AFFORDANCE-INTEGRITY)
 * ===================================================================
 * Player's recovery surface — last N actions with status indicators and
 * retry affordance. Distinct from combat `terminal/action_queue_controller`
 * (in-turn-only) — this panel surfaces ALL action history.
 *
 * Container identity: surface-floating-panel. Cohabits with the
 * pipeline-progress bubble (#4228) — they sit on the same edge of the
 * viewport but at distinct y-offsets so neither obscures the other.
 *
 * Visual language: calm. Status dot + small monospace verb + dim source
 * preview + retry button only when failed. No glow, no animation other
 * than the queued/in_flight pulse.
 */

.player-action-log {
  position: fixed;
  right: var(--space-4, 16px);
  /* Sits above the pipeline-progress bubble (which is bottom: 48px) so the
     two cohabit. The action log is a wider strip with retry buttons; the
     pipeline-progress bubble is a transient transcript. */
  bottom: calc(var(--space-12, 48px) + 56px);
  width: min(420px, calc(100vw - var(--space-8, 32px)));
  max-height: 50vh;
  z-index: var(--z-floating, 1000);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* surface-floating-panel provides bg/border/radius/shadow */
}

.player-action-log[hidden] {
  display: none;
}

/* Empty state hides the panel entirely on first session — the panel reveals
   itself only once there's something to show. */
.player-action-log--empty[hidden] {
  display: none;
}

.player-action-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.4));
}

.player-action-log__toggle {
  appearance: none;
  background: none;
  border: 0;
  color: var(--color-text-primary, #ddd);
  font: inherit;
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: 0;
  width: 100%;
  text-align: left;
}

.player-action-log__toggle:hover,
.player-action-log__toggle:focus-visible {
  color: var(--color-text-emphasis, #fff);
  outline: none;
}

.player-action-log__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 var(--space-1, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-sm, 4px);
  color: var(--color-text-secondary, #aaa);
}

/* Collapsed state — only the header is visible; entries are hidden. */
.player-action-log--collapsed .player-action-log__entries,
.player-action-log--collapsed .player-action-log__empty {
  display: none;
}

.player-action-log__entries {
  list-style: none;
  margin: 0;
  padding: var(--space-2, 8px) 0;
  overflow-y: auto;
  flex: 1;
  /* Subtle inner shadow at top/bottom hints there's more to scroll when
     the list overflows. */
}

.player-action-log__empty {
  margin: 0;
  padding: var(--space-3, 12px);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

.player-action-log__entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.04));
}

.player-action-log__entry:last-child {
  border-bottom: 0;
}

/* Status dot — color-coded so the player can scan vertical column quickly. */
.player-action-log__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 0.4em;
  flex: 0 0 auto;
  background: var(--color-text-tertiary, #888);
}

.player-action-log__entry[data-status="queued"] .player-action-log__status-dot {
  background: var(--color-warning, #f5b042);
  animation: player-action-log-pulse 1.4s ease-in-out infinite;
}

.player-action-log__entry[data-status="in_flight"] .player-action-log__status-dot {
  background: var(--color-info, #4a9eff);
  animation: player-action-log-pulse 1.0s ease-in-out infinite;
}

.player-action-log__entry[data-status="completed"] .player-action-log__status-dot {
  background: var(--color-success, #4ade80);
}

.player-action-log__entry[data-status="failed"] .player-action-log__status-dot {
  background: var(--color-error, #ef4444);
}

@keyframes player-action-log-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .player-action-log__entry[data-status="queued"] .player-action-log__status-dot,
  .player-action-log__entry[data-status="in_flight"] .player-action-log__status-dot {
    animation: none;
  }
}

.player-action-log__body {
  flex: 1 1 auto;
  min-width: 0;
}

.player-action-log__header {
  /* Already styled above */
}

.player-action-log__entry .player-action-log__header {
  /* Override the panel-level header for entry rows */
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 8px);
  padding: 0;
  border: 0;
  background: transparent;
}

.player-action-log__verb {
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary, #ddd);
}

.player-action-log__status {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary, #888);
}

.player-action-log__status[data-status="failed"] {
  color: var(--color-error, #ef4444);
}

.player-action-log__status[data-status="completed"] {
  color: var(--color-success, #4ade80);
}

.player-action-log__duration {
  margin-left: auto;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-variant-numeric: tabular-nums;
}

.player-action-log__source {
  margin-top: 2px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-secondary, #aaa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-action-log__preview {
  margin-top: 2px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-tertiary, #888);
  font-style: italic;
}

.player-action-log__error {
  margin-top: 2px;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error, #ef4444);
  font-style: italic;
}

.player-action-log__retry {
  align-self: flex-start;
  appearance: none;
  background: var(--color-bg-elevated, rgba(255, 255, 255, 0.08));
  color: var(--color-text-primary, #ddd);
  border: 1px solid var(--color-border-default, rgba(255, 255, 255, 0.16));
  border-radius: var(--radius-sm, 4px);
  padding: var(--space-1, 4px) var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  flex: 0 0 auto;
}

.player-action-log__retry:hover,
.player-action-log__retry:focus-visible {
  background: var(--color-bg-hover, rgba(255, 255, 255, 0.12));
  border-color: var(--color-border-emphasis, rgba(255, 255, 255, 0.32));
  outline: none;
}

.player-action-log__retry:active {
  background: var(--color-bg-active, rgba(255, 255, 255, 0.16));
}
/**
 * Session Ledger (#4227 STATE-PARITY-ON-REENTRY / ARRIVAL-LEGIBILITY
 *                       / PROGRESS-AS-CONTENT)
 * ===================================================================
 * The session-ledger is a status-zone item — it descends from the chrome
 * (mounted right after the status bar), NOT a grid panel. Visual treatment
 * follows the surface-status-zone primitive (see #4307); this stylesheet
 * only adds the ledger-specific layout, collapse animation, and per-row
 * structure. No glow, no rainbow gradients, no decorative emoji — calm.
 *
 * Container category: status-zone (CONTAINER-IDENTITY #4230).
 */

.session-ledger {
  /* surface-status-zone primitive supplies bg/border/text-color tokens.
     We add a minimal box layout + collapse animation here. */
  display: block;
  width: 100%;
  border-bottom: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08));
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.4;
}

.session-ledger[hidden] {
  display: none;
}

/* === Header (always visible, click target for collapse) === */

.session-ledger__header {
  display: flex;
  align-items: center;
  padding: var(--space-1, 4px) var(--space-3, 12px);
}

.session-ledger__toggle {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-1, 4px) 0;
  width: 100%;
  text-align: left;
}

.session-ledger__toggle:hover,
.session-ledger__toggle:focus-visible {
  color: var(--color-text-emphasis, #fff);
  outline: none;
}

.session-ledger__toggle:focus-visible {
  /* WCAG: keyboard focus must be visible */
  outline: 2px solid var(--color-focus, rgba(120, 180, 255, 0.6));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

.session-ledger__chevron {
  transition: transform 150ms ease-out;
  display: inline-block;
  font-size: 0.75em;
  opacity: 0.7;
}

.session-ledger:not(.session-ledger--collapsed) .session-ledger__chevron {
  transform: rotate(180deg);
}

.session-ledger__title {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--font-size-xs, 0.75rem);
}

.session-ledger__summary {
  flex: 1 1 auto;
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: var(--space-2, 8px);
}

/* === Body (collapsible) === */

.session-ledger__body {
  padding: var(--space-2, 8px) var(--space-3, 12px) var(--space-3, 12px);
  border-top: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.06));
}

.session-ledger__body[hidden] {
  display: none;
}

/* === Grid of label/value rows === */

.session-ledger__grid {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-3, 12px);
  row-gap: var(--space-1, 4px);
  align-items: start;
}

.session-ledger__row {
  display: contents;
}

.session-ledger__row--block {
  /* Block rows (transcript, available actions) span both columns visually
     by giving the value column a wider treatment via the dd. The row is
     still display: contents so the grid handles the layout. */
}

.session-ledger__label {
  font-size: var(--font-size-xs, 0.75rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin: 0;
  padding-top: 2px;
}

.session-ledger__value {
  margin: 0;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.session-ledger__value--phase {
  font-family: var(--font-family-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.85;
}

.session-ledger__char-meta {
  margin-left: var(--space-2, 8px);
  opacity: 0.7;
  font-size: var(--font-size-xs, 0.75rem);
}

.session-ledger__room-icon {
  margin-right: var(--space-1, 4px);
  opacity: 0.8;
}

/* === Transcript list === */

.session-ledger__transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.session-ledger__transcript-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2, 8px);
  font-size: var(--font-size-xs, 0.75rem);
  font-family: var(--font-family-mono, ui-monospace, monospace);
}

.session-ledger__transcript-verb {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-ledger__transcript-status {
  flex: 0 0 auto;
  opacity: 0.6;
  text-transform: lowercase;
}

.session-ledger__transcript-item[data-status="failed"] .session-ledger__transcript-status {
  color: var(--color-status-error, #f88);
  opacity: 1;
}

.session-ledger__transcript-item[data-status="in_flight"] .session-ledger__transcript-status {
  color: var(--color-status-pending, #fc8);
  opacity: 1;
}

/* === Available actions list === */

.session-ledger__actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
}

.session-ledger__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px var(--space-2, 8px);
  border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-sm, 4px);
  font-size: var(--font-size-xs, 0.75rem);
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.2));
}

.session-ledger__action-icon {
  opacity: 0.7;
}

/* === Empty states === */

.session-ledger__empty {
  margin: 0;
  font-size: var(--font-size-xs, 0.75rem);
  opacity: 0.5;
  font-style: italic;
}
/**
 * Minimap Styles
 * ==============
 * Persistent corner minimap showing the current room wireframe.
 * Semi-transparent overlay in the bottom-right corner.
 */

.minimap {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 240px;
  height: 240px;
  z-index: var(--z-panel);
  border: 1px solid var(--terminal-border, #3e4451);
  border-radius: var(--radius-sm, 0.25rem);
  background: rgba(26, 26, 26, 0.75);
  box-shadow: 0 0 12px rgba(97, 175, 239, 0.15);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.minimap--hidden {
  opacity: 0;
  pointer-events: none;
}

.minimap__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

@media (max-width: 600px) {
  .minimap {
    width: 160px;
    height: 160px;
    bottom: 8px;
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .minimap {
    transition: none;
  }
}
/*
 * CRT / Phosphor Visual Effects
 * ==============================
 * Optional retro CRT monitor aesthetic: scanlines, phosphor glow,
 * screen curvature, subtle flicker, and edge vignette.
 *
 * Activation:
 *   html[data-crt-effects="on"]   (primary, toggled via Settings)
 *   body.crt-enabled              (alternative class-based toggle)
 *
 * Independent of theme -- adapts via --color-accent-primary.
 * Toggle via Settings > CRT Effects.
 *
 * Performance notes:
 *   - Overlays use position:fixed + pointer-events:none (composited)
 *   - Animations use transform/opacity only (GPU-composited)
 *   - will-change scoped to animated elements only
 *   - Flicker uses CSS animation, no JS setInterval needed
 */

/* ========================================
 * CRT CUSTOM PROPERTIES
 * Tuning knobs for all effects
 * ======================================== */
html[data-crt-effects="on"],
body.crt-enabled {
  --crt-scanline-opacity: 0.03;
  --crt-scanline-size: 4px;
  --crt-scanline-drift-duration: 12s;
  --crt-vignette-strength: 0.15;
  --crt-glow-color: color-mix(in srgb, var(--color-accent-primary) 50%, transparent);
  --crt-glow-color-strong: color-mix(in srgb, var(--color-accent-primary) 60%, transparent);
  --crt-curvature-radius: 12px;
  --crt-flicker-duration: 0.03s;
}

/* ========================================
 * SCANLINES
 * Subtle horizontal line overlay via pseudo-element
 * ======================================== */
html[data-crt-effects="on"]::before,
body.crt-enabled::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-ceiling);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--crt-scanline-opacity)) var(--crt-scanline-size)
  );
  will-change: background-position;
  animation: crt-scanline-drift var(--crt-scanline-drift-duration) linear infinite;
}

@keyframes crt-scanline-drift {
  0% { background-position: 0 0; }
  100% { background-position: 0 var(--crt-scanline-size); }
}

/* ========================================
 * SCREEN EDGE VIGNETTE
 * Darkened edges like a real CRT tube
 * ======================================== */
html[data-crt-effects="on"]::after,
body.crt-enabled::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, var(--crt-vignette-strength)) 100%
  );
}

/* ========================================
 * SCREEN CURVATURE
 * Slight barrel distortion via border-radius on the
 * main terminal container. Purely cosmetic -- does not
 * affect layout or interaction hit-testing.
 * ======================================== */
html[data-crt-effects="on"] .terminal-container,
body.crt-enabled .terminal-container {
  border-radius: var(--crt-curvature-radius);
  overflow: hidden;
}

/* Softer curvature for the full page body */
html[data-crt-effects="on"] body,
body.crt-enabled {
  perspective: 1200px;
}

html[data-crt-effects="on"] .terminal-show,
body.crt-enabled .terminal-show {
  /* Curvature: subtle barrel distortion feel */
  transform: perspective(1200px) translateZ(0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.15),
    inset 0 0 120px rgba(0, 0, 0, 0.05);
  /* Flicker: very subtle brightness oscillation (0.03s period) */
  animation: crt-flicker var(--crt-flicker-duration) infinite;
  will-change: opacity;
}

/* ========================================
 * PHOSPHOR GLOW
 * Green/amber-tinted text-shadow on key elements.
 * Uses theme accent color so it adapts to any theme.
 * ======================================== */
html[data-crt-effects="on"] .narrative-output,
body.crt-enabled .narrative-output {
  text-shadow:
    0 0 1px var(--crt-glow-color);
}

html[data-crt-effects="on"] .input-field,
body.crt-enabled .input-field {
  text-shadow:
    0 0 1px color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
}

html[data-crt-effects="on"] .input-prompt,
body.crt-enabled .input-prompt {
  text-shadow:
    0 0 2px var(--crt-glow-color);
}

/* Input line glow on focus */
html[data-crt-effects="on"] .input-line:focus-within,
body.crt-enabled .input-line:focus-within {
  box-shadow: 0 0 4px color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}

@keyframes crt-flicker {
  0% { opacity: 1; }
  50% { opacity: 0.995; }
  100% { opacity: 1; }
}

/* ========================================
 * BOOT OVERLAY STYLING
 * Theme-aware colors for boot sequence
 * ======================================== */
html[data-crt-effects="on"] .shell-boot--dos_boot,
body.crt-enabled .shell-boot--dos_boot {
  background: var(--color-bg-primary, #0a0a0a);
  color: var(--color-accent-primary, #00e0e0);
}

html[data-crt-effects="on"] .shell-boot--dos_boot .boot-terminal,
body.crt-enabled .shell-boot--dos_boot .boot-terminal {
  font-family: var(--font-family-mono, 'IBM Plex Mono', 'Fira Code', monospace);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ========================================
 * NEOTERM-SPECIFIC ENHANCEMENTS
 * Stronger glow when paired with neoterm theme
 * ======================================== */
html[data-theme="neoterm"][data-crt-effects="on"] .narrative-output {
  text-shadow:
    0 0 1px rgba(0, 180, 180, 0.5);
}

html[data-theme="neoterm"][data-crt-effects="on"] .input-prompt {
  text-shadow:
    0 0 2px rgba(0, 180, 180, 0.4);
}

/* Amber highlight for system messages in neoterm */
html[data-theme="neoterm"][data-crt-effects="on"] .entry--system {
  text-shadow:
    0 0 1px rgba(180, 180, 0, 0.4);
}

/* ========================================
 * CRT SHUTDOWN (Logout Sequence)
 * Classic TV-off: white flash -> collapse to line -> dot -> fade
 * ======================================== */
.crt-shutdown {
  position: fixed;
  inset: 0;
  z-index: var(--z-combat-top);
  pointer-events: all;
  background: #ffffff;
  animation: crt-shutdown 1.2s ease-in forwards;
}

.crt-shutdown__line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%);
  opacity: 0;
  animation: crt-shutdown-line 0.8s 0.4s ease-out forwards;
}

.crt-shutdown__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: crt-shutdown-dot 0.6s 0.9s ease-out forwards;
  box-shadow:
    0 0 8px 2px rgba(255, 255, 255, 0.8),
    0 0 20px 4px rgba(255, 255, 255, 0.4);
}

@keyframes crt-shutdown {
  0% {
    background: rgba(255, 255, 255, 0.9);
  }
  15% {
    background: rgba(255, 255, 255, 0.7);
  }
  30% {
    background: rgba(0, 0, 0, 0.95);
  }
  100% {
    background: #000000;
  }
}

@keyframes crt-shutdown-line {
  0% {
    opacity: 1;
    height: 3px;
    box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.6);
  }
  60% {
    opacity: 1;
    height: 2px;
  }
  100% {
    opacity: 0;
    height: 1px;
  }
}

@keyframes crt-shutdown-dot {
  0% {
    opacity: 1;
    width: 6px;
    height: 6px;
  }
  50% {
    opacity: 0.8;
    width: 4px;
    height: 4px;
  }
  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

/* ========================================
 * REDUCED MOTION
 * Disable ALL CRT animations for accessibility.
 * Static overlays (scanlines, vignette, glow) remain.
 * ======================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-crt-effects="on"]::before,
  body.crt-enabled::before {
    animation: none;
  }

  html[data-crt-effects="on"] .terminal-show,
  body.crt-enabled .terminal-show {
    animation: none;
    will-change: auto;
  }

  .crt-shutdown {
    animation: crt-shutdown-reduced 0.4s ease-out forwards;
  }

  .crt-shutdown__line,
  .crt-shutdown__dot {
    display: none;
  }

  @keyframes crt-shutdown-reduced {
    0% { background: rgba(255, 255, 255, 0.5); }
    100% { background: #000000; }
  }
}
/**
 * Shell Base CSS
 * ==============
 * Shared CSS variables and base styles inherited by all shells.
 * These variables are the foundation that each shell overrides.
 *
 * Loaded BEFORE any shell-specific CSS to provide defaults.
 */

/* =============================================================================
   Default Shell Variables
   All shells can override these in their own CSS files
   ============================================================================= */

:root {
  /* Background colors */
  --shell-bg: var(--color-bg-primary, #1a1a2e);
  --shell-bg-secondary: var(--color-bg-secondary, #0f0f1a);
  --shell-bg-tertiary: var(--color-bg-tertiary, #252545);

  /* Text colors */
  --shell-fg: var(--color-text-primary, #e0e0e0);
  --shell-fg-dim: var(--color-text-secondary, #888);
  --shell-fg-bright: var(--color-text-primary, #fff);

  /* Accent and borders */
  --shell-accent: var(--color-accent-primary, #61afef);
  --shell-accent-dim: var(--color-accent-secondary, #4080b0);
  --shell-border: var(--color-border, #333);

  /* Selection colors */
  --shell-selection-bg: var(--color-accent-primary, #61afef);
  --shell-selection-fg: var(--color-bg-primary, #1a1a2e);

  /* Font stacks */
  --shell-font-mono: var(--font-mono, "Fira Code", "JetBrains Mono", monospace);
  --shell-font-heading: var(--font-heading, "Cinzel", "Georgia", serif);
  --shell-font-body: var(--font-body, "Spectral", "Georgia", serif);

  /* Status bar */
  --shell-status-bar-position: top;
  --shell-status-bar-height: 36px;
  --shell-status-bar-bg: var(--shell-bg-secondary);
  --shell-status-bar-fg: var(--shell-fg);
  --shell-status-bar-border: var(--shell-border);

  /* Layout */
  --shell-layout-type: grid_container;
  --shell-container-padding: 1rem;
  --shell-panel-gap: 1rem;

  /* Animation speeds */
  --shell-transition-fast: 150ms;
  --shell-transition-normal: 300ms;
  --shell-transition-slow: 500ms;

  /* Z-index layers */
  --shell-z-content: 1;
  --shell-z-panels: 100;
  --shell-z-floating: 500;
  --shell-z-overlay: 1000;
  --shell-z-boot: 2000;
  --shell-z-effects: 9000;
}

/* =============================================================================
   Status Bar Shell-Aware Positioning
   ============================================================================= */

/* Bottom-positioned status bar for DOS/MUD shells */
[data-shell="dos386"] .status-bar,
[data-shell="mud"] .status-bar,
[data-shell="dos-gui"] .status-bar {
  position: fixed;
  bottom: 0;
  top: auto;
  border-top: 1px solid var(--shell-border);
  border-bottom: none;
}

/* Adjust main content when status bar is at bottom */
[data-shell="dos386"] .terminal-container,
[data-shell="mud"] .terminal-container,
[data-shell="dos-gui"] .terminal-container {
  padding-bottom: calc(var(--shell-status-bar-height) + 1rem);
  padding-top: 1rem;
}

/* =============================================================================
   Layout Strategy Classes
   Applied by ShellLayoutManager
   ============================================================================= */

/* Single Viewport Layout (DOS, MUD) */
.shell-layout--single-viewport {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.shell-layout--single-viewport .shell-viewport {
  flex: 1;
  overflow-y: auto;
  padding: var(--shell-container-padding);
}

/* Split Container Layout (Terminal default) */
.shell-layout--split-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr minmax(200px, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--shell-panel-gap);
  height: 100vh;
}

/* Fullscreen Overlay Layout (VTT, WoW) */
.shell-layout--fullscreen-overlay {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.shell-layout--fullscreen-overlay .shell-canvas {
  position: absolute;
  inset: 0;
}

.shell-layout--fullscreen-overlay .shell-overlay-zone {
  position: absolute;
  z-index: var(--shell-z-panels);
}

/* Floating Windows Layout (OS/2) */
.shell-layout--floating-windows {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--shell-bg);
  overflow: hidden;
}

/* Page Layout (Script mode) */
.shell-layout--page {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background: #fffef5;
  padding: 1in 0;
}

.shell-layout--page .shell-page {
  width: 8.5in;
  max-width: calc(100vw - 2rem);
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 1in;
  padding-left: 1.5in;
  min-height: 11in;
}

/* =============================================================================
   Boot Sequence Overlays
   ============================================================================= */

.shell-boot {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shell-boot--dos_boot {
  background: #000;
  color: #aaaaaa;
  font-family: "IBM Plex Mono", "Perfect DOS VGA 437", monospace;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
}

.shell-boot--dos_boot .boot-terminal {
  color: #aaaaaa;
  font-size: 16px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.shell-boot--dos_boot .boot-terminal div {
  margin-bottom: 0.2em;
}

.shell-boot--os2_boot {
  background: #000080;
  color: #fff;
  flex-direction: column;
}

.shell-boot--os2_boot .boot-logo {
  margin-bottom: 2rem;
}

.shell-boot--os2_boot .boot-progress {
  width: 300px;
  text-align: center;
}

.shell-boot--os2_boot .boot-progress__bar {
  height: 20px;
  background: linear-gradient(90deg, #0080ff 0%, #00ffff 100%);
  border: 2px inset #ccc;
}

.shell-boot--telnet {
  background: #000;
  color: #c0c0c0;
  font-family: monospace;
}

/* Shutdown overlays */
.shutdown-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--shell-z-boot);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shutdown-overlay--dos {
  background: #000;
  color: #ff8800;
  font-family: "IBM Plex Mono", monospace;
}

.shutdown-overlay--dos .shutdown-terminal {
  color: #ff8800;
  font-family: "IBM Plex Mono", monospace;
  font-size: 24px;
  text-align: center;
}

.shutdown-overlay--os2 {
  background: #000080;
  color: #fff;
}

/* =============================================================================
   Utility Classes for Shell Content
   ============================================================================= */

/* Hide in specific shells */
[data-shell="dos386"] .hide-in-dos,
[data-shell="mud"] .hide-in-mud,
[data-shell="script"] .hide-in-script {
  display: none !important;
}

/* Show only in specific shells */
.show-in-dos { display: none !important; }
[data-shell="dos386"] .show-in-dos { display: block !important; }

.show-in-script { display: none !important; }
[data-shell="script"] .show-in-script { display: block !important; }

/* Chrome visibility (hide decorative elements in certain shells) */
[data-shell="dos386"] .decorative-chrome,
[data-shell="mud"] .decorative-chrome,
[data-shell="script"] .decorative-chrome {
  display: none !important;
}

/* =============================================================================
   Desktop Icons and Taskbar - Hidden by Default
   Only shown in windowed shells (dos-gui, os2) via their specific CSS
   ============================================================================= */

.shell-desktop,
.shell-taskbar {
  display: none !important;
}
/* Terminal Layout
 * ================
 * Core layout styles for the terminal application.
 * Extracted from inline styles in layouts/terminal.html.erb
 */

/* Legacy variables are aliased in _tokens.css.
 * Do NOT re-declare them here — the canonical values
 * live in _tokens.css :root and must remain the single
 * source of truth to avoid color drift.
 * See _tokens.css "Legacy aliases" section.
 */

* {
  box-sizing: border-box;
}

/* Global utility: hide elements via classList.add('hidden').
 * Used by 50+ JS controllers (239 call sites). Without this rule,
 * classList.add('hidden') is a no-op and elements remain visible. */
.hidden {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-base, 14px);
  line-height: var(--line-height-normal, 1.5);
  height: 100vh;              /* Fallback for older browsers */
  height: 100dvh;             /* Dynamic viewport height - accounts for browser chrome */
  overflow: hidden;
}

.terminal-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  /* Safe area insets for notched/rounded-corner devices */
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Status Bar layout is owned by terminal/organisms/_status_bar.css.
 * The legacy bare .status-bar rule was removed here (#4380) — it loaded
 * last (step 10) and overrode the organism's background, border, padding,
 * gap, and height, causing wrong styling and breaking click targets.
 * Descendant rules below (.status-bar .character-info etc.) are kept
 * because they style character info elements inside the bar. */

/* Split Layout System */
.split-layout-wrapper {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.split-layout-container {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.split-container {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.split-container.split-horizontal {
  flex-direction: row;
}

.split-container.split-vertical {
  flex-direction: column;
}

.split-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.split-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.split-panel--active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 1px var(--accent-primary);
}

.split-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  min-height: 28px;
}

.split-panel__icon {
  font-size: var(--font-size-sm);
  line-height: 1;
}

.split-panel__title {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 1;
}

.split-panel__actions {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.split-panel:hover .split-panel__actions,
.split-panel--active .split-panel__actions {
  opacity: 1;
}

.split-panel__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.split-panel__action:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.split-panel__action--close:hover {
  background: var(--accent-error);
  color: white;
}

.split-panel__content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.split-divider {
  flex-shrink: 0;
  background: var(--border-color);
  position: relative;
  z-index: var(--z-sticky);
}

.split-horizontal > .split-divider {
  width: 4px;
  height: 100%;
  cursor: col-resize;
}

.split-vertical > .split-divider {
  width: 100%;
  height: 4px;
  cursor: row-resize;
}

.split-divider:hover {
  background: var(--accent-primary);
}

.status-bar .character-info {
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

.status-bar .character-name {
  color: var(--accent-primary);
  font-weight: 500;
}

.status-bar .hp-display {
  color: var(--accent-secondary);
}

.status-bar .hp-display.low {
  color: var(--accent-warning);
}

.status-bar .hp-display.critical {
  color: var(--accent-error);
}

.status-bar .session-info {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

/* Main Content Area */
.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Narrative Panel */
.narrative-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-color);
  min-width: 0;
}

/* narrative-panel-content layout is defined in organisms/_narrative_panel.css */

/* Magic Effects Canvas Overlay */
.magic-effects-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-sticky);
}

.magic-effects-canvas.active {
  opacity: 1;
}

/* narrative-output layout is defined in organisms/_narrative_panel.css */

/* Scrollbar styling now handled by _ux_refinements.css */
/* Legacy webkit overrides for narrative panel */
.narrative-output::-webkit-scrollbar {
  width: var(--scrollbar-width, 8px);
}

.narrative-output::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color, var(--bg-primary));
}

.narrative-output::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color, var(--bg-tertiary));
  border-radius: var(--scrollbar-thumb-radius, 4px);
}

.narrative-output::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color, var(--bg-elevated));
}

/* Narrative Entry Types */
.narrative-entry {
  margin-bottom: var(--space-4);
  padding-left: var(--space-2);
  border-left: 1px solid transparent;
}

.narrative-entry.dm {
  border-left-color: var(--accent-purple);
}

.narrative-entry.system {
  border-left-color: var(--accent-warning);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}

.narrative-entry.roll {
  border-left-color: var(--accent-primary);
  background: var(--bg-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.narrative-entry.error {
  border-left-color: var(--accent-error);
  color: var(--accent-error);
}

/* Clickable Elements in Narrative */
.clickable {
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
}

.clickable:hover {
  color: var(--accent-secondary);
  text-decoration-style: solid;
}

.clickable[data-type="npc"] {
  color: var(--accent-purple);
}

.clickable[data-type="item"] {
  color: var(--accent-warning);
}

.clickable[data-type="location"] {
  color: var(--accent-secondary);
}

/* Tooltip for memory hints */
.tooltip {
  position: absolute;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  max-width: 300px;
  z-index: var(--z-tooltip);
  box-shadow: var(--elevation-floating);
}

.tooltip .hint-source {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* Map Panel */
.map-panel {
  width: 350px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
}

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

.map-header {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.map-header .map-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.map-controls {
  display: flex;
  gap: var(--space-1);
}

.map-controls button {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.map-controls button:hover {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.map-controls button.active {
  background: var(--accent-primary);
  color: var(--bg-primary);
  border-color: var(--accent-primary);
}

.map-display {
  flex: 1;
  overflow: auto;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-ascii {
  white-space: pre;
  font-size: var(--font-size-sm);
  line-height: 1.2;
  color: var(--text-primary);
}

.map-canvas {
  max-width: 100%;
  max-height: 100%;
}

/* Input Area */
.input-area {
  border-top: 1px solid var(--border-color);
  padding: var(--space-2) var(--space-4);
  /* Safe area padding for notched phones (home indicator) */
  padding-bottom: var(--space-2);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--bg-secondary);
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.input-area:focus-within {
  background: var(--bg-secondary);
  border-top-color: var(--color-border-subtle, #333);
}

.input-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.input-prompt {
  color: var(--accent-secondary);
  font-weight: 500;
  transition: color var(--transition-fast, 100ms);
}

.input-area:focus-within .input-prompt {
  color: var(--accent-primary);
}

.input-field {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-md);
  outline: none;
  caret-color: var(--accent-primary);
}

.input-field::placeholder {
  color: var(--text-muted);
  transition: opacity var(--transition-fast, 100ms);
}

.input-field:focus::placeholder {
  opacity: 0.5;
}

/* Input submitting state - disabled during message send */
.input-field:disabled,
.input-field.terminal-input--submitting {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--text-muted);
}

.input-line:has(.terminal-input--submitting) .input-prompt {
  opacity: 0.5;
}

/* Context Menu */
.context-menu {
  position: absolute;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-1) 0;
  min-width: 150px;
  z-index: var(--z-tooltip);
  box-shadow: var(--elevation-floating);
}

.context-menu-item {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.context-menu-item:hover {
  background: var(--accent-primary);
  color: var(--bg-primary);
}

.context-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-1) 0;
}

/* Loading indicator */
.loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--text-muted);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: terminal-layout-spin 1s linear infinite;
}

@keyframes terminal-layout-spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .map-panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 350px;
    z-index: var(--z-panel);
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  .map-panel.visible {
    transform: translateX(0);
  }

  .cs-ability-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* iPad Pro (1024px portrait, 1366px landscape) and similar tablets */
@media (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* Touch device in tablet size range - larger touch targets */
  .split-panel__action {
    width: 36px;
    height: 36px;
  }

  .split-horizontal > .split-divider {
    width: 8px;
  }

  .split-vertical > .split-divider {
    height: 8px;
  }
}

/* ========================================
 * Character Sheet Styles
 * ======================================== */

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

/* Character Header */
.cs-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.cs-name {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}

.cs-level {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* Tab Navigation */
.cs-tab-nav {
  display: flex;
  gap: var(--space-0-5);
  padding: 0 0 var(--space-2) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-3);
}

.cs-tab-btn {
  flex: 1;
  padding: var(--space-1-5) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cs-tab-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.cs-tab-btn.active {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  color: var(--bg-primary);
  font-weight: 600;
}

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

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

.cs-tab-content::-webkit-scrollbar {
  width: 6px;
}

.cs-tab-content::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

.cs-tab-content::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}

/* Section Styling */
.cs-section {
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: rgba(124, 58, 237, 0.03);
  border: 1px solid rgba(124, 58, 237, 0.12);
  border-radius: var(--radius-md);
}

.cs-section-header {
  color: var(--accent-purple);
  font-weight: 500;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

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

.cs-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
}

.cs-stat-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.cs-stat-value {
  color: var(--accent-primary);
  font-weight: bold;
  font-size: var(--font-size-sm);
}

/* HP Bar */
.cs-hp-bar {
  position: relative;
  height: var(--space-6);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.cs-hp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-error) 0%, var(--accent-secondary) 100%);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.cs-hp-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--text-primary);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

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

.cs-ability-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-1) var(--space-0-5);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), transform var(--transition-fast);
}

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

.cs-ability-item.rollable:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
  transform: scale(1.02);
}

.cs-ability-item.rollable:hover .cs-ability-abbr,
.cs-ability-item.rollable:hover .cs-ability-score,
.cs-ability-item.rollable:hover .cs-ability-mod {
  color: var(--bg-primary);
}

.cs-ability-abbr {
  color: var(--text-secondary, #aaa);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cs-ability-score {
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}

.cs-ability-mod {
  color: var(--accent-primary, #7c3aed);
  font-size: 0.75rem;
  margin-top: 2px;
}

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

.cs-save-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

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

.cs-save-item.rollable:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

.cs-save-item.rollable:hover .cs-save-name,
.cs-save-item.rollable:hover .cs-save-mod {
  color: var(--bg-primary);
}

.cs-save-name {
  color: var(--text-secondary);
  flex: 1;
}

.cs-save-mod {
  color: var(--accent-primary);
  font-weight: bold;
}

/* Proficiency Dot */
.cs-proficiency-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  background: transparent;
  flex-shrink: 0;
}

.cs-proficiency-dot.proficient {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

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

.cs-skill-item {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

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

.cs-skill-item.rollable:hover {
  background: var(--accent-purple);
  border-color: var(--accent-purple);
}

.cs-skill-item.rollable:hover .cs-skill-name,
.cs-skill-item.rollable:hover .cs-skill-ability,
.cs-skill-item.rollable:hover .cs-skill-mod {
  color: var(--bg-primary);
}

.cs-skill-name {
  color: var(--text-primary);
  flex: 1;
}

.cs-skill-ability {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.cs-skill-mod {
  color: var(--accent-primary);
  font-weight: bold;
  min-width: 24px;
  text-align: right;
}

/* Dynamic skill rendering (from character_sheet_controller.js) */
.cs-skill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cs-skill--proficient .cs-skill-prof {
  color: var(--accent-primary);
}

.cs-skill-prof {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.cs-skill-name {
  flex: 1;
  color: var(--text-primary);
}

.cs-skill-bonus {
  font-family: var(--font-mono);
  font-weight: bold;
  color: var(--accent-primary);
  min-width: 28px;
  text-align: right;
}

/* Clickable skills for dice rolling */
.cs-skill--clickable {
  cursor: pointer;
  user-select: none;
}

.cs-skill--clickable:hover {
  background: var(--bg-hover, rgba(124, 58, 237, 0.15));
  border-color: var(--accent-primary);
}

.cs-skill--clickable:active {
  background: var(--bg-active, rgba(124, 58, 237, 0.25));
}

.cs-skill--clickable:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

/* Currency */
.cs-currency-grid {
  display: flex;
  gap: var(--space-3);
}

.cs-currency-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cs-currency-label {
  color: var(--accent-warning);
  font-size: var(--font-size-xs);
  font-weight: bold;
}

.cs-currency-value {
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: bold;
}

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

.cs-inventory-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

.cs-inventory-item.equipped {
  border-left: 2px solid var(--accent-secondary);
}

.cs-item-icon {
  color: var(--accent-warning);
}

.cs-item-name {
  color: var(--text-primary);
  flex: 1;
}

.cs-item-qty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* Gear Groups */
.cs-gear-group {
  margin-bottom: var(--space-2);
}

.cs-gear-group__label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0 2px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  margin-bottom: 4px;
}

.cs-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  margin-bottom: 2px;
}

.cs-item__name {
  color: var(--text-primary);
  flex: 1;
}

.cs-item__qty {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.cs-item__badge {
  display: inline-block;
  padding: 0 4px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 2px;
  background: var(--accent-secondary, #4a9);
  color: var(--bg-primary, #111);
}

.cs-item__badge--attuned {
  background: var(--accent-magic, #a4f);
}

.cs-item__stat {
  color: var(--text-secondary, #aaa);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

/* Rarity coloring */
.cs-item--uncommon .cs-item__name { color: var(--rarity-uncommon); }
.cs-item--rare .cs-item__name { color: var(--rarity-rare); }
.cs-item--very_rare .cs-item__name { color: var(--rarity-very-rare); }
.cs-item--legendary .cs-item__name { color: var(--rarity-legendary); }
.cs-item--artifact .cs-item__name { color: var(--rarity-artifact); }

/* Gear item action button */
.cs-item__action-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 2px;
  font-size: var(--font-size-sm);
  line-height: 1;
  border-radius: 2px;
  flex-shrink: 0;
}
.cs-item:hover .cs-item__action-btn {
  display: inline-flex;
}
.cs-item__action-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

/* Optimistic Update Indicators */
.cs-inventory-item.optimistic-pending {
  border-left: 2px solid var(--accent-warning);
  animation: pulse-pending 1s ease-in-out infinite;
}

.cs-inventory-item.optimistic-dropping {
  transition: opacity 0.3s ease-out;
}

.cs-item-pending-indicator {
  color: var(--accent-warning);
  font-size: var(--font-size-xs);
  margin-left: 4px;
  animation: pulse-pending 0.8s ease-in-out infinite;
}

.cs-inventory-item.rollback-shake {
  animation: shake-rollback 0.4s ease-in-out;
}

@keyframes shake-rollback {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

/* Details */
.cs-detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

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

.cs-detail-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

.cs-detail-value {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

/* Personality */
.cs-personality-item {
  margin-bottom: var(--space-2-5);
}

.cs-personality-label {
  color: var(--accent-purple);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.cs-personality-value {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-style: italic;
}

/* Conditions */
.cs-conditions-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.cs-condition-badge {
  padding: var(--space-0-5) var(--space-2);
  background: var(--accent-error);
  color: var(--bg-primary);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
}

/* Empty state */
.cs-empty-text {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-5);
  font-style: italic;
}

/* ========================================
   Scene Tab Styles
   ======================================== */

.cs-scene-container {
  padding: 0 4px;
}

.cs-scene-location {
  background: rgba(124, 58, 237, 0.07);
  border-left: 2px solid var(--accent-purple);
  padding: var(--space-2-5) var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.cs-scene-location-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1-5);
}

.cs-scene-location-name {
  font-size: var(--font-size-md);
  font-weight: bold;
  color: var(--text-primary);
}

.cs-scene-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--space-1-5) 0;
  line-height: 1.4;
}

.cs-scene-meta {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.cs-scene-visits {
  font-style: italic;
}

.cs-scene-activity {
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--overlay-white-subtle);
  border-radius: var(--radius-md);
}

.cs-scene-activity-row {
  display: flex;
  gap: var(--space-1-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-1-5);
}

.cs-scene-objective {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

.cs-scene-section {
  margin-bottom: var(--space-4);
}

.cs-scene-npcs,
.cs-scene-objects {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cs-scene-npc,
.cs-scene-object {
  background: var(--overlay-white-subtle);
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius-md);
  border-left: 1px solid var(--accent-purple);
}

.cs-scene-npc--hostile {
  border-left-color: var(--accent-error);
  background: rgba(239, 68, 68, 0.05);
}

.cs-scene-object--canonical {
  border-left-color: var(--accent-success);
  background: rgba(34, 197, 94, 0.05);
}

.cs-scene-object--temporary {
  border-left-color: var(--text-muted);
  opacity: 0.85;
}

.cs-scene-npc-header,
.cs-scene-object-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.cs-scene-npc-name,
.cs-scene-object-name {
  font-size: var(--font-size-sm);
  font-weight: bold;
  color: var(--text-primary);
}

.cs-scene-npc-desc,
.cs-scene-object-desc {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin: var(--space-1) 0;
  line-height: 1.3;
}

.cs-npc-stats {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: monospace;
}

.cs-scene-mentions {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-style: italic;
}

/* Scene badges - reuse admin badge styles */
.cs-badge {
  display: inline-block;
  padding: var(--space-0-5) var(--space-1-5);
  font-size: var(--font-size-xs);
  font-weight: bold;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
}

.cs-badge--primary {
  background: var(--accent-purple);
  color: white;
}

.cs-badge--secondary {
  background: rgba(124, 58, 237, 0.2);
  color: var(--accent-purple);
}

.cs-badge--success {
  background: rgba(34, 197, 94, 0.2);
  color: var(--accent-success);
}

.cs-badge--danger {
  background: rgba(239, 68, 68, 0.2);
  color: var(--accent-error);
}

.cs-badge--warning {
  background: rgba(245, 158, 11, 0.2);
  color: var(--accent-warning);
}

.cs-badge--info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.cs-badge--muted {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

/* Small button for canonize action */
.cs-btn--small {
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.cs-btn--outline {
  background: transparent;
  border: 1px solid var(--accent-purple);
  color: var(--accent-purple);
  border-radius: var(--radius-sm);
  transition: background var(--transition-normal), color var(--transition-normal);
}

.cs-btn--outline:hover:not(:disabled) {
  background: var(--accent-purple);
  color: white;
}

.cs-btn--outline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/*
 * Terminal Layout
 * ================
 * Core terminal game layout: split system, narrative panel, map, input, character sheet, scene tab.
 *
 * Split into focused modules under terminal_layout/:
 *   _core_layout.css          — Global utilities, split layout system, content area, narrative panel, legacy scrollbars, narrative entry types, clickable elements, tooltips
 *   _input_panels.css         — Map panel, input area, context menu, loading indicator, responsive/tablet
 *   _character_header_stats.css — Character sheet: header, tabs, tab content, sections, stats grid, HP bar, ability scores, saving throws, proficiency, skills
 *   _character_inventory.css  — Character sheet: skills for dice rolling, currency, inventory, gear groups, rarity, conditions, empty state
 *   _scene_tab.css            — Scene tab styles, scene badges, canonize action button
 */






/*
 * Mobile Accessibility Fixes
 * ============================
 * Fixes for mobile usability issues identified in E2E testing:
 * 1. Character sheet text < 12px font size
 * 2. Turn queue submit button < 44px touch target
 * 3. Modal close buttons < 44px touch target
 *
 * WCAG 2.1 AA Guidelines:
 * - Minimum font size: 12px for readability
 * - Minimum touch target: 44x44px (AAA: 48x48px)
 *
 * NOTE: This file loads late in the cascade, so its selectors win naturally
 * without needing !important. Do not move it earlier in the bundle.
 */

/* ========================================
 * ISSUE 1: Character Sheet Font Sizes
 * ======================================== */

/* Override all font sizes below 12px in panels to meet WCAG minimum */
.eb-mode-label,
.eb-item-desc,
.eb-item-type,
.equipment-modal__item-type,
.ec-mode-toggle,
.ec-section-title,
.ec-empty small,
.ec-item-meta,
.ec-item-choice-label,
.ec-pack-toggle,
.ec-pack-meta,
.ec-pack-count,
.ec-pack-content-qty {
  font-size: 12px;
}

/* Character sheet specific overrides */
.character-sheet .cs-stat-value,
.character-sheet .cs-ability-mod,
.character-sheet .cs-skill-bonus,
.character-sheet .cs-item-name,
.character-sheet .cs-detail-label {
  font-size: 12px;
}

/* Ensure all badges and chips meet minimum */
.badge--sm,
.chip--sm,
.condition-badge,
.status-indicator {
  font-size: 12px;
  padding: 4px 8px;
}

/* ========================================
 * ISSUE 2: Turn Queue Submit Button
 * ======================================== */

/* Ensure submit buttons meet 44x44px minimum touch target */
.panel-turn-queue .btn,
.panel-turn-queue button[type="submit"],
.turn-queue-body .btn--primary,
.turn-queue-body .submitBtn,
button[data-turn-queue-target="submitBtn"] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
}

/* Turn queue specific buttons */
.turn-queue-body .btn-small,
.turn-queue-body .btn--secondary {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* Action controls in turn queue */
.action-controls button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px;
}

/* ========================================
 * ISSUE 3: Modal Close Buttons
 * ======================================== */

/* Detail modal close button */
.detail-modal__close {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  font-size: 20px; /* Larger icon for better visibility */
}

/* Character select modal close button */
.character-select-modal__close,
.modal-close,
.modal__close-btn,
.panel-close,
.floating-panel__close {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
}

/* Ensure close button icons are visible */
.detail-modal__close svg,
.modal-close svg,
.panel-close svg {
  width: 20px;
  height: 20px;
}

/* ========================================
 * GENERAL: All Buttons on Mobile
 * ======================================== */

@media (max-width: 768px) {
  /* Ensure ALL buttons meet touch target minimum on mobile */
  .btn,
  button:not(.tab-btn):not(.chip):not(.badge) {
    min-height: 44px;
    min-width: 44px;
  }

  /* WCAG 2.5.5 touch-target FLOOR for combat / quick-action buttons.
     This is the exact selector union prodplay-combat-mobile.spec.js asserts on.
     !important is intentional and load-bearing: this 44px minimum must survive
     (a) the .mobile-keyboard-open collapse rules in _tabs.css that shrink these
     to 28-36px, (b) per-component sizing in _interactions.css / _inline_actions.css,
     and (c) tag mismatches — some quick-actions render as div/a, not <button>,
     so the `button:not(...)` rule above never matches them. Five prior
     specificity-based fixes were each clobbered; an accessibility floor must not
     be overridable. Recurring e2e gate failure (#5437 / #5499). */
  .quick-action,
  .quick-action-btn,
  .unified-quick-action,
  .action-chip,
  .inline-actions button,
  [data-quick-action] {
    min-height: 44px !important;
  }

  /* Small buttons need explicit override */
  .btn--sm,
  .btn-small,
  .btn.small {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    font-size: 12px;
  }

  /* Ensure text within small buttons doesn't shrink below 12px */
  .btn--sm *,
  .btn-small *,
  .btn.small * {
    font-size: inherit;
  }

  /* Icon-only buttons still need size */
  .btn--icon,
  button[aria-label]:not([aria-label=""]) {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }

  /* Form inputs need better touch targets too */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    min-height: 44px;
    padding: 12px;
    font-size: 14px;
  }

  /* Touch-friendly spacing between interactive elements */
  .form-group button + button,
  .action-controls button + button,
  .btn-group .btn + .btn {
    margin-left: 8px;
  }
}

/* ========================================
 * VERY SMALL SCREENS (< 375px)
 * ======================================== */

@media (max-width: 375px) {
  /* Ensure critical text never goes below 12px */
  body,
  .character-sheet,
  .panel-turn-queue,
  .detail-modal {
    font-size: 12px;
  }

  /* Stack buttons vertically on very small screens */
  .form-actions,
  .action-controls,
  .btn-group {
    flex-direction: column;
    gap: 8px;
  }

  .form-actions button,
  .action-controls button,
  .btn-group .btn {
    width: 100%;
    margin: 0;
  }
}

/* ========================================
 * ISSUE 4: Narrative Input Too Narrow on Mobile (#1450)
 * _terminal_layout.css applies 16px (space-4) horizontal padding to
 * .input-area on all viewports and .grid-layout-container has 4px
 * padding. On mobile these waste horizontal space; override here
 * (last in cascade) to guarantee the input fills >= 90vw.
 * ======================================== */

@media (max-width: 768px) {
  /* Remove grid gap padding — single-column layout uses full viewport width */
  .grid-layout-container {
    padding: 0;
  }

  /* Tighter horizontal padding for the input bar */
  .input-area {
    padding-left: var(--space-2);
    padding-left: env(safe-area-inset-left, 8px);
    padding-right: var(--space-2);
    padding-right: env(safe-area-inset-right, 8px);
  }
}

/* ========================================
 * ACCESSIBILITY: Focus States
 * ======================================== */

/* Ensure focus is visible on all interactive elements */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-accent-primary);
  outline-offset: 2px;
}

/* High contrast focus for modal close buttons */
.detail-modal__close:focus-visible,
.modal-close:focus-visible {
  outline: 3px solid var(--color-accent-warning);
  outline-offset: 2px;
}
/*
 * Terminal D&D - Core Bundled Stylesheet (Part 2 of 2)
 * =====================================================
 * Second half of the core terminal stylesheet. Loaded immediately after
 * terminal.css via a second <link> tag in the layout. Split was necessary
 * because Chromium silently drops all CSS rules past ~3MB in a single
 * stylesheet (#5515). Each part stays well under 2.5MB compiled.
 *
 * terminal.css   ~1.95 MB compiled: tokens → base → typography → atoms →
 *                molecules → layout → organisms (achievements…achievement_cards)
 * terminal_2.css ~1.72 MB compiled: organisms (character_sheet…) → panels →
 *                components → effects → shells → terminal layout
 *
 * ⚠️  ORDERING MATTERS: terminal_2.css MUST be loaded after terminal.css.
 *     The layout link tags enforce this. Do not reorder.
 *
 * ⚠️  GUARD: audit:frontend:css_bundle checks both files. A pre-commit check
 *     (check_served_css_size) blocks if any served CSS file exceeds 2.8 MB
 *     compiled (see .husky/checks/js_css.sh).
 */

/* ===========================================
 * 7. ORGANISMS (Complex Components) — Part 2
 *    Continued from terminal.css
 * =========================================== */



















/* Lazy-loaded: D3 dice animation CSS moved to dm_tools.css bundle (Phase 1 Task 2) */
/* require terminal/organisms/_dice_animation */















































/* ===========================================
 * 8. PANELS
 * =========================================== */













/* ===========================================
 * 9. COMPONENTS
 * Lazy-loaded components are in separate bundles:
 *   creator_studio.css, dm_tools.css, debug.css
 * =========================================== */






































































/* Lazy-loaded: Three.js overlay CSS loaded on demand (Phase 1 Task 2) */
/* require terminal/components/_threejs_overlay */
























/* ===========================================
 * 10. TERMINAL LAYOUT (Must be last)
 * =========================================== */